Включение файлов в другие файлы
Для удобства работы с многочисленными шаблонами (например, news.ejs), содержащими повторяющиеся блоки (шапка, футер), целесообразно вынести эти блоки в отдельные файлы и подключать их к основным шаблонам. Это упрощает изменения, например, ссылок в шапке — достаточно внести изменения в одном файле, и они автоматически отразятся во всех шаблонах.
Создадим папку blogs и в ней файл header.ejs:
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/news">Новости</a></li>
</ul>Подключим этот файл к шаблону news.ejs после тега <body>:
<% include ./blogs/header.ejs %>После сохранения изменений и запуска сервера, меню появится в news.ejs. Для добавления меню на другие страницы (например, about.ejs или index.ejs), достаточно скопировать строку <% include ./blogs/header.ejs %> в соответствующие файлы. Изменения в header.ejs автоматически обновят меню на всех страницах.
Статические файлы и промежуточное ПО
Создадим папку public для хранения статических файлов (CSS, изображения и т.д.). Внутри public создадим папку css и файл style.css. Переместим стили из index.ejs в style.css.
Для подключения style.css используем путь:
<link rel="stylesheet" href="/public/css/style.css">Без использования промежуточного ПО стили не применятся, так как style.css — статический файл.
Добавим промежуточное ПО:
app.use('/public', express.static('public'));Теперь Express.js будет обслуживать статические файлы из папки public. После перезапуска сервера стили будут применены. Добавление новых ссылок в style.css мгновенно отразится на всех страницах. Это промежуточное ПО обрабатывает запросы до маршрутов приложения. Например, console.log внутри него выполнится перед обработкой запроса на странице.
В этом уроке мы рассмотрели подключение файлов, организацию статических файлов и использование промежуточного ПО для их обработки. Такой подход упрощает разработку и поддержку веб-приложений.