Введение в JadePHP

Предлагаю свой перевод статьи Introduction to JadePHP .

Существуют десятки шаблонизаторов. Среди наиболее известных можно выделить Smarty , Twig (используется в следующей версии Drupal), Blade (используется по умолчанию в Laravel) и, конечно же, vanilla PHP. Если не говорить конкретно о PHP, то для eRuby / ERB и Haml для Ruby / Ruby on Rails и Javascript есть ряд популярных вариантов, как например Mustache , Handlebars , Hogan и EJS . У одних различия в синтаксисе незначительные, у других они более выраженные.

Шаблонизатор Jade , который значительно отличяется от других, обычно ассоциируется с JavaScript приложениями, например он поддерживается в Express для Node.js. В этой статье, я поговорю о Jade или, более конкретно, о Jade сделанной для PHP - JadePHP .

Haml и Jade Было бы неправильно говорить о Jade, не упомянув Haml, который был вдохновляющей идеей для Jade. И в самом деле, существуют несколько библиотек для поддержки Haml в PHP. Jade придерживается той же философии что и HAML, то есть создание «красивых» шаблонов и то что авторы называют шаблонизацией «хайку». Что бы это не значило, у Haml и Jade есть некоторые одинаковые качества, которые фундаментально отличают их от большинства других шаблонизаторов.В чем разница? Большинство шаблонизаторов предполагают написание конечной разметки с «внедрением» в нее placeholder"ов а и основной логики. У Jade же есть не только placeholder"ы и логика, но и способ для сокращенного написания XML подобных элементов. В общем, это означает HTML, хотя вы можете использовать это для RSS и собственно XML.

В сущности, если вы хотите, то вы можете использовать Jade как сокращения для HTML без его «традиционных» шаблонизаторских возможностей.

Как использовать репозиторий К сожалению, в настоящий момент код недоступен через Composer , хотя его не трудно запаковать, если у кого-то найдется час другой. Но вы можете его запустить, клонировав репозиторий и включив autoload.php.dist (Github репозиторий включает UniversalClassLoader из Symphony).

Ниже, адаптированый пример из README проекта. Предполагается, что репозиторий был помещен в директорию jade .

Use Everzet\Jade\Dumper\PHPDumper, Everzet\Jade\Visitor\AutotagsVisitor, Everzet\Jade\Filter\JavaScriptFilter, Everzet\Jade\Filter\CDATAFilter, Everzet\Jade\Filter\PHPFilter, Everzet\Jade\Filter\CSSFilter, Everzet\Jade\Parser, Everzet\Jade\Lexer\Lexer, Everzet\Jade\Jade; $dumper = new PHPDumper(); $dumper->registerVisitor("tag", new AutotagsVisitor()); $dumper->registerFilter("javascript", new JavaScriptFilter()); $dumper->registerFilter("cdata", new CDATAFilter()); $dumper->registerFilter("php", new PHPFilter()); $dumper->registerFilter("style", new CSSFilter()); // Initialize parser & Jade $parser = new Parser(new Lexer()); $jade = new Jade($parser, $dumper); $template = __DIR__ . "/template.jade"; // Parse a template (both string & file containers) echo $jade->render($template);
Этот код скомпилирует файл tempalte.jade и покажет его содержимое.

То где это можно применить, зависит от вашего рабочего процесса, например, используете ли вы framework и т.д. К примеру, можно было бы использовать сервис вроде Watchman , Guard или , чтобы следить за файловой системой и изменениями в ваших Jade шаблонах, и компилировать их в определенное время в процессе разработки.

Простой пример Рассмотрим простой пример, который отобразит полную HTML страницу с двумя переменными, пока без логики.
!!! 5 html(lang="en-us") meta(charset="utf-8") meta(http-equiv="X-UA-Compatible", content="IE=Edge;chrome=1") title(dir="ltr")= pageTitle meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", media="screen", href="/css/styles.css") body header h1 My Jade Application div#content div.inner =$bodyContent script(data-main="js/main.js", src="js/libs/require.js")
Важно: нужно использовать два пробела для отступа. На данный момент это единственный метод понятный Jade PHP. Иначе возникнут ошибки или это будет некорректная разметка.
Сразу становится очевидным, Jade довольно отличается от привычного HTML. Во-первых, у него нет угловых скобок < > и закрывающих тэгов. А также нет фигурных скобок, двойных фигурных скобок или других общепринятых способов для обозначения переменных в шаблонах. (Тем не менее вы можете использовать синтаксис с двойными фигурными скобками. Но это не является частью Jade).

Jade выглядит как очень сжатый метод для генерирации разметки. Посмотрим на итоговый HTML:
My Jade Application

Пройдемся по всем ключевым строкам в шаблоне Jade, для того чтобы понять, как работают HTML сокращения.

5 - сокращение для HTML5 doctype. Это единственное место, где вы увидите тройной восклицательный знак в синтаксисе. Вы также можете использоывать!!! xml , чтобы получить . Для transitional , вы можете использовать!!! transitional чтобы получить . По умолчанию!!! default даст

Примечание: в последней версии Jade, приправленной JavaScript, объявление!!! 5 было изменено на doctype html . Возможно, JadePHP последует этому примеру, хотя наверное врядли, судя по отсутсвию активности на Github.
HTML тэг указывается по одному его имени, без необходимости его закрытия. Например:
body header
… если бы вы остановились на этом, привело бы к следующему результату:

Заметьте, как структура документа представлена с отступами.

Вы можете поместить содержимое тэга после его имени с пробелами:

H1 My Jade Application
… становится
My Jade Application
Если вы хотите разбить большие блоки с содержанием на строки, используйте символ вертикальной черты |:
p | Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. | Aenean eu leo quam. | Pellentesque ornare sem lacinia quam venenatis vestibulum.
Это скомпилируется в:

Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Вы можете использовать формат схожий с CSS селекторами для добавления id и class атрибутов в HTML элементы:
div#content div.inner
… приводит к:

Другие атрибуты как src, href, lang, media, и т.д. могут быть указаны, используя круглые скобки:
html(lang="en-us") === link(rel="stylesheet", media="screen", href="/css/styles.css") ===
Знак равно используется для подстановки переменных. Как видно выше, когда вы компилируете Jade шаблон, он конвертирует:
= $pageTitle
в следующее:

Добавляем немного логики Вы можете использоывать тире для условной логики. Вот конкретный пример:
header h1= $pageTitle - if ($loggedIn): p.greeting Welcome back! - else: a(href="/login") Please login - endif;
Если скомпилировать этот шаблон, в результате получится следующее:

Welcome back!

Please login
Для циклов код очень схожий:
ul - foreach ($items as $item): li= $item Фильтры У JadePHP есть возможность использовать фильтры для обработки блоков текста разными способами. Например:
:php | $value = 10; | $computed_value += 100; | print $computed_value;
…будет преобразован в:

Вероятно более полезные фильтры будут для JavaScript и CSS. Например:
:style | body { | background: yellow; | }
…будет преобразован в:
body { background: yellow; }
Устанавливаются эти фильтры следующим образом (смотри пример с кодом выше для понимания контекста этих объявлений):
$dumper->registerFilter("javascript", new JavaScriptFilter()); $dumper->registerFilter("php", new PHPFilter()); $dumper->registerFilter("style", new CSSFilter());
Первый аргумент - это текст, который вы размечаете в своем шаблоне с добавлением двоеточия. Для примера выше вы можете использовать:javascript , :php и:style соответственно.

Если включить Everzet\Jade\Filter\FilterInterface , то вы даже можете определять свои собственные фильтры.

Зачем использовать Jade? Споры о том какие шаблонизаторы использовать, в конечном счете, довольно бесполезны. Вы можете сделать тесты, для того чтобы определить какие шаблонизаторы являются лучше по производительности в различных условиях, а какие больше подходят в определенных средах, например на клиенте или сервере. Но в конечном итоге, выбор часто зависит от того что для вас комфортнее. У меня нет намерений подливать масла в огонь, так же как и учавствовать в спорах о лучшем языке програмирования.

Метод сокращения Jade не для всех. Одни люди будут утверждать что его легче читать, а другие страстно с этим не согласятся. Но если вы считаете что это достойный метод, то это уже хороший повод его выбрать.

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

