Шаблоны EJS

Собирать HTML строками в обработчике неудобно и опасно. Шаблон — это HTML-файл с вставками, куда сервер подставляет данные. EJS (Embedded JavaScript) — простой шаблонизатор для Express: внутри обычного HTML пишется обычный JavaScript.

Установка и настройка

npm install ejs

В src/app.js укажите, какой шаблонизатор использовать:

// src/app.js
app.set('view engine', 'ejs');

Шаблоны Express ищет в папке views/ в корне проекта, файлы имеют расширение .ejs.

Первый шаблон

Создайте файл views/posts/index.ejs:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title><%= title %></title>
</head>
<body>
  <h1><%= title %></h1>
</body>
</html>

Вставка <%= title %> выводит значение переменной title.

Передача данных

В контроллере замените res.send() на res.render(). Первый аргумент — путь к шаблону внутри views/ без расширения, второй — объект с данными:

// src/controllers/postsController.js
import { posts } from '../data/posts.js';
 
export function index(req, res) {
  res.render('posts/index', { title: 'Все статьи', posts });
}

Откройте /posts — появится страница с заголовком «Все статьи». Каждое поле объекта становится переменной в шаблоне.

Циклы и условия

Внутри <% %> пишется код без вывода — например, цикл по статьям:

<h1><%= title %></h1>
 
<% if (posts.length === 0) { %>
  <p>Статей пока нет.</p>
<% } %>
 
<ul>
  <% for (const post of posts) { %>
    <li><a href="/posts/<%= post.id %>"><%= post.title %></a></li>
  <% } %>
</ul>

Теперь на /posts появится список ссылок, каждая ведёт на страницу своей статьи.

Виды вставок

Данные для всех шаблонов

То, что нужно на каждой странице, кладут в res.locals в middleware — эти поля видны во всех шаблонах без передачи в render():

// src/app.js
app.use((req, res, next) => {
  res.locals.siteName = 'Блог об Express';
  next();
});

В любом шаблоне теперь можно написать <%= siteName %>.

Частая ошибка

Не выводите данные посетителей через <%-. Если в заголовке статьи окажется строка со скриптом, <%- вставит её в страницу как код, и скрипт выполнится у всех читателей. Это называется XSS-атакой. Для любых данных используйте <%=: он превратит < и > в безопасные символы. <%- оставьте для вставки других шаблонов — о них следующий урок.