Автоматичний зміст статті в YOOtheme Pro
Навіщо потрібен зміст статті
Якщо стаття складається лише з кількох абзаців, зміст навряд чи буде потрібним. Але коли матеріал містить багато розділів і підрозділів, знайти потрібну інформацію стає значно складніше. Саме тому на багатьох сучасних сайтах можна побачити блок зі змістом статті.
Його головне завдання — допомогти читачеві швидко зорієнтуватися в матеріалі та одним кліком перейти до потрібного розділу. Особливо це зручно, коли користувач потрапив на сторінку з пошуку й шукає відповідь на конкретне запитання, а не планує читати всю статтю від початку до кінця.
Саме тому я теж вирішив додати зміст до статей на своєму сайті. Але, як це часто буває, готові рішення не зовсім відповідали тому, що я хотів отримати. Тому я пішов іншим шляхом і реалізував цей функціонал самостійно.
Чому я не використовую сторонні розширення
Для Joomla існує чимало розширень, які дозволяють автоматично створювати зміст статті. Серед них є як безкоштовні, так і платні рішення. Проте я вирішив не використовувати жодне з них.
По-перше, мені не хотілося встановлювати ще одне розширення заради одного функціоналу. Чим менше стороннього коду використовується на сайті, тим простіше його підтримувати та оновлювати.
По-друге, безкоштовні рішення не відповідали моїм вимогам. Більшість із них автоматично додають до змісту всі заголовки, які знаходять у статті. На практиці це не завжди зручно, адже інколи потрібно показати лише основні розділи, а не кожен підзаголовок.
Є й ще одна причина. Будь-яке стороннє розширення — це додатковий код, який потребує регулярних оновлень.
Якщо розробник припинить підтримку свого продукту або він стане несумісним із новою версією Joomla чи YOOtheme Pro, доведеться шукати іншу альтернативу або переробляти вже готовий функціонал
Саме тому я вирішив створити власне рішення. Воно повністю відповідає моїм потребам, не залежить від сторонніх розробників і дає мені повний контроль над тим, як саме працює зміст статті.
Як я реалізував зміст статті в YOOtheme Pro
Оскільки я використовую YOOtheme Pro, мені не знадобилися жодні додаткові розширення. Усе рішення складається лише з HTML, JavaScript і CSS.
Спочатку я створив звичайний елемент HTML у конструкторі YOOtheme Pro та вставив до нього такий код:
<nav id="toc-nav" uk-scrollspy-nav="closest: li; scroll: true; offset: 30">
<ul class="uk-margin-remove-bottom uk-nav uk-nav-secondary uk-nav-divider"></ul>
</nav>Цей код створює порожній блок, у якому згодом буде сформовано зміст статті. Сам список спочатку не містить жодного пункту — вони будуть автоматично додані за допомогою JavaScript після завантаження сторінки.
Я розмістив цей HTML-елемент у правій колонці поруч зі статтею. Проте це лише один із можливих варіантів. За бажанням зміст можна вивести над статтею, під її заголовком або в будь-якому іншому місці сторінки. Усе залежить лише від структури вашого шаблону та власних вподобань.
Додаємо JavaScript
Тепер залишилося зробити так, щоб зміст формувався автоматично. Саме для цього використовується JavaScript. Цей код треба вставити під HTML код, який ми вже написали (в тому ж самому елементі HTML):
<script>
document.addEventListener('DOMContentLoaded', function () {
const nav = document.getElementById('toc-nav');
if (!nav) return;
const ul = nav.querySelector('ul');
if (!ul) return;
const headings = document.querySelectorAll('h2.toc, h3.toc, h4.toc, h5.toc, h6.toc');
if (!headings.length) return;
headings.forEach((heading, index) => {
if (!heading.id) {
heading.id = 'toc-' + index;
}
const level = parseInt(heading.tagName.substring(1), 10);
const li = document.createElement('li');
li.className = `el-item toc-level-${level}`;
const a = document.createElement('a');
a.className = 'el-link';
a.href = '#' + heading.id;
a.textContent = heading.textContent.trim();
li.appendChild(a);
ul.appendChild(li);
});
if (window.UIkit && UIkit.scrollspyNav) {
UIkit.scrollspyNav(nav);
}
});
</script>
Після завантаження сторінки скрипт знаходить усі заголовки від H2 до H6, яким призначено CSS-клас toc. Для кожного такого заголовка, якщо він ще не має власного ідентифікатора (id), скрипт створює його автоматично.
Далі формується список, де кожен пункт містить посилання на відповідний розділ статті. Завдяки цьому читач може одним кліком перейти до потрібної частини матеріалу.
Наприкінці скрипт ініціалізує компонент Scrollspy Nav із UIkit. Це дозволяє автоматично підсвічувати активний пункт змісту під час прокручування сторінки, що робить навігацію ще зручнішою.
Використання CSS-класу toc
Мабуть, це головна особливість мого рішення.
Більшість розширень, які автоматично створюють зміст статті, додають до нього абсолютно всі знайдені заголовки. Якщо стаття велика, у результаті можна отримати довгий список, який не завжди буде зручним для читача.
У моєму випадку все працює інакше. До змісту потрапляють лише ті заголовки, яким я вручну призначив CSS-клас toc.
Наприклад, достатньо додати клас до потрібного заголовка:
<h2 class="toc">Перший розділ статті</h2>або
<h3 class="toc">Підрозділ статті</h3>Після цього скрипт автоматично знайде ці заголовки, додасть їх до змісту та створить для них посилання.
Такий підхід дає повний контроль над структурою змісту. Наприклад, якщо стаття містить багато підзаголовків, але ви хочете показати лише основні розділи, достатньо просто не додавати клас toc до зайвих заголовків. У результаті зміст залишиться компактним, зрозумілим і буде містити лише дійсно важливі пункти.
Додаємо оформлення за допомогою CSS
Щоб зміст статті був не лише функціональним, а й зручним для сприйняття, я додав кілька простих CSS-стилів (в элемент HTML, вкладка Advanced, CSS). Вони відповідають за відступи та розмір шрифту для заголовків різних рівнів.
/* h2 */
#toc-nav .toc-level-2 {
padding-left: 0;
}
/* h3 */
#toc-nav .toc-level-3 {
padding-left: 12px;
font-size: 0.95em;
}
/* h4 */
#toc-nav .toc-level-4 {
padding-left: 24px;
font-size: 0.9em;
}
/* h5 */
#toc-nav .toc-level-5 {
padding-left: 36px;
font-size: 0.85em;
}
/* h6 */
#toc-nav .toc-level-6 {
padding-left: 48px;
font-size: 0.8em;
}
Завдяки цим стилям заголовки різних рівнів мають різні відступи. Наприклад, заголовки H2 відображаються без відступу, а H3, H4, H5 і H6 поступово зміщуються праворуч. Це дозволяє читачеві швидко зрозуміти структуру статті та побачити, які розділи є основними, а які належать до їхніх підрозділів.
Я також трохи зменшив розмір шрифту для заголовків нижчих рівнів. Завдяки цьому зміст виглядає більш охайно, не перевантажує сторінку й залишається зручним для навігації навіть у великих статтях.
Звісно, це лише приклад оформлення. Ви можете змінити відступи, розміри шрифту, кольори або будь-які інші стилі відповідно до дизайну свого сайту.
Висновок
Як бачите, для реалізації автоматичного змісту статті в YOOtheme Pro зовсім не обов'язково встановлювати сторонні розширення. У моєму випадку достатньо було створити HTML-елемент, додати кілька рядків JavaScript і трохи CSS, щоб отримати саме той результат, який мені був потрібний.
Найбільше мені подобається те, що я повністю контролюю роботу цього рішення. Я сам вирішую, які заголовки повинні потрапити до змісту, можу легко змінити його оформлення або доповнити функціонал у будь-який момент, не залежачи від сторонніх розробників.
Якщо ви також використовуєте YOOtheme Pro і хочете додати до своїх статей автоматичний зміст, спробуйте цей спосіб. Можливо, саме він стане для вас простою та зручною альтернативою готовим розширенням.
Коментарів: 0
Коментувати можуть лише авторизовані користувачі