Включение оглавления (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, полученным из заголовков вашего контента.
Настройка внешнего вида оглавления
Вы можете персонализировать внешний вид оглавления, чтобы он лучше соответствовал дизайну вашей темы:
- В разделе
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 на основе того, что вы обнаружите.
Создание липкого оглавления
Чтобы оглавление оставалось видимым во время прокрутки страницы, вы можете сделать его закрепленным:
- В
Site Header
теге добавьте этот CSS<style>
:
<style>
. toc {
position: sticky; top: 20px;
}
</style>
Это позволит расположить оглавление относительно области просмотра, гарантируя, что оно останется на виду, пока пользователи прокручивают публикацию.
Выполнив эти инструкции, вы сможете обогатить свой блог Ghost функциональным оглавлением, тем самым улучшив навигацию и взаимодействие с читателями во всех ваших публикациях.
Добавить комментарий