[Из песочницы] Введение в JadePHP29.05.2014 03:03

По предложению автора интересностей и полезностей для веб-разработчика #17, предлагаю свой перевод статьи 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 или Resource Watcher, чтобы следить за файловой системой и изменениями в ваших 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:

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

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

HTML тэг указывается по одному его имени, без необходимости его закрытия. Например: body header … если бы вы остановились на этом, привело бы к следующему результату:

h1 My Jade Application … становится

My Jade Application

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.