Node-Express项目中EJS实现类似Django Jinja的Block模板功能咨询

首先明确说：EJS本身没有像Jinja那样原生的block语法，但我们可以通过模板布局+include+变量传递，或者借助第三方工具来实现几乎一样的模板继承/区块复用功能，完全不用再复制粘贴模板了！

一、用原生EJS实现区块复用 #

方法1：自定义基础模板+变量传递 #

先创建一个通用的基础模板（比如views/layout.ejs），把重复的HTML结构（头部、导航、页脚）放进去，然后用变量留出让子页面填充的区块：

<!-- views/layout.ejs -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 可自定义的标题 -->
    <title><%= pageTitle || '默认标题' %></title>
    <link rel="stylesheet" href="/css/common.css">
    <!-- 子页面可以添加额外的头部内容 -->
    <%- extraHead || '' %>
</head>
<body>
    <!-- 公共导航 -->
    <nav><%- include('partials/nav') %></nav>
    
    <!-- 主内容区块：由子页面提供 -->
    <main><%- mainContent %></main>
    
    <!-- 公共页脚 -->
    <footer><%- include('partials/footer') %></footer>
    
    <!-- 子页面可以添加额外的脚本 -->
    <%- extraScripts || '' %>
</body>
</html>

然后子页面只需要准备自己的内容，在路由里渲染基础模板并传递内容：

// 路由示例
app.get('/about', (req, res) => {
    // 先渲染子内容（不使用布局）
    const aboutContent = res.render('about-content', {}, { layout: false });
    // 渲染基础模板，传入区块内容
    res.render('layout', {
        pageTitle: '关于我们',
        mainContent: aboutContent,
        extraHead: '<meta name="description" content="这是关于我们的页面">'
    });
});

views/about-content.ejs只需要写页面独有的内容：

<h1>关于我们</h1>
<p>我们是一个Node-Express开发团队...</p>

方法2：用第三方包express-ejs-layouts简化 #

这个包可以帮我们自动处理布局，类似Jinja的block体验：

1. 安装依赖：

npm install express-ejs-layouts

2. 配置Express：

const express = require('express');
const expressLayouts = require('express-ejs-layouts');
const app = express();

app.set('view engine', 'ejs');
// 启用ejs布局
app.use(expressLayouts);
// 可选：指定自定义布局文件（默认是views/layout.ejs）
// app.set('layout', 'layouts/main');

3. 编写布局文件views/layout.ejs，用<%- body %>表示主内容区块：

<!DOCTYPE html>
<html>
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <nav><%- include('partials/nav') %></nav>
    <!-- 子页面的内容会自动插入这里 -->
    <%- body %>
    <footer><%- include('partials/footer') %></footer>
</body>
</html>

4. 子页面直接写内容，不需要处理布局：

<!-- views/about.ejs -->
<h1>关于我们</h1>
<p>我们是一个Node-Express开发团队...</p>

5. 路由里直接渲染子页面即可，布局会自动应用：

app.get('/about', (req, res) => {
    res.render('about', { pageTitle: '关于我们' });
});

二、如果觉得EJS不够优雅，推荐这些模板引擎 #

如果你习惯了Jinja的block和extends语法，觉得EJS的方式有点繁琐，可以考虑换以下引擎：

• Nunjucks：语法和Jinja几乎完全一致，原生支持extends、block、宏等功能，对Express的集成非常友好，学习成本极低（如果你熟悉Django/Jinja的话）。
• Pug（原Jade）：支持模板继承（extends + block），语法简洁，用缩进代替标签，适合喜欢极简风格的开发者。
• Handlebars：通过partials和layouts实现复用，生态丰富，有很多插件扩展功能，适合需要更灵活模板逻辑的场景。

三、绝对不推荐保留现有复制粘贴的方式 #

复制粘贴模板是典型的反模式，后续维护会非常痛苦：比如修改导航栏样式，你需要手动修改所有页面；页面结构调整时，要逐一更新每个文件。不管用EJS的复用方案还是换其他引擎，都能大幅提升开发效率和可维护性。

内容的提问来源于stack exchange，提问作者Hari Anugrah