Pug (ранее известный как Jade) — это шаблонизатор для языка разметки HTML, который позволяет упростить процесс создания HTML-шаблонов с использованием предварительно определенных элементов и переменных.
Если вам нужно создать небольшие шаблоны и повторно использовать их в различных файлах, то вам пригодится функциональность Pug для подключения файлов.
Для начала, вы можете создать отдельный Pug-файл для каждого небольшого шаблона, например, header.pug, footer.pug и т.д. В каждом из этих файлов вы можете определить свой собственный набор элементов, переменных и логику, связанную с соответствующими элементами шаблона.
Затем, чтобы подключить эти шаблоны в других Pug-файлах, вы можете использовать специальную директиву include. Например, чтобы подключить шаблон header.pug к файлу index.pug, вы можете добавить строку include header.pug в начале файла index.pug. В результате, при компиляции Pug в HTML, содержимое файла header.pug будет вставлено в место директивы include.
Дополнительно, вы можете передавать данные в подключаемые шаблоны с помощью опции locals. Например, если вам нужно передать название страницы из файла index.pug в шаблон header.pug, вы можете использовать следующий синтаксис в файле index.pug: include header.pug, { pageTitle: 'Моя страница' }. После этого, вы сможете использовать переменную pageTitle в файле header.pug.
Примеры использования подключаемых шаблонов в Pug:
header.pug:
.header h1= pageTitle
footer.pug:
.footer p © 2022 Моя компания
index.pug:
doctype html
html
head
title Моя страница
body
include header.pug, { pageTitle: 'Моя страница' }
main
h2 Содержимое страницы
include footer.pug
После компиляции данного файла index.pug в HTML, результат будет выглядеть следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>Моя страница</title>
</head>
<body>
<div class="header">
<h1>Моя страница</h1>
</div>
<main>
<h2>Содержимое страницы</h2>
</main>
<div class="footer">
<p>© 2022 Моя компания</p>
</div>
</body>
</html>
Таким образом, использование подключаемых шаблонов позволяет упростить разработку и повторное использование кода в Pug, в то же время поддерживая четкую структуру проекта.