新手关于express的模版问题 Nodejs版

我使用express -t ejs club生成的框架文件，不知道为什么是jade模版引擎，views目录下面也是jade的模版文件，手动修改app.js中的app.set(‘view engine’,‘ejs’);，然后在views目录下建立ejs模版后能读取，但是layout.ejs的内容读取不到，有木有大神能够解释下？

songsunli 1楼•2 个月前

当然可以！根据你提供的问题描述，你在使用 Express 框架时遇到了模板引擎相关的问题。以下是对这个问题的详细解答，并附带了一些示例代码。

问题分析

当你使用 express -t ejs club 命令创建项目时，默认情况下，Express 可能会默认使用 Jade（现在称为 Pug）作为模板引擎。即使你在 app.js 中设置了 EJS 为视图引擎，但如果没有正确配置 EJS 的布局文件（如 layout.ejs），那么 EJS 文件可能无法正确渲染布局内容。

解决方案

确保设置正确的视图引擎：确保在 app.js 中正确设置了 EJS 为视图引擎。
正确配置 EJS 布局文件：确保你的 layout.ejs 文件位于 views 目录中，并且能够被 EJS 正确解析。

示例代码

app.js

首先，在 app.js 中设置 EJS 为视图引擎：

const express = require('express');
const path = require('path');
const app = express();

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

// 定义路由
app.get('/', (req, res) => {
    res.render('index', { title: 'Home Page' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

views/layout.ejs

创建一个基本的 layout.ejs 文件，用于定义页面布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <main>
        <%= body %>
    </main>
    <footer>
        <p>&copy; 2023 My Website</p>
    </footer>
</body>
</html>

views/index.ejs

创建一个简单的 index.ejs 文件来测试布局是否正确应用：

<% layout('layout') %>

<h2>This is the Home Page</h2>
<p>Welcome to my website!</p>

解释

设置视图引擎：在 app.js 中使用 app.set('view engine', 'ejs'); 和 app.set('views', path.join(__dirname, 'views')); 来设置 EJS 为视图引擎，并指定视图文件的路径。
布局文件：layout.ejs 文件定义了页面的整体结构，包括头部、主体和底部。使用 <%= body %> 插入子页面的内容。
子页面文件：index.ejs 文件通过 <% layout('layout') %> 指定使用 layout.ejs 作为其布局文件。然后在 <body> 部分插入具体内容。

通过以上步骤，你应该能够解决 EJS 模板引擎的布局问题，并正确渲染页面。希望这些信息对你有所帮助！

itying888 2楼•2 个月前

那个不生成ejs的问题解决了。。。使用express -e club，我用错参数了。。。看来是我用的版本跟我看的文章的作者的版本不同导致的。。不过那个layout.ejs的内容依旧读不到。。。

phonegap100 3楼•2 个月前

npm install partials

htzhanglong 4楼•2 个月前

也可以用include引入layout.ejs

h691938207 5楼•2 个月前

使用<% include layout %> 引入么？是要在每个模版文件前加这么一句么？我include后报500错误提示“body is not defined” 怎么解决呢。。。

phonegap100 6楼•2 个月前

jade我写的不习惯，前端设计的html交给我，会让我改死的，ejs比较直观方便。

songsunli 7楼•2 个月前

这个方法可行~

vueper 8楼•2 个月前

在百度上搜到的一篇帖子，感谢作者，以此结贴：http://www.cnblogs.com/meteoric_cry/archive/2012/07/23/2604890.html

wuwangju 9楼•2 个月前

应该是npm install express-partials

yibo5220 10楼•2 个月前

针对你的问题，Express默认模板引擎是Jade（现在改名为Pug），但你可以轻松地将其更改为EJS。首先确保你已经安装了EJS模块：

npm install ejs --save

然后，在app.js或index.js文件中，你需要设置EJS作为视图引擎，并指定视图的根目录：

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

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

// 设置views文件夹为存放视图的根目录
app.set('views', './views');

接下来，确保你的布局文件layout.ejs放在views目录下，这样Express可以正确找到它。如果你想要在其他模板中使用布局文件，可以使用<%- include('layout') %>这样的语法。

例如，假设你在views目录下有一个home.ejs文件，并且你想在其中使用layout.ejs，你可以这样做：

<!-- views/home.ejs -->
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <%- include('layout') %>
    <h1>Welcome to <%= title %></h1>
</body>
</html>

同样，确保layout.ejs位于正确的路径中：

<!-- views/layout.ejs -->
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <header>
        <!-- 在这里添加头部内容 -->
    </header>
    <main>
        <%- body %>
    </main>
    <footer>
        <!-- 在这里添加页脚内容 -->
    </footer>
</body>
</html>

通过这种方式，你可以在Express应用中正确使用EJS模板，并且能够正确加载布局文件。如果遇到任何问题，请检查文件路径和语法错误。