Резюме В этой статье я рассмотрел JadePHP, портированный шаблонизатор Jade, изначально ориентированный на JavaScript. Я дал вам несколько наводок на то, как его использовать, и идей о том, зачем он вам может понадобится. Попробуете ли вы его, или он кажется вам необоснованно сжатым? Напишите что вы о нем думаете в комментариях.

Является одним из популярных шаблонизаторов.

В большинстве случаев в процессе верстки сайта на чистом HTML разработчику будет не хватать его возможностей. Давайте рассмотрим основные преимущества Pug .

Теги

Прежде всего давайте обратим внимание на то, что в Pug теги не закрываются — это осуществляется с помощью табуляции.

Ul li Пункт 1 li Пункт 2 li Пункт 3

Результат:

Пункт 1
Пункт 2
Пункт 3

В данном шаблонизаторе используется минимум уголков и скобочек. Это удобно и способствует ускорению работы верстальщика (об этом, кстати, написано в моей вступительной ).

Атрибуты

Атрибуты записываются в скобках. Несколько атрибутов преимущественно перечисляются через пробел (хотя можно и через запятую).

Input(type="text" placeholder="search")

Результат:

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

Content

Результат:

Подключение файлов

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

#page include pug/block-header include pug/block-skills

Результат:

Мне всегда не хватало этой функции в HTML, т.к. на странице может быть очень много блоков, а держать весь код в одном файле не очень удобно.

Комментирование

Комментирование бывает двух видов: первый вид комментария виден только в шаблоне, второй попадает и в HTML.

Body //- Комментарий виден только в шаблоне Это многострочный комментарий // Комментарий виден в Pug шаблоне и попадает в HTML Это многострочный комментарий

Результат:

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

Наследование шаблонов — это главная «плюшка» шаблонизаторов. Например, у вас есть шаблон страницы base.pug:

Html head title My Site - #{title} block scripts script(src="/jquery.js") body block content block foot #footer p милые котики захватили мир

И есть главная страница (она наследуется от базового шаблона):

Extends base.pug block scripts script(src="/pets.js") block content h1= Заголовок img(src="images/pets/unicorn.png" alt="")

То есть, в какой-то степени вы избегаете копирования и дублирования кода. Зачем копировать, если у всех страниц одна и та же структура? Для этого и нужны наследования. На чистом HTML такого точно нет.

Миксины

Так же существует возможность создавать миксины. Допустим, нужен быстрый способ разместить большое количество статей на сайте:

Mixin article(title) .article .article-wrapper h1= title if block block else p Текст статьи не добавлен //- используем миксину +article("Привет, мир!") +article("Привет, мир!") p Текст статьи p Текст статьи

Результат:

Привет, мир!

Текст статьи не добавлен

Привет, мир!

Текст статьи

На чистом HTML нет ничего подобного. Просто пришлось бы монотонно дублировать код статьи, менять ей текст, и так далее, пока не заполнятся все статьи — получилось бы очень много кода, в котором легко потеряться.

Код

Шаблонизатор позволяет, например, использовать Java Script прямо в шаблоне:

For (var x = 0; x < 3; x++) li Пункт

Результат:

Пункт

Пример с экранированием:

P != "Этот код не экранирован!"

Перевод
Tutorial

Jade - это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js. Проще говоря, Jade - это именно то средство, которое предоставляет вам возможность написания разметки совершенно по новому, с целым рядом преимуществ по сравнению с обычным HTML.
К примеру, взгляните на код ниже в формате HTML:
Ocean"s Eleven

Comedy
Thriller

Danny Ocean and his eleven accomplices plan to rob three Las Vegas casinos simultaneously.

А так эта разметка выглядит в формате Jade:
div h1 Ocean"s Eleven ul li Comedy li Thriller p. Danny Ocean and his eleven accomplices plan to rob three Las Vegas casinos simultaneously.
Второй вариант кажется более коротким и элегантным. Но Jade - это не только симпатичная разметка. Jade имеет некоторые действительно полезные функции, позволяющие писать модульный многоразовый (с возможностью многоразового использования) код. Но перед тем, как углубиться, давайте сделаем обзор основ.

