Добавление оглавления (TOC) в тему «Призрак»: пошаговое руководство

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

Источник