Частичные шаблоны Handlebars Express
Часто удобно разбить страницу на части, которые будут вынесены в отдельные файлы. Такие блоки называются виджеты или в терминах Handlebars частичные шаблоны (partials).
К примеру, можно вынести текст хедера, футера, сайдбара. Это удобно, во-первых тем, что текст этих блоков не будет захламлять макет сайта, делая его структуру более прозрачной и понятной для восприятия. Во-вторых, на сайте могут быть несколько шаблонов. В этом случае можно будет блок использовать сразу в нескольких шаблонах.
Давайте попробуем на практике. Пусть у нас есть следующий макет сайта:
<!DOCTYPE html>
<html>
<head>
<title>{{titt}}</title>
</head>
<body>
<header>
<nav>
<a href="/">главная</a>
<a href="/about">о нас</a>
<a href="/contacts">контакты</a>
</nav>
</header>
<main>
{{{body}}}
</main>
<footer>
footer
</footer>
</body>
</html>
Вынесем содержимое хедера в отдельный файл
в папке partials:
<nav>
<a href="/">главная</a>
<a href="/about">о нас</a>
<a href="/contacts">контакты</a>
</nav>
В файле с макетом подключим наш хедер с помощью
специальной команды {{>:
<!DOCTYPE html>
<html>
<head>
<title>{{titt}}</title>
</head>
<body>
<header>
{{> header}}
</header>
<main>
{{{body}}}
</main>
<footer>
footer
</footer>
</body>
</html>
Возьмите макет сайта и вынесите в отдельные виджеты хедер, футер, и сайдбар.
Подпапки
В папке partials можно размещать подпапки,
раскладывая hbs файлы в них. В этом
случае в команде подключения виджета нужно
будет кроме имени файла указать и подпапку.
Давайте посмотрим на примере. Пусть у вас есть вот такая структура:
Подключим наши виджеты в файле макета:
<!DOCTYPE html>
<html>
<head>
<title>{{titt}}</title>
</head>
<body>
<header>
{{> header/logo}}
{{> header/menu}}
</header>
<main>
{{{body}}}
</main>
<footer>
footer
{{> header/contacts}}
{{> header/form}}
</footer>
</body>
</html>