Html pug что это

 class="buffer">  
Hello , Hexlet  

На первый взгляд нет существенной разницы между буферизованным и небуферизованным кодом. С одной стороны да, и тот и другой способ позволяют добавить JavaScript логику в существующий код, но можно определить ключевое отличие — буферизованный код должен вначале получить результат, а только потом он будет выведен. Небуферизованный код может быть исполнен в любое удобное время или не быть исполнен вовсе.

• Небуферизованный код удобно использовать при создании функций, массивов, объектов.
• Буферизованный код чаще всего используется при создании однострочных функций или строк, которые состоят только из JavaScript кода

Дополнительное задание

Используя знания из курса Введение в программирование создайте переменную со счётчиком и, с помощью цикла, увеличивайте его на два. Результаты запишите в виде списка. Количество итераций выберите самостоятельно. Определите, где будет буферизованный и небуферизованный код.

  1 3 5 7 

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Что такое и зачем нужны шаблонизаторы HTML

Есть много способов сэкономить время и упростить жизнь разработчика. Но они кажутся такими сложными и непонятными, что знакомство с ними постоянно откладывается. И зря: сегодня мы расскажем, как автоматизировать работу, используя вспомогательные инструменты.

Шаблонизаторы для HTML — один из таких способов.

Что такое шаблонизаторы

Шаблонизатор — это инструмент, который позволяет проще писать разметку, делить её на компоненты и связывать с данными.

Главное преимущество шаблонизаторов — они избавляют от необходимости писать повторяющийся код несколько раз. Это кажется не такой большой проблемой, но всё же разработчикам часто приходится тратить на это время.

Зачем нужны шаблонизаторы

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

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

Какие проблемы решают шаблонизаторы?

При вёрстке шаблонов принято выделять повторяющиеся блоки в компоненты, чтобы использовать их на других страницах, но иногда один из них требуется изменить. Если речь идёт о внешнем виде компонента, всё просто: вы меняете его CSS-код, и он обновляется везде. Но как быть, если нужно переделать HTML-код сложного компонента? Сначала придётся внести правку в код на одной странице, а затем найти все подобные компоненты и провести аналогичные изменения с каждым.

Простой пример — страница с карточками товаров. Если вы вносите правку в одну карточку, то вам придётся исправлять и остальные — вручную. Просто удалить старые и скопировать новые с уже заполненными данными не получится.

Такие изменения могут касаться не только сложной разметки, но и более простых элементов вроде контента в ссылках. Типовая задача — разметить главное меню так, чтобы при клике на ссылку открывались соответствующие шаблоны страниц. Это упрощает процесс разработки и демонстрации. Но если у вас в проекте 30 страниц и вы вносите правку в ссылку в главном меню, то вам придётся делать это 30 раз.

Эти ситуации не катастрофичны, но приводят к следующим проблемам:

• Приходится постоянно держать в голове контекст проекта. То есть помнить, где есть похожие компоненты, чтобы вносить правки везде. Особенно неудобно, если вы вернулись к проекту после перерыва.
• Возникают ошибки на этапе разработки и внесения правок. Можно забыть применить изменения на все компоненты, и где-то появятся баги. Причём не из-за плохой вёрстки, а просто потому, что вы забыли скопировать код.
• Увеличивается время разработки и внесения правок, особенно при потере контекста.

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

Как шаблонизаторы помогают решать проблемы?

Рассказывать про работу шаблонизаторов будем на примере принципа их работы, без отсылки к конкретному инструменту.

Создание шаблонов

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

Рассмотрим это на условном, несуществующем синтаксисе.

Файл раскладки

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

Файл каталога и новостей

  
Страница каталога
 
Карточка 1
 
Карточка 2
 
Карточка 3
 
  
Страница новостей
 
Новость 1
 
Новость 2
 
Новость 3
 

В отдельных файлах мы указываем, какой шаблон для них используется и как они будут выглядеть. На выходе мы получим две страницы с одинаковой шапкой и подвалом и разным контентом.

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

Создание компонентов

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

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

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

В качестве примера абстрактной реализации рассмотрим реализацию каталога.

В отдельном файле описываем саму карточку товара со всей структурой.

А уже в другом файле, в котором необходимо подключать компонент, вызываем его.

Каталог магазина

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

Работа с данными

Не может же быть так, чтобы при вставке девяти карточек проекта они все стали одинаковыми? Что делать, если мы хотим видеть разный контент в одинаковых компонентах?

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

То есть мы можем не использовать данные внутри компонента, а передать их при вызове, чтобы они подставились в нужные места. Разберёмся, что это значит.

При описании компонента мы говорим, что его контент не статичный, а берётся из объекта с данными, которые будут в него переданы.

  
 alt=>
   >
 

И при вызове компонента мы передаём ему эти данные, чтобы на выходе у нас был компонент в нужной структуре, но с разным содержанием.

Каталог магазина

Благодаря этому мы можем использовать разный контент в одинаковых компонентах, при необходимости менять классы у разных блоков и легко управлять интерфейсом.

Интерактивность

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

Условные выражения позволяют менять что-то внутри компонента в зависимости от данных внутри. Это делает компоненты более гибкими. Например, у вас есть компонент кнопки в трёх цветах. Вместо создания трёх отдельных компонентов изменение класса цвета можно сделать внутри одного, и он будет меняться в зависимости от условий.

