Zell Liew

Шаблонные двигатели – это инструменты, которые помогут вам разбить HTML-код на более мелкие кусочки, которые вы можете повторно использовать в нескольких файлах HTML. Шаблонные двигатели также дают вам возможность подавать данные в переменные, которые помогают упростить ваш код.

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

Однако с Node.js вы можете легко использовать мощность шаблонов легко через использование таких инструментов, как Gulp.

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

Почему вы должны использовать шаблонные двигатели

Двигатели шаблона имеют два основных преимущества:

1. Они позволяют разбить код HTML в меньшие файлы
2. Они позволяют вам заполнить вашу разметку с данными

Давайте пройдемся через них один за другим.

Разрыв HTML в меньшие файлы

Для HTML-файла распространена для HTML-файла для содержания блоков кода, которые повторяются через веб-сайт. Рассмотрим эту разметку на секунду:

    
 ... 
  

Многие строки кода, особенно в навигационном и нижнем колонтитуле, повторяются на нескольких страницах.

Поскольку они повторяются, мы можем вытащить их и поместить их в меньшие файлы под названием частичные Отказ

Например, навигация частичная может содержать простую навигацию, как это:

Затем мы можем повторно использовать это частично через наши HTML-файлы. Вот какие HTML-файлы могут выглядеть как с частными лицами:

  {% include partials "nav" %}  
 ... 
  {% include partials "footer" %}

ПРИМЕЧАНИЕ. Синтаксис для включения частиц отличается для каждого шаблонного двигателя. Тот, показанный выше, для Nunjucks или Swig.

Есть одна великая вещь о том, чтобы быть в состоянии сломать код, как это.

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

Это намного проще, чем необходимо для изменения того же кода на каждом файле, навигация используется на.

Перерыв кода в меньших файлах помогает вам написать меньше (дублированный) код. Он также удерживает вас с ума, когда вам нужно погрузиться и изменить старый код.

Давайте перейдем к второй выгоде.

Использование данных для заполнения разметки

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

Обратите внимание, как .gallery__item div повторился несколько раз выше?

Если вам пришлось изменить разметку одного .gallery__ITem, вам придется изменить его в пять разных мест.

Теперь представьте, что у вас была возможность писать HTML, используя логику LOOP. Вы, вероятно, написали что-то похожее на это:

  // Some code to loop through the following 5 times:   
      
  // end loop

Шаблонные двигатели дают вам возможность использовать такой цикл. Вместо того, чтобы зацикливаться ровно пять раз, он проходит через набор данных, которые вы переходите к нему. HTML станет:

  {% for image in images %}    
          
  {% endfor %}

Данные будут файл JSON, который напоминает следующее:

