Pug

Установка 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

include ../block/header

extend

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&lgt;Главная страници</title&lgt;

Примеры

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

.my-class
    .my-class texte texte textex


// переменная
- 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

Pug