Препроцессор Pug(jade). Часть 3

В предыдущих статьях были рассмотрены основы использования Pug, его синтаксис. В этой части я хотел бы остановиться на ситуациях, которые возникают при использовании этого инструмента.

1. Вставка svg в pug

Когда первый раз сталкиваешься с размещением кода svg картинки в html, почему-то забываешь, что в pug можно вставлять html-код и он будет обрабатываться как html.. Поэтому если возникает задача вставить код svg, не надо пытаться привести его к синтаксису pug — просто вставляете как обычно и все.

2. Подсветка активного пункта меню навигации на разных страницах

Одно из преимуществ pug — возможность многократного использования блока кода на разных страницах. Например, сверстали шапку с навигацией и она подключается ко множеству страниц при помощи конструкции include. Но если на разных страницах должен быть подсвечен определенный пункт меню: на index.html — «Главная», а на about.html — «О сайте». Как быть? Вероятно, решить эту проблему можно разными способами, но, в любом случае придётся звать на помощь JavaScript.

Могу привести пример. В шапке сайта — меню, активный пункт которого подсвечивается с помощью класса main-nav__link_active
Содержимое header.pug:

Теперь на страницах просто определяем соответствующую переменную pageId

Способ, наверняка, не единственный, но вполне рабочий.

One comment

  1. В Jade реализован отличный синтаксис для создания циклов, поэтому прибегать к JavaScript вовсе не нужно.

Добавить комментарий для Lucky Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *