pug

pugjs.org

// include config.pug подключить переменные из файла
- var lang = 'en'
- var myTitle = 'Title'

// layout.pug

doctype html
// doctype xml

html(lang=lang)
    head
        meta(charset="utf-8")
        meta(name="viewport" content="width=device-width, initial-scale=1.0")
        title #{myTitle}
        link(rel="stylesheet" href="/styles.css")
    body
        include header.pug
        ul
            li: a(href="#") Link
            li
                a(href="#") Link
        p#id.class1.class2
            | много строк
            | много строк
            |
                a(href="#") Якорь
            | .
        p.
            много строк
            много строк

        p(class=['class1', 'class2']) Привет, #[em мир]!
        a&attributes({
            'target': '_blank',
        }) Доп атрибуты

        block main
            Содержимое по умолчанию

        script.
            // далее js скрипт
            document.getElementById('root')

        style
            h1 {
                font-size: 100px;
            }

        style
            :scss
                // фильтры
                ul {
                    li {}
                }
// main.pug
extends layout

// append main - добавление элементов после по умолчанию
// prepend main - добавление элементов до по умолчанию

block main // заменит сожержимое по умолчанию

    h1 Hello World
    form(method="POST")
        input(type="text" name="username")
        button(type="submit") Войти

    ul
        for item in items
            li #{item}
            li=item
            li=item.title |  (#{item.counter} просмотров)


    if username
        h1 Hello #{username}
    else
        h1 Hello anonimus