说明

1. 在 config.toml 中为导航项添加标识
   
2. 获取当前页面链接的首个分区, 与导航项标识一致, 以此获取元素, 为其添加高亮类
   

修改配置文件

config.toml

仅作示例

Copy1[[menu.main]]
2  name="主页"
3  identifier="index"
4  url="/index/"
5  weight="10"

JavaScript代码

Copy 1const url = window.location.pathname;
 2
 3var arr = url.split('/');
 4
 5for (i = 0; i < arr.length; ++i)
 6{
 7    var cur = arr[i];
 8    if (cur !== "")
 9    {
10        // console.log(cur);
11        break;
12    }
13}
14
15const nav_item = document.getElementById(cur);
16if (nav_item)
17{
18    // console.log("ddd", nav_item);
19    nav_item.classList.add('active');
20}

CSS样式

navbar-custom为自定义导航栏样式

Copy1.navbar-custom {
2    // ...
3    a.active {
4        color: green;
5        background-color: transparent;
6    }
7}

便签

附: 修改导航图标

Bootstrap 5 - 下拉框

下拉菜单子项对应类 nav-link

示意图标对应类 dropdown-toggle , 移除, 使用自定义类 dropdown-toggle-custom

这个是不支持图标旋转的; 默认类支持高亮变色

CSS样式

Copy 1.dropdown-toggle-custom
 2{
 3    align-items:center;
 4    padding:.25rem .5rem;
 5    font-size: 17px;
 6    color: $navbar-color;
 7    background-color:transparent;
 8    border:0;
 9}
10
11// 文件夹打开关闭图片
12.dropdown-toggle-custom::after
13{
14    width: 1.25em;
15    line-height: 0;
16    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path fill="#feffff" d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
17    transition: transform .35s ease;
18    transform-origin: .5em 50%;
19}