此页内容

约 682 字大约 2 分钟

2024-01-06

概述

主题默认会自动生成最简单的导航栏配置,仅包括 首页博客文章列表页

你也可以自己配置导航栏,覆盖默认的的导航栏配置。

默认配置如下:

default config
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    notes: [
      { text: '首页', link: '/', icon: 'material-symbols:home-outline' },
      { text: '博客', link: '/blog/', icon: 'material-symbols:article-outline' },
    ]
  })
})

当开启了 多语言配置,则会生成对应语言的导航栏的默认配置:

default config
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  lang: 'zh-CN',
  locales: {
    '/': { lang: 'zh-CN', title: '博客' }, // 简体中文
    '/en/': { lang: 'en-US', title: 'Blog' }, // English
  }
  theme: plumeTheme({
    locales: {
      '/': {
        notes: [
          { text: '首页', link: '/', icon: 'material-symbols:home-outline' },
          { text: '博客', link: '/blog/', icon: 'material-symbols:article-outline' },
        ]
      },
      '/en/': {
        notes: [
          { text: 'Home', link: '/en/', icon: 'material-symbols:home-outline' },
          { text: 'Blog', link: '/en/blog/', icon: 'material-symbols:article-outline' },
        ]
      }
    }
  })
})

但是,通常情况下,随着站点内容变得越来越丰富,包括了 博客文章列表、notes、友情链接、 外部链接等等, 默认生成的导航栏配置满足不了您的需求。

这时候,您可以通过 navbar 字段来完全自定义导航栏,它将直接覆盖默认的导航栏配置。

配置

类型: NavItem[]

type NavItem = string | {
  text: string
  link: string
  /**
   * 支持 iconify 图标,直接使用 iconify name 即可自动加载
   * @see https://icon-sets.iconify.design/
   */
  icon?: string
  /**
   * 控制元素何时被激活
   */
  activeMatch?: string
  /**
   * 最大深度为 2,生成嵌套的导航栏
   */
  items?: NavItem[]
}

嵌套配置示例

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    notes: [
      { text: '首页', link: '/', icon: 'material-symbols:home-outline' },
      { text: '博客', link: '/blog/', icon: 'material-symbols:article-outline' },
      {
        text: '技术文档',
        icon: 'mdi:idea',
        items: [
          {
            text: 'Vuepress Theme',
            icon: 'icon-park-solid:theme',
            items: [
              {
                text: 'vuepress-theme-plume',
                link: '/note/vuepress-theme-plume/',
                icon: 'mdi:paper-airplane',
              },
            ],
          },
          {
            text: 'Vuepress Plugin',
            icon: 'mingcute:plugin-2-fill',
            items: [
              {
                text: 'caniuse',
                link: '/note/vuepress-plugin/caniuse/',
                icon: 'pajamas:feature-flag',
              },
              {
                text: 'auto-frontmatter',
                link: '/note/vuepress-plugin/auto-frontmatter/',
                icon: 'material-symbols:move-selection-down-rounded',
              },
              {
                text: 'blog-data',
                link: '/note/vuepress-plugin/blog-data/',
                icon: 'ic:baseline-post-add',
              },
              {
                text: 'notes-data',
                link: '/note/vuepress-plugin/notes-data/',
                icon: 'material-symbols:note-alt-rounded',
              },
              {
                text: 'shikiji',
                link: '/note/vuepress-plugin/shikiji/',
                icon: 'material-symbols-light:code-blocks-outline-rounded',
              },
            ],
          },
        ],
      },
    ]
  })
})

activeMatch

activeMatch 用于控制当前链接元素何时被激活。其值为一个类正则表达式的字符串。

示例: activeMatch: '^/(blog|article)/'

这表示,以 /blog//article/ 开头的页面链接地址,该链接元素将被激活。

配置帮助函数

主题提供了 defineNavbar(config) 函数,为主题使用者提供导航栏配置的类型帮助。 便于将 navbar 配置分离到独立的配置文件中。

navbar.ts
import { defineNavbar } from 'vuepress-theme-plume'

export default defineNavbar([
   { text: '首页', link: '/' },
   { text: '博客', link: '/blog/' },
   // ... more
])