В Pug (ранее известном как Jade) есть механизм наследования шаблонов, который позволяет вам создавать базовый шаблон и включать другие шаблоны в него. Это может быть очень полезно, когда у вас есть общие элементы в разных страницах, такие как шапка, подвал или боковая панель.
Для того чтобы включить страницы в шаблон, который наследуется, следуйте этим шагам:
1. Создайте базовый шаблон:
doctype html html head title My Website body header // Здесь может быть содежимое вашей шапки main // Здесь будет вставляться содержимое каждой страницы footer // Здесь может быть содержимое вашего подвала
2. Создайте шаблоны ваших страниц, которые будут наследовать базовый шаблон. Вставьте содержимое каждой страницы внутри блока "block content":
extends layout.pug // Укажите путь к базовому шаблону block content h1 Home Page p Welcome to my website! // Другое содержимое страницы
3. Подключите страницы к базовому шаблону, используя ключевое слово "block":
extends layout.pug block content h1 About Page p This is the about page of my website. // Другое содержимое страницы
4. Когда вы будете рендерить страницы, дайте им имя, чтобы Pug смог найти правильный шаблон:
const express = require('express'); const app = express(); // Указываем путь к шаблонам и используем движок Pug app.set('views', './views'); app.set('view engine', 'pug'); // Рендерим страницу "home" с использованием шаблона "layout" app.get('/', function(req, res) { res.render('home', { title: 'Home' }); }); // Рендерим страницу "about" с использованием шаблона "layout" app.get('/about', function(req, res) { res.render('about', { title: 'About' }); }); app.listen(3000, function() { console.log('Server started on port 3000'); });
Теперь, при посещении корневой страницы (/
) или страницы "about" (/about
), Pug будет использовать соответствующий шаблон и вставлять содержимое страницы в блок "block content" базового шаблона.