Частичные шаблоны Handlebars Express

Часто удобно разбить страницу на части, которые будут вынесены в отдельные файлы. Такие блоки называются виджеты или в терминах Handlebars частичные шаблоны (partials).

К примеру, можно вынести текст хедера, футера, сайдбара. Это удобно, во-первых тем, что текст этих блоков не будет захламлять макет сайта, делая его структуру более прозрачной и понятной для восприятия. Во-вторых, на сайте могут быть несколько шаблонов. В этом случае можно будет блок использовать сразу в нескольких шаблонах.

Давайте попробуем на практике. Пусть у нас есть следующий макет сайта:

<!DOCTYPE html>
<html>
	<head>
		<title>{{title}}</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>{{title}}</title>
	</head>
	<body>
		<header>
			{{> header}}
		</header>
		<main>
			{{{body}}}
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Возьмите макет сайта и вынесите в отдельные виджеты хедер, футер, и сайдбар.

Подпапки

В папке partials можно размещать подпапки, раскладывая hbs файлы в них. В этом случае в команде подключения виджета нужно будет кроме имени файла указать и подпапку.

Давайте посмотрим на примере. Пусть у вас есть вот такая структура:

views/
- partials/
  - header/
    - menu.hbs
    - logo.hbs
  - footer
    - contacts.hbs
    - form.hbs

Подключим наши виджеты в файле макета:

<!DOCTYPE html>
<html>
	<head>
		<title>{{title}}</title>
	</head>
	<body>
		<header>
			{{> header/logo.hbs}}
			{{> header/menu.hbs}}
		</header>
		<main>
			{{{body}}}
		</main>
		<footer>
			footer
			{{> header/contacts.hbs}}
			{{> header/form.hbs}}
		</footer>
	</body>
</html>