Question

我无法找到一个好的解决方案。问题是我想在我的导航项上动态更新活动类，但我不知道该怎么做。任何人都可以自动帮助我找到一个解决方案，让当前页面对应的导航项目成为某个类吗？

这是我的 layout.pug 页面：

doctype html
html(lang="en")
    head
        include components/head
    body(id="page-top" role="document")
        include components/header
        main
            block main
        include components/footer

这是我目前用于 header.pug 文件的内容：

nav
    img.hamburger-menu(src="img/menu/menu-hamburger.svg" alt="Navigation Menu")
    ul(class="reveal")
      li
        a(href="index.html" ) Home
      li
        a(href="about.html") About
      li
        a(href="services.html") Services
      li
        a(href="contact.html") Contact

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

extends ../layout

block main
  section
    h1 Personally Professional

Answer 1

有很多方法可以解决这个问题。一种方法是将变量传递给每个页面，告诉它是哪个页面。

让我们调用此变量name并在渲染时将每个页面传递给它。您可能有一个服务器（可能在Node？中）渲染这些页面，每个页面用于不同的路径。好吧，您不仅仅指示它只渲染每个页面，而且还传递一个变量，为每个路径命名（例如{name: "index"}）。如果您还不完全清楚如何传递变量，请查看Pug docs中给出的示例。

现在，每个页面都知道它的名称/类型，这意味着我们可以在li s中使用它：在每个li，我们将查看它是否是一个（换句话说，我们想要的页面名称是否与列表项的名称匹配）。

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

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

（我假设您的CSS中已经有active课程。）

Answer 2

这是另一种方式。在layout.pug中，我将添加以下块：

block nav
  - var active = "index.html"

我们在此处使用了一个块，以便扩展layout.pug的网页可以覆盖cur变量（我们默认为index.html作为活动的导航链接。）

然后，在header.pug中，您可以在为每个链接设置类时使用cur变量（请参阅gandreadis的答案，将active类添加到li 1}} S）。

最后，在每个网页上添加以下内容（我们以about.pug为例）：

extends ../layout

block nav
  - var cur = "about.html"

//- actual content

在Pug中添加Active Nav Link类

2 个答案: