Логотип Хекслета

HTML: Препроцессор Pug

Теория: Подключение файлов

Преимущество 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. **Практика**. Упражнения по программированию в реальной среде разработки, доступны через браузер. Не в виде симуляции, не в виде игрушки, а на настоящей машине с базами данных, фреймворками, серверами и другими инструментами.

Рекомендуемые программы

Навигация
Теория
Тесты
Упражнение