vuepress菜单栏使用请求接口的数据和编写的文档页面右侧添加 锚点导航栏_vuepress设置右侧边栏

• VuePress使用和创建文档可参考官方文档

一、使用axios请求接口数据放到左侧菜单栏

第一步：安装sxios

• 注意：如果使用axios报错 请降低版本

npm install axios
1

第二步：在config.js文件中配置跨域

• 如不出现跨域现象可跳过此步骤

  devServer: {    // 添加这个devServer配置  
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        },
        //用于打印跨域目标的地址
        logLevel:'debug'
      },
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

第三步：在enhanceApp.js文件中编辑

• 编写完成之后需要重启项目生效

// 如果使用axios报错 请降低版本
const axios = require('axios');

let hasFetchedData = false;
export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData, // site metadata
}) => {
   Vue.mixin({
     async created (){
       // 如果有手动设置的themeConfig下面的sidebar 请注释或者删除掉
       // 获取接口数据 
       if (!hasFetchedData && !siteData.themeConfig.sidebar) {
         await fetchDataAndSyncSidebar();
       }
     }
   });

  // 请求侧边栏数据
  async function fetchDataAndSyncSidebar(){
    hasFetchedData = true
    try {
      //请求地址换成你的
      const res = await axios.get('/api/menuList')
      const sidebarData = res.data.data
      // console.log('res===>',res);
      siteData.themeConfig.sidebar = sidebarData;
    } catch (error) {
      console.error('Error fetching sidebar data:', error);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

第四步：本地起一个服务用于测试

1、新建vuepress.js

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  if (req.url === '/api/menuList') {
    const users = {
        success:"true",
        data:{
          '/guide/': [
            {
              title: '请求接口-平台文档',
              collapsable: false,
              children: [
                '',
                'using-vue',
              ]
            },
            {
              title: '请求接口-基础文档',
              collapsable: false,
              children: [
                'test',
                "test0",
                'test1',
                'test2',
              ]
            },
            {
              title: '请求接口-Group 3',
              collapsable: false,
              children: [
                {
                  title: '代码相关文档',
                  collapsable: false,
                  path: "/guide/subgroup1/",
                  children: [
                    'subgroup1/test3',
                    'subgroup1/test4'
                  ]
                },
                {
                  title: '视图相关文档',
                  collapsable: false,
                  path: "/guide/subgroup2/",
                  children: [
                    'subgroup2/test5',
                    'subgroup2/test6'
                  ]
                }
              ]
            }
          ],
          sidebarDepth: -1  // 设置为 -1，确保所有标题都能展开
        },
        url:req.url,
        code:0,
        msg:"请求成功！"
    }
    res.setHeader('Content-Type', 'application/json');
    
    // 设置允许的请求来源  配置的时候不能加 / 
    res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:8081',"http://localhost:8081");
    res.end(JSON.stringify(users));
  }
  else {
    res.statusCode = 404;
    res.end();
  }
});

const port = 3000;
server.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

2、使用命令node .\vuepress.js启动本地服务

• 启动成功后可使用http://localhost:3000/api/menuList测试是否能正常访问到数据
  

完成效果图

二、编写的文档页面右侧添加 锚点导航栏

• 在用 VuePress 编写的文档页面右侧添加 锚点导航栏

第一步：安装

npm i vuepress-plugin-right-anchor -D
1

第二步：样式

• 在 .vuepress/styles/palette.styl 添加样式变量。

$rightAnchorBgColor = #fff;
$rightAnchorTextColor = $textColor;
$rightAnchorFontSize = 14px;
// btn
$rightAnchorBtnTextColor = $rightAnchorTextColor;
$rightAnchorBtnBgColor = $rightAnchorBgColor;
// menu
$rightAnchorMenuTextColor = $rightAnchorTextColor;
1
2
3
4
5
6
7
8

• 在 .vuepress/styles/index.styl 添加样式。

.app{
  display: flex;
}
.theme-container{
  width: calc(100% - 300px);
}
.global-ui{
  width: 300px;
  border: 1px solid rergb(84, 71, 71);
  font-size: 12px;
}
.ra-menu{
  font-size: 12px;
  width: 280px;
  color: #181819b3;
  border: #eeeeee61 1px solid;
  margin-top: 110px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

第三步：在 config.js添加全局配置

module.exports = {
  // ...
  plugins: [
   	  {
        showDepth: 1,
        ignore: [
          '/',
          '/api/'
          // 更多...
        ],
        expand: {
          trigger: 'hover',
          clickModeDefaultOpen: true
        },
        customClass: 'your-customClass',
        disableGlobalUI: false,
      }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

参数说明

showDepth

!!! showLevel 已经被废弃在 0.3.x。
在右锚显示中将使用哪一级别的标题。 该值的指向含义与 themeconfig.sidebardepth 相同。

• Type: null | number
• Default: null

ignore

不显示 right-anchor 的页面。

• Type: array
• Default: []

expand

关于菜单的展开配置。

• Type: object
  – trigger: string => 展开菜单的触发方式。 ‘hover’ | ‘click’
  – clickModeDefaultOpen: boolean => 点击模式下是否默认打开菜单?
• Default:

  trigger: 'hover',
  clickModeDefaultOpen: true
1
2

customClass

自定义的 right-anchor 类名。

• Type: null | string
• Default: null

disableGlobalUI

禁用所有页面的全局 UI。

• Type: boolean
• Default: false
  如果你需要禁用特定页面的全局 UI，试试 frontmatter:

---
rightAnchor:
disableGlobalUI: true
---
1
2
3
4

页面单独配置

在 .md中通过 vuepress推荐的方式设置 front-matter。

---
rightAnchor: 
  showDepth: 1
  expand:
    trigger: hover
    clickModeDefaultOpen: true
  customClass: your-customClass
  disableGlobalUI: true
---
1
2
3
4
5
6
7
8
9

最后一步：完结撒花-废话不多说 看效果