Intro

Шаблон - структура, в которой данные (например, текст) и/или части структуры заменены на специальный код. При сборке [компиляции] этот код будет заменен обратно

Шаблонизация - создание и использование подобных шаблонов

Pug - язык шаблонизации для HTML

Syntax

Теги указываются без <>. Закрывающий тег не нужен

	doctype html
	h1
	div
	p

После сборки:

	<!DOCTYPE html>
	<h1></h1>
	<div></div>
	<p></p>

Индентации играют роль показателей вложенности. Например, в первом случае блоки идут один за другим, во втором - вложены друг в друга

	div
	p
	div
		p

Текст имеет отдельный тег

	| Inline Text

Текст внутри блока указывается через пробел от тега

	h1 First Heading

Блок, внутри которого другой блок и текст

	div
		p Block Text
		| Inline Text

Пробел между блоками

	div
		| Click
		|
		span Here

Атрибуты указываются внутри круглых скобок через запятые или пробелы сразу же после тега

	a(href="google.com" class="button") Google
	a(href="google.com", class="button") Google

Идентификаторы и классы можно указывать иначе

	a.button.link#link

Комментарии

	// появится в HTML в виде комментария
	//- не появится

Features

  • Можно вставлять одни pug-файлы в другие. Это позволяет разделить страницу на отдельные смысловые блоки. Конструкцию стоит писать именно там, куда нужно вставить содержимое pug-файла

    	include components/header.pug
    
  • Можно создавать шаблоны и использовать их. Создание:

    	doctype html
    	html
    		head
    			block scripts
    				script(src="script.js")
    		body
    			block content
    				p Content
    

    Для создания страницы по такому шаблону достаточно в pug-файле новой страницы написать extends layout.pug (при условии, что файл шаблона именно так и называется и находится там же, где и новая страница). Новая страница будет идентична шаблону

    Обратите внимание на block scripts и block content. Если их не упоминать в коде новой страницы, то они примут стандартное значение (то, которое описано в шаблоне). Если упомянуть блок (написать block scripts) и больше ничего не писать, то он станет пустым. Если же вы хотите полностью переписать блок - так и сделайте (по аналогии из шаблона)

    Ежели вам захотелось добавить код к началу или к концу стандартного значения, то пишем block append scripts или block prepend scripts и внутрь него то, что хотим дописать. Какой из них добавляет в конец, а какой в начало поизучайте сами. Кстати в этом случае слово block можно не писать

В Pug есть и переменные, и циклы, и условия, и микшены, и куча всякой приблуды. Но зачем? Для рендера в Express (модуль NodeJS) конечно же. А вот нахуя ещё - ума не приложу