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 HeaderpodSettings > 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ů.
Napsat komentář