Question

我有一个索引页面，一个关于页面和一个联系页面。我也有header.ejs文件。在header.ejs里面，我有这个：

<a href="/">Home</a> |
<a href="/about">My Resume</a> |
<a href="contact">My Contact Info</a>
<br>
_______________________________________

-----------------------------------------
<br>


<h3>Copyright 2019  Some text here</h3>

我想为关于页面和联系页面使用完全相同的头文件。我希望每个页面的内容都不同。该内容应放置在实线和虚线内。我不能使用单独的头文件。我只能用一个。如何使用相同的模板，但要为每个页面创建空间并用不同的内容填充它？这是我的索引文件的示例：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
  <%include templates/header.ejs%>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

Answer 1

在头文件中添加变量page：

<a href="/">Home</a> |
<a href="/about">My Resume</a> |
<a href="contact">My Contact Info</a>
<% if(page=='home') { %>
  // add your home page header content here 
<% }else if(page=='contact'){%>
 // add your contact page header content here 
<% }else if(page=='resume'){%>
 // add your resume page header content here 
<% }else{ %>
  // default header
<% } %>
<h3>Copyright 2019  Some text here</h3>

通过传递页面变量包括它：

主页：

<%- include('templates/header', {page: 'home'}); %>

联系页面：

<%- include('templates/header', {page: 'contact'}); %>

Answer 2

使用include函数时，必须省略.ejs。

例如，在您的index.ejs上：

<%- include 'templates/header' %>

如果要重复使用相同的模板，则应将可能决定呈现的所有“可选”内容放在单独的.ejs文件中，然后只要满足条件，就可以执行以下操作：

somePage.ejs：

<p>Welcome to <%= title %></p>

someOtherPage.ejs：

<p>Goodbye <%= title %></p>

index.ejs：

<%- include 'templates/header' %>

<% if (someVar == true) { %>
<%- include 'somePage' %>
<% } %>

<% else if (someOtherVar == true) { %>
<%- include 'someOtherPage' %> 
<% } %>

最后，在您的app.js上：

app.get('somePath', function(req, res) {
  res.render('index', {someVar:true, someOtherVar:false}); //pass variables to template like this
});

如何在.EJS模板中添加变量

2 个答案: