В Pug, структура проекта может быть организована с использованием различных подходов. В этом ответе я расскажу о наиболее распространенном подходе, который поможет вам создать чистый и модульный проект на основе Pug.
Первым шагом я рекомендую создать основную структуру каталогов вашего проекта. Вот пример стандартной структуры каталогов:
- src
(корневая папка проекта)
- layouts
(директория для шаблонов макетов)
- partials
(директория для частичных представлений)
- pages
(директория для страниц проекта)
Каталог layouts
будет содержать шаблоны макетов, которые определяют глобальную структуру и общий внешний вид вашего сайта. Эти макеты содержат общий код, который включается в каждую страницу. Например, вы можете создать макет с заголовком, навигационным меню и подвалом:
doctype html html head title My Website body header h1 My Logo nav a(href="#") Home a(href="#") About a(href="#") Contact block content footer p © 2020 My Website
Затем, вы можете создать страницы вашего проекта в папке pages
. Каждая страница будет включать макет, а также уникальный контент для этой страницы. Например, создаем файл home.pug
:
extends ../layouts/default block content h2 Welcome to my homepage p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis aliquet neque, a placerat dui sollicitudin vel. Mauris egestas purus vel consequat accumsan.
В данном примере, мы расширяем макет default.pug
из папки layouts
и добавляем уникальный контент в блок content
. То же самое можно проделать и для других страниц, чтобы подключить подходящий макет и добавить контент.
Кроме того, вы можете создать директорию partials
, где можно размещать частичные представления или компоненты, которые могут быть использованы повторно на нескольких страницах вашего проекта. Например, вы можете создать файл sidebar.pug
в папке partials
:
aside.sidebar ul li Sidebar Item 1 li Sidebar Item 2 li Sidebar Item 3
Затем, на любой странице вы можете включить этот компонент следующим образом:
extends ../layouts/default block content h2 Welcome to my homepage p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis aliquet neque, a placerat dui sollicitudin vel. Mauris egestas purus vel consequat accumsan. include ../partials/sidebar
Использование директивы include
включает содержимое файла sidebar.pug
.
Таким образом, вы можете организовать структуру проекта в Pug с помощью макетов, страниц и частичных представлений. Это позволит вам создавать модульный и переиспользуемый код, что облегчит разработку и поддержку проекта на основе Pug.