Давайте теперь приступим к изучению шаблонизаторов. Они позволяют нам удобным образом отделить файл макета сайта, его контент и его блоки по отдельным файлам. Также они предоставляют ряд команд, которые можно писать в HTML файлах для генерации HTML кода.
Одним из самых популярных в Express шаблонизаторов является Handlebars. Для его установки следует выполнить команду:
npm install express-handlebars
Теперь нам нужно подключить и настроить установленный шаблонизатор. Сделаем это:
import expressHandlebars from 'express-handlebars';
const handlebars = expressHandlebars.create({
defaultLayout: 'main',
extname: 'hbs'
});
import express from 'express';
let app = express();
app.engine('hbs', handlebars.engine);
app.set('view engine', 'hbs');
После этого в папке views вы будете
хранить файлы вашего контента, а в папке
views/layouts - ваши макеты, к которым
будут подключаться контенты. Эти файлы должны
будут иметь расширение .hbs, чтобы
шаблонизатор понял, что это его файлы.
Handlebars будет брать файл шаблона, добавлять в нужное место контент, тайтл и виджеты и отправлять готовый код в браузер. А как это делается, мы разберем в следующих уроках.
Установите и подключите Handlebars.