在 EJS (Embedded JavaScript templating) 中，包含带参数的模板是一个非常有用的功能，它可以让你重用代码并保持你的项目的整洁和组织性。下面我将详细解释如何实现这一功能，并给出一个具体的例子。
步骤 1: 创建主模板和被包含的模板
首先，你需要有两个模板文件：一个是主模板，另一个是你想要包含的模板。假设我们有一个主模板 main.ejs 和一个被包含的模板 user.ejs。
步骤 2: 在被包含的模板中使用参数
在 user.ejs 中，我们可以定义一些将要接收的参数。例如，这个模板可能需要显示用户的信息，参数可以是用户名和用户年龄。
user.ejs
<p>用户名: <%= username %></p> <p>年龄: <%= age %></p>
步骤 3: 在主模板中包含并传递参数
在主模板 main.ejs 中，你可以使用 <%- include('user', {username: '张三', age: 28}) %> 语法来包含 user.ejs 模板，并传递需要的参数。
main.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户信息</title> </head> <body> <h1>欢迎查看用户信息</h1> <%- include('user', {username: '张三', age: 28}) %> </body> </html>
示范例子
假设我们运行上述的 EJS 模板，最后在浏览器中显示的结果将是：
欢迎查看用户信息 用户名: 张三 年龄: 28
总结
通过这种方式，你可以在 EJS 模板中灵活地包含其他模板，并传递任何你需要的参数。这种技术非常适合于需要多次重用相同布局或组件的情况，如用户信息卡片、导航栏等。这不仅可以提高代码的复用性，还可以使项目结构更清晰、更易于维护。
2024年7月20日 03:48 回复