Hugo 当前页导航菜单 class 加 active

网站代码 浏览 8 评论 0

Hugo 主题给当前页面时给对应导航菜单添加 class acitve:

文件夹结构

content
|-page
|-|-about.md
|-|-blogroll.md

md 文件头

---
title: about
type: page
---

hugo.toml 菜单设置

[menu]
  [[menu.main]]
  identifier="about"
  name="关于"
  url="/about/"
  weight="6"

菜单模板 partials/navigation.html

<nav class="site-nav" aria-label="Main Navigation">
    <ul>
        {{ $currentPage := . }}
        {{ range .Site.Menus.main }}
        <li class="nav-item">
            <a 
            href="{{ .URL }}"
            {{ if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Layout .Identifier) }} class="active"{{ end }}>
                {{ .Name }}
            </a>
        </li>
        {{ end }}
    </ul>
</nav>
0
分享

评论

还没有评论,快来抢沙发吧!