Добавление стилей
Ранее стили добавлялись непосредственно в тег <style>. Для больших проектов это неэффективно. Создадим отдельный CSS-файл и подключим его.
Создадим файл main.css в папке public/css. Добавим в него стили, например, для изменения цвета фона на черный:
body {
background-color: black;
}Прямое подключение public/css/main.css не сработает, поскольку Express.js не обрабатывает статические файлы без дополнительной настройки.
Статические файлы и Express.js
CSS-файлы, JavaScript-файлы, изображения и другие подобные файлы — статические. Для их обработки в Express.js используется промежуточное ПО (middleware).
В index.js добавим app.use с методом static:
const express = require('express');
const app = express();
// ... другой код ...
app.use(express.static('public'));
// ... другой код ...Это указывает Express.js на папку public как источник статических файлов. Теперь для подключения main.css достаточно указать путь относительно public: css/main.css.
После перезапуска сервера стили применятся. Текст на странице станет невидимым из-за черного фона.
Организация проекта: Шаблоны и блоки
Для удобства работы с повторяющимися элементами, например, шапкой сайта, вынесем их в отдельные файлы. Создадим папку views/blocks и в ней файл header.ejs. Перенесем код шапки из about.ejs в header.ejs.
Подключение header.ejs осуществляется с помощью директивы <%- include %>:
<%- include('./blocks/header') %>Обратите внимание на синтаксис: <%- include(‘./blocks/header’) %>, где . указывает на текущую папку, а расширение .ejs опускается. Для корректной работы можно использовать:
<%- include('./blocks/header') -%>После изменений шапка будет корректно подключаться во всех файлах.
В этом уроке мы научились подключать статические файлы в Node.js с помощью Express.js и организовывать проект для удобства работы с повторяющимися блоками кода, используя возможности шаблонизатора. Это улучшает структуру проекта и упрощает его дальнейшее развитие.