Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Туториал по HTML препроцессору Pug (Jade)

Препроцессор Pug(Jade)

Pug - это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js.

Содержание:

  1. Теги
  2. Текст
  3. Атрибуты
  4. Констуркция Switch Case
  5. Циклы
  6. Вставка JavaScript кода
  7. Комментарии
  8. Условия
  9. Тип документа
  10. Инклюды (Includes)
  11. Наследование шаблонов
  12. Интерполяция переменных
  13. Миксины
  14. Многострочный ассоциативный массив

Официальная документация по Pug

Теги

В Pug нет закрывающих тегов, вместо этого он использует строгую табуляцию (или отступы) для определения вложености тегов. Для закрытия тегов в конце необходимо добавить символ /: foo(bar='baz')/

Pug

ul
  li Item A
  li Item B
  li Item C

HTML

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

Текст

Непосредственно в Pug можно вставлять элементы в HTML синтаксисе

Pug

p This is plain old <em>text</em> content.

HTML

<p>This is plain old <em>text</em> content.</p>

Pug

p
  | The pipe always goes at the beginning of its own line,
  | not counting indentation.

HTML

<p>The pipe always goes at the beginning of its own line, not counting indentation.</p>

Атрибуты

В Pug можно встраивать JavaScript код, благодаря чему возможны конструкции показанные ниже.

Pug

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

HTML

<a href="google.com">Google</a>
<a class="button" href="google.com">Google</a>
<a class="button" href="google.com">Google</a>

Pug

- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')

HTML

<body class="authed"></body>

Pug

input(
  type='checkbox'
  name='agreement'
  checked
)

HTML

<input type="checkbox" name="agreement" checked="checked" />

Pug

- var url = 'pug-test.html';
a(href='/' + url) Link
|
|
- url = 'https://example.com/'
a(href=url) Another link

HTML

<a href="/pug-test.html">Link</a>
<a href="https://example.com/">Another link</a>

Pug

- var classes = ['foo', 'bar', 'baz']
a(class=classes)
|
|
//- the class attribute may also be repeated to merge arrays
a.bang(class=classes class=['bing'])

HTML

<a class="foo bar baz"></a>
<a class="bang foo bar baz bing"></a>

Констуркция Switch Case

Pug поддерживает switch case, которая представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.

Pug

- var friends = 10
case friends
  when 0
    p you have no friends
  when 1
    p you have a friend
  default
    p you have #{friends} friends

HTML

<p>you have 10 friends</p>

Циклы

Pug

ul
  each val, index in ['zero', 'one', 'two']
    li= index + ': ' + val

HTML

<ul>
  <li>0: zero</li>
  <li>1: one</li>
  <li>2: two</li>
</ul>

Pug

- var values = [];
ul
  each val in values
    li= val
  else
    li There are no values

HTML

<ul>
  <li>There are no values</li>
</ul>

Pug

- var n = 0;
ul
  while n < 4
    li= n++

HTML

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Вставка JavaScript кода

Pug поддерживает вставку частей JavaScript кода в шаблоны.

Не буфферизированный код начинается с символа -
Pug

- for (var x = 0; x < 3; x++)
  li item

HTML

<li>item</li>
<li>item</li>
<li>item</li>

Буфферизированный код начинается с символа =
Pug

p
  = 'This code is <escaped>!'

HTML

<p>This code is &lt;escaped&gt;!</p>

Комментарии

Существуют различные комментариев: те, которые будут отображаться после компиляции, и те, которые пропадут.

Pug

// just some paragraphs
//- will not output within markup
p foo
p bar

HTML

<!-- just some paragraphs-->
<p>foo</p>
<p>bar</p>

Pug

body
  //-
    Comments for your template writers.
    Use as much text as you want.
  //
    Comments for your HTML readers.
    Use as much text as you want.

HTML

<body>
  <!--Comments for your HTML readers.
Use as much text as you want.-->
</body>

Условия

Pug

- var user = { description: 'foo bar baz' }
- var authorised = false
#user
  if user.description
    h2.green Description
    p.description= user.description
  else if authorised
    h2.blue Description
    p.description.
      User has no description,
      why not add one...
  else
    h2.red Description
    p.description User has no description

HTML

<div id="user">
  <h2 class="green">Description</h2>
  <p class="description">foo bar baz</p>
</div>

Тип документа

Pug

doctype html

HTML

<!DOCTYPE html>

Инклюды (Includes)

Pug имеет возможность вставки содержимого одного файла в другой файл Pug.

Pug

//- index.pug
doctype html
html
  head
    style
      include style.css
  body
    h1 My Site
    p Welcome to my super lame site.
    script
      include script.js

