Pug как установить: Установка | HTML: Препроцессор Pug

Содержание

Установка | HTML: Препроцессор Pug

Как и с препроцессором SASS, для использования Pug используется интерпретатор — программа или скрипт, который переводит шаблон Pug в HTML. В этом курсе будет использован npm-пакет pug-cli, который позволит компилировать файлы с помощью командной строки. Это похоже на использование пакета sass из курса SASS: Основы.

Для установки интерпретатора Pug воспользуйтесь пакетом pug-cli:

npm install pug-cli

Вы можете установить пакет в конкретную директорию, или глобально, если использовать флаг -g при установке. Чтобы узнать версию установленного пакета, введите команду pug --version. На момент написания курса используется следующая версия:

pug version: 2.0.4
pug-cli version: 1.0.0-alpha6

Первый шаблон

Разберём работу интерпретатора. Для этого создадим файл index.pug со следующим содержимым:

doctype html
html(lang='ru')
  head
    meta(charset='UTF-8')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    meta(rel='icon' type='image/x-icon' href='favicon.ico')

    title Мой первый Pug-шаблон

    link(rel='stylesheet' href='./styles/app.css')

  body
    h2 Шаблон Pug
    p
      | Мой первый шаблон с использованием Pug.
      | Он позволит мне удобнее верстать страницы.

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

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

pug index.pug --pretty

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta rel="icon" type="image/x-icon" href="favicon.ico">
    <title>Мой первый Pug-шаблон</title>
    <link rel="stylesheet" href="./styles/app.css">
  </head>
  <body>
    <h2>Шаблон Pug</h2>
    <p>
      Мой первый шаблон с использованием Pug.
      Он позволит мне удобнее верстать страницы.
    </p>
  </body>
</html>

По умолчанию, pug переводит код в минимизированный HTML. Из него вырезаны пробелы между тегами, табуляция и перевод строк. Это удобно при разработке, но, во время обучения, важно видеть полный результат без минификации. Для этого используется опция --pretty. Если вы уверены в коде, то просто уберите её.

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

pug index.pug --pretty -o ./build/

Во время разработки удобно компилировать файлы после каждого сохранения. Для этого используется флаг -w. После этого процесс постоянно будет следить за файлом и компилировать его в случае изменений. Итого, ваши учебные проекты могут иметь следующий вид:

pug index.pug --pretty -w -o ./build/

Если изначально вам не очень удобно ориентироваться в таких флагах, то можно использовать их полные названия:

pug index.pug --pretty --watch --out ./build/

Полный список команд можно вывести с помощью команды pug --help.

Дополнительное задание

Как установить и использовать Jade

Недавно я смотрел несколько видеоуроков по youtube и наткнулся на эту штуку JADE, как мне установить и использовать ее для моей веб-разработки?

Я погуглил его, но не нашел подходящего сайта, который учил бы step-by-step продолжать. А сайт jade-lang.com недоступен. Я сделал это с веб-сайтов, но node.js выдает некоторые ошибки. скриншот ниже:

node.js

web

pug

Поделиться

Источник


Shree    

23 июля 2017 в 19:48

2 ответа

  • Как установить пустой атрибут с помощью Jade?

    При использовании jade , AngularJs и angular-translate я предпочитаю использовать директиву translate в качестве пустого атрибута. Но по какой-то причине, используя пустые атрибуты в Jade, вместо того , чтобы получить что-то вроде <tag translate OR <tag translate=» , я получаю <tag…

  • Как использовать JADE для создания агента для поиска веб-сервисов

    Впервые я услышал о JADE много месяцев назад, но так и не получил возможности попробовать его. Я сделал простой поиск в google, чтобы узнать, как используется JADE. Я получил это , и с тех пор мне действительно хотелось узнать гораздо больше о JADE. В настоящее время мне дали проект по созданию…


2

first jade устарел, а новое имя для jade-pug для получения дополнительной информации об этом проверьте эту ссылку

