Включването на съдържание (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 блог с функционално съдържание, като по този начин подобрите навигацията и взаимодействието с читателя във вашите публикации.
Вашият коментар