search

Движок представлений 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 и передаёте параметры на эту страницу:

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

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

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

circle-info

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

circle-info

Источники:

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

Last updated