Добавяне на съдържание (TOC) към вашата Ghost тема: Ръководство стъпка по стъпка

Включването на съдържание (TOC) във вашия блог Ghost значително подобрява изживяването на читателя, като улеснява безпроблемната навигация през по-дълги статии. Този урок ще ви преведе през процеса на добавяне на TOC към всяка Ghost тема с помощта на TOCBOT, плъгин за JavaScript, който автоматично генерира TOC от заглавията, присъстващи във вашите публикации.

Интегриране на TOCBOT в Ghost

TOCBOT ефективно изгражда TOC от заглавията на вашите публикации. Следвайте тези прости стъпки за инсталиране:

Влезте в таблото за управление на администратора на Ghost и отидете на Settings > Code injection.
В Site Headerобластта вмъкнете необходимия TOCBOT скрипт и лист със стилове:

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

След това в Site Footerсекцията инициализирайте TOCBOT, като използвате следния скрипт:

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

Уверете се, че contentSelectorсъвпада с класа, определен във вашата тема за съдържание на публикация. Често използваните класове включват .post-content, .gh-contentили .c-content.

Накрая запазете промените в Code injectionнастройките.

Вмъкване на заместител на TOC в публикации

За да покажете съдържанието във вашите статии, ще трябва да поставите контейнер на желаното място:

Редактирайте публикация, в която искате да включите съдържанието.
Добавете HTML карта на мястото, което предпочитате, като въведете /htmlв редактора.
Включете следния код в HTML картата:

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

Тази част от кода създава място за TOC. След като публикацията бъде достъпна, TOCBOT ще запълни това пространство с динамично генерирания TOC, получен от заглавията на вашето съдържание.

Персонализиране на външния вид на TOC

Можете да персонализирате външния вид на TOC, за да съответства по-добре на дизайна на вашата тема:

В Site Headerпод Settings > Code injectionдобавете персонализирани CSS стилове, затворени в <style>таг:

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

Чувствайте се свободни да коригирате тези стилове, за да отговарят на вашите предпочитания.

Модифициране за различни теми

Тъй като темите могат да използват различни имена на класове за секции със съдържание, уверете се, че contentSelectorв настройката на TOCBOT съответства на класа съдържание на вашата тема:

Проверете темата си, като започнете с всяка отворена публикация.
Щракнете с десния бутон върху съдържанието на публикацията и изберете Inspectдостъп до инструментите за разработчици на вашия браузър.
Намерете името на класа, свързано с елемента, който съдържа съдържанието на вашата публикация, като например .post-content.

Не забравяйте да актуализирате contentSelectorв скрипта TOCBOT въз основа на това, което намерите.

Създаване на Sticky TOC

За да запазите TOC видимо, докато вашите читатели превъртат, можете да го настроите да бъде лепкав:

В Site Headerдобавете този CSS в <style>етикет:

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

Това ще позиционира TOC по отношение на прозореца за изглед, като гарантира, че остава видим, докато потребителите превъртат през публикацията.

Като приложите тези инструкции, можете да обогатите своя Ghost блог с функционално съдържание, като по този начин подобрите навигацията и взаимодействието с читателя във вашите публикации.

Източник