关于Express 3.* 和 EJS include 在Nodejs中的疑问

关于Express 3.* 和 EJS include 在Nodejs中的疑问
### 关于Express 3.* 和 EJS include 在Nodejs中的疑问

在使用Express 3.x版本时，你可能会遇到一些关于如何使用EJS模板引擎的<%- include %>标签来包含其他文件的疑问。本文将帮助你理解如何在Express 3.x应用中使用EJS的include功能。

Express 3.x 简介

Express是一个简洁而灵活的Node.js Web应用程序框架，提供一系列强大的特性来开发Web应用和移动应用的后端。它可以帮助你处理路由、中间件、视图等。

EJS 模板引擎

EJS (Embedded JavaScript) 是一种简单的模板语言，允许你在HTML中嵌入JavaScript代码。Express默认支持EJS模板引擎，因此你可以直接使用EJS来渲染视图。

使用EJS Include

在EJS中，你可以使用<%- include('path/to/file') %>语法来包含其他文件。例如，如果你有一个布局文件layout.ejs，你可以在其他EJS文件中引用它：

目录结构

/views
    /layouts
        layout.ejs
    index.ejs

layout.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>
    <main>
        <%- body %>
    </main>
    <footer>
        <p>Copyright © 2023</p>
    </footer>
</body>
</html>

index.ejs

<%- include('../layouts/layout.ejs') %>

在这个例子中，index.ejs 文件通过 <%- include('../layouts/layout.ejs') %> 包含了 layout.ejs 文件。layout.ejs 中的 <%- body %> 将被 index.ejs 的内容替换。

设置Express 3.x 使用EJS

首先确保你的Express应用已经安装了EJS模块：

npm install ejs --save

然后，在你的Express应用中设置视图引擎：

var express = require('express');
var app = express();

// 设置视图引擎为EJS
app.set('views', './views'); // 设置视图目录
app.set('view engine', 'ejs'); // 设置默认视图引擎为EJS

app.get('/', function(req, res) {
    res.render('index', { title: 'Home Page' });
});

app.listen(3000);

这样，当你访问根路径时，Express会使用index.ejs 渲染视图，并且通过 <%- include('../layouts/layout.ejs') %> 包含 layout.ejs。

通过以上步骤，你就可以在Express 3.x应用中使用EJS的include功能来组织和复用你的视图文件了。希望这些信息对你有所帮助！


1 回复

在Express 3.x版本中使用EJS模板引擎的<%- include %>标签来包含其他文件是非常常见的需求。下面是一个完整的示例，展示如何设置Express 3.x应用，并在EJS模板中使用<%- include %>来包含其他文件。

示例代码

目录结构

/views
    /layouts
        layout.ejs
    index.ejs

layout.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>
    <main>
        <%- body %>
    </main>
    <footer>
        <p>Copyright © 2023</p>
    </footer>
</body>
</html>

index.ejs

<h1>Welcome to the Home Page</h1>
<p>This is the content of the home page.</p>

app.js

var express = require('express');
var app = express();

// 设置视图引擎为EJS
app.set('views', './views'); // 设置视图目录
app.set('view engine', 'ejs'); // 设置默认视图引擎为EJS

app.get('/', function(req, res) {
    res.render('index', { title: 'Home Page' });
});

app.listen(3000);

运行应用

确保你已经安装了EJS模块：

npm install ejs --save

然后启动应用：

node app.js

访问 http://localhost:3000/，你会看到包含 layout.ejs 布局的 index.ejs 视图。

通过这种方式，你可以轻松地在Express 3.x应用中使用EJS的<%- include %>标签来包含其他文件，从而更好地组织和复用视图文件。

回到顶部