3. Уроки Express.js. Шаблонизация с EJS: Layout, Block, Partials
В реальной жизни у нас обычно больше, чем один шаблон. Более того, если уж так получилось, что мы делаем сайт со страницами, то, как правило, бывает так, что у нас множество страниц есть в одинаковом оформлении. Шаблонная система должна это предусматривать. К сожалению, ejs не очень хорошо с этим справляется. Поэтому, мы сейчас поставим немного другую систему для шаблонизации , которая называется ejs-locals(добавим в app.js):
1 2 3 | app.engine('ejs', require('ejs-locals')); app.set('views', __dirname + '/templates'); app.set('view engine', 'ejs'); |
Это почти то же самое, что и ejs, но в ней есть важные возможности, а именно, layout, block, partials. Мы сейчас их посмотрим.
Устанавливаем модуль:
npm i ejs-locals
Мы использовал директиву app.engine, чтобы сказать Express – “файлы с таким расширением нужно обрабатывать таким шаблонным движком require('ejs-locals') , а не стандартным ejs“.
Еще раз обращаем ваше внимание, есть множество отличных систем для шаблонизации в Node.js. Мы здесь ejs используем просто потому, что она очень похожа на HTML и требует минимального времени на изучение.
Смотрим шаблон в template/index.ejs , теперь он будет выглядеть так:
1 | <p class="lead">Hey all!</p> |
Далее создадим template/layout/page.ejs c таким кодом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <title><%=blocks.title%></title> <link rel="stylesheet" href="/vendor/bower_components/bootstrap/dist/css/bootstrap.css"/> <link rel="stylesheet" href="/css/app.css"/> <script src="/vendor/bower_components/jquery/jquery.js"></script> <script src="/vendor/bower_components/bootstrap/dist/js/bootstrap.js"></script> </head> <body> <header> <%-blocks.header%> </header> <section class="container"> <%-partial('../partials/topNavigation')%> <h1><%=blocks.title%></h1> <%-body -%> </section> <footer> <%-blocks.footer%> </footer> </body> </html> |
Layout это некоторое оформление, которое мы пишем в отдельный файл и указываем, куда вставлять body ( <%-body -%>). В любом другом шаблоне мы можем указать, например в template/index.ejs напишем:
1 2 3 | <% layout('/layout/page') -%> <p class="lead">Hey all!</p> |
Тогда при обработке этого шаблона ejs загрузит layout/page, выведет ее, а тело template/index.ejs поместит template/layout/page.ejs:
1 | <%-body -%> |
Таким образом, если у нас есть много страниц с одинаковым оформлением, то мы можем просто им указать layout. Путь лучше указать таким образом, для корректной работы в Windows.
Мы поставили черточку, но можно и без нее:
1 | <% layout('layout/page') %> |
Она всего лишь означает, что первый перевод строки после директивы нужно проигнорировать. Это иногда бывает удобно, чтобы избежать лишних переводов строки, которые становятся пробелами в получившимся HTML. Но в данном случае это здесь не очень важно.
Посмотрим еще раз на page.ejs. Здесь мы используем библиотеки Bootstrap и jQuery. Для того чтобы их удобно поставить, установим глобально модуль
npm i –g bower
Bower – это утилита, которая позволяет удобно устанавливать всякие библиотеки для front-end. Вootstrap и jQuery будем ставить в директорию public:
cd public
создам здесь специальную поддиректорию vendor:
mkdir vendor
В ней будет не наш JavaScript и CSS, а сторонний:
cd vendor
а затем установим:
bower i jquery bootstrap
Появилась директория, но все равно IDE подсвечивает, что файлы не найдены. Это потому, что он не знает, где их искать. Редактируем настройки.
Теперь с файлами все нормально.
Создадим app.css в директории public/css/app.css
Следующее, что здесь необходимо посмотреть – это система блоков:
1 | <title><%=blocks.title%></title> |
Допустим, мы хотим создать из нашего шаблона index.ejs нечто, что понадобится нам, в частности, в layout. Например, заголовок страницы. Я хочу, чтобы в page.ejs в title выводился заголовок, который не является каким-то глобальным для layout, то есть, он может быть разным, и задается конкретно в шаблоне. Как это сделать? Для этого существуют блоки:
1 | <% block('title', 'Hello ≥︺‿︺≤'); -%><br> |
Дальше шаблон уже позаботится о том, чтобы этот текст прибавился к специальной переменной, доступ которой организуется вот так: blocks.title.
Здесь (template/layout/page.ejs) мы позаботились о том, чтобы все содержимое этой переменной %= экранировалось, то есть, символы будут заменятся на специальные HTML сущности. А если мы хотим, чтобы сохранялось, как есть, то можно поставить %-blocks….
Также нам понадобиться создать topNavigation.ejs в дирректории templates/partialsjо partials поговорим немного позже:
1 2 3 4 5 6 7 8 | <nav class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li><a href="/">Main</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/login">Enter</a></li> </ul> </nav> |
Что ж, посмотрим. Запускаем. Переходим на:
http://localhost:3000/
Все отлично!
Итак, блоки используются там, где нужно задавать какое-то содержимое в шаблонах, просто потому, что в JavaScript оно было бы явно лишним.
Последний компонент системы шаблонизации, который мы рассмотрим, это partials. Он содержиться в нашей page.ejs . Это подшаблон, который находится в отдельном файле:
1 | <%-partial('../partials/topNavigation')%> |
Здесь есть различные опции, которые можно передать в этот шаблон. Если интересно, то посмотрите в документации. Там есть более подробное описание этих различных фишек. В данном случае partials можно рассматривать просто как дополнение, простое подключение одного шаблона к другому.
Далее мы будем добавлять различные компоненты в структуру template. Единственное, что сейчас еще нужно поменять, это переменную body:
<%-body -%>
Здесь мы используем механизм шаблонизации, поэтому вот сюда ее ставить нельзя (app.js):
1 2 3 4 | app.get('/', function(req, res, next) { res.render("index", { }); }); |
Если я ее здесь оставить, то корректно работать не будет и наше сообщение не выведется (templates/index.ejs):
1 | <p class="lead">Hey all!</p> |
Чтобы корректно все работало, надо просто ее оттуда убрать. На этом все, совсем скоро поговорим о MongoDB.
Код урока можно скачать здесь.
Материалы для статьи взяты из следующего скринкаста.
We are looking forward to meeting you on our website soshace.com
About the author
Top developers
-
Tedi C. Full-stack React/PHP developerJSReactCSSPHPNode.jsShow lessAll skills
Alexey D. Frontend DeveloperJSReactHTMLCSSAngularShow lessAll skills
Dragos S. Full Stack DeveloperRelated articles
2.12.2016Уроки Express.js . Логгер, Конфигурация, Шаблонизация с EJS. Часть 2.
Favicon – это все connect Middleware, он смотрит, если url имеет вид favicon.ico, то он читает favicon и ...
24.11.2016Уроки Express.js. Основы и Middleware. Часть 2.
Всем привет! Давайте продолжим наш урок об основах Express и Middleware. Итог (добавим в ...
24.11.20162. Уроки Express.js . Логгер, Конфигурация, Шаблонизация с EJS. Часть 1.
Всем привет! Для того чтобы дальше разрабатывать это приложение, нам нужно ...
Categories
No comments yet