如何在模板中使用局部模板？

推荐答案

在 Express 中使用局部模板（Partial Templates）可以通过以下步骤实现：

1. 安装模板引擎：首先确保你已经安装了所需的模板引擎，例如 ejs、pug 或 handlebars。

2. 设置模板引擎：在 Express 应用中设置模板引擎。例如，使用 ejs 作为模板引擎：

   const express = require('express');
   const app = express();
   const path = require('path');
   
   app.set('view engine', 'ejs');
   app.set('views', path.join(__dirname, 'views'));

3. 创建局部模板：在 views 目录下创建一个局部模板文件，例如 _header.ejs。

   <!-- views/_header.ejs -->
   <header>
       <h1>Welcome to My Website</h1>
   </header>

4. 在主模板中引入局部模板：在主模板文件中使用 <%- include('partials/_header') %> 引入局部模板。

   // www.javascriptcn.com code example
   <!-- views/index.ejs -->
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Home Page</title>
   </head>
   <body>
       <%- include('partials/_header') %>
       <p>This is the home page content.</p>
   </body>
   </html>

5. 渲染主模板：在路由中渲染主模板。

   app.get('/', (req, res) => {
       res.render('index');
   });

本题详细解读

1. 模板引擎的选择

Express 支持多种模板引擎，如 ejs、pug、handlebars 等。选择哪种模板引擎取决于项目的需求和开发者的偏好。ejs 是一种简单易用的模板引擎，语法类似于 HTML，适合初学者。

2. 局部模板的作用

局部模板允许你将页面中的重复部分（如页眉、页脚、导航栏等）提取出来，单独存放在一个文件中。这样可以提高代码的可维护性和复用性。

3. 局部模板的引入

在 ejs 中，使用 <%- include('partials/_header') %> 语法引入局部模板。include 函数会将指定的局部模板文件内容插入到当前模板中。

4. 路径设置

在设置模板引擎时，app.set('views', path.join(__dirname, 'views')); 指定了模板文件的存放路径。通常情况下，模板文件存放在 views 目录下，局部模板可以放在 views/partials 目录中。

5. 渲染模板

在路由处理函数中，使用 res.render('index'); 渲染主模板。Express 会自动查找 views 目录下的 index.ejs 文件，并将其渲染为 HTML 返回给客户端。

通过以上步骤，你可以在 Express 中轻松使用局部模板来组织和管理你的视图代码。