Layout в Handlebars

Последнее обновление: 23.11.2023

Файл layout или мастер-страница позволяет определить общий макет всех веб-страниц сайта. Благодаря чему гораздо проще обновлять сайт, определять и менять какие-то общие блоки кода.

Для работы с файлами layout установим в проект модуль express-handlebars с помощью следующей команды:

npm install express-handlebars

Пусть в проекте в папке views/partials будут определены два частичных представления для меню и футера. Первое представление - menu.hbs:

<nav><a href="/">Главная</a> | <a href="/contact">Контакты</a></nav>

И второе представление - footer.hbs:

<footer><p>MyCorp - Copyright © 2017</p></footer>

Создадим в проекте в папке views новый каталог layouts и определим в нем файл layout.hbs, который будет определять макет сайта:

<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
    <meta charset="utf-8" />
</head>
<body>
    {{> menu}}
     
    {{{body}}}
     
    {{> footer}}
</body>
<html>

Здесь внедряются частичные представления menu.hbs и footer.hbs. И, кроме того, здесь также присутствует такое выражение, как {{{body}}}. Вместо этого выражения будет вставлять содержимое конкретных представлений.

Затем в папке views определим два обычных представления. Представление contact.hbs:

<h1>{{title}}</h1>
<p>Электронный адрес: {{email}}</p>
<p>Телефон: {{phone}}</p>

И представление home.hbs:

<h1>Главная страница</h1>

Эти представления не содержат элементов body, head, каких-то общих блоков, так как все они определены в файле layout.hbs.

Далее определим следующий файл app.js:

const express = require("express");
const expressHbs = require("express-handlebars");
const hbs = require("hbs");
const app = express();
  
// устанавливаем настройки для файлов layout
app.engine("hbs", expressHbs.engine(
    {
        layoutsDir: "views/layouts", 
        defaultLayout: "layout",
        extname: "hbs"
    }
))
app.set("view engine", "hbs");
hbs.registerPartials(__dirname + "/views/partials");
 
app.use("/contact", function(_, response){
      
    response.render("contact", {
        title: "Мои контакты",
        email: "gavgav@mycorp.com",
        phone: "+1234567890"
    });
}); 
 
app.use("/", function(_, response){
      
    response.render("home.hbs");
});
app.listen(3000);

Для использования файлов layout необходимо настроить движок hbs:

app.engine("hbs", expressHbs.engine(
    {
        layoutsDir: "views/layouts", 
        defaultLayout: "layout",
        extname: "hbs"
    }
))

Функция expressHbs.engine() осуществляет конфигурацию движка. В частности, свойство layoutsDir задает путь к папке с файлами layout относительно корня каталога проекта. Свойство defaultLayout указывает на название файла, который будет использоваться в качестве мастер-страницы. В нашем случае это файл layout.hbs, поэтому указываем название этого файла без расширения. И третье свойство - extname задает расширение файлов.

В итоге весь проект будет выглядеть следующим образом:

Layout in Handlebars in Express in Node.js

Пример работы приложения:

Файлы Layout в Handlebars в Express в Node.js

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850