Шаблоны страниц
Как и другие полноценные HTML-препроцессоры, Pug имеет функциональность наследования шаблонов. В реальных проектах с большим количеством страниц, такое наследование обычно многоуровневое.
Валидная HTML-страница должна включать в себя обязательную часть, и это не только конкретные HTML-тэги, но и их правильная вложенность, а так же определённые аттрибуты. Для 2024 года минимальный HTML-код валидной веб-страницы таков:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
</head>
<body>
<!-- Видимое содержимое -->
</body>
</html>
Помимо обязательной части, есть необязательные, но часто используемые фрагменты кода, например следующая декларация, указывающая, что содержимое страницы не нужно вписывать в размеры экрана (ввиду того, что сегодня отзывчивая/адаптивная вёрстка де-факто обязательна):
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
С использованием наследования шаблонов, можно вынести обязательные и частые необязательные части в родительский файл, а с помощью внутреннего JavaScript можно ещё и сделать генерацию шаблонного кода. Например, можно лишь указать пути к стилям и скриптам через переменные, а родительский шаблон на основе этих переменных сгенерирует нужные тэги в нужном месте.
Библиотека YDF предлагает следующие готовые шаблоны для их дальнейшего наследования: