Практическое применение препроцессора pug

Сейчас мы рассмотрим какие возможности открывает нам препроцессор html pug, рассмотрим структуру проекта с его использованием и практическое применение.

Назначение препроцессора pug

В определённый момент времени у начинающего web разработчика на первое место выходит оптимизация процесса вёрстки, что характеризует его как профессионала своего дела. Одним из таких инструментов являются препроцессоры. В данной статье речь пойдёт о препроцессоре html pug.

Препроцессора pug позволяет расширить язык разметки html новыми функциями, о которых поговорим чуть позже. Сейчас поговорим о механизме как это работает.

Браузер работает исключительно с языком html и синтаксис препроцессора pug ему неизвестен. Принцип работы заключается в следующем: мы пишем код в файле с расширением pug на его синтаксисе, далее, с помощью сборщиков, мы переводим файл pug в обычный html. Этот процесс называется компиляция.

Что позволяет делать препроцессор pug

Препроцессор pug доводит обычный html до уровня языка программирования со всеми вытекающими конструкциями (ветвлениями, функциями, переменными, циклами)

Препроцессор pug позволяет:

1. Выносить повторяющиеся блоки и подключать в шаблонах
2. Использовать шаблоны.

Некоторые страницы могут иметь разные шаблоны и чтобы не пришлось повторять один и тот же код от страницы к странице следует выделить шаблоны

3. Минимизировать код за счёт синтаксиса pug
4. Миксины (функции) для повторяющегося функционала

Например для вывода меню с конкретными классами мы можем использовать миксин с параметрами

Применение препроцессора pug (Структура проекта)

Существует две папки:
1. src — разработческая папка. В которой:
— js
— less/sass
— pug

в папке pug мы создаём под папки:
— common (папка с блоками и миксинами)
— templates (шаблоны страниц)
— pages (папка с контентом страниц в которых мы подключаем шаблоны)

2. build — папка итоговой сборки с html, css, js, шрифтами и изображениями

Структура файла шаблона tempalate_main.pug:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

include ../common/mixin
 
doctype
html(lang="ru")
  head
    meta(charset="utf-8")
    title
        block title
    meta(name="viewport", content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2.0")
    link(rel='stylesheet', href='css/fontawesome-all.min.css')
    link(rel='stylesheet', href='css/style_main.min.css')
  body
      include ../common/header
 
      .top-nav-wrap
          block top-nav
 
      .content
        block content
 
      div
        include ../common/aside
 
 
      include ../common/footer

Структура файла страницы index.pug:

1
2
3
4
5
6
7
8
9
10
11

extends ../templates/template_main
 
block top-nav
  +navigation('top-nav', ['Главная', 'Новости', 'Контакты'], 2)
 
block title
  | Главная страница
 
block content
  .my_block
    | контент главной страницы

Содержание файла minin.pug:

1
2
3
4
5
6

mixin navigation (className, items, activeItem)
    nav(class=""+className)
        ul(class=""+className+"__list")
            each nav, ndx in items
                li(class=""+className+"__item" + ( (ndx == activeItem) ? ' '+className+'__item_active' : '' ))
                    a(href="#" class=""+className+"__link")= nav