求教 Nodejs ejs-local模板引擎怎么实现如下的效果

求教 Nodejs ejs-local模板引擎怎么实现如下的效果

layout.ejs js部分内容如下:

    <script src="/bower_components/jquery-1.9.1/index.js"></script>
    <script src="/js/plugins/flowplayer/flowplayer-3.2.12.min.js"></script>
    <%-scripts%>

index.ejs 里面有一部分代码 想render的时候,放到layout的<%-scripts-%> 里面 怎么实现呢

我看模板的帮助 只能是引入js文件,如下写法可以:

<% block('scripts','<script src="/js/common.js"></script>') -%>

但是页面里的js code就不可以了,这个是我需要的,index.ejs 部分内容如下:

<!-- 其他html内容 -->

<script>
   $(function()(){
     //some code
   })
</script>

<!-- 其他html内容 -->

2 回复

为了在 index.ejs 中插入自定义的 JavaScript 代码，并将其放置到 layout.ejs 的 <%-scripts%> 部分，我们可以使用 EJS 的块（block）功能。EJS 提供了一种灵活的方式来组织模板结构，允许你在子模板中覆盖或添加到父模板中的特定区域。

实现步骤

  1. 定义块：在 layout.ejs 中定义一个块用于存放自定义的 JavaScript 代码。
  2. 填充块：在 index.ejs 中填充这个块。

示例代码

layout.ejs

首先，在 layout.ejs 中定义一个名为 scripts 的块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="/bower_components/jquery-1.9.1/index.js"></script>
    <script src="/js/plugins/flowplayer/flowplayer-3.2.12.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
    
    <!-- 定义 scripts 块 -->
    <%- block.scripts %>

    <!-- 其他 HTML 内容 -->
</body>
</html>

index.ejs

然后，在 index.ejs 中填充这个 scripts 块：

<% block('scripts', `
    <script>
        $(function() {
            // some code
            console.log('Document is ready');
        });
    </script>
`) %>

<!-- 其他 HTML 内容 -->

解释

  1. 定义块：在 layout.ejs 中使用 <%- block.scripts %> 来定义一个名为 scripts 的块。这个块将在子模板中被填充。

  2. 填充块：在 index.ejs 中使用 <%- block('scripts', '...') %> 来填充 scripts 块。这里的 block 函数接收两个参数：块的名称和要插入的内容。

通过这种方式，你可以在 index.ejs 中插入任何你需要的 JavaScript 代码，并确保这些代码最终会被渲染到 layout.ejs 的指定位置。这样，你就可以保持布局的一致性，同时灵活地在不同的页面中插入特定的脚本。


要在 ejs-local 模板引擎中将 index.ejs 中的脚本插入到 layout.ejs 的 <%- scripts %> 位置，可以通过定义块（block）来实现。下面是具体的步骤和示例代码。

1. 在 layout.ejs 中定义块

首先，在 layout.ejs 文件中定义一个用于放置脚本的块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <!-- 其他HTML内容 -->

    <script src="/bower_components/jquery-1.9.1/index.js"></script>
    <script src="/js/plugins/flowplayer/flowplayer-3.2.12.min.js"></script>

    <% if (scripts) { %>
        <%= scripts %>
    <% } %>

    <!-- 其他HTML内容 -->
</body>
</html>

2. 在 index.ejs 中使用块

然后，在 index.ejs 文件中添加脚本，并将其放入定义好的块中：

<% block('scripts', `
    <script>
        $(function() {
            // some code
        });
    </script>
`) %>

<!-- 其他HTML内容 -->

3. 使用中间件设置数据

在你的 Node.js 应用程序中，你需要确保 scripts 数据被传递到模板中。你可以使用中间件来设置这个数据：

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

app.set('views', './views'); // 设置视图文件夹路径
app.set('view engine', 'ejs');

// 定义中间件
app.use((req, res, next) => {
    res.locals.scripts = ''; // 初始化 scripts 变量
    next();
});

// 渲染 index.ejs 并传递必要的数据
app.get('/', (req, res) => {
    res.render('index', { title: 'Home Page' });
});

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

解释

  • 定义块：在 layout.ejs 中使用 <% if (scripts) { %> <%= scripts %> <% } %> 来检查是否有传递的 scripts 数据。
  • 插入脚本：在 index.ejs 中通过 <% block('scripts', ...) 将脚本插入到块中。
  • 传递数据：在中间件中初始化 res.locals.scripts，确保 scripts 数据在渲染时可用。

这样，当渲染 index.ejs 时，它会将脚本插入到 layout.ejs 中定义的块里。

回到顶部