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. Вы также можете добавить дополнительную функциональность, такую как подменю, динамические классы и другие элементы, в зависимости от ваших потребностей.