Шаблонизатор Pug

Цель урока – познакомить студентов с явлением шаблонизации, объяснить, для каких нужд она используется. Помочь выбрать правильную среду разработки. Рассказать об истории возникновения Pug и рассмотреть преимущества Pug над обычным HTML.

Цель урока – настроить среду разработки Pug, установив все необходимые программы, зависимости и плагины. Познакомить студентов с Node.js и таск-менеджером для автоматического выполнения задач Gulp. Рассказать и объяснить принцип работы нашего базового шаблона Pug для автоматической компиляции, с которым мы будем работать на протяжении всего курса.

Цель урока – рассмотреть базовый синтаксис шаблонизатора Pug, а именно логику его построения и разновидность тегов. Научиться создавать быстрые HTML-теги и вкладывать их друг в друга. Попрактиковаться вставлять текст внутрь меток, а также добавлять необходимые атрибуты.

Цель урока – рассмотреть разные варианты передачи текста внутрь тегов в Pug. Узнать об обычном и наиболее популярном - строчный текст (inline) в тегах. Научиться использовать так называемый конвейерный текст (piped) и рассмотреть на практике довольно популярный блочный текст. Попрактиковаться с контролем пробелов для предотвращения синтаксических ошибок.

Цель урока – научиться добавлять классы и идентификаторы к тэгам, используя сокращенный (быстрый) синтаксис Pug. Рассмотреть вариативность атрибутов, а именно многострочную и "в кавычках". Понять, в каких случаях следует использовать логические атрибуты. На практике усвоить разбиение объекта на атрибуты элемента с помощью синтаксиса &attributes.

Цель урока – научиться добавлять комментарии к вашему коду в шаблонизаторе Pug и понимать разницу между их видами. Рассмотреть очень важную тему встроенного кода Javascript в Pug, уметь на практике использовать различные виды этого кода, а именно: буферизированный, небуферизованный и неэкранированный-буферизованный. Усвоить синтаксис использования переменных в Pug.

Цель урока – научиться использовать условный синтаксис в шаблонизаторе Pug, а именно условные операторы if и else. Выучить новый оператор unless для более сжатого и удобного кода. Рассмотреть на практике оператор case(when), что по своей сути является полным аналогом switch(case) в Javascript.

Цель урока – изучить циклы each и while в шаблонизаторе Pug. Понять, как они работают, уметь контролировать разветвления и итерации. Узнать о миксинах как аналоге функциональных компонентов в прогрессивных фронтенд-фреймворках. Поговорим об атрибутах миксинов и о задании дефолтного значения аргумента, если он не передан пользователем. Рассмотрим важный аспект передачи неизвестного количества аргументов в миксины – так называемый Rest Arguments.

Цель урока – научиться включать разные файлы в наш шаблон Pug, используя новый оператор include. Узнать о наследовании шаблонов, что позволяет разделять сложные структуры шаблонов страниц на меньшие и более простые файлы. Выучить операторы block и extends. На практике уметь использовать блоки append и prepend.

Цель урока – разработать полноценную страницу (лендинг) с использованием всех навыков, полученных во время данного курса. Научиться создавать GitHub репозиторий и заливать туда свой проект. На практике усвоить процесс деплоя вашего проекта на бесплатный хостинг Netlify.