在 ejs 上添加变量包括

Question

我正在尝试根据博客的 name 使用来自 ejs 的 include 加载博客部分。

来自 data.json 的数据：

"blogs" : [{
    "title" : "Git Basics",
    "name" : "git_basics",
    "date" : "February 8, 2015",
    "category" : "git",
  },{
    "title" : "Javascript Basics",
    "name" : "javascript_basics",
    "date" : "December 31, 2014",
    "category" : "javascript"
  },{
    "title" : "Html5 Communication",
    "name" : "html5_communication",
    "date" : "November 25, 2014",
    "category" : "html5"
  }]    

路线：

/* GET blog page. */
router.get('/blog', function(req, res) {
  var blogswithDetail = [];
  for(var i=0; i<appdata.blogs.length && i<4; i++){
    blogswithDetail.push(appdata.blogs[i]);
  }

  res.render('blog', { 
    title: 'Blog',
    blogswithdetail: blogswithDetail
  });
});

页面：

<% blogswithdetail.forEach(function(item){ %>
    <article id="<%= item.name %>">
        <h2><%= item.title %></h2>
        <p><%= item.date %></p>
        <%= item.detail %>
    </article>
    <% include partials/content/blog_(item.name).ejs %>
<% }); %>

<% include partials/content/blog_(item.name).ejs %>这行代码不正确。 我的问题是如何将item.name插入include，这样我就可以根据item.name的变化包含不同的部分

Answer 1

我认为您误解了 ejs 的工作原理。 ejs 接受提供的参数，并将标签替换为参数：

node.js：

res.render('test.ejs', {a: 'hello', b: 'world', c: 42});

test.ejs:

<%= a %><%= b %><br>
The answer to life, universe and everything else is <%= c %>

结果：

helloworld<br>
The answer to life, universe and everything else is 42

你可以传递对象：

res.render('test.ejs', {a: {a: 'a', b: 'b'}});

但是你不能使用对象的一个​​属性，只能使用整个对象。

在你的情况下，你应该这样做：

节点：

var item = {name: 'name', title: 'title', date: 'date', details: 'details'};
res.render('test.ejs', item);
//Or
//res.render('test.ejs', {name: item.name, title: item.title...

ejs:

<% blogswithdetail.forEach(function(item){ %>
    <article id="<%= name %>">
        <h2><%= title %></h2>
        <p><%= date %></p>
        <%= detail %>
    </article>
    <% include partials/content/blog_(<%= name %>).ejs %>
<% }); %>

或者：

<% blogswithdetail.forEach(function(){ %>
    var item = JSON.parse(<%= item %>);
    <article id="item.name">
        <h2>item.title</h2>
        <p>item.date</p>
        item.detail
    </article>
    <% include partials/content/blog_(item.name).ejs %>
<% }); %>

节点：

res.render('test.ejs', {item: JSON.stringify(item)});

Answer 2

我认为你在这里错过了诀窍。当我们开发任何 Web 应用程序时，我们应该尝试使其动态化。过去我们拥有 100 多个 HTML 并根据路由加载它们的日子已经一去不复返了，这基本上称为静态 Web。

我从您的问题中了解到，您正在尝试根据参数值加载特定的 EJS 模板。试想一种情况，随着时间的推移，您的项目会变得越来越大，您的参数值和每个特定参数都将创建一个与其他模板没有太大区别的新 EJS 模板。将有 100 多个文件难以管理。

所以我建议你以正确的方式使用模板。只需包含一个 EJS 模板并在其中使用表达式来区分您的item.name 并根据需要呈现视图。当然，您必须明智地使用它，如果您认为有机会简化使用，应该将模板拆分为更小的模板并重新使用现有的模板。

示例：

<%if (item.name == 'xyz') { %>
// Do something 
<% } %>