3. Уроки Express.js. Шаблонизация с EJS: Layout, Block, Partials

 

flight-bangkok0816

В реальной жизни у нас обычно больше, чем один шаблон. Более того, если уж так получилось, что мы делаем сайт со страницами, то, как правило, бывает так, что у нас множество страниц есть в одинаковом оформлении. Шаблонная система должна это предусматривать. К сожалению, ejs не очень хорошо с этим справляется. Поэтому, мы сейчас поставим немного другую систему для шаблонизации , которая называется ejs-locals(добавим в app.js):


Это почти то же самое, что и ejs, но в ней есть важные возможности, а именно, layout, block, partials. Мы сейчас их посмотрим.

Устанавливаем модуль:

npm i ejs-locals

Мы использовал директиву app.engine, чтобы сказать Express – “файлы с таким расширением нужно обрабатывать таким шаблонным движком  require('ejs-locals') , а не стандартным  ejs“.

Еще раз обращаем ваше внимание, есть множество отличных систем для шаблонизации  в Node.js. Мы здесь ejs используем просто потому, что она очень похожа на HTML и требует минимального времени на изучение.

Смотрим шаблон в template/index.ejs , теперь он будет выглядеть так:


Далее создадим  template/layout/page.ejs c таким кодом:


Layout это некоторое оформление, которое мы пишем в отдельный файл и указываем, куда вставлять body ( <%-body -%>). В любом другом шаблоне мы  можем указать, например в template/index.ejs напишем:


Тогда при обработке этого шаблона ejs загрузит layout/page, выведет ее, а тело template/index.ejs поместит template/layout/page.ejs:


Таким образом, если у нас есть много страниц  с одинаковым оформлением, то мы можем просто им указать layout. Путь лучше указать таким образом, для корректной работы в Windows

Мы поставили черточку, но можно и без нее:


Она всего лишь означает, что первый перевод строки после директивы нужно проигнорировать. Это иногда бывает удобно, чтобы избежать лишних переводов строки, которые становятся пробелами в получившимся 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 подсвечивает, что файлы не найдены. Это потому, что он не знает, где их искать. Редактируем настройки.

root

Теперь с файлами все нормально.

Создадим app.css в директории public/css/app.css

Следующее, что здесь необходимо посмотреть – это система блоков:


Допустим, мы хотим создать из нашего шаблона index.ejs нечто, что понадобится нам, в частности, в layout. Например, заголовок страницы. Я хочу, чтобы в page.ejs в title выводился заголовок, который не является каким-то глобальным для layout, то есть, он может быть разным, и задается конкретно в шаблоне. Как это сделать? Для этого существуют блоки:


Дальше шаблон уже позаботится о том, чтобы этот текст прибавился к специальной переменной, доступ которой организуется вот так: blocks.title.

Здесь (template/layout/page.ejs) мы  позаботились  о том, чтобы все содержимое этой переменной %= экранировалось, то есть, символы будут заменятся на специальные  HTML сущности. А если мы  хотим, чтобы сохранялось, как есть, то  можно поставить %-blocks….

Также нам понадобиться создать topNavigation.ejs в дирректории templates/partialsjо  partials поговорим немного позже:


Что ж, посмотрим. Запускаем. Переходим на:

http://localhost:3000/

Все отлично!

Итак, блоки используются там, где нужно задавать какое-то содержимое в шаблонах, просто потому, что в JavaScript оно было бы явно лишним.

Последний компонент системы шаблонизации, который мы рассмотрим, это partials. Он содержиться в нашей page.ejs . Это подшаблон, который находится в отдельном файле:


Здесь есть различные опции, которые можно передать в этот шаблон. Если интересно, то посмотрите в документации. Там есть более подробное описание этих различных фишек. В данном случае partials можно рассматривать просто как дополнение, простое подключение одного шаблона к другому.

Далее мы будем добавлять различные компоненты в структуру template. Единственное, что сейчас еще нужно поменять, это переменную body:

<%-body -%>

Здесь мы используем механизм шаблонизации, поэтому вот сюда ее ставить нельзя (app.js):


Если я ее здесь оставить, то корректно работать не будет и наше сообщение не выведется (templates/index.ejs):


Чтобы корректно все работало, надо просто ее оттуда убрать. На этом все, совсем скоро поговорим о MongoDB.

Код урока можно скачать здесь.
sunset-palms-wallpaper-1

Материалы для статьи взяты из следующего скринкаста.

We are looking forward to meeting you on our website soshace.com

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Уроки Express.js . Логгер, Конфигурация, Шаблонизация с EJS. Часть 2.

Favicon – это все connect Middleware, он смотрит, если url имеет вид favicon.ico, то он читает favicon и ...

24.11.2016

Уроки Express.js. Основы и Middleware. Часть 2.

Всем привет! Давайте продолжим наш урок об основах Express и Middleware. Итог (добавим в ...

24.11.2016

2. Уроки Express.js . Логгер, Конфигурация, Шаблонизация с EJS. Часть 1.

Всем привет! Для того чтобы дальше разрабатывать это приложение, нам нужно ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy