Создание представлений в 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 г.