Наследование шаблонов

У всех страниц сайта одинаковый каркас: doctype, head со стилями, body с шапкой и подвалом. Меняется только середина. Наследование шаблонов позволяет описать каркас один раз в макете, а в каждой странице заполнить только изменяемые места — блоки.

Макет с блоком

Создайте файл src/layout.pug:

doctype html
html(lang="ru")
  head
    meta(charset="utf-8")
    title Кофейня «Утро»
  body
    main
      block content

Строка block content — место, которое заполнит страница. content — просто имя, его выбираете вы. Сам макет не собирается в отдельный HTML-файл.

Страница на основе макета

Замените содержимое src/index.pug:

extends layout.pug
 
block content
  h1 Свежий кофе каждый день
  p Заходите на завтрак с 8:00.

extends указывает макет, а block content с отступом ниже — чем заполнить одноимённый блок. После npm run build в dist/index.html весь каркас из макета, а внутри main — разметка страницы:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Кофейня «Утро»</title>
  </head>
  <body>
    <main>
      <h1>Свежий кофе каждый день</h1>
      <p>Заходите на завтрак с 8:00.</p>
    </main>
  </body>
</html>

Несколько блоков и содержимое по умолчанию

Блоков в макете может быть сколько угодно. Если под блоком в макете есть разметка, это значение по умолчанию: оно останется, если страница блок не переопределит. Добавьте в src/layout.pug блоки для заголовка вкладки и для стилей:

doctype html
html(lang="ru")
  head
    meta(charset="utf-8")
    block title
      title Кофейня «Утро»
    block head
      link(rel="stylesheet" href="style.css")
  body
    main
      block content

Страница может переопределить title и не трогать head — тогда в нём останется общий файл стилей.

append и prepend

Иногда странице нужно не заменить блок, а дополнить его — например, подключить свой CSS, не потеряв общий. Для этого есть block append (добавить в конец) и block prepend (добавить в начало), короче — append и prepend. В src/index.pug:

extends layout.pug
 
block title
  title Главная — Кофейня «Утро»
 
append head
  link(rel="stylesheet" href="home.css")
 
block content
  h1 Свежий кофе каждый день

Заголовок вкладки заменён, а в head теперь оба файла стилей — общий и главной страницы:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Главная — Кофейня «Утро»</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="home.css">
  </head>
  <body>
    <main>
      <h1>Свежий кофе каждый день</h1>
    </main>
  </body>
</html>

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

Написать разметку страницы вне блоков:

extends layout.pug
 
h1 Меню

В шаблоне с extends на верхнем уровне могут стоять только блоки и миксины, поэтому сборка остановится с ошибкой «Only named blocks and mixins can appear at the top level of an extending template». Всю разметку страницы пишите внутри block content или другого блока.