Зміст v2 для блогу - Ghost
Розповідаю про те, як я покращив першу версію свого TOC написаного для Ghost публікацій. Додано підтримку мов та багаторівневості. Виправлені деякі проблеми та значно покращено структуру коду. Він майже ідеальний!
<toc title="Table of Contents" collapsible="true" show-text="Open" hide-text="Close" border-color="#000" bg-color="ivory"></toc>. Більше деталей тутTypeError: Cannot read properties of null (reading 'appendChild') at TOC.onLoadВступ
Привіт. Використовуючи попередню версію я вирішив, що робити дублікат такого скрипта для кожної публікації - то буде занадто. Тому сьогодні ще трохи спростимо попередній скрипт та використаємо його трохи інакше.
Попередня версія розповідала про сам процес автоматизації створення змісту. Ознайомитися з ідеєю та порівнянням існуючих варіантів можна тут.
Volodymyr Lavrynovych
Оновлення
Попередній скрипт складався з трьох речей:
- Tag <toc> - він позначав місце для додавання змісту
- Стилі
- Джава скрипт
У загальному зміни будуть невеликі. І перше з чого я почав, так це переніс заголовок і зробив його окремим параметром самого тега <toc> і тепер він має виглядати так:
<toc title="Table of Contents"></toc>Відповідно я прибрав з коду невеличкий обʼєкт налаштування заголовку, чим поліпшив читання JavaScript коду. Відповідно змінився метод addTitle.
Також я повністю переніс створення стилів на сторону скрипта. За це відповідає новий метод addStyles.
Підтримка багатьох мов
І тепер я ще простіше можу вирішити свою проблему, бо раніше я мав заготовити або два різні теплейта під кожну мову - українську та англійську - або постійно змінювати в JavaScript назву заголовку, що я і робив.
Маючи в оновленій версії атрибут title, це дозволило мені розділити сам тег <toc> та стилі зі скриптом - як логічно так і фізично.
Боротьба з дублікацією скрипта
Але мене найбільше турбувало навіть не це, а те, що при кожній вставці темплейта, скрипт і стиль повторювались раз за разом. Кожна нова публікація, де б вона не зберігалась у базі, завжди мала копію скрипта. В голові постійно вертілось це і я розумів, що чим далі, тим гірше.
Я точно знав, що скрипт спирається на document.addEventListener('DOMContentLoaded', () => {...}) і це означає, що якщо його додати в footer блогу, то він буде виконуватись кожен раз при загрузці сторінки. Та й і сам блог Ghost так працює, що при переході на іншу сторінку він грузить все по новій, тобто це не Single Page Application (SPA), до яких ми всі так вже звикли. І тут це мені на користь.
Ось і зріла думка щоб запхати і стилі і скрипт в footer блогу. Тепер, коли я мав повний контроль над заголовком за допомогою атрибуту title, то мене вже нічого не тримало - і я виніс їх окремо.
Хочу підкреслити і наголосити, що великою перевагою того, що скрипт буде описаний в одному місці, а у публікаціях буде розміщуватись лише тег <toc> стане те, що зміна чи то скрипта, чи то стилів буде в подальому впливати на всі ваші публікації. Вам не прийдеться ходити по старим дописам, щоб кожен з них оновити. Навіть написавши 20 статей я вже стикнувся з тим, що потім треба бігати по старим і щось міняти.
Зараз розкажу що вам тепер треба робити.
Підключення
Для розуміння накидав діаграмку.
Зліва ми бачимо, що у кожній публікації тепер так само буде додаватись код HTML, проте на відміну від попередньої версії нам потрібно додавати лише сам тег <toc>, як контейнер для компонента змісту, ось приклад.
<toc title="Зміст"></toc>А у правій частині я намагався відобразити, що за допомогою Code Injection ми маємо додати скрипт. Так, це буде багатенько тексту у вашій footer секції, але все завжди буде знаходитись локально у вас, що гарантує стабільність роботи за будь-яких умов
Code Injection
Доречі про сам Code Injection почитайте в офіційній документації
Ми також уже використовували його раніше ось тут
Volodymyr Lavrynovych
Я спростив все до додавання у секцію footer лише самого скрипта. Скопіюйте весь зміст скрипта разом із тегом <script> і вставте у самий низ секції footer.
Збережіть зміни і повертайтесь до редагування публікацій, тепер для зручності потрібно зробити темплейт
Як користуватись?
Я дуже раджу зробити собі заготовки під всі мови, що ви використовуєте. Детальніше ознайомитись з заготовками (snippets) в Ghost ви зможете тут
Крок 1. Створення теплейта
Як автор свого блогу у будь-якому дописі додайте HTML елемент і скопіюйте туди тег <toc>
Зробіть клік десь за межами HTML елемента
І збережіть його, додавши йому імʼя типу TOC (Table of Contents)
Крок 2. Використання
Маючи заготовку з назвою TOC нам залишається лише відкрити публікацію, де нам потрібен зміст і вставити його так само, як ми додавали HTML елемент, але тепер тепер треба шукати TOC у самому низу списку.
Все готово! Тепер після опублікування, або в режимі попереднього перегляду ви побачити зміст сформований на освнові вашого контенту. Головне не забувайте додавати свою заготовку (snippet) кожен раз на початку, або де вам буде зручно.
Для своїх потреб я створив заготовки під різні мови.
Що відбувається у footer?
Якщо вам (як і мені) було цікаво яка магія відбувається після виконання скрипта, то я спеціально хочу показати, що в тег <toc> було додано стилі методом addStyles, а за ними і сам .toc-container, який в собі має заголовок і посилання на розділи у <nav> блоці. Кожен тег <li> це окремий пункт. Я не відкривав їх, бо там багато тексту, подивитесь самостійно.
Висновки
Оновлена версія має декілька переваг у порівнянні з попередником:
- Змінити стиль і сам скрипт можна в одному місці - це зручно і впливає зразу на всі попередні публікації
- Контент публікацій не засмічується великим скриптом, а темплейт тепер значно менший - тут ми говоримо виключно про розмір необхідний для збереження публікації у базі даних
- Змінити назву залоговку змісту тепер простіше - фактично маємо справу лише з однією строчкою
- Стилі були ддодані як частина скрипта - без зміни функціональності додавання скрипта у ваш блог стала простішою
Якщо я вас ще не вмовив, то я не знаю, що ви тоді шукаєте. А поки ви перебіряєте варіанти я вже успішно використовую все це у своєму блозі.
