Node.js - EJS - 包括部分

Question

我正在尝试为节点使用嵌入式 Javascript 渲染器： https://github.com/visionmedia/ejs

我想知道如何包含另一个视图文件（部分）在 .ejs 视图文件内。

Answer 1

对于 Express 3.0：

<%- include myview.ejs %>

该路径是相对于包含该文件的调用者的路径，而不是来自使用 app.set("views", "path/to/views") 设置的视图目录。

EJS v1 包含
EJS v2 包含

（更新：ejs v3.0.1 的最新语法为 <% - include('myview.ejs') %>)

Answer 2

与 Express 4.x 配合使用：

根据 在模板中包含部分内容的正确方法 您应该使用：

<%- include('partials/youFileName.ejs') %>。

您正在使用：

<% includepartials/yourFileName.ejs %>

已弃用。

Answer 3

在 Express 4.x 中，我使用以下内容加载 ejs：

  var path = require('path');

  // Set the default templating engine to ejs
  app.set('view engine', 'ejs');
  app.set('views', path.join(__dirname, 'views'));

  // The views/index.ejs exists in the app directory
  app.get('/hello', function (req, res) {
    res.render('index', {title: 'title'});
  });

然后您只需要两个文件即可使其工作 - views/index.ejs ：

<%- include partials/navigation.ejs %>

还有 views/partials/navigation.ejs：

<ul><li class="active">...</li>...</ul>

---

您还可以告诉 Express 使用 ejs 作为 html 模板：

var path = require('path');
var EJS  = require('ejs');

app.engine('html', EJS.renderFile);

// Set the default templating engine to ejs
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// The views/index.html exists in the app directory
app.get('/hello', function (req, res) {
  res.render('index.html', {title: 'title'});
});

---

最后您还可以使用 ejs > 布局模块：

var EJSLayout = require('express-ejs-layouts');
app.use(EJSLayout);

这将使用 views/layout.ejs 作为布局。

Answer 4

从 Express 4.x 开始

app.js

// above is all your node requires

// view engine setup
app.set('views', path.join(__dirname, 'views')); <-- ./views has all your .ejs files
app.set('view engine', 'ejs');

error.ejs

<!-- because ejs knows your root directory for views, you can navigate to the ./base directory and select the header.ejs file and include it -->

<% include ./base/header %> 
<h1> Other mark up here </h1>
<% include ./base/footer %>

Answer 5

app.js 添加

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

视图/部分中添加您的部分文件(ejs)

在 index.ejs 的

<%- include('partials/header.ejs') %>

Answer 6

Express 3.x 不再支持部分。根据帖子 ejs 'partial is not Define'，您可以使用“include” EJS 中的关键字替换已删除的部分功能。

Answer 7

官方文档中 https://github.com/mde/ejs#includes 显示包含作品像这样：

<%- include('../partials/head') %>

Answer 8

还

<%- include('partials/header.ejs',{paramName: paramValue}) %>

Answer 9

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

 <form method="post" class="mt-3">
        <div class="form-group col-md-4">
          <input type="text" class="form-control form-control-lg" id="plantName" name="plantName" placeholder="plantName">
        </div>
        <div class="form-group col-md-4">
          <input type="text" class="form-control form-control-lg" id="price" name="price" placeholder="price">
        </div>
        <div class="form-group col-md-4">
            <input type="text" class="form-control form-control-lg" id="harvestTime" name="harvestTime" placeholder="time to harvest">
          </div>
        <button type="submit" class="btn btn-primary btn-lg col-md-4">Submit</button>
      </form>

<form method="post">
        <table class="table table-striped table-responsive-md">
            <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">FarmName</th>
                <th scope="col">Player Name</th>
                <th scope="col">Birthday Date</th>
                <th scope="col">Money</th>
                <th scope="col">Day Played</th>
                <th scope="col">Actions</th>
            </tr>
            </thead>
            <tbody>
            <%for (let i = 0; i < farms.length; i++) {%>
                 <tr>
                    <td><%= farms[i]['id'] %></td>
                    <td><%= farms[i]['farmName'] %></td>
                    <td><%= farms[i]['playerName'] %></td>
                    <td><%= farms[i]['birthDayDate'] %></td>
                    <td><%= farms[i]['money'] %></td>
                    <td><%= farms[i]['dayPlayed'] %></td>
                    <td><a href="<%=`/farms/${farms[i]['id']}`%>">Look at Farm</a></td>
                </tr>
            <%}%>
        </table>
    </form>

Answer 10

要包含 ejs 文件，您必须使用：

<%- include("file-name") %>

注意：文件名中不需要使用 .ejs。

Answer 11

不用担心，非常简单
仅遵循以下步骤

1. <%- include("partials/header") -%> //for header.ejs
2. This EJS Body Content
3. <%=abt%>
4. <%-include("部分/页脚")-%> //对于页脚.ejs

Answer 12

// app.ejs

• <%- include('header'); -%> //对于文件 header.ejs
• <%- include('footer'); -%> // 对于文件 footer.ejs
• app.post("/", function(req, res) { res.render("header") });
• app.post("/", function(req, res) { res.render("footer") });

Answer 13

要包含 ejs 文件，您必须使用：

<%- include("relative path of ejs ") -%>

Answer 14

EJS 本身目前不允许查看部分内容。快递可以。