pug документация

second to install pug write this command npm install pug -g after you install pug create a new folder to your project and create a file inside your project file.pug and right click on your folder project + shift
and open command window here and write this command pug file.pug after you write this command it will generate a new file file.html

Third write this command pug input.pug input.html --watch --pretty

--watch to compile your code after saving in file.pug

--pretty to write a code with format of html(organized code) not minimized code

для записи тега в pug напишите имя тега, например

  • html tag and we will compile to <html></html>

  • a(href='#' target='_blank') link compile to <a href="#" target="_blank">link</a>

  • a(href='#' target=''): img(src='' alt='') скомпилировать в <a href="#" target=""><img src="" alt=""/></a>
  • чтобы написать комментарий от // this is a comment до <!-- this is a comment -->
  • чтобы написать имя класса и содержимое для тега, например p.demo this is a paragraph , скомпилируйте в <p> this is a paragraph</p>
  • для записи идентификатора и содержимого тега, например p#demo this is a paragraph , скомпилируйте в <p> this is a paragraph</p>

  • чтобы написать функцию

    mixin list
    ul
    li foo
    li bar
    li baz

чтобы использовать эту функцию, напишите имя функции +list и скомпилируйте ее в

<ul>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
  </ul>

чтобы включить запись файла include file_name

Наконец, это пример кода pug

html 
    head
        title Hello
        link(href='' rel='stylesheet' type='text/css')
    body

        //this is a comment
        p.item hello
        p#item

        br/

        a(href='#' target=''): img(src='' alt='') 
        // to start a new line
        |
        |
        a(href='google.com') Google
         // write a function
         mixin list
          ul
            li foo
            li bar
            li baz
        // use function
        +list
        // include file
        include content

Для получения дополнительной информации о pug проверьте эту ссылку pug полная документация

Поделиться


Eng_Farghly    

24 июля 2017 в 19:56


1

Джейд теперь называется «pug».

npm установить pug -g

Здесь вы найдете, как его использовать, если прокрутите вниз:

https://www.npmjs.com/пакет/pug

Поделиться


sidewinder    

23 июля 2017 в 20:23

Похожие вопросы:

node.js/Jade-как предварительно скомпилировать файлы jade и кэшировать их?

Каркас: node.js / express.js / Нефрит Вопрос: в production env, когда файл jade визуализируется express, jade cache-это он, поэтому будущие рендеры выполняются быстрее. Когда я запускаю приложение…

Как я могу добавить JADE к Eclipse и сделать программу с помощью JADE?

Я хочу программировать в нефрите в первый раз. Как я могу добавить JADE в eclipse и использовать его? Я хочу добавить JADE к eclipse, но не могу добавить его в библиотеки в Eclipse.

Как установить поддержку языка Jade в Atom

Я использую Atom и хотел бы создавать с его помощью все свои новые приложения. Однако я замечаю, что Atom не поддерживает Jade. Я гуглил, и все, что я понял, это о пакете….

Как установить пустой атрибут с помощью Jade?

При использовании jade , AngularJs и angular-translate я предпочитаю использовать директиву translate в качестве пустого атрибута. Но по какой-то причине, используя пустые атрибуты в Jade, вместо…

Как использовать JADE для создания агента для поиска веб-сервисов

Впервые я услышал о JADE много месяцев назад, но так и не получил возможности попробовать его. Я сделал простой поиск в google, чтобы узнать, как используется JADE. Я получил это , и с тех пор мне…

Как использовать Macromedia Flash в Jade?

Я хочу использовать Macromedia Flash в своем шаблоне Jade, поддерживает ли Jade Flash?

Пытаюсь понять, как использовать Jade с Node.js

Я новичок в node, просто пытаюсь использовать Jade template engine, я прочитал ReadMe на странице github, и в итоге у меня возникла идея, что это должно сработать: var http = require(‘http’), jade =…

как использовать ejs и jade в одном проекте nodejs & express?

Я хочу использовать ejs для партиалов и использовать jade для отдельных страниц, как использовать и то, и другое в одном проекте NodeJS & express?

Jade template engine / Как установить фоновое изображение

Я хотел бы установить фоновое изображение на мою страницу HTML, визуализированную с помощью Jade . Кто-нибудь знает, как этого добиться? Спасибо

Как установить basedir в Jade с помощью командной строки

Есть ли способ установить параметр ‘basedir’ в командной строке jade? Или, может быть, другой способ использовать там абсолютный патч. Спасибо.

Туториал по HTML препроцессору Pug (Jade) · GitHub

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 href="google.com">Google</a>
<a href="google.com">Google</a>

Pug

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

HTML

<body></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></a>
<a></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
    h3.green Description
    p.description= user.description
  else if authorised
    h3.blue Description
    p.description.
      User has no description,
      why not add one...
  else
    h3.red Description
    p.description User has no description

HTML

<div>
  <h3>Description</h3>
  <p>foo bar baz</p>
</div>

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

Pug

HTML

Инклюды (Includes)

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

Pug

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

CSS

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

JavaScript

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

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    /* style.css */
    h2 {
      color: red;
    }
  </style>
</head>
<body>
  <h2>My Site</h2>
  <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
  h2= 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>
  <h2>Animals</h2>
  <p>cat</p>
  <p>dog</p>
  <div>
    <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>";

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

HTML

<h2>On Dogs: Man's Best Friend</h2>
<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>cat</li>
  <li>dog</li>
  <li>pig</li>
</ul>

Pug

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

+article('Hello world')

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

HTML

<div>
  <div>
    <h2>Hello world</h2>
    <p>No content provided</p>
  </div>
</div>
<div>
  <div>
    <h2>Hello world</h2>
    <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 href="/foo">foo</a>

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

Pug

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

Знакомство с препроцессором Pug | thespt.ru

Сложность лёгкая

Время чтения 10 минут

Установка pug
Опции командной строки pug-cli
Пример использования pug

Pug – это препроцессор Node.js который позволяет генерировать HTML с помощью упрощённого синтаксиса, благодаря этому увеличивается скорость вёрстки в несколько раз.

Для работы Pug необходимо установить Node.js

Установка PUG

Установка pug не чем не отличается от установки обычного пакета через npm

Так же у pug есть свой cli “интерфейс командной строки” который во многом удобен и прост в использовании

PUG-CLI

Установка pug-cli происходит аналогично

pug-cli необходимо ставить глобально т.е использовать ключ -g

Для проверки установки pug -cli необходимо в консоли ввести pug -h если команда выполниться  успешно то  будет показана справка  по командам pug.

Опции командной строки pug:

КомандаОписание
— -v,- -versionВывести номер версии
-0,obj  <str|path>Настройки JSON объекта или файла
-o,- -out <dir>Вывести отрисованный HTML или скомпилированный JS в папку
-p,- -path <path>Имя файла используется для разрешения подключений
-b,- -basedir <path>Путь используется для разрешения глобальных подключений
-P,- -prettyКомпиляция в HTML без сжатия
-c,- -clientФункция компиляции для клиентской части
-n,- -name <str>Название скомпилированного шаблона
-D,- -no-debugКомпиляция без отладки
-w,- -watchСледит за изменением файлов и автоматически перерисовывает
-E,- -extension <ext>Указывает расширение выходного файла
-s,- -silentНе выводить логи
— -name-after-file-nameИмя шаблона
— -doctype <str>Указывает тип документа в командной строке
-h,- -helpВывод справки

Пример c использованием pug — cli

После установки pug-cli глобально можно попробовать его в действии на небольшом примере. Для этого необходимо создать файл с расширением pug.

Содержимое файла будет иметь простой пример демонстрирующий простоту и удобство pug.

doctype html
html
  head
    title pug-cli
  body
    h2 pug cli work