Циклические конструкции освобождают от копирования повторяющихся компонентов. Вы указываете данные, которые надо перебрать, и компонент, в который их надо вывести. На выходе вы получаете нужное количество данных в нужном компоненте. Это удобно при создании карточек товаров и списков — новостных и прочих.

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

Какие шаблонизаторы бывают

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

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

Pug — написан на Node.js и компилирует строгий синтаксис в конечный HTML-файл. То есть он не работает на лету и по факту всё равно превращается в HTML. Его надо собирать через сборщик. Инструмент представляет собой довольно нестандартный синтаксис, который непривычен в начале, но быстро осваивается и даёт хороший профит.

Twig — шаблонизатор, написанный на PHP, часто используется при вёрстке шаблонов. Он собирается на сервере и не требует предварительной сборки, но работает в окружении локального сервера.

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

Подготовка к работе с шаблонизаторами

Шаблонизаторы не выглядят сложным инструментом, но с ними всё не так просто.

• Первое, чему необходимо научиться, — правильно использовать принципы. Верно выделять шаблоны, компоненты и правильно их комбинировать. В нужный момент использовать условия и циклы, чтобы процесс написания и поддержки становился проще.
• У шаблонизаторов есть особенности синтаксиса, которые не всегда очевидны, и некоторые функции не всегда работают так, как от них ожидается.
• И самое важное — необходимо правильно использовать возможности для разных типовых задач, чтобы не усложнять работу.

Всё это постигается опытом и позволяет существенно упростить процессы производства и дальнейшей поддержки проекта.

Какие выводы можно сделать

Шаблонизаторы делают написание кода проще и избавляют разработчика от хранения в голове большого количества контекста. Это позволяет тратить силы на более полезные вещи.

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

Главное — использовать шаблонизаторы правильно, чтобы действительно оптимизировать работу.

Работаем с шаблонизатором PUG

Pug (ранее Jade) – инструмент для шаблонизации HTML-кода. Этот препроцессор HTML позволяет разработчикам значительно упростить процесс создания веб-страниц и веб-приложений. В этой статье мы рассмотрим основы Pug, его синтаксис, преимущества, а также приведем примеры его использования.

Если вы еще не начали карьеру в IT, приходите на наш бесплатный вебинар, чтобы узнать, как начать зарабатывать с помощью зерокодинга и нейросетей!

Основы Pug

Pug – это шаблонизатор HTML, который предоставляет удобный способ создания HTML-разметки с использованием упрощенного синтаксиса. Он является частью платформы Node.js и позволяет разработчикам генерировать HTML-код с помощью JavaScript.

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

HTML:

Hello, World!

This is a paragraph.

Pug:

p This is a paragraph.

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

Преимущества

• Удобство чтения и написания кода

Синтаксис Pug делает код более читаемым и компактным, что упрощает его написание и поддержку.

• Возможность использования JavaScript

Вы можете встроить JavaScript-код непосредственно в шаблон, что делает его мощным инструментом для динамической генерации контента.

• Поддержка переменных и данных

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

• Поддержка вложенности

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

Недостатки

Конечно, Pug имеет свои недостатки, которые стоит учитывать при выборе этого шаблонизатора. Рассмотрим некоторые из них:

1. Изучение нового синтаксиса: для разработчиков, привыкших к стандартному HTML, изучение синтаксиса Паг может потребовать времени и усилий. Новичкам может быть сложно привыкнуть к использованию отступов вместо тегов и угловых скобок.
2. Сложность отладки: отладка шаблонов может быть сложнее по сравнению с отладкой стандартного HTML. Ошибки в отступах или синтаксисе могут привести к неправильной генерации HTML, что может быть неочевидно на первый взгляд.
3. Ограниченная поддержка IDE: не все интегрированные среды разработки (IDE) обладают хорошей поддержкой Паг. Это может затруднить разработку и отладку, особенно если вы привыкли к использованию мощных инструментов IDE.
4. Невозможность использования напрямую в браузере: они не могут быть интерпретированы браузером напрямую. Вам всегда нужно компилировать Pug-код в HTML перед тем, как отдать его клиенту, что может потребовать дополнительных шагов в вашем рабочем процессе разработки.
5. Не самый популярный выбор: Паг не так широко используется, как стандартный HTML, поэтому может быть сложнее найти поддержку и ресурсы для обучения. Это может создать проблемы при найме разработчиков.
6. Сложности в командной работе: если ваша команда включает разработчиков, не знакомых с Pug, это может создать сложности в совместной работе. Необходимость в постоянном переводе Pug в стандартный HTML может замедлить разработку.

Пример

Для лучшего понимания того, как работает Pug, давайте рассмотрим простой пример создания веб-страницы.

Прежде чем начать использовать Pug, убедитесь, что у вас установлен Node.js. Затем установите шаблонизатор с помощью npm (Node Package Manager) следующей командой:

npm install pug

• Создание простой веб-страницы

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

• Создайте файл `index.pug` и добавьте следующий код:

title Welcome to Pug Example

p This is a simple Pug example.

• Теперь мы можем скомпилировать этот файл в HTML с помощью команды:

• После выполнения команды будет создан файл `index.html` с следующим содержанием:

Hello, World!

This is a simple Pug example.

Теперь у вас есть простая веб-страница, созданная с использованием Pug.

Заключение

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