Основы Я собираюсь выделить три основные черты Jade:

Простые теги;
Добавление атрибутов в теги;
Блоки текста.

Если вы хотите входе прочтения статьи пробывать примеры кода приведённые ниже, вы можете воспользоваться CodePen и выбрать Jade как препроцесор для вашего HTML, или воспользуйтесь онлайн компилятором на официальном сайте Jade .Теги Как вы могли заметить ранее, в Jade нет закрывающих тегов. Вместо этого Jade использует табуляцию для определения вложености тегов.
div p Hello! p World!
В приведенном выше примере, теги параграфов согласно их табуляции при компиляции в конечном итоге окажутся внутри тега div. Как просто!

Jade компилирует это точно, рассматривая первое слово в каждой строке в качестве тега, в то время как последующие слова на этой строке обрабатываются как текст внутри тега.Атрибуты Всё это, конечно, хорошо, но как добавлять атрибуты нашим тегам? На самом деле довольно просто.
Давайте вернёмся к нашему первому примеру и добавим туда пару классов и некую картинку-постер.
div(class="movie-card", id="oceans-11") h1(class="movie-title") Ocean"s 11 img(src="/img/oceans-11.png", class="movie-poster") ul(class="genre-list") li Comedy li Thriller
Как чудестно, не так ли?
Ocean"s 11

Comedy
Thriller

Но зачем останавливаться на достигнутом?! Jade предоставляет специальную стенографию для индификаторов и классов, что ещё больше упрощает нашу разметку, используя знакомые всем обозначения:
div.movie-card#oceans-11 h1.movie-title Ocean"s 11 img.movie-poster(src="/img/oceans-11.png") ul.genre-list li Comedy li Thriller

Как вы можете заметить, Jade использует синтаксис анологичный тому, который вы используете при написании CSS-селекторов.

Блоки текста Давайте представим такую ситуацию: у вас есть тег и вы хотите добавить в него довольно таки большой объём текста. Но стоп, ведь Jade рассматривает первое слово каждой строки как новый HTML-тег - и как тут быть?

В самом первом примере вы уже могли заметить невзрачную точку после тега параграфа. Добавление точки после вашего тега даёт понять компилятору Jade, что всё внутри данного тега является текстом.
div p How are you? p. I"m fine thank you. And you? I heard you fell into a lake? That"s rather unfortunate. I hate it when my shoes get wet.

Для полной ясности: в случае, если я не поставил бы точку после тега в примере, то скомпилированный HTML имел бы в себе открытый тег , разорвав словосочетание “I’m” в начале строки.

Полезные функции Теперь, когда мы разобрались с основами, давайте рассмотрим некоторые в действительности полезные функции, которые сделают нашу разметку умнее. Среди них:

JavaScript;
Циклы;
Интерполирование;
Миксины.

JavaScript в Jade Jade реализован на JavaScript, по этому использовать JavaScript в Jade довольно просто. Вот пример:
5 img(src="img/thumbs-up") else img(src="img/thumbs-down") ul.genre each genre in movie.genres li= genre for movie in movieList +movie-card(movie)
А так код будет выглядеть после компиляции:
Ocean"s Eleven

Cast

Julia Roberts
George Clooney
Brad Pitt
Andy Garcia

Comedy
Thriller

Pirates of the Carribean

Cast

Johnny Depp
Keira Knightley
Orlando Bloom

Adventure
Comedy

Но стоп, погодите минутку! А что, если теперь нам нужна возвожность переходить на IMDB-страницу фильма при нажатии на его название? Нам всего лишь потребуется добавить одну строку

в наш миксин.
mixin movie-card(movie) div.movie-card a(href=movie.imdbURL) h2.movie-title= movie.title img.movie-poster(src=movie.posterImage) h3 Cast ul.cast each actor in movie.cast li= actor div.rating if movie.rating > 5 img(src="img/thumbs-up") else img(src="img/thumbs-down") ul.genre each genre in movie.genres li= genre Теги Как вы могли заметить ранее, в Jade нет закрывающих тегов. Вместо этого Jade использует табуляцию для определения вложености тегов.
div p Hello! p World!
В приведенном выше примере, теги параграфов согласно их табуляции при компиляции в конечном итоге окажутся внутри тега div. Как просто!

