Přidání obsahu (TOC) k vašemu tématu Ghost: Průvodce krok za krokem

Přidání obsahu (TOC) k vašemu tématu Ghost: Průvodce krok za krokem

Začlenění obsahu (TOC) do vašeho blogu Ghost výrazně zlepšuje čtenářský zážitek tím, že usnadňuje bezproblémovou navigaci delšími články. Tento tutoriál vás provede procesem přidávání obsahu k libovolnému tématu Ghost pomocí TOCBOT, pluginu JavaScriptu, který automaticky generuje obsah z nadpisů přítomných ve vašich příspěvcích.

Integrace TOCBOT v Ghost

TOCBOT efektivně vytváří TOC z nadpisů vašich příspěvků. Při instalaci postupujte podle těchto jednoduchých kroků:

  • Přihlaste se do svého administračního panelu Ghost a přejděte na Settings > Code injection.
  • Do Site Headeroblasti vložte požadovaný skript TOCBOT a šablonu stylů:

<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.css"rel="stylesheet">

  • Dále v Site Footerčásti inicializujte TOCBOT pomocí následujícího skriptu:

<script>
document.addEventListener('DOMContentLoaded', function() {
tocbot.init({
tocSelector: '.toc',
contentSelector: '.post-content',
headingSelector: 'h1, h2, h3, h4',
scrollSmooth: true
});
});
</script>

Ujistěte se, že contentSelectorodpovídá třídě určené ve vašem motivu pro obsah příspěvku. Mezi běžně používané třídy patří .post-content, .gh-content, nebo .c-content.

  • Nakonec uložte změny v Code injectionnastavení.

Vložení zástupného symbolu TOC do příspěvků

Chcete-li ve svých článcích předvést obsah, musíte na požadované místo umístit zástupný symbol:

  • Upravte příspěvek, do kterého chcete zahrnout TOC.
  • Přidejte kartu HTML na místo, které chcete, zadáním /htmldo editoru.
  • Do HTML karty vložte následující kód:

<div class="toc"></div>

Tento kus kódu vytváří prostor pro TOC. Jakmile je příspěvek zpřístupněn, TOCBOT vyplní tento prostor dynamicky generovaným TOC odvozeným z vašich nadpisů obsahu.

Přizpůsobení vzhledu obsahu

Vzhled TOC si můžete přizpůsobit, aby lépe odpovídal vašemu návrhu motivu:

  • V části Site Headerpod Settings > Code injectionpřidejte vlastní styly CSS uzavřené ve <style>značce:

<style>
. toc {
padding: 20px;
border: 1px solid #e0e0e0;
background-color: #f9f9f9;
border-radius: 5px;
}
. toc a {
text-decoration: none;
color: #333;
}
. toc a:hover {
text-decoration: underline;
}
</style>

Neváhejte a upravte tyto styly tak, aby vyhovovaly vašim preferencím.

Úprava pro různá témata

Vzhledem k tomu, že motivy mohou pro sekce obsahu používat různé názvy tříd, ujistěte se, že contentSelectorv nastavení TOCBOT odpovídá třídě obsahu vašeho motivu:

  • Zkontrolujte své téma tak, že začnete s jakýmkoli otevřeným příspěvkem.
  • Klikněte pravým tlačítkem na obsah příspěvku a zvolte Inspectpřístup k vývojářským nástrojům vašeho prohlížeče.
  • Najděte název třídy spojený s prvkem, který obsahuje obsah vašeho příspěvku, například .post-content.
  • Ujistěte se, že aktualizujete contentSelectorskript TOCBOT na základě toho, co najdete.

Vytvoření Sticky TOC

Chcete-li, aby byl obsah viditelný při posouvání vašich čtenářů, můžete jej nastavit jako lepivý:

  • V souboru Site Headerpřidejte tento CSS do <style>značky:

<style>
. toc {
position: sticky; top: 20px;
}
</style>

Tím se TOC umístí ve vztahu k výřezu a zajistí, že zůstane v dohledu, když uživatelé procházejí příspěvkem.

Implementací těchto pokynů můžete obohatit svůj blog Ghost o funkční obsah, a zlepšit tak navigaci a interakci čtenářů v rámci vašich příspěvků.

Zdroj

Související články:

iOS 18.2: Průvodce pro uživatele z EU o odstranění a opětovné instalaci App Store
Podrobný průvodce zrušením spárování vašeho Firestick Remote

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *