Question

我正在使用Pug构建一些html文件，并且我有一个位于partials/nav.pug文件中的导航栏。

我想跑的时候：

pug.renderFile('file1.pug', {file: 'file1'});
pug.renderFile('file2.pug', {file: 'file2'});

然后在file1.html文件中，如果您在页面/file1.html上，导航中的项目将获得活动课程：

<ul>
    <li class="active"><a href="">File 1</a></li>
    <li><a href="">File 2</a></li>
</ul>

然后在file2.html中，如果您在页面/file2.html上，则活动类位于第二个元素上。

以下是我认为可以做到这一点的基本猜测（我真的不知道如何在哈巴狗中做到这一点）：

ul
    li(class=#{file} == 'file1.html' ? 'active' : ''): a(href='/file2.html') File 1
    li(class=#{file} == 'file2.html' ? 'active' : ''): a(href='/file1.html') File 2

Answer 1

那基本上就是我的想法，只需要移动大括号并在他们面前使用$ here is the doc describing that：

ul
    li(class=`${file == 'file1.html' ? 'active' : ''}`): a(href='/file2.html') File 1
    li(class=`${file == 'file2.html' ? 'active' : ''}`): a(href='/file1.html') File 2

Pug：基于文件名切换类

1 个答案: