Подключение файлов

Шапка с навигацией и подвал одинаковы на всех страницах сайта. Команда include вставляет содержимое другого файла в шаблон, поэтому общий кусок разметки пишется один раз, а правится в одном месте.

Шапка в отдельном файле

Создайте папку src/includes/ и в ней файл src/includes/header.pug:

header
  a.logo(href="index.html") Кофейня «Утро»
  nav
    a(href="index.html") Главная
    a(href="menu.html") Меню
    a(href="contacts.html") Контакты

Это обычный шаблон Pug, только без каркаса страницы. Скрипт сборки его не трогает: он собирает только src/index.pug.

Подключение

Вставьте шапку в src/index.pug строкой include:

include includes/header.pug
main
  h1 Свежий кофе каждый день

Путь указывается относительно файла, в котором стоит include. Pug вставил шапку на место строки:

<header><a class="logo" href="index.html">Кофейня «Утро»</a>
  <nav><a href="index.html">Главная</a><a href="menu.html">Меню</a><a href="contacts.html">Контакты</a></nav>
</header>
<main>
  <h1>Свежий кофе каждый день</h1>
</main>

Подвал

Так же вынесите подвал в src/includes/footer.pug:

footer
  p © 2026 Кофейня «Утро»

И подключите его в конце src/index.pug:

include includes/header.pug
main
  h1 Свежий кофе каждый день
include includes/footer.pug

Теперь страница состоит из трёх частей:

<header><a class="logo" href="index.html">Кофейня «Утро»</a>
  <nav><a href="index.html">Главная</a><a href="menu.html">Меню</a><a href="contacts.html">Контакты</a></nav>
</header>
<main>
  <h1>Свежий кофе каждый день</h1>
</main>
<footer>
  <p>© 2026 Кофейня «Утро»</p>
</footer>

Если поменять пункт меню в header.pug, после сборки он изменится на всех страницах, которые подключают шапку.

Файл с миксинами

include подключает и миксины. Перенесите миксин drink из прошлого урока в src/mixins.pug:

mixin drink(name, price)
  .card
    h3= name
    p.price $#{price}

Файл с одними объявлениями ничего не выводит, но после подключения миксины доступны в src/index.pug:

include mixins.pug
+drink("Капучино", 3)

Вызов работает так же, как раньше:

<div class="card">
  <h3>Капучино</h3>
  <p class="price">$3</p>
</div>

Подключение не-Pug файлов

Файл с другим расширением вставляется как есть, без разбора. Так можно встроить небольшой CSS-файл прямо в страницу:

style
  include style.css

Содержимое src/style.css окажется внутри тега style.

Частая ошибка

Писать путь от корня проекта со слешем в начале:

include /includes/header.pug

Сборка остановится с ошибкой: для путей со слешем Pug нужна настройка basedir — папка, от которой они отсчитываются. Пишите пути относительно текущего файла (includes/header.pug, а из src/pages/ — ../includes/header.pug) или передайте basedir: "src" в pug.renderFile().