在帕格中添加活动导航链接类

Question

我很难找到一个好的解决方案。问题是我想在导航项目上动态更新活动类，但是我不知道该怎么做。谁能为我提供一种自动为与当前页面相对应的导航项提供特定类别的解决方案？

这是我的layout.pug页面：

doctype html
html（lang =“ zh-cn”）
    头
        包括组件/头
    正文（id =“ page-top” role =“ document”）
        包括组件/标题
        主要
            主块
        包括组件/页脚

这是我当前的header.pug文件所具有的内容：

导航
    img.hamburger-menu（src =“ img / menu / menu-hamburger.svg” alt =“导航菜单”）
    ul（class =“ reveal”）
      里
        a（href =“ index.html”）主页
      里
        a（href =“ about.html”）关于
      里
        a（href =“ services.html”）服务
      里
        a（href =“ contact.html”）联系人

然后，我有了index.pug和其他呈现的页面，它们的开始如下：

扩展../layout

主块
  部分
    h1个人专业

Answer 1

有许多解决方法。一种方法是将变量传递给每个页面，告诉它是哪个页面。

让我们调用此变量，name并在渲染时将其传递给每个页面。您可能有一台服务器（也许在Node中？）呈现这些页面，每个页面用于不同的路由。好吧，您不仅传递了一个变量，还为每个路由指定了名称（例如{name: "index"}），而不仅仅是指示它仅呈现每个页面。如果您还不太清楚如何传递变量，请查看Pug docs中提供的示例。

现在，每一页都知道它的名称/类型，这意味着我们可以在使用liS：在每一个li，我们要看看它是否是一个（或者，换句话说，无论是的我们想要的页面名称相匹配项目清单）。

要查看它是否处于活动状态，我们可以有条件地向该项目添加一个类。这是一个如何为索引页执行此操作的示例（此代码将增加已有的内容header.pug）：

li(class=(name === "index" ? "active" : undefined))
    a(href="index.html") Home
...

（我在这里假设active您的CSS中已经有一个类。）