В Pug (бывший Jade) есть несколько способов создания переиспользуемых секций, которые можно подключать через include на многостраничных сайтах. Следуя этим способам, вы можете создавать общий код для всех страниц и избежать дублирования.
Первый способ - использование блоков. Блоки позволяют определить общий контент, который может быть переопределен на каждой странице. Первым шагом создайте файл layout.pug, в котором будет общая структура каждой страницы. Внутри layout.pug определите блоки, например, head, header, footer и другие, которые вы считаете нужными:
doctype html
html
head
// Общий для всех страниц код для <head>
block head
body
header
// Общий код для заголовка сайта
block header
// Остальная структура сайта
block content
footer
// Код для подвала сайта
block footer
Затем, создайте отдельный файл для каждой страницы, например, home.pug, и импортируйте layout.pug. Внутри этого файла используйте ключевое слово extends, чтобы расширить базовый шаблон. Затем, используйте ключевое слово block, чтобы определить содержимое блоков, которые вы хотите переопределить для этой страницы:
extends layout.pug // Переопределение блока head block head title Home Page link(rel='stylesheet', href='styles.css') // Дополнительные стили или скрипты для конкретной страницы // Переопределение блока content block content h1 Welcome to my home page! p This is the content for the home page. // Дополнительный контент для этой страницы
Вы можете создать любое количество таких файлов для разных страниц с различным содержимым внутри блоков.
Второй способ - использование миксинов. Миксины позволяют создавать переиспользуемый код для частей веб-страницы. Создайте файл mixins.pug, в котором будет определить миксины:
mixin header
header
// Общий код для заголовка сайта
mixin footer
footer
// Код для подвала сайта
Затем, подключите этот файл через include в каждом файле страницы, где вы хотите использовать миксины:
include mixins.pug
doctype html
html
head
include head.pug
// Общий для всех страниц код для <head>
body
+header
// Остальная структура сайта
block content
+footer
В данном примере, +header и +footer представляют собой вызовы миксинов, которые будут заменены на соответствующий код из файла mixins.pug. Также, вы можете использовать блоки в сочетании с миксинами, чтобы динамически менять части кода.
Оба способа позволяют создавать переиспользуемый код и упрощают его обновление на всех страницах вашего многостраничного сайта. Вы можете выбрать любой из этих способов в зависимости от вашей предпочтительной методологии и потребностей проекта.