Для верстки многостраничного статического сайта с использованием Pug (ранее известного как Jade) вы можете использовать следующие шаги и концепции.
1. Установка Pug и подготовка рабочей среды:
- Установите Node.js, если у вас еще не установлено.
- После установки Node.js установите Pug через npm, используя следующую команду в терминале: npm install pug -g.
- Создайте пустую папку для вашего проекта и перейдите в нее через терминал.
- Инициализируйте проект с помощью npm init, следуя инструкциям.
2. Создание шаблонов Pug:
- В папке проекта создайте папку views (или любую другую папку по вашему усмотрению).
- В папке views создайте файл layout.pug, который будет являться базовым шаблоном для вашего сайта. В нем вы можете определить общий макет, заголовок, подвал и другие общие для всех страниц элементы.
- Для каждой страницы сайта создайте отдельный файл Pug в папке views (например, index.pug, about.pug, contact.pug).
- В каждом файле Pug определите блок контента, который будет заменен при рендеринге на конкретной странице.
3. Создание статических файлов:
- Создайте папку public в корневой папке вашего проекта. В эту папку будут сохраняться статические файлы (например, CSS, JavaScript, изображения).
- Добавьте все необходимые файлы CSS, JavaScript и изображений в папку public.
4. Разработка стилей и скриптов:
- Создайте файлы стилей (CSS или SCSS) и скриптов (JavaScript) в папке public.
- В вашем базовом шаблоне Pug (файл layout.pug), добавьте теги ссылки или скрипты, чтобы подключить ваши стили и скрипты на каждой странице.
5. Работа с данными и управление контентом:
- В каждом файле Pug вы можете использовать Pug-синтаксис для формирования контента.
- Можете передавать динамические данные из вашего сервера на клиент, используя различные переменные Pug, такие как #{variable} или #${variable}.
6. Рендеринг Pug:
- Создайте файл app.js (или любое другое имя файла) в корневой папке вашего проекта и импортируйте необходимые зависимости (Pug, Express).
- В вашем файле app.js настройте Express, задавая папку public как статическую папку и устанавливая движок визуализации Pug.
- Создайте маршруты для каждой страницы, обрабатывая запросы и рендеринг соответствующего файла Pug.
- Запустите ваше приложение, запустив сервер Express.
Таким образом, вы сможете использовать Pug для верстки многостраничных статических сайтов. Pug предоставляет богатые возможности шаблонизации, динамическую генерацию контента и удобную структуру файлов. Он также позволяет переиспользовать части кода и общую структуру сайта для более эффективной разработки. Не забудьте установить Express и настроить сервер для рендеринга Pug-шаблонов.