Nodejs 如何在express中使用ejs的layout模板，具体是怎么设置的？知道的麻烦说一下，谢谢

Nodejs 如何在express中使用ejs的layout模板，具体是怎么设置的？知道的麻烦说一下，谢谢

如何在express中使用ejs的layout模板，具体是怎么设置的？！知道的麻烦说一下，谢谢~~~

13 回复

当然可以。在Express应用中使用EJS的布局（layout）模板是一种常见的需求，特别是在构建复杂Web应用时。布局文件可以帮助你避免重复地编写页面头部、导航栏等通用部分的代码。下面我将详细说明如何在Express中使用EJS的布局模板。

步骤1: 安装必要的依赖

首先，确保你的项目中已经安装了express和ejs。如果没有安装，可以通过npm安装它们：

npm install express ejs

步骤2: 设置Express应用使用EJS作为视图引擎

在你的Express应用入口文件（如app.js或index.js）中，添加以下代码来配置EJS作为视图引擎：

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

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

// 设置views目录存放模板文件
app.set('views', './views');

步骤3: 创建布局文件

接下来，在views目录下创建一个名为layout.ejs的文件。这个文件将包含你的应用的所有页面共用的HTML结构，例如头部、底部等。你可以使用EJS标签来定义可替换的部分。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%- title %></title>
</head>
<body>
    <header>
        <!-- 头部内容 -->
    </header>

    <main>
        <!-- 这里将插入子页面的内容 -->
        <%- body %>
    </main>

    <footer>
        <!-- 底部内容 -->
    </footer>
</body>
</html>

步骤4: 创建子页面并使用布局

现在，创建一个子页面模板（例如index.ejs），并在其中引用布局文件。使用<%- include('path/to/layout.ejs') %>来包含布局，并通过定义变量（如title和body）来填充布局中的占位符：

<% layout('layout') %>

<h1>Welcome to My Website</h1>
<p>This is the main content of the home page.</p>

注意：直接使用<%- include('path/to/layout.ejs') %>可能不会正确工作，因为这将导致布局被嵌套在子页面内部。更好的做法是在路由处理函数中指定布局：

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

这样，Express会自动将index.ejs的内容插入到layout.ejs中的<%- body %>位置，并且title变量会被正确替换。

以上就是如何在Express应用中使用EJS布局模板的基本步骤。希望这些信息对你有所帮助！


安装express-partials var partials = require(‘express-partials’);

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

3Q! 请问有什么好的书籍和学习方法可以介绍一下么，非常感谢！

看API文档； google、百度

3q

呵呵,我也觉得用ejs蛮好的，可以全部用js统一写代码。这也是node.js的优势所在，如果引入太多其他的东西。那还不如python ruby之类的。

ejs8.0支持了include.

very good

如果是新的Project, 建议用Swig, 因为它有自带的Template Inheritance, 可以代替Partials/layout这东西，在express线3.x, 没这些layout的，要实现就的靠template自带的功能，swig几乎跟EJS 一样，也是hmtl based.

https://github.com/paularmstrong/swig

感谢啊！！！

安装这个模块也能使ejs具有layout功能 https://github.com/Soarez/express-ejs-layouts

var expressLayouts = require(‘express-ejs-layouts’); app.configure(function(){ //… app.set(‘view engine’, ‘ejs’); app.use(expressLayouts) …// })

同问下有mustache的解决方案么

要在Express中使用EJS的layout模板，你需要进行以下步骤：

  1. 安装必要的依赖：

    npm install express ejs

  2. 设置Express使用EJS作为视图引擎：

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

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

  3. 创建一个布局文件（例如 views/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>
        <!-- 头部内容 -->
    </header>
    <main>
        <%- body %>
    </main>
    <footer>
        <!-- 底部内容 -->
    </footer>
</body>
</html>

  4. 在其他EJS文件中引用布局文件：

    <% layout('layout') -%>

<h1>Hello, World!</h1>

  5. 渲染视图时传递数据到布局文件：

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

这样，当你访问首页时，会使用定义好的布局文件，并在其中渲染传递的数据。

通过以上步骤，你可以轻松地在Express应用中使用EJS的layout模板。

回到顶部