Существуют десятки шаблонизаторов, среди которых есть такие варианты, как Smarty , Twig (используется в следующей версии Drupal) и Blade (по умолчанию для Laravel), среди которых, как и ванильный PHP, конечно. Отказавшись от PHP, eRuby / ERB и Haml для Ruby / Ruby on Rails, а также Javascript имеют множество популярных вариантов, включая Mustache , Handlebars , Hogan и EJS . Некоторые из них имеют несколько иной синтаксис, а некоторые более заметно.
Одним из них, который значительно отличается от большинства, является Jade , движок, обычно связанный с приложениями Javascript — например, он поддерживается из коробки Express для Node.js. Это Джейд, которую я собираюсь посмотреть в этой статье; или, более конкретно, порт PHP JadePHP .
Хамл и Джейд
Было бы упущением говорить о Jade, не упоминая Haml, откуда Jade черпал вдохновение — и действительно, есть несколько библиотек для использования Haml с PHP. Джейд разделяет его общую философию, которая заключается в том, чтобы сделать шаблоны «красивыми» и использовать то, что авторы описывают как шаблоны «хайку». Что бы это ни значило на самом деле, нельзя отрицать, что Хэмл и Джейд имеют некоторые общие черты, которые делают их принципиально отличающимися от большинства шаблонных языков.
Какая разница?
Большинство шаблонизаторов включают в себя написание целевой разметки и «внедрение» ее с заполнителями и / или базовой логикой — в некотором смысле надмножеством. Jade все еще имеет заполнители и логику, но также предоставляет сокращение для написания XML-подобных элементов. Обычно это означает HTML, хотя вы также можете использовать его для таких вещей, как RSS, а также сам XML.
На самом деле, если вы хотите, вы можете просто использовать Jade как сокращение для HTML, не пользуясь его более «традиционными» шаблонными функциями.
Как пользоваться репозиторием
Скорее разочаровывает, код в настоящее время не доступен через Composer — хотя это должно быть достаточно простой задачей, чтобы упаковать его, если у кого-то есть час или два. Однако вы можете заставить его работать, клонируя репозиторий и добавляя в него « require или require » файл autoload.php.dist (репозиторий Github включает в себя Symfony UniversalClassLoader ).
Вот пример, адаптированный из приведенного в README проекта, в котором предполагается, что хранилище было загружено в каталог с именем jade :
require('./jade/autoload.php.dist'); 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);
Это скомпилирует файл template.jade и echo его содержимое.
Где вы на самом деле используете это, зависит от вашего рабочего процесса, от того, используете ли вы фреймворк и так далее. Возможно, вы могли бы использовать такой сервис, как 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 выглядит совсем не так, как вы привыкли. Нет угловых скобок и закрывающих тегов, для начала. Также нет фигурных скобок, двойных фигурных скобок или каких-либо распространенных подходов к разметке переменных, которые будут введены в шаблон. (Тем не менее, вы можете использовать синтаксис двойной фигурной скобки, но он не является частью Jade, как таковой.)
То, что он показывает, является очень кратким методом генерации разметки. Давайте посмотрим на полученный HTML:
<!DOCTYPE html> <html lang="en-us"> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" /> <title dir="ltr"><?php echo pageTitle ?></title> <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</h1> </header> <div id="content"> <div class="inner"> <?php echo $bodyContent ?> </div> </div> <script data-main="js/main.js" src="js/libs/require.js"></script> </body> </html>
Давайте рассмотрим ключевые строки в шаблоне Jade, чтобы понять, как работает сокращение для HTML.
!!! 5 !!! 5 является сокращением для типа документа HTML5. Это единственное место, где вы увидите синтаксис тройного восклицательного знака. Вы также можете использовать !!! xml !!! xml для получения <?xml version="1.0" encoding="utf-8" ?> , для переходного периода вы можете использовать !!! transitional !!! transitional для получения <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> или по умолчанию !!! default !!! default вы получите <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> .
НОТА; в последней версии Jade со вкусом Javascript
!!! 5!!! 5объявление было заменено наdoctype html; возможно — хотя, возможно, маловероятно, если смотреть на отсутствие активности репозитория Github — JadePHP последует его примеру.
HTML-тег определяется только его именем, без необходимости его закрывать; например:
body header
… Если бы вы остановились там, это привело бы к:
<body> <header></header> </body>
Обратите внимание, как структура документа представлена с использованием отступов.
Вы можете поместить содержимое тега после его имени с пробелом между ними:
h1 My Jade Application
… становится:
<h1>My Jade Application</h1>
Если вы хотите разбить большие блоки контента на несколько строк, используйте символ «|»:
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.
Это компилируется в:
<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.</p>
Вы можете использовать формат, подобный селекторам CSS, для добавления идентификаторов и классов в элементы HTML:
div#content div.inner
… Приводит к:
<div id="content"> <div class="inner">
Другие атрибуты, такие как src , href , lang , media т. Д., Могут быть указаны с помощью круглых скобок:
html(lang="en-us") === <html lang="en-us"> link(rel="stylesheet", media="screen", href="/css/styles.css") === <link rel="stylesheet" media="screen" href="/css/styles.css" />
Знак равенства используется для подстановки переменных. Как вы можете видеть выше, когда вы компилируете шаблон Jade, он конвертирует что-то вроде этого:
= $pageTitle
… в следующее:
<?php echo $pageTitle ?>
Добавляем немного логики
Вы можете использовать тире, чтобы ввести базовую условную логику. Вот конкретный пример:
header h1= $pageTitle - if ($loggedIn): p.greeting Welcome back! - else: a(href="/login") Please login - endif;
Когда вы компилируете шаблон, это приведет к следующему:
<header> <h1><?php echo $pageTitle ?></h1> <?php if ($loggedIn) ?> <p class="greeting">Welcome back!</p> <?php else ?> <a href="/login">Please login</a> <?php endif ?> </header>
Итерация повторяет очень похожие строки:
ul - foreach ($items as $item): li= $item
фильтры
Вы можете использовать фильтры, чтобы взять блок текста и обработать его некоторым образом, например:
:php | $value = 10; | $computed_value += 100; | print $computed_value;
… Оценим:
<?php $value = 10; $computed_value += 100; print $computed_value; ?>
Возможно, более полезными являются фильтры javascript и CSS, например:
:style | body { | background: yellow; | }
… Оценим:
<style type="text/css"> 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 — по поводу ряда шаблонных опций — это если вы переключаетесь между технологиями. Если вы часто переключаетесь между, скажем, Node.js и разработкой PHP, тогда есть некоторая логика в поддержании согласованности. Зачем осваивать один движок, а затем использовать что-то другое полностью, если оно доступно для нескольких языков?
Резюме
В этой статье я рассмотрел JadePHP, порт Javascript-ориентированного движка шаблонов Jade. Я дал вам несколько советов о том, как его использовать, и несколько идей о том, почему вы можете его использовать. Собираетесь ли вы попробовать или это кажется вам излишне лаконичным? Дайте мне знать, что вы думаете об этом в комментариях.