В этом примере файл main.pug имеет простые команды pug,после компиляции которых получится файл HTML c вёрсткой. Для компиляции исходного кода на pug необходимо открыть консоль в папке с файлом pug. В консоли необходимо вызвать pug и указать файл для компиляции.

В место имени файла можно указать имя папки где хранятся шаблоны pug

После успешной компиляции в консоли будет выведено сообщение о том что компиляция прошла успешно и был создан файл main.html

После компиляции содержимое будет сжато.

Читать полученный HTML будет не удобно, для решения этой проблемы необходимо использовать ключи (опции командной строки pug)

После компиляции с ключом -P получим более удобный для чтения вариант

Пример использования pug без cli

Для использования pug без cli необходимо создать проект через npm и добавить в зависимости pug.

В проекте главный файл (например index.js) использует pug для компиляции и отрисовки HTML.

let pug = require('pug');
let main = pug.compileFile('main.pug');
 
// Render
console.log(main({
name:"thespt"
}));
 
console.log(main());

Шаблон pug будет иметь вид

doctype html
html
    head
        title pug cli
    body
        h2 pug cli work #{name} <!-- если входной параметр передан то его выведет-->

Командой node index.js скрипт вызывается на исполнение,после чего скомпилированный HTML будет выведен в консоль.

Подробнее о pug можно узнать на официальном сайте или посетить репозиторий.

0 0 голоса

Рейтинг статьи

Расскажи всем,если это интересно!

Web-разработка • HTML и CSS


Pug — это шаблонизатор и html-препроцессор, написанный на javascript для платформы Node.js, с целью ускорения верстки. Это даже быстрее, чем при использовании emmet — так что будет полезен любому веб-разработчику. Тем более, что освоить Pug можно за пару часов, синтаксис достаточно прост и интуитивно понятен.

Создание проекта


Давайте создадим директорию project, а внутри нее еще две директории — src и dist. В директории src будут исходники, а в директории dist — готовая сборка. И откроем проект в VS Code — нужно кликнуть по иконке папки project правой кнопкой мыши и выбрать в контекстном меню «Открыть с помощью VS Code».

Установка Pug


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

> npm install pug-cli --g
> npm install pug --save-dev # из директории проекта

Пробуем на зуб


Создадим в директории src файл index.pug следующего содержания: 

html(lang="ru")
  head
    meta(charset="utf-8")
    title= "Pug. Начало работы"
  body
      h2 Hello, World!


Переходим в директорию src и выполняем команду: 

> pug --pretty index.pug


Чтобы следить за изменениями index.pug — нужно добавить ключ -w: 

> pug --pretty -w index.pug

Установка Gulp


Как работать с gulp — это тема для отдельной статьи, так что без подробностей. 

> npm install gulp --save-dev # из директории проекта
> npm install gulp-pug --save-dev # из директории проекта


Создаем файл gulpfile.js с тремя задачами для преобразования pug-файлов и отслеживания изменений. 

const gulp = require('gulp');
const pug = require('gulp-pug');

gulp.task('pug', function () {
    return gulp.src('src/*.pug')
        .pipe(pug({pretty: true}))
        .pipe(gulp.dest('dist'));
});

gulp.task('watch', function () {
    return gulp.watch('src/**/*.pug', gulp.parallel('pug'))
});

gulp.task('default', gulp.parallel('watch'));


Наш файл package.json сейчас имеет только три зависимости: 

{
  "devDependencies": {
    "gulp": "^4.3.0.2"
  }
}

Синтаксис Pug


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

1. Теги, классы, идентификаторы


Давайте создадим маркированный список: 

ul
    li Значение 1
    li Значение 2
    li Значение 3
<ul>
    <li>Значение 1</li>
    <li>Значение 2</li>
    <li>Значение 3</li>
</ul>


Теперь добавим css-классы нашей разметке: 

ul.list
    li.list__item Значение 1
    li.list__item Значение 2
    li.list__item Значение 3
