侧边栏

2022/6/29 博客

侧边栏的配置有很多方式,详细配置可根据官方 (opens new window)参考,这里简单供大家参考一下我的侧边栏配置。(😰😰😰本人在配置的侧边栏磨蹭半天)

# 对于markdown文件放置位置

文件摆放的位置可以任意放置。但必须保证在根目录下或者可以访问的位置,对于名字没有限制可中文也可英文
dd

文件中必须有permalink该项属性,他代表博客文件的访问路径 dd

# config设置

在themeConfig主题中配置nav导航栏
dd

效果如下

dd

在themeConfig主题中配置sidebar侧边栏

 sidebar:{
      '/docs/theme-reco/':[
        {
          title:'them-reco',//标题
          collapsable: false, //是否展开折叠
          //中必须为文件名字 
          // '' 表示默认文件README.md  可以理解为文档首页
          children:[
            '','theme','plugin','api'
          ]
        }
      ],
      '/docs/博客/':[
        {
          title: '博客',
          collapsable: false, //是否展开折叠
          children:[
            '','部署','插件的使用','侧边栏'
          ]
        } 
      ]
  },

# 自动侧边栏

懒人福音,不用折腾,减少频繁操作配置

  npm i vuepress-plugin-auto-sidebar

在plugin中配置

[
  "vuepress-plugin-auto-sidebar",
  {
    collapse: {
      open: false,
    },
  },
],

注意!!! 如果文件名字是中文名字需要在md文件中配置permalink(跳转路径) 英文名称可以忽略

Last Updated: 2023/3/6 21:56:10