Pug (ранее известный как Jade) - это язык разметки, который предоставляет более удобный и краткий синтаксис для написания HTML-кода. В этом ответе я расскажу вам о правилах и синтаксисе, которые нужно соблюдать при работе с Pug.
1. Установка и настройка Pug:
- Установите Pug, выполнив команду npm install pug.
- Импортируйте Pug в свой проект, добавив require('pug').
- Создайте файл с расширением .pug, где вы будете писать свою разметку.
2. Базовое форматирование:
- Pug использует отступы для указания вложенных элементов. Рекомендуется использовать 2 пробела в качестве отступа.
- Используйте точки для указания классов элементов и решеток для указания идентификаторов:
.pug
.container
#header
<pre>{{EJS0}}</pre>
4. Вложенные элементы и текст:
- Вложенные элементы в Pug отделяются от предыдущего элемента отступом.
- Любой текст внутри элемента представляет собой текстовый узел:
.pug
ul
li Item 1
li Item 2
p This is some text
5. Использование переменных и циклов:
- Pug позволяет использовать переменные и выполнить циклы прямо в разметке.
- Чтобы использовать переменную, поставьте ее имя после символа доллара:
```.pug
- var name = 'John Doe'
p Hello, $name!
- Для циклов используйте конструкцию each с ключом и значением:
.pug
ul
each item in ['Apple', 'Banana', 'Orange']
li= item
<pre>{{EJS2}}</pre>
- Также можно использовать конструкцию для наследования шаблонов:
.pug
extend layout.pug
block content
// Контент наследуется от шаблона layout.pug
- Шаблоны можно расширить и переопределить секции с помощью блоков `block`:
```.pug
// layout.pug
html
head
block head
title My Website
body
block content
// index.pug
extend layout.pug
block head
// Здесь можно переопределить секцию head
block content
// Контент находится внутри секции content
Это основные принципы и синтаксис Pug. Знание этих правил позволит вам эффективно использовать язык Pug для разработки вашего HTML-кода, делая его более читаемым и поддерживаемым. Удачи в изучении Pug!