Освоение макетов Express EJS: упростите веб-разработку на Node.js - Fcodenotes

Express EJS Layouts — это мощная библиотека, которая упрощает процесс создания динамических и повторно используемых макетов в веб-приложениях Node.js. Используя EJS (встроенный JavaScript) в качестве механизма создания шаблонов, Express EJS Layouts позволяет разработчикам структурировать свои представления и с легкостью создавать согласованные макеты. В этой статье мы рассмотрим различные методы и предоставим примеры кода, чтобы продемонстрировать универсальность и функциональность макетов Express EJS.

Установка макетов Express EJS:
Чтобы начать использовать макеты Express EJS, вам необходимо установить его как зависимость в проекте Node.js. Откройте терминал и выполните следующую команду:

npm install express-ejs-layouts

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

const express = require('express');
const expressLayouts = require('express-ejs-layouts');
const app = express();
// Set EJS as the view engine
app.set('view engine', 'ejs');
// Use Express EJS Layouts
app.use(expressLayouts);

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

<!-- views/layouts/main-layout.ejs -->
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <!-- Content goes here -->
    <%- body %>
</body>
</html>

Расширение макета.
Вы можете расширить базовый макет, создав отдельные файлы представления для разных страниц и внедрив их в макет. Вот пример:

<!-- views/home.ejs -->
<% layout('layouts/main-layout') %>
<h1>Welcome to the Home Page</h1>

В этом примере функция layout()используется для указания расширяемого файла макета.

Передача данных в макеты и представления.
Express EJS Layouts позволяет передавать данные из ваших маршрутов как в макеты, так и в представления. Вот пример передачи данных в представление:

app.get('/', (req, res) => {
  const data = {
    title: 'Express EJS Layouts',
    message: 'Welcome to my website!'
  };
  res.render('home', data);
});

В приведенном выше коде переменные titleи messageпередаются в виде данных в представление home.ejs.

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

<!-- views/partials/navbar.ejs -->
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

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

<!-- views/home.ejs -->
<% layout('layouts/main-layout') %>
<%- include('partials/navbar') %>
<h1>Welcome to the Home Page</h1>

Используя функцию include(), вы можете включить фрагмент navbar.ejsв представление home.ejs.

Это всего лишь несколько способов начать работу с макетами Express EJS. Библиотека предлагает множество других функций, включая пользовательские макеты, динамическое внедрение контента и условный рендеринг. Используя возможности Express EJS Layouts, вы можете с легкостью создавать понятные и удобные в обслуживании веб-приложения.