Преимущество Pug перед простым HTML — возможность подключения файлов. Представьте проект, состоящий из пяти статических страниц. Некоторые сайты, при таком объёме, не используют CMS или другие серверные решения, которые будут управлять шаблоном сайта. Во-первых, это быстрее, так как нет дополнительной обработки, во-вторых, это снижает порог входа в проект.
У статического решения есть одна глобальная проблема — переиспользование повторяющихся HTML-блоков. Чаще всего это футер, шапка, меню, баннеры и так далее. Копировать HTML — не лучшее решение, так как рано или поздно это приведёт к различиям в блоках.
В этой ситуации на помощь приходит Pug. Он позволяет создать отдельные файлы для повторяющихся элементов и подключать их внутрь любого файла. Как будет рассмотрено в уроке, это может быть не только разметка, но и любые данные, вплоть до интерпретации других файлов, таких как Markdown.
Для примера создадим несколько Pug-файлов с разметкой шапки и футера:
//- includes/header.pug
header
a.logo(href='#') Хекслет
nav
a(href='/programs') Программы
a(href='/courses') Курсы
a(href='/pricing') Цены
a(href='/teams') Компаниям
//- includes/footer.pug
footer
p Hexlet Ltd.
Эти файлы можно включать внутрь любых других Pug-файлов используя конструкцию include и указав путь к подключаемому файлу.
//- index.pug
doctype html
html
head
meta(charset='UTF-8')
meta(name='viewport' content='width=device-width, initial-scale=1.0')
meta(rel='icon' type='image/x-icon' href='favicon.ico')
title Hexlet
link(rel='stylesheet' href='./styles/app.css')
body
//- Подключение шапки сайта
include includes/header.pug
main
h1 Научитесь программировать и получите востребованную профессию
//- Подключение футера сайта
include includes/footer.pug
Во время обработки index.pug интерпретатор подставит все подключаемые файлы. В этом случае нет необходимости компилировать все файлы, только основной. С подобной структурой подключений мы уже знакомились в курсе посвященному препроцессору SASS.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta rel="icon" type="image/x-icon" href="favicon.ico">
<title>Hexlet</title>
<link rel="stylesheet" href="./styles/app.css">
</head>
<body>
<header>
<a class="logo" href="#">Хекслет</a>
<nav>
<a href="/programs">Программы</a>
<a href="/courses">Курсы</a>
<a href="/pricing">Цены</a>
<a href="/teams">Компаниям</a>
</nav>
</header>
<main>
<h1>Научитесь программировать и получите востребованную профессию</h1>
</main>
<footer>
<p>Hexlet Ltd.</p>
</footer>
</body>
</html>
Pug позволяет подключать любой тип файла. Логика достаточно проста — данные любого подключенного файла будут вставлены «как есть». Таким образом можно подключить не только шаблоны с синтаксисом Pug, но и скрипты, CSS код, текстовые данные.
/* Basis Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1,
h2,
h3 {
color: #666;
font: 2em/1.5 'Headers', sans-serif;
}
doctype html
html
head
meta(charset='UTF-8')
meta(name='viewport' content='width=device-width, initial-scale=1.0')
meta(rel='icon' type='image/x-icon' href='favicon.ico')
title Hexlet
style
include styles/basis.css
link(rel='stylesheet' href='./styles/app.css')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta rel="icon" type="image/x-icon" href="favicon.ico">
<title>Hexlet</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1,
h2,
h3 {
color: #666;
font: 2em/1.5 'Headers', sans-serif;
}
</style>
<link rel="stylesheet" href="./styles/app.css">
</head>
</html>
Дополнительные модули
При работе с Pug можно пользоваться не только встроенными возможностями, но и расширять их другими обработчиками. Это достигается за счёт взаимодействия с jstransformer.
В качестве примера используем распространённую задачу по добавлению файлов формата markdown в разметку. Markdown — язык разметки текстов, который может преобразовываться в HTML. Такой способ записи текстов облегчает их прочтение и даёт возможность правильно размечать тексты людям, которые далеки от вёрстки.
Преобразуем следующий текст:
# Hexlet. Научитесь программировать и получите востребованную профессию
Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.
Выбирайте Хекслет, если вы:
* Хотите научиться программировать, но не знакомы с разработкой
* Хотите получить новую профессию
* Хотите развиваться
## Как проходит обучение
Вы выбираете профессию, мы подбираем для вас индивидуального наставника. Это действующий программист с опытом преподавания. Обучение программированию в рамках профессии объединяется в четыре модуля. Каждый модуль состоит из тематических курсов и практического проекта.
Интересно: на Хекслете тексты для курсов пишутся именно в формате Markdown, а потом автоматически переводятся в HTML-разметку при их загрузке на сервер.
Для преобразования Markdown в HTML в препроцессоре Pug используется пакет jstransformer-markdown-it. Его можно установить командой
npm install jstransformer-markdown-it
Для подключения модуля используется синтаксис :название-модуля. Всё, что находится внутри модуля, будет обработано скриптом.
main
:markdown-it
# Hexlet. Научитесь программировать и получите востребованную профессию
Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.
Выбирайте Хекслет, если вы:
* Хотите научиться программировать, но не знакомы с разработкой
* Хотите получить новую профессию
* Хотите развиваться
## Как проходит обучение
Вы выбираете профессию, мы подбираем для вас индивидуального наставника. Это действующий программист с опытом преподавания. Обучение программированию в рамках профессии объединяется в четыре модуля. Каждый модуль состоит из тематических курсов и практического проекта.
<main>
<h1>Hexlet. Научитесь программировать и получите востребованную профессию</h1>
<p>Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>
<p>Выбирайте Хекслет, если вы:</p>
<ul>
<li>Хотите научиться программировать, но не знакомы с разработкой</li>
<li>Хотите получить новую профессию</li>
<li>Хотите развиваться</li>
</ul>
<h2>Как проходит обучение</h2>
<p>Вы выбираете профессию, мы подбираем для вас индивидуального наставника. Это действующий программист с опытом преподавания. Обучение программированию в рамках профессии объединяется в четыре модуля. Каждый модуль состоит из тематических курсов и практического проекта.</p>
</main>
Важно: я специально аккуратно форматирую итоговый HTML-код для удобного чтения во время урока. Если вы повторите шаги из урока, Pug может выдать вам немного другое форматирование. Это не страшно и не является ошибкой.
Внутрь модулей так же можно передавать файл для подключения. Это приоритетный вариант, так как лучше не иметь текст внутри Pug файлов, а хранить их отдельно. Это большая тема, посвящённая архитектуре приложений, но старайтесь разделять текст и его вывод. Чем меньше текста содержится в Pug, тем проще с ним работать.
Для подключения файла к модулю используется та же конструкция include, после которой указывается название модуля и файл для подключения.
main
include:markdown-it main.md
Дополнительное задание
Создайте базовую разметку HTML страницы с использованием Pug и добавьте следующий текст в формате markdown:
# О Хекслете
Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.
## Идея и мотивация
Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.
При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.
Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. Каждый урок на Хекслете включает в себя до трех шагов:
1. **Теория**. Короткая лекция в виде текста или видео. Она основана на задаче, так что в отличие от традиционной академической теории, мы делаем упор на специфическую задачу, которая уже решена умными инженерами и программистами, а затем следуем по их шагам, чтобы понять решение.
2. **Тест**. Проверка вашего понимания. Нам не важно запоминание фактов, поэтому вопросы теста нацелены на понимание концепции, а не на тренировку памяти.
3. **Практика**. Упражнения по программированию в реальной среде разработки, доступны через браузер. Не в виде симуляции, не в виде игрушки, а на настоящей машине с базами данных, фреймворками, серверами и другими инструментами.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