<ul>
    <li>Значение 1</li>
    <li>Значение 2</li>
    <li>Значение 3</li>
</ul>


Добавим тегу <ul> еще и идентификатор: 

ul#items.list
    li.list__item Значение 1
    li.list__item Значение 2
    li.list__item Значение 3
<ul>
    <li>Значение 1</li>
    <li>Значение 2</li>
    <li>Значение 3</li>
</ul>

2. Атрибуты элемента


Чтобы указать атрибут элементу — достаточно указать его в круглых скобках: 

a(href="#", target="_blank") Ссылка
a(href="#" target="_blank") Ссылка
<a href="#" target="_blank">Ссылка</a>


Если атрибутов много, то можно указать их многострочными линиями: 

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


Если с атрибутами необходимо указать класс и/или индификатор, то указываются они до атрибутов.

3. Текст элемента


Текст элементу указывается через пробел, после символа | или после точки .: 

p.paragraph Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing elit.
p.paragraph
    | Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing elit.
p.paragraph.
    Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing elit.


Результат будет одинаковым: 

<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing elit.</p>

4. Буферизация и экранирование


Текст элементу можно присвоить — это что-то вроде работы с переменными. Как будто содержимое элемента — это переменная и мы присваиваем ей значение. При этом значение сперва вычисляется как javascript-выражение. И еще производится экранизация символов <, > и &. 

p.paragraph= 'Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing elit.'
p.paragraph
    = 'Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing elit.'
<p>Lorem ipsum &lt;em&gt;dolor&lt;/em&gt; sit amet, consectetur adipisicing elit.</p>


Чтобы избежать экранирования, надо использовать !=: 

p.paragraph!= 'Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing elit.'
p.paragraph
    != 'Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing elit.'
<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing elit.</p>

5. Вывод переменных


Есть два способа вывести значение переменной — с экранированием символов <, >, & и без экранирования. 

- var content = 'ipsum <em>dolor sit</em> amet'
p.paragraph Lorem #{content}, consectetur adipisicing elit.
p.paragraph Lorem !{content}, consectetur adipisicing elit.
<p>Lorem ipsum &lt;em&gt;dolor sit&lt;/em&gt; amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum <em>dolor sit</em> amet, consectetur adipisicing elit.</p>

6. Элемент внутри элемента


Давайте разместим изображение внутри параграфа: 

p.paragraph: img.image(src="picture.jpg" alt="Изображение")
<p><img src="picture.jpg" alt="Изображение"/></p>


Еще один пример — параграф, внутри которого <em> и ссылка: 

p Lorem ipsum <em>dolor</em> sit amet, consectetur #[a.link(href="page.html") adipisicing] elit.
<p>Lorem ipsum <em>dolor</em> sit amet, consectetur <a href="page.html">adipisicing</a> elit.</p>

7. Комментарии в коде


Однострочный комментарий начинается с символов // — такой комментарий будет виден в итоговом html-коде. Чтобы комментарий не попал в итоговый html-код — он должен начинаться с символов //-. 

// Этот комментарий виден в итоговом html-коде
p.paragraph Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing elit.
//- Этот комментарий будет удален из html-кода
p.paragraph: img.image(src="picture.jpg" alt="Изображение")
<!-- Этот комментарий виден в итоговом html-коде -->
<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing elit.</p>
<p><img src="picture.jpg" alt="Изображение"/></p>

8. Подключения (include)


Большим достоинством Pug является возможность подключения отдельных фрагментов кода. То есть можно выносить в отдельные фрагменты кода целые области сайта. Например, вынести в отдельные файлы header, sidebar, content, footer и все это собрать в одном индексном файле. 

// файл index.pug
doctype html
html(lang="ru")
    head
        meta(charset="utf-8")
        title Подключения (include)
    body
        include ./parts/header.pug
        include ./parts/content.pug 
        include ./parts/footer.pug 
// файл parts/header.pug
header Это шапка сайта
// файл parts/content.pug
div.content
    main Это основной контент сайта
    aside Это контент сайдбара сайта
