Satura rādītāja (TOC) pievienošana jūsu spoku tēmai: soli pa solim

Satura rādītāja (TOC) iekļaušana savā Ghost emuārā ievērojami uzlabo lasītāja pieredzi, atvieglojot netraucētu navigāciju garākos rakstos. Šī apmācība palīdzēs jums pievienot TOC jebkurai Ghost tēmai, izmantojot TOCBOT — JavaScript spraudni, kas automātiski ģenerē TOC no jūsu ziņās esošajiem virsrakstiem.

TOCBOT integrēšana programmā Ghost

TOCBOT efektīvi izveido TOC no jūsu ziņu virsrakstiem. Veiciet šīs vienkāršās instalēšanas darbības:

Piesakieties savā Ghost administratora informācijas panelī un dodieties uz Settings > Code injection.
Apgabalā Site Headerievietojiet nepieciešamo TOCBOT skriptu un stila lapu:

<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">

Pēc tam sadaļā Site Footerinicializējiet TOCBOT, izmantojot šādu skriptu:

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

Pārliecinieties, vai tas contentSelectoratbilst motīvā norādītajai klasei ziņas saturam. Parasti izmantotās klases ir .post-content, .gh-contentvai .c-content.

Visbeidzot, saglabājiet izmaiņas iestatījumos Code injection.

TOC vietturi ievietošana ziņās

Lai savos rakstos parādītu TOC, vēlamajā vietā ir jāievieto vietturis:

Rediģējiet ziņu, kurā vēlaties iekļaut TOC.
Pievienojiet HTML karti vēlamajā vietā, ierakstot /htmlredaktorā.
Iekļaujiet HTML kartē šādu kodu:

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

Šī koda daļa nosaka vietu TOC. Kad ziņai būs piekļūts, TOCBOT aizpildīs šo vietu ar dinamiski ģenerētu TOC, kas iegūta no jūsu satura virsrakstiem.

TOC izskata pielāgošana

Varat personalizēt TOC izskatu, lai tas labāk atbilstu jūsu motīva dizainam:

Sadaļā , pievienojiet pielāgotus CSS stilus Site Header, Settings > Code injectionkas ietverti <style>tagā:

<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>

Jūtieties brīvi pielāgot šos stilus atbilstoši savām vēlmēm.

Pārveidošana dažādām tēmām

Tā kā motīvos satura sadaļām var tikt izmantoti dažādi klašu nosaukumi, contentSelectorTOCBOT iestatījumos nodrošiniet, lai tas atbilstu jūsu motīva satura klasei:

Pārbaudiet savu motīvu, sākot ar jebkuru atvērtu ziņu.
Ar peles labo pogu noklikšķiniet uz ziņas satura un izvēlieties, Inspectlai piekļūtu pārlūkprogrammas izstrādātāja rīkiem.
Atrodiet klases nosaukumu, kas saistīts ar elementu, kurā ir jūsu ziņas saturs, piemēram .post-content, .

Noteikti atjauniniet contentSelectorTOCBOT skriptu, pamatojoties uz atrasto.

Sticky TOC izveide

Lai TOC būtu redzams, kamēr lasītāji ritina, varat iestatīt to kā lipīgu.

Pievienojiet Site Headeršo CSS tagā <style>:

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

Tādējādi TOC tiks novietots attiecībā pret skata logu, nodrošinot, ka tas paliek redzams, lietotājiem ritinot ziņu.

Ieviešot šos norādījumus, varat bagātināt savu Ghost emuāru ar funkcionālu satura rādītāju, tādējādi uzlabojot navigāciju un lasītāju mijiedarbību visās jūsu ziņās.

Avots