EJS模板引擎中嵌套包含(include)的最佳实践

2025-05-28 21:33:52作者：盛欣凯Ernestine

EJS作为一款流行的JavaScript模板引擎，其包含(include)功能是构建模块化视图层的重要特性。本文将深入探讨如何在EJS中高效地使用嵌套包含来组织页面结构。

基础包含模式

EJS允许通过<%- include('partials/header') %>语法包含其他模板文件。这种机制非常适合将页面拆分为可重用的组件，如页眉、页脚、导航栏等。

嵌套包含的挑战

开发者经常遇到需要将内容"包裹"在基础模板中的场景。传统做法是将基础模板拆分为"开始"和"结束"两部分：

<%- include('partials/base-start') %>
<!-- 主要内容区域 -->
<h1>页面标题</h1>
<%- include('partials/base-end') %>

这种方式虽然可行，但会导致模板逻辑分散，维护困难。

更优雅的解决方案

EJS提供了更优雅的方式来实现模板嵌套：

主模板(base.ejs):

<!DOCTYPE html>
<html>
<head>
    <!-- 公共头部内容 -->
    <title><%= title %></title>
</head>
<body>
    <!-- 公共导航 -->
    <div class="container">
        <%- content %>
    </div>
    <!-- 公共页脚 -->
</body>
</html>

内容模板:

<h1>欢迎页面</h1>
<p>这是主要内容区域</p>

渲染逻辑:

res.render('base', {
    title: '首页',
    content: fs.readFileSync('./views/home-content.ejs', 'utf8')
});

动态内容注入

通过将内容作为变量传递给基础模板，可以实现更灵活的布局：

<!DOCTYPE html>
<html>
<head>
    <!-- 动态CSS文件 -->
    <link rel="stylesheet" href="/css/<%= cssFile %>.css">
</head>
<body>
    <%- bodyContent %>
</body>
</html>