// файл parts/footer.pug
footer Это подвал сайта


Итоговый файл index.html: 

<!-- файл index.pug -->
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Подключения (include)</title>
  </head>
  <body>
    <!-- файл parts/header.pug -->
    <header>Это шапка сайта</header>
    <!-- файл parts/content.pug -->
    <div>
      <main>Это основной контент сайта</main>
      <aside>Это контент сайдбара сайта</aside>
    </div>
    <!-- файл parts/footer.pug -->
    <footer>Это подвал сайта</footer>
  </body>
</html>

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


Наследование шаблонов работает через ключевые слова block и extend. В родительском шаблоне block — это просто заглушка, которая «резервирует» место. Дочерний шаблон на это «зарезервированное» место вставляет какой-то контент. При этом block в родительском шаблоне может иметь контент по умолчанию. А дочерний шаблон может либо заместить (replace) этот контент, либо дополнить его — append и prepend.


Родительский шаблон layout.pug: 

block variables
    - var title = 'Это мой сайт'
    - var head1 = 'Это заголовок по умолчанию'
    - var content = 'Это контент страницы по умолчанию'

doctype html
html(lang="ru")
    head
        title #{title}
        block scripts
            script(src='/js/jquery.js')
    body
        block header
            header Это шапка сайта
        block content
            main
                h2 #{head1}
                div.content
                    p #{content}
        block footer
            footer Это подвал сайта


Дочерний шаблон contact.pug: 

extends layout.pug

// этот блок будет замещен (replace)
block variables
    - var title = 'Контакты'
    - var head1 = 'Контактная информация'
    - var content = 'Контактная информация: адрес, почта, телефон'

// этот блок будет дополнен (append)
block append scripts
    script(src='/js/script.js')

// этот блок будет дополнен (prepend)
block prepend content
    // Этот комментарий будет добавлен на страницу в самое начало блока


Итоговый файл contact.html: 

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Контакты</title>
    <script src="/js/jquery.js"></script>
    <script src="/js/script.js"></script>
  </head>
  <body>
    <header>Это шапка сайта</header>
    <!-- Этот комментарий будет добавлен на страницу в самое начало блока -->
    <main>
      <h2>Контактная информация</h2>
      <div>
        <p>Контактная информация: адрес, почта, телефон</p>
      </div>
    </main>
    <footer>Это подвал сайта</footer>
  </body>
</html>

Поиск:
HTML • Web-разработка • JavaScript • Теория • Pug • Верстка

[3.1.1] PUG — Установка и настройка

