node.js - 包括常见的 ejs View 文件并对每个不同的 View 文件进行部分修改？

Question

我正在使用带有 ejs View 引擎的 Nodejs Express，我想知道是否有办法包含常见的 ejs View 文件，并对每个不同的 View 文件进行部分修改。

我很难解释我的情况，所以我会尽力而为。

我有 5 个 View 文件，这些文件必须包含以下相同的代码。

下面是代码。

<div class="sub-content-company_intro">
    <div class="l-common-wrapper">
    <div class="company-name">
      <span style="font-weight: bold">test</span>
    </div>
    <div class="l-sub-content-main-menu-outer">
        <ul class="l-sub-content-main-menu-row">
          <li class="l-sub-content-main-menu-col col-5">
            <a class="item active" href="/dealing_works/item1">item1</a>
          <li>
          <li class="l-sub-content-main-menu-col col-5">
            <a class="item" href="/dealing_works/item2">item2</a>
          <li>
          <li class="l-sub-content-main-menu-col col-5">
            <a class="item" href="/dealing_works/item3">item3</a>
          <li>
          <li class="l-sub-content-main-menu-col col-5">
            <a class="item" href="/dealing_works/item4">item4</a>
          <li>
          <li class="l-sub-content-main-menu-col col-5">
            <a class="item last" href="/dealing_works/item5">item5</a>
          <li>
        </ul>
    </div>
</div>

我的问题来了。

第一个 View 文件和第二个 View 文件之间的区别在于上面的代码有部分不同。

// first view file
<a class="item active" href="/dealing_works/item1">item1</a>
<a class="item" href="/dealing_works/item2">item2</a>

// second view file
<a class="item" href="/dealing_works/item1">item1</a>
<a class="item active" href="/dealing_works/item2">item2</a>

与第三、第四、第五个 ejs View 文件相同。

我以前用过

<%= include something %>

但是由于我必须部分更改代码，因此面临一些困难。

我是否必须为每五个 View 文件复制并粘贴所有这些代码？

如有任何建议，我们将不胜感激。

Answer 1

您可以将变量传递到 EJS 模板中:

res.render('dealing_works/item1', { page: 'item1' });

您也可以在 EJS 包含的文件中引用这些变量:

<a class="item <% if ( page === 'item1' ) { -%>active<% } -%>" href="/dealing_works/item1">item1</a>
<a class="item <% if ( page === 'item2' ) { -%>active<% } -%>" href="/dealing_works/item2">item2</a>

编辑:

这有点难看，但我实际上并没有在我的页面上采用上述方法，而是这样做:

<a id="link_page1" class="item" href="/dealing_works/item1">item1</a>
<a id="link_page2" class="item" href="/dealing_works/item2">item2</a>

在主文件中:

<%= include something %>
<code type="text/javascript">
  Document.getElementById('link_page1').classList.add('active');
</code>

编辑2:

关于<% -%>标签分隔符；第一个是 <%意味着标记中的代码不会产生任何输出。我将在下面给出一个我们可能希望出现这种情况的示例。

最后一个标签可以是 %>但这会注入(inject)一个换行符，解析后的 H​​TML 看起来像这样，我认为:

<a class="item 
" href="/dealing_works/item1">item1</a>

通过更改 %>至-%> ，换行符消失了，生成的 HTML 看起来干净多了。

如果我们这样做，我们可以重做解决方案以使用输出的标签:

res.render('dealing_works/item1', { page1class: 'active' });

现在，如果我们使用 <%- 引用这些变量开始标签(还有 <%= )

<a class="item <%- page1class -%>" href="/dealing_works/item1">item1</a>
<a class="item <%- page2class -%>" href="/dealing_works/item2">item2</a>

但是，除非您将 page2class 定义为空字符串，否则您的 html 可能如下所示:

<a class="item active" href="/dealing_works/item1">item1</a>
<a class="item undefined" href="/dealing_works/item2">item2</a>