В 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.