Движок представлений EJS

Для того чтобы отображать в Express файлы шаблонов, необходимо...

Установите соответствующий пакет npm шаблонизатора:

npm install ejs --save

В приложении подключите модуль:

const ejs = require('ejs');

Задайте следующие параметры приложения:

  • views, каталог, в котором находятся файлы шаблонов. Например: 

    app.set('views', './views');

  • view engine, используемый шаблонизатор. Например:

    app.set('view engine', 'ejs');

Создаёте шаблон, например, главной страницы с названием main.ejs в папке views :

<!DOCTYPE html>
<html lang="ru">
  <head>
    <!-- Head -->
    <%- include("partials/head.ejs") %>
  </head>

  <body>
    <!-- Nav -->
    <%- include("partials/nav.ejs") %>

    <!-- Main -->
    <main>
      <div class="container">
        <% if (content) { %>
          <h1><%=content%></h1>
        <% } %>
      </div>
    </main>
  </body>

  <!-- Footer -->
  <%- include("partials/footer.ejs") %>

  <!-- Scripts -->
  <%- include("partials/scripts.ejs") %>
</html>

Затем для главной странице подгружаете шаблон страницы в app.js и передаёте параметры на эту страницу:

app.get('/', (request, response) => {
    response.render("main", {
        title: "Главная страница",
        content: "Hello there!"
    });
});

Если вы ещё не заметили по шаблону для главной странице то обратите внимание ещё раз... В шаблоне подключаются различные отдельные части (head, nav, footer, script).

По адресу /views/partials/ вы должны создать такие файлы с расширением .ejs.

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><% if (title) { %><%=title%><% } %></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
    body {
        display: flex; flex-direction: column; min-height: 100vh; height: 100% !important;
    }
    main {
        flex: 1 0 auto; position: relative;
    }
</style>

Если вы в коде хотите, чтобы подключились локальные CSS файлы, тогда в app.js нужно дописать следующее:

app.use(express.static(__dirname + '/'));

Обратите внимание, что мы используем CSS фреймворк Bootstrap 4.

Источники:

PreviousИнициализация и запуск приложения на expressNextБаза данных и пользователи на SQLite

Last updated