Создание элегантных и удобных веб-страниц с Pug HTML

Pug (бывший Jade) - это шаблонизатор HTML для Node.js, который позволяет вам создавать HTML-разметку более компактно и эффективно. Pug использует индентацию вместо открывающих и закрывающих тегов HTML, что делает код более читаемым и легким для поддержки.

Вот пример кода, который демонстрирует разницу между обычным HTML и его эквивалентом в Pug:

Обычный HTML:

html



  


  
Hello, world!
  
Welcome to my website.

И его эквивалент в Pug:

pug
doctype html
html
  head
    title Example
  body
    h1 Hello, world!
    p Welcome to my website.

Как видите, в Pug нет необходимости использовать открывающие и закрывающие теги, а также необходимо придерживаться правила отступов для структурирования разметки.

Также в Pug есть возможность использовать переменные, условные операторы и циклы. Вот пример, демонстрирующий это:

pug
doctype html
html
  head
    title Example
  body
    - const name = 'John'
    h1 Hello, #{name}!
    - if (name === 'John')
      p Welcome back, #{name}!
    - else
      p Welcome to our website!
    - for (let i = 0; i < 5; i++)
      p This is paragraph #{i+1}

В этом примере мы используем переменную `name`, проверяем ее значение с помощью условного оператора `if`, а также создаем цикл с помощью оператора `for`.

Pug также поддерживает множество других функций, таких как включение других файлов, фильтры для преобразования текста и многое другое. Это делает его удобным инструментом для создания HTML-разметки с использованием программной логики.

В заключение, Pug - это шаблонизатор HTML, который позволяет вам создавать HTML-разметку более компактно и эффективно. Он упрощает создание и поддержку HTML-кода за счет использования индентации и добавления дополнительных функций.