Jade компилирует это точно, рассматривая первое слово в каждой строке в качестве тега, в то время как последующие слова на этой строке обрабатываются как текст внутри тега.Атрибуты Всё это, конечно, хорошо, но как добавлять атрибуты нашим тегам? На самом деле довольно просто.
Давайте вернёмся к нашему первому примеру и добавим туда пару классов и некую картинку-постер.
div(class="movie-card", id="oceans-11") h1(class="movie-title") Ocean"s 11 img(src="/img/oceans-11.png", class="movie-poster") ul(class="genre-list") li Comedy li Thriller
Как чудестно, не так ли?
Ocean"s 11

Comedy
Thriller

JavaScript;
Циклы;
Интерполирование;
Миксины.

Cast

Julia Roberts
George Clooney
Brad Pitt
Andy Garcia

Comedy
Thriller

Pirates of the Carribean

Cast

Johnny Depp
Keira Knightley
Orlando Bloom

Adventure
Comedy

Важное примечание: как некоторые из вас, возможно, уже знают, Jade был переименован в Pug. В будущем, статьи о Jade будут использовать новое название «Pug» или «Pug.js».

Вы можете помочь и перевести немного средств на развитие сайта

Комментарии (73):

Михаил Семин, 16.03.2017

Начало работы с Jade (Pug.js) Что такое Jade?

Jade - это препроцессор HTML, а также шаблонизатор, написанный на JS для Node.js. Если говорить более понятным и простым языком, то можно сказать, что Jade - незаменимый инструмент при верстке сайтов. Почему незаменимый? Да потому, что он сэкономит Вам кучу времени, не говоря уж про удобство написания кода.

В качестве примера приведу простой код, сначала простой HTML, а потом с использованием Jade.

Lorem ipsum ...

first
second
over9999

Теперь Jade:

Main p Lorem ipsum ... ul li first li second li over9999 p Easy!

Что же проще? Ответ, по-моему, очевиден.

Однако, Jade – это не просто красивая разметка, этот препроцессор имеет реально полезные функции, некотороые из них могут быть использаны по нескольку раз. Перед углублением «пробежимся» по основам.

Основы

В процессе обучения Вы можете сами тестить свой код на официальном онлайн-комплияторе Jade to HTML.

Теги

Начнем с тегов. Как Вы могли заметить, в Jade полностью отсутствуют закрывающие теги, закрывающие теги добавляются при комплияции автоматически. Однако, спешу Вас разочаровать и предупредить с неправильно закрытыми тегами, если Вы предпочитаете неструктированный код, то можете отформатировать код с помощью сервиса ().

Div p Мама, привет! p Все, пока.

Мама, привет!

Все, пока.

Как можно заметить, теги

Имеют отступ относительно тегу в один таб, поэтому скомпилировано корректно.

Идентификаторы

Да, то, что мы умеем создавать блоки, а внутрь помещать текст это круто. Поэтому давайте научимся давать нашим блокам идентификаторы, ведь для них будет применен стиль в будущем, так ведь?

Div.main-wrapper h1.main-title Hello, world! h2.main-second-title#main-second-title class + id ul.main-list li.first First li.second Second

Hello, world! class + id

First
Second

Длинный текст

Как Вы могли уже понять, что каждое первое слово строчки в Jade – атрибут HTML. Как же тут быть, если необходимо разместить достаточно длинный текст?

Добавление точки к тегу дает Jade понять, что все находящиеся внутри тега – это текст.

Div.main-text p Is it lorem ipsum? p. Yes, it is! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Is it lorem ipsum?

Yes, it is! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Функции

Когда мы изучили основы, можно перейти к чему-нибудь посложнее, например, к некоторым функциям в Jade:

JavaScript;
Циклы;
Mixin (миксины);
Интерполирование.

Как ранее известно, Jade основан на JavaScript, поэтому проблем с использованием JS в Jade не будет.

Сделаем простенький цикл:

Var x = 5; div ul - for (var i=1; i

Введение в JadePHP

Еще на эту тему:

Другие статьи: