Статус: актуально.
include header- используется для подключения частиц страницы, например, для шапок и подвалов.extends partials/default- используется для внедрения контент в расширяемый шаблон.layouts/default.block content- используется для добавления строк кода в определённое место другого шаблона
Во всех случаях через пробел указывается путь от текущего расположения до шаблона без расширения *.pug, *.jade.
-
Классы и идентификаторы пишутся в начале, а не в атрибутах. Указывать тег
divне нужно, т.к. он используется по умолчанию.//- Плохо div(class='carousel' id="carousel") nav(class='nav nav_pos_left') div(id="carousel") //- Хорошо .carousel nav.nav.nav_pos_left #carousel
-
Идентификатор ставится после классов.
//- Плохо .carousel#carousel.carousel_theme_dark #carousel.carousel //- Хорошо .carousel.carousel_theme_dark#carousel .carousel#carousel
-
Для нескольких атрибутов запятая не нужна.
//- Плохо input.input-text(type='text', name='project', value='csssr', required) //- Хорошо input.input-text(type='text' name='project' value='csssr' required)
-
Используйте одинарные кавычки для текстовых значений.
//- Плохо input.input-text(type="text" name="project" value="csssr" required) //- Хорошо input.input-text(type='text' name='project' value='csssr' required)
-
Не давайте необязательные значения атрибутам.
//- Плохо input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked='checked') //- Хорошо input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked)
-
Распологайте одиночные атрибуты в последнюю очередь.
//- Плохо input.input-checkbox(type='checkbox' checked name='browser[]' value='chrome') //- Хорошо input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked)
-
Для числовых значений кавычки не нужны.
//- Плохо input.input-text(type="text" name="price" value="24999") //- Хорошо input.input-text(type='text' name='price' value=24999)
-
Переносите атрибуты новую строку, если их много и/или значения длинные.
//- Плохо input.input-text(type='text' name='project' value='csssr' data-required='Это поле обязательно для заполнения!' data-hint='Допустимы только символы латинского алфавита `[a-z-A-Z]` и числа `[0-9]`.' required) //- Хорошо input.input-text( type='text' name='project' value='csssr' data-required='Это поле обязательно для заполнения!' data-hint='Допустимы только символы латинского алфавита `[a-z-A-Z]` и числа `[0-9]`.' required )
-
Добавляйте перенос строки для однотипных блоков с множественным вложением элементов. В лучшем случае используйте примесь (mixin).
//- Плохо .project .project__name Lorem .project__desc | Lorem ipsum dolor sit amet, consectetur adipisicing elit. | Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas. .project .project__name Ipsum. .project__desc | Lorem ipsum dolor sit amet, consectetur adipisicing elit. | Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas. //- Хорошо .project .project__name Lorem .project__desc | Lorem ipsum dolor sit amet, consectetur adipisicing elit. | Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas. .project .project__name Ipsum. .project__desc | Lorem ipsum dolor sit amet, consectetur adipisicing elit. | Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas.
-
Строчные элементы можно записывать на одной строке через двоеточие
:.
Не злоупотреблять с длинными классами.//- Хорошо ul.nav li.nav__item a.nav__link(href='/') Главная li.nav__item a.nav__link(href='/projects') Проекты li.nav__item a.nav__link(href='/contacts') Контакты //- Лучше ul.nav li.nav__item: a.nav__link(href='/') Главная li.nav__item: a.nav__link(href='/projects') Проекты li.nav__item: a.nav__link(href='/contacts') Контакты
-
Комментарии в Jade, которые не должны попасть в HTML записываются через
//-.// Этот комментарий попадёт в HTML. //- Этот комментарий не попадёт в HTML.
-
Простые или условные комментарии можно записывать прямо в HTML-формате.
<!--[if IE]> meta(name='imagetoolbar' content='no') meta(name='msthemecompatible' content='no') <![endif]--> <!--noindex--> Это содержимое не будет индексироваться поисковиком. <!--/noindex-->
Для однотипных и повторяющихся строк кода имеет смысл использовать примеси (mixins) и указать только данные.
mixin tools(list)
ul.list
each item in list
li.list__item
span.mark= item[0]
= ' - ' + item[1]
+tools([
['spritesmith', 'генератор спрайтов и CSS переменных'],
['imagemin', 'сжатие картинок']
])Скомпилирует в
<ul class="list">
<li class="list__item">
<span class="mark">spritesmith</span> - генератор спрайтов и CSS переменных
</li>
<li class="list__item">
<span class="mark">imagemin</span> - сжатие картинок
</li>
</ul>На каждой странице в самом начале добавляем по идентфикатору страницы.
pages/main.jade
- var pageId = 0;news.jade
- var pageId = 1;projects.jade
- var pageId = 2;about.jade
- var pageId = 3;contacts.jade
- var pageId = 4;Активируем текущий пункт навигации в зависимости от идентификатора страницы.
partials/header.pug
//- Добавляем примесь для активации пункта навигации текущей страницы
mixin nav(items)
ul.nav
each item, i in items
li.nav-item
if i === pageId
span.nav-item__name.nav-item__name_state_active= item.name
else
a.nav-item__name(href=item.href)= item.name
//- Используем примесь и добавляем в него данные навигации
+nav([{
name: 'Главная',
href: '/'
}, {
name: 'Новости',
href: '/news.html'
}, {
name: 'Проекты',
href: '/projects.html'
}, {
name: 'О нас',
href: '/about-us.html'
}, {
name: 'Контакты',
href: '/contacts.html'
}])В итоге, если у нас текущая страница "Новости", то результат будет таким:
<ul class="nav">
<li class="nav-item">
<a class="nav-item__name" href="/">Главная</a>
</li>
<li class="nav-item">
<span class="nav-item__name nav-item__name_state_active">Новости</span>
</li>
<li class="nav-item">
<a class="nav-item__name" href="/projects.html">Проекты</a>
</li>
<li class="nav-item">
<a class="nav-item__name" href="/about-us.html">О нас</a>
</li>
<li class="nav-item">
<a class="nav-item__name" href="/contacts.html">Контакты</a>
</li>
</ul>