0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Преимущество Pug перед простым HTML - возможность подключения файлов. Представьте проект, состоящий из пяти статических страниц. Некоторые сайты, при таком объёме, не используют CMS или другие серверные решения, которые будут управлять шаблоном сайта. Во-первых, это быстрее, так как нет дополнительной обработки, во-вторых, это снижает порог входа в проект.</p>
1
<p>Преимущество Pug перед простым HTML - возможность подключения файлов. Представьте проект, состоящий из пяти статических страниц. Некоторые сайты, при таком объёме, не используют CMS или другие серверные решения, которые будут управлять шаблоном сайта. Во-первых, это быстрее, так как нет дополнительной обработки, во-вторых, это снижает порог входа в проект.</p>
2
<p>У статического решения есть одна глобальная проблема - переиспользование повторяющихся HTML-блоков. Чаще всего это футер, шапка, меню, баннеры и так далее. Копировать HTML - не лучшее решение, так как рано или поздно это приведёт к различиям в блоках.</p>
2
<p>У статического решения есть одна глобальная проблема - переиспользование повторяющихся HTML-блоков. Чаще всего это футер, шапка, меню, баннеры и так далее. Копировать HTML - не лучшее решение, так как рано или поздно это приведёт к различиям в блоках.</p>
3
<p>В этой ситуации на помощь приходит Pug. Он позволяет создать отдельные файлы для повторяющихся элементов и подключать их внутрь любого файла. Как будет рассмотрено в уроке, это может быть не только разметка, но и любые данные, вплоть до интерпретации других файлов, таких как Markdown.</p>
3
<p>В этой ситуации на помощь приходит Pug. Он позволяет создать отдельные файлы для повторяющихся элементов и подключать их внутрь любого файла. Как будет рассмотрено в уроке, это может быть не только разметка, но и любые данные, вплоть до интерпретации других файлов, таких как Markdown.</p>
4
<p>Для примера создадим несколько Pug-файлов с разметкой шапки и футера:</p>
4
<p>Для примера создадим несколько Pug-файлов с разметкой шапки и футера:</p>
5
<p>Эти файлы можно включать внутрь любых других Pug-файлов используя конструкцию include и указав путь к подключаемому файлу.</p>
5
<p>Эти файлы можно включать внутрь любых других Pug-файлов используя конструкцию include и указав путь к подключаемому файлу.</p>
6
<p>Во время обработки<em>index.pug</em>интерпретатор подставит все подключаемые файлы. В этом случае нет необходимости компилировать все файлы, только основной. С подобной структурой подключений мы уже знакомились в курсе посвященному препроцессору SASS.</p>
6
<p>Во время обработки<em>index.pug</em>интерпретатор подставит все подключаемые файлы. В этом случае нет необходимости компилировать все файлы, только основной. С подобной структурой подключений мы уже знакомились в курсе посвященному препроцессору SASS.</p>
7
<p>Pug позволяет подключать любой тип файла. Логика достаточно проста - данные любого подключенного файла будут вставлены "как есть". Таким образом можно подключить не только шаблоны с синтаксисом Pug, но и скрипты, CSS код, текстовые данные.</p>
7
<p>Pug позволяет подключать любой тип файла. Логика достаточно проста - данные любого подключенного файла будут вставлены "как есть". Таким образом можно подключить не только шаблоны с синтаксисом Pug, но и скрипты, CSS код, текстовые данные.</p>
8
<h2>Дополнительные модули</h2>
8
<h2>Дополнительные модули</h2>
9
<p>При работе с Pug можно пользоваться не только встроенными возможностями, но и расширять их другими обработчиками. Это достигается за счёт взаимодействия с jstransformer.</p>
9
<p>При работе с Pug можно пользоваться не только встроенными возможностями, но и расширять их другими обработчиками. Это достигается за счёт взаимодействия с jstransformer.</p>
10
<p>В качестве примера используем распространённую задачу по добавлению файлов формата markdown в разметку. Markdown - язык разметки текстов, который может преобразовываться в HTML. Такой способ записи текстов облегчает их прочтение и даёт возможность правильно размечать тексты людям, которые далеки от вёрстки.</p>
10
<p>В качестве примера используем распространённую задачу по добавлению файлов формата markdown в разметку. Markdown - язык разметки текстов, который может преобразовываться в HTML. Такой способ записи текстов облегчает их прочтение и даёт возможность правильно размечать тексты людям, которые далеки от вёрстки.</p>
11
<p>Преобразуем следующий текст:</p>
11
<p>Преобразуем следующий текст:</p>
12
<p><strong>Интересно:</strong>на Хекслете тексты для курсов пишутся именно в формате Markdown, а потом автоматически переводятся в HTML-разметку при их загрузке на сервер.</p>
12
<p><strong>Интересно:</strong>на Хекслете тексты для курсов пишутся именно в формате Markdown, а потом автоматически переводятся в HTML-разметку при их загрузке на сервер.</p>
13
<p>Для преобразования Markdown в HTML в препроцессоре Pug используется пакет<a>jstransformer-markdown-it</a>. Его можно установить командой</p>
13
<p>Для преобразования Markdown в HTML в препроцессоре Pug используется пакет<a>jstransformer-markdown-it</a>. Его можно установить командой</p>
14
<p>Для подключения модуля используется синтаксис :название-модуля. Всё, что находится внутри модуля, будет обработано скриптом.</p>
14
<p>Для подключения модуля используется синтаксис :название-модуля. Всё, что находится внутри модуля, будет обработано скриптом.</p>
15
<p><strong>Важно:</strong>я специально аккуратно форматирую итоговый HTML-код для удобного чтения во время урока. Если вы повторите шаги из урока, Pug может выдать вам немного другое форматирование. Это не страшно и не является ошибкой.</p>
15
<p><strong>Важно:</strong>я специально аккуратно форматирую итоговый HTML-код для удобного чтения во время урока. Если вы повторите шаги из урока, Pug может выдать вам немного другое форматирование. Это не страшно и не является ошибкой.</p>
16
<p>Внутрь модулей так же можно передавать файл для подключения. Это приоритетный вариант, так как лучше не иметь текст внутри Pug файлов, а хранить их отдельно. Это большая тема, посвящённая архитектуре приложений, но старайтесь разделять текст и его вывод. Чем меньше текста содержится в Pug, тем проще с ним работать.</p>
16
<p>Внутрь модулей так же можно передавать файл для подключения. Это приоритетный вариант, так как лучше не иметь текст внутри Pug файлов, а хранить их отдельно. Это большая тема, посвящённая архитектуре приложений, но старайтесь разделять текст и его вывод. Чем меньше текста содержится в Pug, тем проще с ним работать.</p>
17
<p>Для подключения файла к модулю используется та же конструкция include, после которой указывается название модуля и файл для подключения.</p>
17
<p>Для подключения файла к модулю используется та же конструкция include, после которой указывается название модуля и файл для подключения.</p>
18
<h2>Дополнительное задание</h2>
18
<h2>Дополнительное задание</h2>
19
<p>Создайте базовую разметку HTML страницы с использованием Pug и добавьте следующий текст в формате markdown:</p>
19
<p>Создайте базовую разметку HTML страницы с использованием Pug и добавьте следующий текст в формате markdown:</p>
20
20