关于express 3+中使用Nodejs的ejs模板的问题

关于express 3+中使用Nodejs的ejs模板的问题

这个问题的主要原因是express3+中取消了ejs默认的模范如果需要使用需要如下操作： 安装

npm intall express-partials

在app.js中加入

var partials = require('express-partials');

在app.configure()之中加入如下设置

app.set('view engine', 'ejs');
app.use(partials());

然后再在views目录中新建一个layout.ejs文件，然后就可以使用了。


7 回复

关于Express 3+ 中使用Node.js 的 EJS 模板的问题

在 Express 3.x 及更高版本中，默认情况下不再支持 EJS 模板引擎的部分功能（例如布局文件）。如果你希望在项目中使用这些功能，可以通过安装额外的中间件来实现。以下是一个简单的步骤指南，展示如何在 Express 3+ 中使用 EJS 模板引擎并添加部分支持。

安装依赖

首先，你需要安装 express-partials 包，该包可以帮助你在 EJS 模板中使用部分功能。

npm install express express-partials ejs --save

上述命令将安装 express, express-partials, 和 ejs 三个包，并将它们保存到你的 package.json 文件中。

配置应用

接下来，在你的主应用文件（例如 app.js）中进行必要的配置。

// app.js

var express = require('express');
var partials = require('express-partials');

var app = express();

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

// 使用 express-partials 中间件
app.use(partials());

// 其他中间件和路由配置
app.get('/', function(req, res) {
    res.render('index', { title: '首页' });
});

// 启动服务器
app.listen(3000, function() {
    console.log('App is running on port 3000.');
});

创建布局文件

在 views 目录下创建一个名为 layout.ejs 的文件。这个文件将作为其他页面的布局模板。

<!-- views/layout.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%- title %></title>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    
    <section id="content">
        <%- body %>
    </section>
    
    <footer>
        <p>&copy; 2023 我的网站</p>
    </footer>
</body>
</html>

创建视图文件

现在你可以在 views 目录中创建其他 EJS 文件，并引用上面定义的布局文件。

<!-- views/index.ejs -->

<% layout('layout') %>

<h2>欢迎来到首页</h2>
<p>这是首页的内容。</p>

通过以上步骤，你已经成功地在 Express 3+ 中集成了 EJS 模板引擎，并添加了部分支持。这样你就可以方便地使用布局文件和其他 EJS 特性来构建你的 Web 应用。


ejs默认的模范？

什么意思？

兄弟，用jade模板。不骗你。

最新的ejs可以不使用这个函数了，直接在 ejs 里面写循环代码（支持原生的javascript代码）就好了。但是不知道那种效率高。

好嘞，谢谢哥们

在Express 3.x及更高版本中，默认情况下不再包含ejs模板引擎。如果您希望在项目中使用ejs模板，您需要手动进行一些配置。

首先，确保您已经安装了express-partials模块，该模块可以帮助您实现布局模板功能：

npm install express-partials --save

接下来，在您的应用主文件（例如 app.js）中添加以下代码：

  1. 引入 express-partials 模块。
  2. 配置视图引擎为 ejs。
  3. 使用 express-partials 提供的中间件。

以下是具体的代码示例：

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

// 引入表达式片段库
var partials = require('express-partials');

// 设置视图引擎为 ejs
app.set('view engine', 'ejs');

// 应用 express-partials 中间件
app.use(partials());

// 其他中间件和路由配置...

app.listen(3000, function () {
  console.log('App listening on port 3000!');
});

接着，创建一个基本的布局文件 layout.ejs 放在 views 目录下：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <%- body %>
</body>
</html>

最后，在您的视图文件（如 index.ejs）中使用 block 和 extends 关键字来继承布局文件：

<% extends "layout.ejs" %>

<% block title %>
Home Page
<% endblock %>

<% block body %>
<h1>Welcome to the home page</h1>
<p>This is a sample text.</p>
<% endblock %>

这样，当您访问首页时，Express 将渲染带有 layout.ejs 布局的 index.ejs 视图。

以上步骤展示了如何在 Express 3.x 及更高版本中使用 ejs 模板引擎以及如何实现简单的布局功能。

回到顶部