Шаблонизатор Pug

Sep 30, 2018

Установка pug

Установис интерфейс командной строки для PUG:

npm i -g pug-cli

Преобразовываем в HTML

Чтобы преобразовать pug файлы в html нужно:

pug имя_директории

В текущей директории:

pug .

С командой watch плюс перемещаем в нужную папку:

pug --watch ./pug/ --out ./html/
  • ./pug/ - что
  • --out ./html/ - куда

Отменяем минификацию:

pug --watch --pretty

html2jade

Конвертер html в pug html2jade.org

Частичное применение шаблона / include

Существует возможность вставки содержимого одного файла Pug в другой.

include ../block/header

extend

Посредством ключевых слов block и extend реализуется наследование страниц

base.pug

doctype html
html
    head
    meta(charset = 'utf-8')
    meta(name = 'viewport', content = 'initial-scale=1, width=device-width')
    title
        block title
    body
        block main

blog.pug

extends ../base
block title
    | Blog page
block main
    h1 page blog-pug

block

block title
    title Главная страници

По умолчанию в блоке title лежит <title>Главная страници</title>

compile

Процесс рендеринга в Pug: pug.compile() скомпилирует исходный код Pug в функцию JavaScript, которая в качестве аргумента берет объект данных (locals). Вызов этой результирующей функции с вашими данными возвращает строку HTML, отображаемую с этими данными.

Скомпилированную функцию можно повторно использовать и вызывать с различными наборами данных.

Исходный код

//- template.pug
p #{name}' текст рыба (исходный код)

const pug = require('pug');

// Компилируем исходный код
const compiledFunction = pug.compileFile('template.pug');

// Рендерим с нашими данными
console.log(compiledFunction({
    name: 'Вася'
}));

Вывод шаблонизатора

<p>Вася текст рыба (исходный код)</p>

Миксины

Mixins позволяют переиспользовать блоки Pug.

Исходный код

mixin link(href, name)
    //- attributes == {class: "btn"}
    a(class!=attributes.class href=href)= name

+link('/to_ref1', 'to_ref1')(class="btn")
+link('/to_ref2', 'to_ref2')(class="btn")

Вывод

    <a class="btn" href="/to_ref1">to_ref1</a>
    <a class="btn" href="/to_ref2">to_ref2</a>

Примеры

h1
a(href="#" title="title").class#id
p

.my-class
    .my-class texte texte textex


// Многострочные атрибуты
input(
    type='checkbox'
    name='agreement'
    checked
)


// Стилевые атрибуты
a(style={color: 'red', background: 'green'})


// Атрибуты классов
- var currentUrl = '/faq'
a(class={active: currentUrl === '/'} href='/') Main
a(class={active: currentUrl === '/faq'} href='/faq') FAQ


// Комментарии
body
  //-
    Comments for your template writers.
    Use as much text as you want.



// переменная
- var item = "значение переменной"
a(href="#" title="title")= item


// перебираем массив
-
    var arr = [
        1,
        2,
        3,
        4
    ]
each item, index in arr
    .block= `Мой очередной эл-т для in ${item} `
        .index= `index: ${index} `


//- этот комментарий не будет виден в итоговом html


// перебираем массив for
- var arr = [1, 2 , 3 , 4 ]
- for (var i = 0; i < arr.length; i++)
    .block= `Мой очередной эл-т для for ${arr[i]} `
        .index= `index: ${i} `


// объекты
// отметьте, как ! убирает экранирование
// - позволяет писать js на нескольких строках
-
    var obj = {
        prop1: 'val1',
        prop2: 'val2',
        prop2: '<p>Убираем экранирование</p>'
    }
each value, key in obj
    .obj
        .key= key
        .value!= value


// массив объектов
// отметье как обращаемся к свойству объекта:
    .link= item['link']
     div= item.prop2
-
    var objArr = [{
            link: '<a href="">val1</a>',
            prop2: 'val2',
        },
        {
            link: 'val3',
            prop2: 'val4',
        },
        {
            link: 'val5',
            prop2: 'val6',
        },
        {
            link: 'val7',
            prop2: 'val8',
        }
    ]

each item in objArr
    - console.log(item)
    div
        .link!= item['link']
         div= item.prop2


// Интреполяция - приведение значения переменной к строковому типу:

each item in objArr
    - console.log(item)
    div
        .link Здесь будет наша ссылка #{item['link']}
        if item.prop2 == 'val8'
            div Карамба
        div(data-my-ttl=`${item.prop2}`)


// Условия
-
    var myVar = true

if myVar
    .item Yes of course
else
    div Nine
// else if

// case
-
    var objArr = [{
            link: '<a href="">val1</a>',
            prop: 'val2',
        },
        {
            link: 'val3',
            prop: 'val4',
        },
        {
            link: 'val5',
            prop: 'val6',
        },
        {
            link: 'val7',
            prop: 'val8',
        }
    ]
each item in objArr
    div
        .link!= `Здесь будет наша ссылка ${item['link']}`
        case item.prop
            when 'val2'
                div= `prop: ${item.prop}`
            when 'val4'
                div= `prop: ${item.prop}`



-
    var arr = ["green", "black", "red", "yellow", "blue"];


.flex-container
    - for (var i = 0; i < arr.length; i++)
        .flex-item(style=`background: ${arr[i]}`)= i + 1
Добавить комментарий