Скрипти сайту
Сайт додає власні скрипти до завантажуються через частковий шаблон script.html: js.Build Hugo збирає кожен файл, а у виробничих збірках його додатково мінімізують, надають відбиток і генерують хеш subresource-integrity. Шаблон завантажує їх двома способами:
- Хуки: хук
body-end,layouts/_partials/hooks/body-end.html, для скриптів, що запускаються на кожній сторінці або лише на обмеженій умовою частині з них; хукhead-endдля попередньої ініціалізації віджета Kapa. - Шорткоди, для скриптів, потрібних функції на сторінках, де її використовують, наприклад, форма пошуку в реєстрі та акордеон типів конфігурації.
Скрипти в кінці тіла
| Скрипт | Сторінки | Призначення |
|---|---|---|
blog-sidebar-entry-opener.js | Головна сторінка блогу та сторінки пагінації (діє на першій) | Відкриває дві найновіші групи років у бічній панелі |
imageZoom.js | Усі | Масштабування зображень вмісту за кліком |
navScroll.js | Усі | Мав прокручувати активний запис бічної панелі в поле зору; сьогодні не діє, бо активний стан застосовується після його запуску |
tracing.js | Збірки Netlify, коли не призупинено | Телеметрія вебсайту, призупинено |
Відкривач записів у бічній панелі блогу
blog-sidebar-entry-opener.js є єдиним скриптом у кінці тіла, привʼязаним до певної сторінки, та єдиним, що працює з бічною панеллю.
Привʼязка до головної сторінки блогу
Хук body-end рендериться на кожній сторінці, тож відкривач привʼязується там за .Path сторінки, який однаковий у всіх локалях: {{ if eq .Path "/blog" }}.
Умова за .Path не виділить першу сторінку списку, розбитого на сторінки. Hugo рендерить сторінки пагінації списку з однієї сторінки розділу, тому .Path, .RelPermalink і .Pages збігаються на /blog/ і /blog/page/2/, а поточний зріз відомий лише пагінатору (.Paginator або тому, що повернув .Paginate). Виклик .Paginator на сторінці списку, яку шаблон Docsy лишає без пагінації, наприклад на порожньому блозі, розбиває її на сторінки та публікує псевдоним page/1/. Тому відкривач завантажується на кожній сторінці пагінації й пропускає їх під час виконання, перевіряючи location.pathname на наявність /page/.
Робота з бічною панеллю
Сайт використовує кешовану бічну панель Docsy (ui.sidebar_cache_limit: 1): одна навігація на корінь бічної панелі, яку віддають прихованою (d-none) без активного стану. chrome-nav.js Docsy гідратує її на DOMContentLoaded: застосовує активний стан і показує навігацію. Головна сторінка блогу, як і головна сторінка кожного розділу, вбудовує цю навігацію в розмітку в обох типах збірки, тож скрипт у кінці тіла там виконується під час аналізу HTML, до появи навігації, і може задати стан бічної панелі раніше, ніж вона зʼявиться; відкривач перевіряє свої дві групи років саме тоді. У скороченій збірці інші сторінки натомість містять заглушку, яку chrome-nav.js заповнює після завантаження навігації, уже надто пізно для скрипу в кінці тіла. Коли JavaScript вимкнено, бічна панель лишається прихованою.