VuePress
使用和创建文档可参考官方文档
一、使用axios
请求接口数据放到左侧菜单栏
第一步:安装sxios
- 注意:如果使用
axios
报错 请降低版本
npm install axios
第二步:在config.js
文件中配置跨域
- 如不出现跨域现象可跳过此步骤
devServer: { // 添加这个devServer配置
proxy: {
'/api': {
target: 'http://127.0.0.1:3000',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
},
//用于打印跨域目标的地址
logLevel:'debug'
},
}
},
第三步:在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、新建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}`);
});
2、使用命令node .\vuepress.js
启动本地服务
- 启动成功后可使用
http://localhost:3000/api/menuList
测试是否能正常访问到数据
完成效果图
二、编写的文档页面右侧添加 锚点导航栏
- 在用
VuePress
编写的文档页面右侧添加 锚点导航栏
第一步:安装
npm i vuepress-plugin-right-anchor -D
第二步:样式
- 在 .vuepress/styles/palette.styl 添加样式变量。
$rightAnchorBgColor = #fff;
$rightAnchorTextColor = $textColor;
$rightAnchorFontSize = 14px;
// btn
$rightAnchorBtnTextColor = $rightAnchorTextColor;
$rightAnchorBtnBgColor = $rightAnchorBgColor;
// menu
$rightAnchorMenuTextColor = $rightAnchorTextColor;
- 在 .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;
}
第三步:在 config.js
添加全局配置
module.exports = {
// ...
plugins: [
{
showDepth: 1,
ignore: [
'/',
'/api/'
// 更多...
],
expand: {
trigger: 'hover',
clickModeDefaultOpen: true
},
customClass: 'your-customClass',
disableGlobalUI: false,
}
]
}
参数说明
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
customClass
自定义的 right-anchor 类名。
- Type: null | string
- Default: null
disableGlobalUI
禁用所有页面的全局 UI。
- Type: boolean
- Default: false
如果你需要禁用特定页面的全局 UI,试试frontmatter
:
---
rightAnchor:
disableGlobalUI: true
---
页面单独配置
在 .md
中通过 vuepress
推荐的方式设置 front-matter
。
---
rightAnchor:
showDepth: 1
expand:
trigger: hover
clickModeDefaultOpen: true
customClass: your-customClass
disableGlobalUI: true
---