包括常见的 ejs 视图文件，并对每个不同的视图文件进行部分修改？

Question

我正在使用带有ejs视图引擎的nodejs express，我想知道是否有任何方法可以包含常见的ejs视图文件，并对每个不同的视图文件进行部分修改。

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

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

下面是代码。

<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>

我的问题来了。

第一个视图文件和第二个视图文件的区别在于 上面的代码部分不同。

// 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视图文件相同。

我以前用过

<%= include something %>

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

我必须为每五个视图文件复制并粘贴所有这些代码吗？

任何建议将不胜感激。

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：

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

最后一个标签可以是 %> 但这会注入一个换行符，我认为解析后的 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>