Создание представлений в NodeJS путем включения макетов, частей и всего, что между ними.

Написание HTML - отстой, поэтому мы должны делать все, чтобы максимально сократить время, которое мы тратим на его написание. Таким образом, у нас есть Handlebars: легкая система шаблонов для Node. Handlebars позволяет нам избежать повторяющегося кода, компилируя окончательную структуру DOM нашего сайта с помощью логики, обычно компилируемой такими исполнителями задач, как Grunt или Gulp.

Если вы участвуете в какой-либо разработке Node, вы, вероятно, уже в какой-то степени знакомы с Handlebars. Я думал, что да, но только когда нам нужно начинать новый проект с нуля, мы понимаем, что полностью забыли процесс настройки, который мы предприняли в прошлый раз. Вот почему я здесь.

Давайте вспомним детали, из которых состоят рули.

  • Макеты - это самый неоднозначный высокоуровневый слой; они обычно используются для установки метаданных базовой страницы, а также общего макета (из-за отсутствия лучшего термина).
  • Страницы - это шаблоны, относящиеся к одному типу страницы. Например, страница "сообщения" на этом сайте отличается, скажем, от домашней страницы. Поскольку все сообщения разделяют элементы друг с другом, сотни сообщений используют один и тот же шаблон.
  • Частичные - это фрагменты, которые можно использовать на разных страницах, например для навигации.
  • Контекст - это контент, который передается в шаблоны и в результате становится содержанием страницы.
  • Помощники наиболее близки к логике в Handlebars: они позволяют отображать или пропускать контент на основе условных выражений, таких как операторы if. Например: отображение аватара автора, только если он загрузил изображение.

Настройка проекта

Мы собираемся использовать папку Express / views, чтобы хранить в себе все достоинства наших рулей. Наш проект должен выглядеть примерно так:

myapp
├── bin
├── build
├── routes
├── src
├── views
│   ├── layouts/
│   ├── partials/
│   └── error.hbs
│   └── index.hbs
│   └── login.hbs
│   └── etc
└── README.md
└── app.js
└── package.json

Важно отметить, что мы разделили нашу папку просмотров на три классификации: макеты, частичные и страницы, где страницы занимают корень /views каталог. Важно сохранить это различие, поскольку наша структура влияет на то, как мы обслуживаем эти шаблоны.

Настроить этот Иш

Установить рули:

$ npm install handlebars --save

Взломайте свой app.js файл или как там это называется. Требуются рули:

var hbs = require( 'express-handlebars');

Затем мы настроим Express для использования Handlebars в качестве механизма просмотра и сообщим Express, где найти эти файлы:

// view engine setup
app.set('view engine', 'hbs');
app.engine( 'hbs', hbs( {
  extname: 'hbs',
  defaultView: 'default',
  layoutsDir: __dirname + '/views/pages/',
  partialsDir: __dirname + '/views/partials/'
}));

По умолчанию Express предполагает, что мы храним наши представления в папке «/ views», каковой мы и являемся. Мы сделаем еще один шаг вперед, указав, в каких подпапках выше находятся наши частичные и макеты. Мы можем сохранять страницы прямо в /views.

Обратите внимание, что мы также устанавливаем макет по умолчанию. При необходимости мы можем переопределить это в наших маршрутах, но установка макета по умолчанию полезна для загрузки страниц в метаданные страницы контейнера оболочки html.

Удары на шоссе 66

Давайте создадим наш первый маршрут в routes/index.js. Мы собираемся загрузить представление с именем home в макет с именем default:

var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
  res.render('home', {layout: 'default', template: 'home-template'});
});

Это преобразует views/home.hbs в views/layouts/default.hbs, если представления настроены правильно. Мы также передаем настраиваемое значение шаблон, определяемое пользователем; подробнее об этом ниже.

Основное использование

Давайте, наконец, посмотрим на наши настоящие представления Handlebars. Вот default.hbs:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Best Website</title>
  <meta name="HandheldFriendly" content="True" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <link rel="stylesheet" href="/css/main.min.css">
</head>
<body class="{{template}}">
  <div class="container">
   {{{body}}}
  </div>
  {{> footer}}
</body>
</html>

У нас есть три значения: {{template}} и {{{body}}} и {{›footer}}.

{{template}} - значение в двойных скобках, поэтому ожидаются линейные данные. Мы передали template в нашем маршруте: это устанавливает класс тела равным home-template на тот случай, если мы захотим применить стили или логику для конкретной страницы в будущем. .

{{{body}}} содержит тройные скобки и зарезервирован специально для этой цели: загрузки шаблонов в другие шаблоны.

Наконец, у нас есть {{›footer}}. Это загрузит фрагмент с именем нижний колонтитул из views/partials/footer.hbs, при условии, что мы его создадим. Разница между загрузкой {{{body}}} и {{> footer}} связана с общей философией рабочего процесса; страницы являются главным событием и поэтому загружаются в макеты по их команде. Частичные страницы могут вызываться по желанию в любое время.

Очевидно, что Handlebars - это гораздо больше - самое интересное не начнется, пока мы не извлечем динамические значения из баз данных или где-то еще. Мы доберемся туда.

Первоначально опубликовано на https://hackersandslackers.com 26 июня 2018 г.