Экономьте время в рабочем процессе разработки внешнего интерфейса, используя возможности языка шаблонов внешнего интерфейса, такого как Twig.js! Twig.js — это javascript-порт популярного языка шаблонов PHP Twig от Sensio Labs. Twig также используется популярными системами управления контентом, такими как Craft CMS. Если вы разрабатываете веб-сайты с помощью Craft CMS, вы будете чувствовать себя как дома, создавая шаблоны со статическим фасадом с помощью Twig.js.
Зачем использовать язык шаблонов внешнего интерфейса?
Есть много причин для использования языка шаблонов внешнего интерфейса. Я всегда создаю свои шаблоны внешнего интерфейса, прежде чем переходить к какой-либо разработке внутреннего интерфейса. Доступ к простым функциям во время сборки внешнего интерфейса, таким как расширение макетов, включая частичные, а также использование переменных и циклов, означает, что я могу гораздо эффективнее работать со своим рабочим процессом. Вот некоторые типы проектов, для которых я использовал рабочий процесс шаблонов внешнего интерфейса:
- Создание и запуск небольшого статического веб-сайта
- Предоставление полных шаблонов интерфейса отдельной команде разработчиков бэкэнда
- Создание прототипов сложных потоков приложений или адаптивных веб-сайтов, которые часто необходимо тестировать на нескольких устройствах.
- Подготовка и тестирование шаблонов внешнего интерфейса перед переходом к разработке CMS
- Изучение и определение сложных моделей данных, которые необходимо будет разработать на серверной части
Познакомьтесь с Twig.js
Twig.js — это всего лишь Javascript-реализация языка шаблонов Twig для PHP. Он имеет множество основных функций, доступных в Twig, таких как макеты шаблонов, включения, переменные, циклы, условные операторы и т. д. С помощью инструмента сборки, такого как Gulp, мы можем начать работу с некоторыми простыми шаблонами на раннем этапе, экономя наше время и умственные способности. энергии, когда пришло время интегрировать серверную часть.
Как добавить Twig.js в рабочий процесс вашего интерфейса?
Давайте погрузимся и добавим Twig.js в наш процесс сборки Gulp. Если вы еще не используете Gulp в своем проекте, посмотрите мою статью о быстром добавлении Gulp в ваш проект.
Если вы используете Grunt, для этого также есть эквивалентный синтаксический анализатор шаблонов, но в этой статье я не буду рассказывать, как настроить задачи Grunt.
1. Установите NPM-пакет gulp-twig.
Откройте терминал и перейдите в корневую папку вашего проекта (где бы ни находились ваши папки gulpfile.js и node_modules). Затем введите следующее:
> npm install gulp-twig --save-dev
2. Добавьте Twig в свой gulpfile
Теперь нам нужно сообщить нашему gulpfile о Twig.js. Добавьте следующую строку в начало файла gulpfile.js, рядом с тем местом, где вам требуются Gulp и другие пакеты.
var twig = require('gulp-twig');
3. Создайте задачу в gulpfile для разбора шаблонов Twig.
Теперь мы можем настроить нашу задачу gulp для компиляции наших шаблонов Twig.js в HTML, чтобы мы могли видеть наши обработанные шаблоны в браузере на этапе разработки внешнего интерфейса. Мы будем запускать задачу в HTML-файлах с синтаксисом Twig и выводить обработанные результаты в целевой каталог.
Вот базовый пример проекта с исходным и целевым каталогом, где «src/» будет содержать наши шаблоны Twig, а «dist/» в конечном итоге будет содержать наши HTML-шаблоны. Ваш проект может быть настроен немного по-другому, поэтому настройте имена каталогов по мере необходимости.
Вот наша задача Gulp, которую мы назвали «шаблоны», которую мы будем использовать для обработки наших шаблонов Twig. Добавьте это в свой файл gulpfile.js.
На этом этапе ваш gulpfile должен выглядеть примерно так или, по крайней мере, содержать следующее:
Теперь давайте создадим шаблон Twig с некоторым синтаксисом Twig и разберем его в файл HTML. Добавьте в каталог src/ файл с именем twig_template.html со следующей разметкой:
Теперь у нас должна быть возможность запустить названную задачу в Терминале, чтобы проанализировать наш шаблон Twig. Откройте терминал, убедитесь, что вы находитесь в том же каталоге, что и файл gulpfile.js вашего проекта, и выполните следующее:
> gulp templates
Если ваша задача выполнена успешно, вы должны увидеть полностью обработанный HTML-файл с тем же именем в каталоге dist/. И теперь вы можете добавить задачу «шаблоны» к любым вашим именованным задачам Gulp. Например, если у вас есть задача под названием «сборка», которая запускает сервер и выполняет несколько других задач, вы можете добавить к ней задачу «шаблоны» следующим образом:
gulp.task('serve', ['server', 'images', 'styles', 'scripts', 'templates']);
4. Наследование шаблонов
Давайте сделаем еще один шаг и настроим наследование шаблонов, чтобы нам не приходилось дублировать один и тот же HTML-код в каждом шаблоне.
Создайте папку в папке src/ с названием layouts. Затем создайте в папке layouts/ файл с именем default.html. Теперь ваша структура каталогов должна выглядеть примерно так:
Скопируйте всю оберточную HTML-разметку из своего шаблона и поместите ее в default.html и установите область блока контента, как в шаблоне Craft.
Содержание default.html:
Затем скажите twig_template.html расширить шаблон default.html и заключить содержимое в наш тег {% block content %}.
Содержимое twig_template.html:
Теперь вернемся в Терминал и разберем наш шаблон Twig.
> gulp templates
Отрендеренный HTML-файл должен содержать все элементы, начиная с default.html и twig_template.html.
Давайте подведем итоги, добавив простое включение.
5. Включает в себя
Давайте добавим новую папку в нашу папку src/ с именем includes и новый файл в нашей папке с именем header.html.
Переместите заголовок из src/twig_template.html в header.html и вместо этого используйте включение.
Вот как должен выглядеть header.html:
И twig_template.html должен выглядеть так:
Давайте еще раз запустим нашу задачу gulp «templates» и посмотрим, отобразит ли она наш включаемый файл.
> gulp templates
Если это сработало, вы должны увидеть содержимое включаемого файла в отрендеренном HTML-файле.
Поздравляю! Теперь вы можете использовать возможности шаблонов Twig в самом начале процесса разработки интерфейса! Это сэкономит вам массу времени на этапе разработки внешнего интерфейса и поможет вам более плавно перейти к разработке внутреннего интерфейса.
Расширенные возможности
Мы едва коснулись того, что вы можете делать с помощью Gulp и Twig.js. Вот некоторые другие вещи, которые вы могли бы добавить в свой рабочий процесс внешнего интерфейса с помощью Gulp для различных типов потребностей разработки внешнего интерфейса:
- Используйте Browsersync, чтобы передавать статическую версию шаблонов в браузер, следить за изменениями в файлах шаблонов и перезагружать браузер при внесении в них изменений (и многое другое). Если вы еще не проверили Browsersync, вам следует это сделать.
- Украшайте отображаемые HTML-шаблоны с помощью gulp-prettify. Это может быть особенно полезно, если вы разрабатываете шаблоны внешнего интерфейса, которые должны быть переданы другой команде. Получите всю мощь наследования шаблонов и включений, а также создавайте красивые шаблоны HTML для своих результатов!
- Используйте файлы JSON для настройки реальных данных для ваших шаблонов с помощью gulp-data. Это может быть удобно для использования более реалистичных данных в ваших шаблонах или прототипах. Это также может быть удобно для моделирования ваших данных, чтобы сэкономить еще больше времени перед переходом на разработку CMS.
Если расширенная статья по любой из этих тем вас заинтересует, твитните мне.
Обязательно ли использовать Twig.js?
Неа! Есть и другие очень похожие языки шаблонов внешнего интерфейса, которые вы могли бы использовать. Вот несколько других.
Нужна помощь?
Если вам нравится идея сэкономить массу времени вашей команде на рабочем процессе внешнего интерфейса, но вы ненавидите идею возиться с такими инструментами сборки, как Gulp и Grunt, вам повезло. Я могу сделать это для вас!
- Настройка современного внешнего интерфейса — Наймите меня, чтобы настроить собственный, современный и многоразовый шаблон сборки внешнего интерфейса для ваших проектов Craft или ExpressionEngine.
- Коучинг и наставничество. У вас есть новый сотрудник и вы хотите, чтобы он освоил современный рабочий процесс? Я могу совмещать индивидуальные занятия с наставничеством и специально подобранными онлайн-курсами, чтобы ваш новый сотрудник быстро освоился, а вы продолжали заниматься своим бизнесом. "Связаться"!
- Наймите меня, чтобы помочь с проектом. Просто нужен кто-то, кто поможет с проектом? Я специализируюсь на погружении и адаптации к существующему рабочему процессу вашей команды. Наряду с написанием кода я также могу предложить полезные, экономящие время стратегии. Забронируйте меня на проект.
Первоначально опубликовано на http://analyticl.com.