pug_access_mode // Режим доступа к серверу
pug_password_field // Пароль для setinfo
pug_default_access // Доступ для обычных игроков по умолчанию
pug_eac_url // URL который будет отображаться на скриншотах EAC
pug_eac_url_format // URL для EAC
pug_version // Показать версию мода Pug
pug_players_min // Минимальное число игроков для начала игры (Не используется в файле конфига)
pug_players_max // Максимум игроков в командах (Не используется в файле конфига)
pug_players_min_default // Минимальное число игроков для начала игры (Это значение будет сбрасывать минимум игроков после каждой смены карты)
pug_players_max_default // Максимум игроков для сброса (Это значение будет сбрасывать максимум игроков после каждой смены карт)
pug_rounds_max // Сколько раундов требуется сыграть перед началом Овертайма
pug_rounds_overtime // Число раундов в Овертайме (суммарно)
pug_allow_overtime // Разрешить Овертайм (Если ноль, игра может end tied)
pug_intermission_time // Время для сброса и перезагрузки PUG после окончания игры
pug_allow_spectators // Позволить зрителям находиться на сервере
pug_allow_hltv // Разрешить HLTV
pug_retry_time // Время между отсоединением и повторным подключением к серверу(антиреконнект)
pug_force_ready_time // Выставляет принудительную готовность игрока в это время (если 0, то функция неактивна)
pug_force_ready_kick // Кикает неготовых игроков (если 0, то игроки автоматически признаются готовыми)
pug_force_auto_swap // Автообмен команд без учёта системы готовности если команды заполнены
pug_force_restart // Принудительный рестарт после обмена команд
pug_switch_delay // Задержка перед обменом команд местами при прошествии половины игры(Half-Time)
pug_block_shield // Блокировать щит
pug_block_grenades // Блокировать гранаты во время разминки
pug_show_money // Показывает деньги команды при каждом возрождении
pug_vote_delay // как долго длится голосование
pug_vote_percent // Разница между голосами для определения победителя
pug_vote_map_enabled // Включить Votemap в PUG
pug_vote_map // Будет ли текущая карта в голосовании Votemap (не используется конфиг Pug)
pug_vote_map_same // Добавляет текущую карту в меню Votemap
pug_show_scores // Показать очки после голосования за карту
pug_teams_enforcement // Метод назначения команд (0 = голосование, 1 = капитаны, 2 = автоматически, 3 = никак, 4 = скилл)
pug_teams_kniferound // Раунд на ножах после выбора команд и игроков
pug_show_votes // Как показать итоги голосования (1 = чат, 2 = Hud)
pug_hlds_votes // Включает обычные команды голосования HLDS, такие как vote и votemap
pug_vote_kick_percent // Процент для кика при голосовании Vote Kick
pug_vote_kick_teams // Vote Kick только для тиммейтов
pug_config_pugmod // Конфиг, используемый для кваров мода
pug_config_warmup // Разминка в PUG
pug_config_start // Используется в начале голосования
pug_config_live // Используется после начала матча (То есть в игре)
pug_config_halftime // Используется при достижении половины игры(Half-Time)
pug_config_overtime // Используется во время Овертайма
pug_config_end // Этот конфиг используется после окончания матча
pug_sql_host // адрес сервера SQL
pug_sql_user // пользователь сервера SQL
pug_sql_pass // пароль к серверу SQL
pug_sql_db // Имя базы данных
pug_bans_url // URL страницы с банами
pug_require_register // Кикать игроков, не зарегистрированных в БД
pug_leaves_ban // Забанить игрока, слишком часто выходящего с сервера
pug_leaves_bantime // Time to ban when reach leave infraction times (In minutes)
pug_ranked_server // Rank the server to database
pug_web_url // URL of stats pages for pug mod
pug_hltv_host // IP  сервера HLTV
pug_hltv_port // порт сервера HLTV
pug_hltv_pass // пароль к серверу HLTV (Rcon|adminpass)
pug_hltv_demo_dir // Суб-Директория для демок (Всё хранится в папке cstrike)
pug_hltv_demo_name // Префикс названия демки (по умолчанию что-то типа pug-1504070051-de_dust2.dem)

Использование webpack для верстки. Подключение Pug

Использовать webpack для верстке многостраничных сайтов легко.

В текущей сборке уже готово:

  • Подключен babel7 — js код автоматический перегонится в старый стандарт и будет работать во всех браузерах
  • Весь js код автоматический поджимается
  • Подключен SASS (scss) с удобной настройкой под себя
  • По желанию можно использовать обычный css
  • autoprefixer — префиксы расставятся автоматический, css код будет валидным во всех браузерах
  • Все стили будут максимально поджаты с cssnano и mq-packer
  • Настроен livereload — авто обновление страницы при любых изменениях в js, css, html
  • Авто сплиты для js и css файлов
  • Подключен vue.js с удобной интеграцией шаблонов напрямубю в хтмл
  • Автоматический или ручной подхват html страниц
  • Константы для удобной конфигурации шаблона под себя

Webpack для верстки

Первый вариант — без использования шаблонизатора pug:

Первый шаг скачать текущую сборку — ссылка на прямое скачивание или репозиторий на GitHub

