Node.js/Express(Pug)视图中复用导航栏与页脚的最佳实践

嘿，刚好我之前在Express+Pug项目里解决过一模一样的问题！其实你听到的「partial view（局部视图）」就是Pug里实现复用的核心，而且它还有比PHP的include更灵活的进阶玩法，给你拆解两种最实用的方案：

方案1：直接用include指令（对应PHP的include） #

这是最直观的方式，和你熟悉的PHP引入逻辑几乎一致：

1. 创建局部视图文件
   在你的views目录下新建一个partials文件夹，专门放可复用的组件：

• views/partials/header.pug：写导航栏代码

nav.site-nav
  ul
    li: a(href="/") 首页
    li: a(href="/about") 关于我们
    li: a(href="/contact") 联系我们

• views/partials/footer.pug：写页脚代码

footer.site-footer
  div.container
    p © 2024 我的站点 | 版权所有

2. 在主页面中引入
   在任何需要的Pug视图里，用include指令引入这两个文件就行，比如views/index.pug：

doctype html
html
  head
    title 首页
  body
    // 引入页眉
    include ./partials/header.pug
    // 页面主体内容
    main.content
      h1 欢迎来到我的站点
      p 这里是首页的专属内容
    // 引入页脚
    include ./partials/footer.pug

路径注意：如果你的partials在views目录下，也可以直接写include partials/header.pug（Express会自动从views根目录查找）。

方案2：模板继承（更推荐的最优方案） #

如果你的所有页面结构都很统一（都有相同的页眉、页脚、头部meta），那Pug的模板继承会比单纯的include更高效，相当于定义一个「母版页」，其他页面只需要填充专属内容：

1. 创建母版布局文件
   新建views/layout.pug，把公共的结构（页眉、页脚、头部）都写在这里，用block标记出需要自定义的区域：

doctype html
html
  head
    title #{pageTitle || '我的站点'}
    link(rel="stylesheet", href="/css/style.css")
  body
    // 公共页眉
    include ./partials/header.pug
    // 可自定义的内容区块
    block mainContent
    // 公共页脚
    include ./partials/footer.pug

2. 子页面继承母版并填充内容
   比如views/about.pug，只需要继承母版，然后替换mainContent区块的内容：

// 继承母版布局
extends layout.pug

// 自定义页面标题
- let pageTitle = '关于我们'

// 填充内容区块
block mainContent
  h1 关于我们
  p 这是我们团队的故事，成立于2020年...

views/contact.pug同理：

extends layout.pug

- let pageTitle = '联系我们'

block mainContent
  h1 联系我们
  form#contact-form
    label 姓名:
      input(type="text" name="name")
    label 邮箱:
      input(type="email" name="email")
    button(type="submit") 发送消息

这种方式的好处是：不用每个页面都重复写页眉页脚，后续要修改公共结构（比如换导航栏样式），只需要改header.pug或者layout.pug就行，所有页面都会自动更新，维护成本低很多。

最后补充一点基础配置 #

确保你的Express app已经正确设置了Pug视图引擎，在app.js里应该有这些代码：

const path = require('path');
const express = require('express');
const app = express();

// 设置视图目录
app.set('views', path.join(__dirname, 'views'));
// 设置视图引擎为Pug
app.set('view engine', 'pug');

总结一下：如果只是简单复用单个组件，用include；如果是统一页面结构，模板继承是最优解——这两种都是Pug官方推荐的局部视图复用方式，完全能满足你替代PHPinclude的需求！

内容的提问来源于stack exchange，提问作者Damien Stewart