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.
Atbildēt