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 =＆＃34; active＆＃34;在每页的不同导航项目上。

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

我尝试了一种解决方法，也许有更好的解决方案。但是现在尝试一下。。。

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>

gulp-file-include和navbar class =＆＃34; active＆＃34;

2 个答案: