在 Pug 中添加活动导航链接类

问题描述

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

这是我的layout.pug页面:

文档类型 htmlhtml(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 个人专业

解决方案

解决这个问题的方法有很多种.一种方法是向每个页面传递一个变量，告诉它它是哪个页面.

让我们调用这个变量 name 并在渲染时将它传递给每个页面.您可能有一个服务器(可能在 Node 中?)渲染这些页面，每个页面都用于不同的路由.好吧，不是仅仅指示它只呈现这些页面中的每一个，您还传递了一个变量，为每个路由提供了它的名称(例如 {name: "index"}).如果您还不完全清楚如何传递变量，请查看 Pug 文档.

现在，每个页面都知道它的名称/类型，这意味着我们可以在 li 中使用它:在每个 li 中，我们将看看它是否是那个(或者，换句话说，我们想要的页面名称是否与列表项的名称匹配).

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

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

(我在这里假设您的 CSS 中已经有一个 active 类.)

I am having trouble finding a good solution. The problem is I want a dynamically updated active class on my nav items, however I don't know how to do so. Can anyone help me with a solution for giving the nav item corresponding to the current page a certain class, automatically?

This is my layout.pug page:

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

This is what I currently have for my header.pug file:

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

Then I have my index.pug and other rendered pages, which start like this:

extends ../layout

block main
  section
    h1 Personally Professional

解决方案

There are a number of ways of going about this. One way is to pass a variable to each page, telling it which page it is.

Let's call this variable name and pass it each page at render-time. You probably have a server (maybe in Node?) rendering these pages, each one for a different route. Well, instead of just instructing it to just render each of those pages, you also pass along a variable giving each route its name (e.g. {name: "index"}). If it is not yet entirely clear to you how you can pass along a variable, have a look at the examples given in the Pug docs.

Now, each page knows its name/type, meaning that we can use this in the lis: at each li, we'll have a look whether it is the one (or, in other words, whether our wanted page name matches that of the list item).

To see whether it is active, we can conditionally add a class to that item. Here an example of how to do it for the index page (this code would augment what's already there in header.pug):

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

(I'm assuming here that you already have an active class in your CSS.)

这篇关于在 Pug 中添加活动导航链接类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！