Далее следовать простым командам:

    // Установить все зависимости
    npm install
    // Запустить сервер для дев разработки (http://localhost:8081/)
    npm run dev
    // Команда для деплоя (папка на выходе будет как dist)
    npm run build

Более подробную инструкцию можно найти в README.md — ссылка здесь

Исходный код: https://github.com/vedees/webpack-template

Webpack 4 Подключение и настройка pug и pug-loader:

Для устновки pug и pug-loader в терминале:

    npm i pug pug-loader --save-dev

Далее нужно добавить обработчик для pug файлов:

       {
          test: /\.pug$/,
          loader: 'pug-loader'
        }

Обработка pug страниц:

Первое, что нужно сделать это указать, что будем обрабатывать и откуда брать pug файлы:

    const PAGES_DIR = `${PATHS.src}/pug/pages/`
    const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.pug'))

Далее есть два способа обработки. Первый способ — автоматическое добавление страниц:

        ...PAGES.map(page => new HtmlWebpackPlugin({
          template: `${PAGES_DIR}/${page}`,
          filename: `./${page.replace(/\.pug/,'.html')}`
        }))

Второй способ — ручной (можно легко связывать с первым способом) :

        new HtmlWebpackPlugin({
          template: `${PAGES_DIR}/about/index.pug`,
          filename: './about/index.html',
          inject: true
        }),
        new HtmlWebpackPlugin({
          template: `${PAGES_DIR}/about/portfolio.pug`,
          filename: './about/portfolio.html',
          inject: true
        })

В пример привел страницы индекс и абаут из директории about.

Теперь осталось создать страницы для пага, а также главные лаяуты с инклюдами.
Все ваши вопросы есть в ридми, но если вы не найдете свой вопрос то можете задать его здесь или на ютубе!

Весь исходный код: — https://github.com/vedees/webpack-template-pug

учебник по pug.js | Глава 2 | Узнайте, как установить pug

В этой части серии уроков по мопсу мы узнаем, как начать работу с мопсом.
Узнаем, как установить мопса.

Предпосылки для начала работы с мопсом следующие:

  1. Node.js:
    Вы можете скачать его здесь.
    После завершения установки мы можем проверить номер версии установленного узла .js с помощью
    следующая команда:

    
> узел -v
v8.5.0

    Вы можете узнать больше о node.js из нашей серии руководств по node.js 30 дней использования node.

  2. NPM: Он будет установлен автоматически при установке node.js .
    Вы можете проверить номер версии установленного npm , используя следующую команду:

    
> npm -v
5.5.1

    Вы можете узнать больше о npm здесь.

Вот и все. У нас все готово к установке pug .

Ниже приведены варианты, предоставляемые pug-cli:


> мопс -h
-h, --help вывести информацию об использовании
-V, --version вывести номер версии
-O, --obj  Объект или файл параметров JSON / JavaScript
-o, --out  выводить обработанный HTML или скомпилированный JavaScript в
                       
-p, --path <путь> имя файла, используемое для разрешения, включает
-P, --pretty компилировать красивый HTML-вывод
-c, --client функция компиляции для клиентской среды выполнения.js
-n, --name  имя скомпилированного шаблона (требуется --client)
-D, --no-debug компилировать без отладки (меньшие функции)
-w, --watch отслеживать файлы на предмет изменений и автоматически перерисовывать
-E, --extension  указать расширение выходного файла
-s, --silent не выводить логи
--name-after-file имя шаблона после последнего раздела файла
                       путь (требуется --client и заменяется --name)
--doctype  указать тип документа в командной строке (полезно, если он
                       не указано в шаблоне)

Проверка версии pug и pug-cli :


> мопс -V
версия мопса: 2.0,0-rc.4
версия pug-cli: 1.0.0-alpha6

В этой статье мы узнаем о предпосылках для установки pug. Также узнаем, как можно установить pug
и pug-cli . Также мы узнаем обо всех возможностях pug-cli с помощью простого
пример.

Вы можете клонировать все фрагменты, представленные в этой серии, с нашего github.
репо: