Использование EJS для преобразования приложения Node в шаблон

Введение

При быстром создании приложений Node часто бывает необходим удобный и быстрый способ преобразовать приложение в шаблон.

Jade используется по умолчанию как механизм просмотра для Express, но синтаксис Jade может быть чрезмерно сложным для многих моделей использования. EJS — один из альтернативных вариантов, удобный в настройке и позволяющий хорошо выполнить эту работу. Давайте посмотрим, как создать простое приложение и использовать EJS, чтобы включить повторяющиеся части нашего сайта (частичные элементы) и передать данные в представления.

Настройка демонстрационного приложения

Мы сделаем для нашего приложения две страницы, одну страницу полной ширины, а другую — с боковой панелью.

Структура файлов

Это файлы, которые нам требуются для нашего приложения. Мы создадим шаблоны в папке views, а затем будем следовать стандартным практикам Node.

- views
----- partials
---------- footer.ejs
---------- head.ejs
---------- header.ejs
----- pages
---------- index.ejs
---------- about.ejs
- package.json
- server.js

package.json будет содержать информацию нашего приложения Node и необходимые нам зависимости (express и EJS), а server.js будет содержать настройку, конфигурацию сервера Express. Здесь мы определим маршруты к нашим страницам.

Настройка узла

Давайте откроем файл package.json и настроим в нем наш проект.

{
  "name": "node-ejs",
  "main": "server.js",
  "dependencies": {
    "ejs": "^3.1.5",
    "express": "^4.17.1"
  }
}

Нам потребуются только Express и EJS. Теперь нам нужно установить зависимости, которые мы только что определили. Вперед:

npm install

Установив все зависимости, настроим приложение для использования EJS и настроим маршруты для двух страниц, которые нам нужны: страницы индекса (полная ширина) и информационной страницы (боковая панель). Мы будем делать это в файле server.js.

// load the things we need
var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page
app.get('/', function(req, res) {
    res.render('pages/index');
});

// about page
app.get('/about', function(req, res) {
    res.render('pages/about');
});

app.listen(8080);
console.log('8080 is the magic port');

Здесь мы определим наше приложение и зададим для него отображение на порту 8080. Также нам нужно задать EJS как механизм просмотра для нашего приложения Express с помощью app.set('view engine', 'ejs'); Обратите внимание, как мы отправляем представление пользователю, используя res.render(). Важно отметить, что res.render() будет искать представление в папке views. Это значит, что нам нужно определить только pages/index, поскольку полный путь выглядит как views/pages/index.

Запуск сервера

Запустите сервер с помощью следующей команды:

node server.js

Теперь мы можем открыть наше приложение в браузере, используя адреса http://localhost:8080 и http://localhost:8080/about. Мы настроили наше приложение, и нам нужно определить файлы представления и посмотреть, как EJS работает с ними.

Создание частичных элементов EJS

Как и в других приложениях здесь будет много кода, используемого многократно. Мы назовем такие элементы частичными шаблонами и определим три файла, которые будут использоваться везде на нашем сайте: head.ejs, header.ejs и footer.ejs. Создадим эти файлы.

<meta charset="UTF-8">
<title>EJS Is Fun</title>

<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
    body { padding-top:50px; }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/">EJS Is Fun</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/about">About</a>
    </li>
  </ul>
</nav>

<p class="text-center text-muted">© Copyright 2020 The Awesome People</p>

Добавление частичных шаблонов EJS в представления

Итак, мы определили частичные шаблоны. Теперь нужно добавить их в наши представления. Возьмем файлы index.ejs и about.ejs и используем синтаксис include для добавления частичных шаблонов.

Синтаксис добавления частичного шаблона EJS

Используйте <%- include('RELATIVE/PATH/TO/FILE') %>, чтобы встроить частичный шаблон EJS в другой файл.

• Дефис <%- вместо <% предписывает EJS выполнять рендеринг необработанного кода HTML.
• Путь к частичному шаблону является относительным по отношению к текущему файлу.

<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
    <%- include('../partials/header'); %>
</header>

<main>
    <div class="jumbotron">
        <h1>This is great</h1>
        <p>Welcome to templating using EJS</p>
    </div>
</main>

<footer>
    <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Теперь мы можем посмотреть определенное представление в браузере по адресу http://localhost:8080.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
    <%- include('../partials/header'); %>
</header>

<main>
<div class="row">
    <div class="col-sm-8">
        <div class="jumbotron">
            <h1>This is great</h1>
            <p>Welcome to templating using EJS</p>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="well">
            <h3>Look I'm A Sidebar!</h3>
        </div>
    </div>

</div>
</main>

<footer>
    <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Если мы откроем адрес http://localhost:8080/about, мы увидим нашу информационную страницу с боковой панелью!

Теперь мы можем начать использовать EJS для передачи данных из нашего приложения Node в наши представления.

Передача данных в представления и частичные шаблоны

Определим некоторые базовые переменные и список для передачи на главную страницу. Вернитесь в файл server.js и добавьте следующий код в маршрут app.get('/').

// index page
app.get('/', function(req, res) {
    var mascots = [
        { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
        { name: 'Tux', organization: "Linux", birth_year: 1996},
        { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
    ];
    var tagline = "No programming concept is complete without a cute animal mascot.";

    res.render('pages/index', {
        mascots: mascots,
        tagline: tagline
    });
});

Мы создали список mascots и простую строку tagline. Теперь перейдем в файл index.ejs и используем их.

Рендеринг одиночной переменной в EJS

Чтобы отразить через эхо одну переменную, мы просто используем <%= tagline %>. Добавим этот код в наш файл index.ejs:

...
<h2>Variable</h2>
<p><%= tagline %></p>
...

Циклический перебор данных в EJS

Для циклического перебора данных мы будем использовать .forEach. Добавим этот код в наш файл view:

...
<ul>
    <% mascots.forEach(function(mascot) { %>
        <li>
            <strong><%= mascot.name %></strong>
            representing <%= mascot.organization %>, born <%= mascot.birth_year %>
        </li>
    <% }); %>
</ul>
...

Теперь мы можем видеть в браузере новую информацию, которую мы добавили!

Передача данных в частичный шаблон в EJS

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

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

...
<header>
    <%- include('../partials/header', {variant:'compact'}); %>
</header>
...

При этом нужно с осторожностью предполагать, что переменная определена.

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

...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...

В строке выше код EJS выполняет рендеринг значения variant, если оно определено, и default, если не определено.

Заключение

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

Дополнительную справку по EJS можно найти в официальной документации здесь.