Навігація по сторінці

В Albireo є корисние поле для формування списку із заголовків поточної сторінки, що полегшує навігацію у статті, особливо, якщо вона структурована і достатньо довга.

Стандартний підхід

З коробки, Albireo пропонує підключення сніппету, який, по суті, є нічим іншим, як скриптом JS, для підключення до будь-якої сторінки. Результатом, згідно довідника, буде формування навігації з html-тегів другого рівня <h2> поточної сторінки, оформлене в три колонки.

<div class="article_navigation"></div>
<?= snippet('article-navigation-flat') ?>

Варіації стандарту

Можна змінювати ім'я адженди в сніпеті, або додати 'h2,h3' як параметр, що логічно додасть теги <h3> до списку (не пам'ятаю, чи це документовано саме так, але воно спрацьовує).

<div class="article_navigation"></div>
<?= snippet('article-navigation-flat', 'h2,h3', 'Навігація по тегах h2,h3') ?>

Результат виглядатиме так:

Звісно, це треба розміщувати на початку статті, або оформити на свій смак де-інде.

Нестандартний підхід

Чи достатньо коробочного виводу - кожен вирішує сам, але ми спробували трохи погратись на таку тему й створити древовидну структуру списків, які візуалізують ієрархію. Хочу зауважити, що наведений нижче код написаний без підглядання до авторського стандартного, тому критика має бути напралена виключно на автора статті.

Одинарний список <h2>

Це виведе список по тегу 'h2', але, на відміну від авторського - в один стовпчик.

<ul class="height" id="h2-list"></ul>

<script>
document.addEventListener('DOMContentLoaded', function () {
	// Знаходимо всі елементи <h2>
	const h2Elements = document.querySelectorAll('h2');
	const ulElement = document.getElementById('h2-list');

	// Перетворюємо NodeList у масив та перебираємо кожен заголовок
	h2Elements.forEach((h2, index) => {
		// Додаємо унікальний id для кожного <h2>
		const id = `section${index + 1}`;
		h2.setAttribute('id', id);

		// Створюємо елемент <li> зі посиланням <a>
		const li = document.createElement('li');
		const anchor = document.createElement('a');

		// Створюємо текст і посилання для анкора
		anchor.textContent = h2.textContent;
		anchor.href = `#${id}`;

		// Додаємо посилання до <li> і <li> до <ul>
		li.appendChild(anchor);
		ulElement.appendChild(li);
	}
});
</script>

Одинарні списки <h2> та <h3>

Наступний скрипт - звичайний розвиток попереднього, але з виводом окремих списків для кожного тега. Практичну потребу в такому варіанті уявити важкувато, тому його код ми наводити не будемо, хоча результат продемонструємо:

Комбіновані списки з <h2> та <h3>

Скрипт генерації древовидної структури сторінки, зформованої по тегах заголовків на льоту. Виводиться одним блоком, до того ж він працюватиме й за межами Albireo.

<ul id="toc-list"></ul>
	
<script>
document.addEventListener('DOMContentLoaded', function () {
	// Знаходимо всі елементи <h2> та <h3>
	const headings = document.querySelectorAll('h2, h3');
	const ulElement = document.getElementById('toc-list');
	let currentUl = ulElement;

	headings.forEach((heading, index) => {
		// Створюємо унікальний id для кожного заголовка
		const id = `section${index + 1}`;
		heading.setAttribute('id', id);

		// Створюємо елемент <li> зі посиланням <a>
		const li = document.createElement('li');
		const anchor = document.createElement('a');
		anchor.textContent = heading.textContent;
		anchor.href = `#${id}`;

		// Додаємо посилання до <li>
		li.appendChild(anchor);

		// Якщо це <h2>, додаємо його в основний список
		if (heading.tagName.toLowerCase() === 'h2') {
			ulElement.appendChild(li);
			// Створюємо новий підсписок для <h3>, якщо він з'явиться
			currentUl = document.createElement('ul');
			li.appendChild(currentUl);
		} else if (heading.tagName.toLowerCase() === 'h3') {
			// Якщо це <h3>, додаємо його у підсписок до поточного <h2>
			currentUl.appendChild(li);
		}
	}
});
</script>

На виході отримаємо більш логічну древовидну структуру заголовків такого плану:

Таке уже можна додавати до свого проекту в теку albireo/website/templates/default/assets/js наприклад, під назвою htree.js, або у вигляді сніппета. Після чого, не забудьте його підключити разом з іншими полями в коді PHP отак: js.lazy[]: htree.js. Головне, - ці скрипти мають розміщуватися в кінці розмітки, перед закриваючим /body, щоби DOM встиг завантажитись повністю. Порівняйте результат зі стандартним на початку статті та виберіть варіант, який вам до вподоби.

Ну й на цьому все сьогодні.