如何在Node.js+Express中无需模板引擎实现通用页眉页脚复用

项目结构规划 #

先整理好项目文件夹结构，把复用的页眉、页脚放在单独的partials目录下，主页面集中存放：

your-project/
├── public/          # 静态资源（CSS、JS、图片等）
│   ├── css/
│   └── js/
├── views/
│   ├── partials/    # 存放可复用的页面片段
│   │   ├── header.html
│   │   └── footer.html
│   ├── index.html   # 主页面示例
│   └── about.html   # 其他页面示例
├── app.js           # Express服务器入口
└── package.json

1. 安装依赖 #

仅需安装Express（Node.js内置的fs模块用于文件读取，无需额外安装）：

npm install express

2. 编写复用的页眉/页脚片段 #

• views/partials/header.html（导航栏示例）：

<header>
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于我们</a>
    <a href="/contact">联系我们</a>
  </nav>
</header>

• views/partials/footer.html（页脚示例）：

<footer>
  <p>&copy; 2024 我的网站 | 保留所有权利</p>
</footer>

3. 改造Express服务器实现片段注入 #

在app.js中编写工具函数，读取页面片段和主页面内容，替换占位符后返回给客户端：

const express = require('express');
const fs = require('fs').promises;
const path = require('path');

const app = express();
const PORT = 3000;

// 配置静态资源目录
app.use(express.static('public'));

// 工具函数：读取页面并注入页眉/页脚
async function renderPage(pagePath, res) {
  try {
    // 读取复用片段
    const header = await fs.readFile(path.join(__dirname, 'views/partials/header.html'), 'utf8');
    const footer = await fs.readFile(path.join(__dirname, 'views/partials/footer.html'), 'utf8');
    
    // 读取主页面内容
    let pageContent = await fs.readFile(pagePath, 'utf8');
    
    // 替换占位符为实际片段
    pageContent = pageContent.replace('<!-- HEADER -->', header);
    pageContent = pageContent.replace('<!-- FOOTER -->', footer);
    
    // 设置响应头并返回内容
    res.set('Content-Type', 'text/html');
    res.send(pageContent);
  } catch (err) {
    console.error('页面渲染失败:', err);
    res.status(500).send('服务器内部错误');
  }
}

// 路由配置
app.get('/', (req, res) => {
  renderPage(path.join(__dirname, 'views/index.html'), res);
});

app.get('/about', (req, res) => {
  renderPage(path.join(__dirname, 'views/about.html'), res);
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}`);
});

4. 编写主页面（插入占位符） #

在主页面中用<!-- HEADER -->和<!-- FOOTER -->标记需要注入片段的位置，比如views/index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <!-- HEADER -->
  
  <main>
    <h1>欢迎来到首页</h1>
    <p>这是一个使用Express搭建的多页面网站，页眉和页脚已复用。</p>
  </main>
  
  <!-- FOOTER -->
  
  <script src="/js/main.js"></script>
</body>
</html>

运行测试 #

1. 执行node app.js启动服务器
2. 访问http://localhost:3000和http://localhost:3000/about，可看到两个页面加载了相同的页眉和页脚

内容的提问来源于stack exchange，提问作者Shahnawaz Alam