pug - 在 Pug 中添加事件导航链接类

Question

我很难找到一个好的解决方案。问题是我想要在我的导航项目上动态更新事件类，但是我不知道如何去做。任何人都可以帮助我解决自动为当前页面对应的导航项目提供某个类的解决方案吗？

这是我的 layout.pug 页:

文档类型 html
html(lang="zh")
头
包括组件/头
body(id="page-top"role="document")
包含组件/标题
主要的
块主
包括组件/页脚

这是我目前拥有的 header.pug 文件:

导航
img.hamburger-menu(src="img/menu/menu-hamburger.svg"alt="导航菜单")
ul(类=“揭示”)
李
a(href="index.html") 主页
李
a(href="about.html") 关于
李
a(href="services.html") 服务
李
a(href="contact.html") 联系方式

然后我有我的 index.pug 和其他呈现的页面，它们以这样的方式开始:

扩展../布局

块主
部分
h1 个人专业

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 类。)