images: [{  src: "item1.png",  alt: "alt text for item1"  }, {  src: "item2.png",  alt: "alt text for item1"  },  // ... Until the end of your data]

С поставленными данными шаблон двигатель создаст такую разметку, что количество .gallery__ __Tems будет соответствовать количеству элементов в массиве изображений данных.

Лучшая часть заключается в том, что вам нужно только изменить разметку один раз, и все .gallery__ __Tems будет обновляться.

Использование шаблона двигателя с глотанием

Прежде чем мы продолжим и создаем задачу глотана, которая использует шаблон-двигатель, давайте посмотрим на список популярных шаблонов на основе JavaScript на основе JavaScript, которые Pulp умеет использовать:

• Пыль
• Встроенные JS (Также известный как EJS)
• Руль
• Hogan.js.
• Нефрита
• Усы
• Nunjucks
• Swig (который больше не поддерживается)

Каждый шаблон двигатель уникален и имеет свои собственные плюсы и минусы. Синтаксис может отличаться дико между шаблонными двигателями. Из-за этого мы сосредоточимся на использовании одного шаблона двигателя в этой статье – Nunjucks.

Я настоятельно рекомендую Nunjucks, потому что это чрезвычайно мощно. У него есть особенности – как наследство – что большинство шаблонов не имеют. Ранее я также использовал усы и руль, и обнаружили, что они не были достаточно мощными во многих обстоятельствах.

Теперь давайте включим Nunjucks в наш рабочий процесс.

Используя Nunjucks с глотком

Мы можем использовать Nunjucks через плагин под названием Gulp-Nunjucks-Render Отказ

Давайте начнем с установки Gulp-Nunjucks-Render.

Примечание. Я предполагаю, что вы знаете, как использовать Gulp, поэтому я не буду входить в основы. Если вы ощутите себя смущенным, это может быть хорошо для Подстилка на основные основы глотала, прежде чем вернуться сюда.

$ npm install gulp-nunjucks-render --save-dev

var nunjucksRender = require('gulp-nunjucks-render');

Далее нам нужно создать структуру проекта, которая позволяет легко использовать Nunjucks. Мы будем использовать эту структуру:

project/   |- app/       |- index.html and other .html files      |- pages/      |- templates/          |- partials/

Папка шаблонов Используется для хранения всех парциальных сетей Nunjucks и других файлов Nunjucks, которые будут добавлены в файлы в папке страниц.

Папка страниц используется для хранения файлов, которые будут скомпилированы в HTML. Как только они будут скомпилированы, они будут созданы в папке приложения.

Давайте поработаем через процесс создания некоторых файлов Nunjucks, прежде чем создать задачу Gulp.

Прежде всего, одна хорошая вещь о Nunjucks (что другие шаблонные двигатели могут не иметь) состоит в том, что он позволяет создавать шаблон, который содержит код Boverplate HTML, который может быть унаследован другими страницами. Давайте назовем эту кокетную табличку HTML Layout.nunjucks.

Создайте файл под названием Layout.nunjucks и поместите его в папку шаблонов. Он должен содержать некоторую код котельной, как , и теги . Он также может содержать вещи, которые похожи на все ваши страницы, такие как ссылки на файлы CSS и JavaScript.

Вот пример файла layout.nunjucks:

    {% block content %} {% endblock %}

Кстати, я предпочитаю использовать расширение .Nunjucks для файлов и частичных файлов Nunjucks, потому что он позволяет мне знать, что я работаю с Nunjucks. Если вам не удобно .Nunjucks, не стесняйтесь оставить свои файлы как .html.

Далее давайте создадим файл index.nunjucks в каталоге страниц. Этот файл в конечном итоге будет преобразован в Index.html и помещен в папку приложения.

Он должен продлить макеты .Nunjucks, поэтому он содержит код BoaterPlate, который мы определены в Layout.nunjucks:

{% extends "layout.nunjucks" %}

Затем мы можем добавить код HTML, который специфичен для index.nunjucks между {% Block Content%} и {% Endblock%}.

{% extends "layout.nunjucks" %}

{% block content %} 
This is the index page
{% endblock %}

Мы закончили с настройкой файлов Nunjucks. Теперь давайте создадим задачу Nunjucks, которая преобразует index.nunjucks на index.html.

gulp.task('nunjucks', function() {  // nunjucks stuff here});

В рамках задачи Nunjucks нам сначала нужно сказать Nunjucks, где найти наши шаблоны. Мы можем сделать это с функцией Nunjucks.configure, которые обеспечивает Gulp-Nunjucks-Render.

gulp.task('nunjucks', function() {  nunjucksRender.nunjucks.configure(['app/templates/']);});

Далее мы добавляем файлы с страниц в задачу Gulp через Gulp.src. Затем мы выводим эти файлы в приложении.

gulp.task('nunjucks', function() {  nunjucksRender.nunjucks.configure(['app/templates/']);

  // Gets .html and .nunjucks files in pages  return gulp.src('app/pages/**/*.+(html|nunjucks)')  // Renders template with nunjucks  .pipe(nunjucksRender())  // output files in app folder  .pipe(gulp.dest('app'))});

Теперь попробуйте запустить глотку Nunjucks в вашей командной строке. Gulp будет создан index.html и поместил его в папку приложения для вас.

Если вы открыли этот файл index.html, вы должны увидеть следующий код:

  
This is the index page

Обратите внимание, как все (кроме метки

) пришло от макета .Nunjucks? Это то, для чего есть макет .Nunjucks. Если вам нужно связаться с тегом , добавьте JavaScript или изменить файлы CSS, вы знаете, что вы можете сделать это в Layouts.nunjucks, и каждая страница будет обновляться соответственно.

На данный момент вы успешно расширили макеты .Nunjucks в Index.nuunjucks и оказывал его index.nunjucks на index.html. Есть еще несколько вещей, на которых мы можем улучшить. Одна из вещей, которые мы можем сделать, это научиться использовать частичную.

Добавление Nunjucks частичных

Нам нужно создать частичную, прежде чем мы сможем добавить его на index.nunjucks. Давайте создадим частичную под названием Navigation.nunjucks и поместите его в папку с частичной папкой, которая в папке шаблонов.

Тогда давайте добавим простую навигацию на этот частичный:

Давайте теперь добавим частичную к нашему файлу index.nunjucks. Мы можем добавить частичные части с помощью {% включают в себя оператор «Path-Partial»%}, которые предоставляет Nunjucks.

{% block content %} 

This is the index page
{% include "partials/navigation.nunjucks" %}

{% endblock %}

Теперь, если вы запустите Gulp Nunjucks, вы должны получить файл index.html со следующим кодом:

This is the index page

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

Активный класс должен присутствовать только на ссылке на домашнюю страницу, если мы находимся на домашней странице. Если мы на странице, то активный класс должен присутствовать только на ссылке.

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

Добавление макроса Nunjucks

Во-первых, давайте создадим файл NAV-MACRO.NUNJUCKS в папке Macros, которая находится в папке шаблонов. Обратите внимание, что мы используем NAV-MACRO, чтобы убедиться, что вы не запутались между двумя навигационными файлами Nunjuck.

Вы можете начать писать макросы, как только вы создали файл NAV-MACRO.NUNJUCKS.

Все макросы начинаются и заканчиваются следующими тегами:

{% macro functionName() %}  {% endmacro %}

Давайте создадим макрос под названием Active. Это цель – выводить активное класс для нашей навигации. Это должно принять один аргумент, ActivePage, что по умолчанию для «домой».

{% macro active(activePage='home') %}  {% endmacro %}

Мы напишем HTML, который будет создан в рамках макроса. Здесь мы также можем использовать функцию IF, предоставленные NUNJUCKS, чтобы проверить, следует ли добавить активный класс:

{% macro active(activePage='home') %}{% endmacro %}

Мы закончили, написав макрос сейчас. Давайте учимся использовать его в Index.nunjucks Next.

Мы используем функцию импорта в NUNJUCKS, чтобы добавить файл Macro, в отличие от функции включения, которые мы использовали ранее, чтобы добавить частичную.

Когда мы импортируем макро-файл, мы должны установить его как переменную. Вот пример:

{% block content %}

{% import 'macros/navigation.nunjucks' as nav %}

{% endblock %}

В этом случае мы установили переменную NAV как всю навигацию .NunjucksMacro файл. Затем мы можем использовать переменную NAV, чтобы вызвать любой макрос, который написан в этом файле.

{% import 'macros/navigation.nunjucks' as nav %}{{nav.active('home')}}

С этим изменением попробуйте снова запустить глотку Nunjucks, и вы сможете увидеть этот выход:

Это это для использования макросов. Зная, что это неизменно поможет вам много, используя Nunjucks:)

Существует еще одна вещь, которую мы можем сделать, чтобы улучшить наш опыт шаблонов с Nunjucks, и это заполняет HTML с данными.

Заполнение HTML с данными

Давайте начнем с создания файла под названием data.json, который содержит ваши данные. Я рекомендую вам разместить эти данные.json в папке приложения.

$ cd app$ touch data.json

Давайте добавим некоторые данные сейчас. Мы можем использовать данные из более раннего примера.

{  "images": [{    "src": "image-one.png",    "alt": "Image one alt text"  }, {    "src": "image-two.png",    "alt": "Image two alt text"  }]}

Затем мы должны слегка использовать нашу задачу Nunjucks, чтобы использовать данные из этого файла data.json. Для этого нам нужно использовать для помощи другого плагина Gulp под названием Gulp-data Отказ

Давайте установим Gulp-данные, прежде чем двигаться дальше.

$ npm install gulp-data --save-dev

var data = require('gulp-data');

Gulp-data принимает функцию, которая позволяет вам вернуть файл. Мы можем использовать нужный узел функции предоставляет, чтобы получить этот файл данных:

.pipe(data(function() {  return require('./app/data.json')}))

При использовании требуются файлы из пользовательского каталога (не Node_Modules), нам нужно сказать узел путь к каталогу. Здесь мы начинаем с ./, который сообщает узел начать с текущего каталога, затем посмотрите в приложение для файла data.json.

Примечание. Лучший способ – использовать две функции, JSON.PARSE () и FS.READFILESYNC () вместо требуется. Мы охватим, как это сделать в «Автоматизация вашего рабочего процесса с глотком» Отказ

Давайте добавим данные Gupp-Data в нашу задачу Nunjucks сейчас.

gulp.task('nunjucks', function() {  nunjucksRender.nunjucks.configure(['app/templates/']);

  return gulp.src('app/pages/**/*.+(html|nunjucks)')    // Adding data to nunjucks    .pipe(data(function() {      return require('./app/data.json')    }))    .pipe(nunjucksRender())    .pipe(gulp.dest('app'))});

Наконец, давайте добавим некоторую разметку на index.nunjucks, поэтому он использует данные, которые мы добавили.

{% block content %}
    {% for image in images %}  
      
  {% endfor %}
{% endblock %}

  
      
Now, if you run `gulp nunjucks`, you should get a `index.html` file with the following markup: 

Отлично!

Упаковка

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

Затем мы все глубже в один шаблон двигатель, Nunjucks, и получил его на работу с глотанием. Мы также узнали, как использовать:

• Расширить, чтобы наследовать файл Nunjucks
• включать в себя частичную
• Импорт для импорта макроса

Если вы хотите еще больше ускорить рабочий процесс, проверьте Автоматизация вашего рабочего процесса Отказ Он будет покрывать:

• Смотреть и компиляция файлов Nunjucks
• Предотвращение ошибок из Nunjucks от разбивающих часов Гульпа
• Перезагрузите браузер автоматически всякий раз, когда файлы меняются

Оригинал: “https://www.freecodecamp.org/news/how-to-modularize-html-using-template-engines-and-gulp-d1cb8af54138/”