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

Posted 2021-04-13

我正在使用带有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 %>

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

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

任何建议都会非常感激。

答案

您可以将变量传递给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：

关于<% -%>标记delimeters;只是<%的开头意味着标签中的代码不会产生任何输出。我将在下面举例说明我们可能希望如此。

最后一个标签可以是%>，但这会注入一个换行符，解析的html看起来像这样，我想：

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