导航栏

导航栏配置文件

配置文件路径为：
// .vuepress/config.ts

导航栏可能包含你的站点名称、搜索框、 导航栏链接、多语言切换 (opens new window)、仓库链接，它们均取决于你的配置。

导航栏链接

你可以通过 themeConfig.nav 增加一些导航栏链接。

基础的配置项有 text 导航栏文字，link 导航栏链接， icon 导航栏图标:

// .vuepress/config.ts
import theme from "vuepress-theme-hope";

export default theme.config({
  themeConfig: {
    nav: [
      { text: "指南", link: "/zh/guide/", icon: "creative" },
      { text: "配置", link: "/zh/config/", icon: "config" },
      { text: "常见问题", link: "/zh/FAQ/", icon: "question" },
    ],
  },
});

当你提供了一个 items 数组而不是一个单一的 link 时，它将显示为下拉列表 :

// .vuepress/config.ts
import theme from "vuepress-theme-hope";

export default theme.config({
  themeConfig: {
    nav: [
      {
        text: "基础",
        icon: "info",
        items: [
          { text: "Markdown", link: "/zh/basic/markdown/", icon: "markdown" },
          { text: "VuePress", link: "/zh/basic/vuepress/", icon: "vue" },
        ],
      },
    ],
  },
});

图标设置

导航栏可增加图标
icon: 指定了图标的文件名

详细的图标文件名可参考

https://vuepress-theme-hope.gitee.io/v1/zh/guide/interface/icon.html#%E5%85%B6%E4%BB%96%E8%AF%B4%E6%98%8E

Alt text

配置示例

基础的配置项有 text 导航栏文字，link 导航栏链接， icon 导航栏图标:

配置文件路径：
// .vuepress/navbar.ts

import { navbar } from "vuepress-theme-hope";

export default navbar([
  { text: "首页", icon: "home", link: "/" },
    {
    text: "分类知识库",
    icon: "icon-enum",
    prefix: "/",
    children: [
      {
        text: "报表知识库",
        icon: "operate",
        link: "560_baob/"
      },
      {
        text: "方案知识库",
        icon: "view",
        link: "560_fanga/"
      },
      {
        text: "问题知识库",
        icon: "tool",
        link: "560_went/"
      },
    ],
    },
    
  { text: "五六零网校", icon: "creative", link: "https://www.sap560.com/" },
  { text: "导航", icon: "interact", link: "https://e.sap560.com/" },
  { text: "文件库", icon: "install", link: "http://d.sap560.com/" },
  
]);

---

效果如图