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

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

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

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

views/layouts/main.hbs<!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:

views/partials/header.hbs<nav>
  <a href="/">главная</a>
  <a href="/about">о нас</a>
  <a href="/contacts">контакты</a>
</nav>

В файле с макетом подключим наш хедер с помощью специальной команды {{>:

views/layouts/main.hbs<!DOCTYPE html>
<html>
  <head>
    <title>{{titt}}</title>
  </head>
  <body>
    <header>
      {{> header}}
    </header>
    <main>
      {{{body}}}
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>

Подпапки

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

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

• views/partials/header/menu.hbslogo.hbsfootercontacts.hbsform.hbs

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

views/layouts/main.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>