Частичные шаблоны 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}} {{> header/menu}} </header> <main> {{{body}}} </main> <footer> footer {{> header/contacts}} {{> header/form}} </footer> </body> </html>