У цій статті ми поговоримо про таку, на перший погляд, непросту штуку, як генерування меню в Eleventy. Чи справді все так складно? Ні, і зараз ми разом у цьому переконаємось.

Що таке Eleventy, ти можеш прочитати у цій статті, коротко — це генератор статичних сайтів, за його допомогою ти створюєш сайт із власним дизайном, наповнюєш інформацією, віддалено схоже як у Joomla чи WordPress, а на виході отримуєш сайт, побудований із статичних HTML-файлів, що миттєво відкриваються в будь-якому браузері.

Почнімо з того, що навігаційне меню дозволяє додавати сторінки з будь-яким типом розмітки (Markdown, Nunjucks, Liquid тощо), але сам шаблон, який виводитиме меню, повинен бути в розмітці Nunjucks (розширення .njk), інакше меню не згенерується.

Встановлення та реєстрація плагіна меню

Отож, для створення меню нам необхідно встановити додатковий плагін. Робиться це з терміналу в кореневій теці проекту наступною командою:

npm install @11ty/eleventy-navigation --save-dev

Тепер треба зареєструвати плагін у файлі .eleventy.js:

const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyNavigationPlugin);
};

Додавання сторінок до меню

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

Щоб додати сторінку до меню, просто внеси до її верхньої частини наступний запис:

---
eleventyNavigation:
  key: Блоґ
---

Тут ключ key є ключем розпізнавання пункта меню, а також назвою цього пункта, яка відображається на сторінці. Якщо хочеш, щоб назва пункта меню відрізнялася від ключа (хоча не знаю, де воно тобі пригодиться), додай нижче запису key ключ title зі своєю назвою, ось так:

---
eleventyNavigation:
  key: Блоґ
  title: Мої нотатки
---

Для додавання сторінки як дочірнього елемента меню достатньо вказати ключ батьківського пункта через ключ parent:

---
eleventyNavigation:
  key: JavaScript
  parent: Програмування
---

Виведення меню в шаблоні Nunjucks

Пам'ятай – меню працює виключно в шаблонах із розширенням .njk!

Для виведення меню з усіма сторінками, які були позначені методом, описаним вище, існує один простий запис:

{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}

Створення двох і більше меню

А тепер уяви, що тобі потрібно створити два або більше меню на сайті, наприклад, верхнє меню із пунктами "Головна", "Блоґ", "Контакти", і бокове з назвами категорій. Щось подібне організовано на даному блозі. Як бути в цьому випадку, адже попередній приклад виводить абсолютно всі сторінки, призначені для меню?

В цьому випадку ти можеш скористатися відразу двома хитрими ходами.

1. Вивести сторінки за допомогою тегів

Кожній сторінці, призначеній для конкретного меню, задати один і той же тег, який більше ніде не використовується, наприклад, отак:

---
eleventyNavigation:
  key: JavaScript
  tags: firstmenu
---

А потім вивести меню саме для цього тега:

{{ collections.firstmenu | eleventyNavigation | eleventyNavigationToHtml | safe }}

2. Створити окрему колекцію з конкретними параметрами

Якщо сторінок у меню має бути досить велика кількість, не обов'язково в кожній прописувати тег, достатньо створити у файлі конфігурації .eleventy.js додаткову колекцію та задати їй потрібні параметри. Наприклад, розмістити всі сторінки меню в окремій теці, та вказати шлях до неї через фільтр getFilteredByGlob:

eleventyConfig.addCollection("categories", function(collectionApi) {
  return collectionApi.getFilteredByGlob("./category/*.njk");
});

А потім так само, як у першому випадку, вказати виведення меню з конкретним тегом:

{{ collections.categories | eleventyNavigation | eleventyNavigationToHtml | safe }}

Eleventy сприйме цей хід так, ніби ти прописав тег categories для кожної сторінки з розширенням .njk з кореневої теки category.

Зрозуміло, це тільки поверхневий огляд можливостей плаґіна генерування меню Eleventy, але для впевненого старту, думаю, буде достатньо. Успіхів тобі в починаннях!