gulp-file-include 和 navbar class="active"

Question

我使用 gulp-file-include 将许多具有相同标题的 html 文件组合在一起。

src/_header.html

<nav>
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
   </ul>
</nav>

src/index.html

@@include('_header.html')
index blah...

src/about.html

@@include('_header.html')
about blah...

我可以制作如下的渲染结果页面吗？

在每个页面的不同导航项上使用 class="active"。

dist/index.html

<nav>
   <ul>
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
   </ul>
</nav>
index blah...

dist/about.html

<nav>
   <ul>
     <li><a href="#">Home</a></li>
     <li class="active"><a href="#">About</a></li>
   </ul>
</nav>
about blah...

Answer 1

我尝试了 WORKAROUND ，也许有更好的解决方案。 但现在试试这个....

src/_header.html

<nav>
  <ul>
    <li class="@@activeclassHome">Home</li>
    <li class="@@activeclassAbout">About</li>
  </ul>
</nav>

src/index.html

@@include('_header.html', {activeclassHome": "active", "activeclassAbout": ""})

src/about.html

@@include('_header.html', {activeclassHome": "", "activeclassAbout": "active"})

渲染页面：

dist/index.html

<nav>
   <ul>
     <li class="active"><a href="#">Home</a></li>
     <li class=""><a href="#">About</a></li>
   </ul>
</nav>

dist/About.html

<nav>
   <ul>
     <li class=""><a href="#">Home</a></li>
     <li class="active"><a href="#">About</a></li>
   </ul>
</nav>

更新：更好地使用 Nunjucks 在客户端/服务器中使用的模板引擎

Answer 2

我使用 gulp-file-include if 语句

src/_header.html

 <nav>
    <ul>
        <li class="@@if (context.page === 'home') {active}">
            <a href="#">Home</a>
        </li>
        <li class="@@if (context.page === 'about') {active}">
            <a href="#">About</a>
        </li>
    </ul>
 </nav>

src/index.html

@@include('_header.html', {
"page": "home"
})

src/about.html

@@include('_header.html', {
"page": "about"
})

渲染页面：

dist/index.html

<nav>
   <ul>
     <li class="active"><a href="#">Home</a></li>
     <li class=""><a href="#">About</a></li>
   </ul>
</nav>

dist/about.html

<nav>
   <ul>
     <li class=""><a href="#">Home</a></li>
     <li class="active"><a href="#">About</a></li>
   </ul>
</nav>