Nodejs ejs能支持视图的继承吗

Nodejs ejs能支持视图的继承吗

例如 layout.ejs

<html>
	<head>
 	<link href="css/bootstrap.min.css" rel="stylesheet">
	<- This is palcehode for extra css file >
	</head>
	<body>
 		<%- body %>
	</body>
</html>

index.ejs

<extra_css_start>
<link href="css/index.css" rel="stylesheet">
<extra_css_end>
<h1>This Is Index File</h1>

我像问有没有法子把 index.ejs 中的css/index.css替换到 layout.ejs 的 css placehodler 去？


5 回复

当然可以！EJS（Embedded JavaScript）模板引擎提供了强大的功能来支持视图的继承。通过使用<% block %>和<% contentFor %>标签，你可以轻松地将特定部分的内容插入到布局文件中。

示例代码

layout.ejs

这是你的基础布局文件，包含HTML结构和一些默认的CSS链接。我们将在这里定义一个块，用于插入额外的CSS文件。

<html>
<head>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <% if (extraCss) { %>
        <%- extraCss %>
    <% } %>
</head>
<body>
    <%- body %>
</body>
</html>

index.ejs

这是你的具体页面文件，你可以在其中定义额外的CSS文件，并将其插入到布局文件中的指定位置。

<% contentFor('extraCss', `
    <link href="css/index.css" rel="stylesheet">
`) %>

<h1>This Is Index File</h1>

解释

  1. 布局文件 (layout.ejs)

    • 在<head>标签内，我们添加了一个条件语句<% if (extraCss) { %>，用于检查是否存在额外的CSS文件。
    • 如果存在额外的CSS文件，我们使用<%- extraCss %>来输出该文件。

  2. 具体页面文件 (index.ejs)

    • 使用<% contentFor('extraCss', ... ) %>标签，将额外的CSS文件内容插入到布局文件中定义的extraCss块中。

如何在Express中使用

在Express应用中，你需要配置EJS作为视图引擎，并确保在渲染视图时传递必要的数据。

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

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

app.get('/', (req, res) => {
    res.render('index', {
        extraCss: '<link href="css/index.css" rel="stylesheet">'
    });
});

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

在这个例子中，我们直接在渲染index视图时传递了extraCss变量。但在实际项目中，你可能需要更灵活的方式来处理这种情况，比如通过中间件动态生成额外的CSS内容。

通过这种方式，你可以轻松地实现视图的继承，并且能够灵活地插入额外的CSS文件或其他内容。


<%include header%> <h1>内容</h1> <%include footer%>

这么做是不行的， 我需要填充的是 <- This is palcehode for extra css file > 部分。

谢谢回复。

ejs 没用过，不过Handlebars 轻松解决这个问题，无限层继承

ejs 模板引擎本身支持视图继承。你可以通过定义一个布局文件（如 layout.ejs），然后在其他视图文件（如 index.ejs）中扩展这个布局文件，并覆盖或插入需要的部分。

示例代码

布局文件 layout.ejs

<html>
<head>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <%- block.extraCss %>
</head>
<body>
    <%- body %>
</body>
</html>

视图文件 index.ejs

<% extends "layout.ejs" %>

<% block.extraCss = function() { %>
    <link href="css/index.css" rel="stylesheet">
<% } %>

<h1>This Is Index File</h1>

解释

  1. 布局文件 (layout.ejs):

    • 定义了一个名为 extraCss 的块。
    • <%- block.extraCss %> 表示在这个位置插入由子视图定义的额外 CSS 文件。

  2. 视图文件 (index.ejs):

    • 使用 <% extends "layout.ejs" %> 来继承 layout.ejs。
    • 使用 <% block.extraCss = function() { ... } %> 来覆盖布局文件中的 extraCss 块，并插入所需的 CSS 文件。

通过这种方式，你可以将 index.ejs 中的 css/index.css 插入到 layout.ejs 的指定位置。

运行时代码示例

确保在 Node.js 应用程序中正确配置了 EJS：

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

app.set('view engine', 'ejs');
app.set('views', './views'); // 确保 views 目录是你的模板文件路径

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

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

这样，当你访问应用的根路径时，index.ejs 将被渲染，并且其自定义的 CSS 文件会被插入到 layout.ejs 中的相应位置。

回到顶部