CSS

/* style.css */
h1 {
  color: red;
}

JavaScript

// script.js
console.log('You are awesome');

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    /* style.css */
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>My Site</h1>
  <p>Welcome to my super lame site.</p>
  <script>
    // script.js
    console.log('You are awesome');
  </script>
</body>
</html>

Наследование шаблонов

Pug поддерживает наследование шаблонов. Наследование шаблонов работает через ключевые слова block и extend. В шаблоне block - обычный блок Pug, который может заменить дочерний шаблон. Этот процесс является рекурсивным.

Pug

//- base.pug
html
  head
    title My Site 
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content
        
//- home.pug
extends base.pug
- var title = 'Animals'
- var pets = ['cat', 'dog']
block content
  h1= title // - or #{title} without =
  each petName in pets
    p= petName // -or #{petName} without =

HTML

<!DOCTYPE html>
<html>
<head>
  <title>My site</title>
  <script src='/jquery.js'></script>
</head>
<body>
  <h1>Animals</h1>
  <p>cat</p>
  <p>dog</p>
  <div id='footer'>
    <p>some footer content</p>
  </div>
</body>
</html>

Интерполяция переменных

Pug предоставляет различные способы вывода переменных.

Pug

- var title = "On Dogs: Man's Best Friend";
- var author = "enlore";
- var theGreat = "<span>escape!</span>";

h1= title
p Written with love by #{author}
p This will be safe: !{theGreat}

HTML

<h1>On Dogs: Man's Best Friend</h1>
<p>Written with love by enlore</p>
<p>This will be safe: <span>escape!</span></p>

Миксины

Поддержка миксинов позволяет создавать переиспользуемые блоки.

Pug

//- Declaration
mixin pet(name)
  li.pet= name
//- use
ul
  +pet('cat')
  +pet('dog')
  +pet('pig')

HTML

<ul>
  <li class="pet">cat</li>
  <li class="pet">dog</li>
  <li class="pet">pig</li>
</ul>

Pug

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p No content provided

+article('Hello world')

+article('Hello world')
  p This is my
  p Amazing article

HTML

<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>No content provided</p>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>This is my</p>
    <p>Amazing article</p>
  </div>
</div>

Pug

mixin link(href, name)
  //- attributes == {class: "btn"}
  a(class!=attributes.class href=href)= name

+link('/foo', 'foo')(class="btn")

HTML

<a class="btn" href="/foo">foo</a>

Многострочный ассоциативный массив

Pug

-
  var priceItem = [
    {include: filterInc, parameter : "Розовый фильтр"},
    {include: smileInc, parameter : "Смайлики"},
    {include: commentInc, parameter : "Комментарии"}
  ]
@R0NS0N

This comment has been minimized.

Copy link

R0NS0N commented Oct 2, 2018

Дякую... коротко і те що потрібно.

@nerlihmax

This comment has been minimized.

Copy link

nerlihmax commented Oct 8, 2018

Спасибо, очень информативно! Не хватает лишь информации от том, как использовать аргументы из функции рендера, если таковая используется.

@AlexeyRomanchenko

This comment has been minimized.

Copy link

AlexeyRomanchenko commented Oct 20, 2018

Ребятки, подскажите пожалуйста , можно ли сделать в pug конструкцию типа
if username
li
a(href="/logout") logout
else
li
a(href="/login") login
// как показать ,что if условие закончено? чтото типа endif ?
li
a(href='http:#') main
li
a(href='http:#') about me

А за туториал на русском - большое спасибо!

@neretin-trike

This comment has been minimized.

Copy link
Owner Author

neretin-trike commented Oct 28, 2018

Ребятки, подскажите пожалуйста , можно ли сделать в pug конструкцию типа
if username
li
a(href="/logout") logout
else
li
a(href="/login") login
// как показать ,что if условие закончено? чтото типа endif ?
li
a(href='http:#') main
li
a(href='http:#') about me

А за туториал на русском - большое спасибо!

Если я правильно тебя понял, то может быть такое решение:

- var username = { authorised: true }
if username.authorised == true
  li
  a(href="/logout") logout
else if username.authorised == false
  li
  a(href="/login") login
else
  li
  a(href='http:#') main
  li
  a(href='http:#') about me
@Mikkou

This comment has been minimized.

Copy link

Mikkou commented Nov 8, 2018

спасибо, коротко и ясно)

@warezorwar

This comment has been minimized.

Copy link

warezorwar commented Feb 28, 2019

((( Не буфферизированный код начинается с символа -
Буфферизированный код начинается с символа = )))
не могу понять разницу, подскажите пожалуйста

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.