Pug (ранее известный как Jade) является языком разметки шаблонов, который позволяет упростить создание HTML-кода. Для создания меню в Pug, вы можете использовать преимущества его синтаксиса и возможностей циклов и условных операторов.
Для начала, вам понадобится структура данных, которая будет представлять ваше меню. Вы можете использовать массив или объект с элементами, содержащими информацию о пунктах меню, такую как название и ссылку. Например:
const menuItems = [
{ name: 'Главная', link: '/' },
{ name: 'О нас', link: '/about' },
{ name: 'Контакты', link: '/contact' }
];
Затем, в вашем Pug-шаблоне, вы можете использовать цикл each для итерации по элементам массива и генерации соответствующего HTML-кода:
ul
each item in menuItems
li
a(href=item.link)= item.name
Этот код будет генерировать HTML-код следующего вида:
<ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contact">Контакты</a></li> </ul>
В приведенном выше примере используется цикл each, который перебирает элементы массива menuItems. Для каждого элемента генерируется тег <li>, содержащий тег <a>, в котором указаны ссылка и название пункта меню.
Вы также можете добавить классы и другие атрибуты HTML-элементам в зависимости от ваших потребностей. Например, для добавления класса к элементу списка можно расширить код следующим образом:
ul
each item in menuItems
li.menu-item
a.menu-link(href=item.link)= item.name
Это создаст HTML-код с классом menu-item для каждого элемента списка:
<ul> <li class="menu-item"><a class="menu-link" href="/">Главная</a></li> <li class="menu-item"><a class="menu-link" href="/about">О нас</a></li> <li class="menu-item"><a class="menu-link" href="/contact">Контакты</a></li> </ul>
Таким образом, вы можете создать гибкое и удобное меню, используя язык разметки Pug. Вы также можете добавить дополнительную функциональность, такую как подменю, динамические классы и другие элементы, в зависимости от ваших потребностей.