vitepress动态导航
前言
我需要根据动态设置导航。
比如根据不同的路由设置不同的顶部导航。
但是vitepress并没有相关配置，但是我们可以通过拦截主题修改全局状态来完成这个功能！
核心知识
创建文件，xxx/docs/.vitepress/theme/index.js
注意文件名和路径不能写错，意思是覆盖默认主题配置！
import DefaultTheme from "vitepress/theme";
import { watch } from 'vue'
export default {
extends: DefaultTheme,
enhanceApp({ app, router, siteData }) {
watch(
() => router.route.path,
(val) => {
// 动态修改站点数据（毕竟使用useData不生效），比如这里动态设置navbar
siteData.value = {
...siteData.value,
themeConfig: {
...siteData.value.themeConfig,
nav: [
{ text: "Html", link: "/vue/intro" },
{ text: "Css", link: "/vuex/intro" },
]
}
}
}
);
},
};
完整试例
创建导航配置
xxx/docs/.vitepress/theme/helper/nav-group.ts
import holyTrinityImg from "../assets/img/docss/holy-trinity.webp";
import feFwLibImg from "../assets/img/docss/fe-fw-lib.png";
const navGroup = {
holyTrinity: {
title: "前端三剑客",
content: "html、css、js的爱恨情仇",
icon: holyTrinityImg,
nav: [
{ text: "Html", link: "/html" },
{ text: "Css", link: "/css" },
],
},
feFwAndLib: {
title: "前端框架与库",
content: "让你事半功倍",
icon: feFwLibImg,
nav: [
{ text: "Vue", link: "/vue" },
{ text: "Vuex", link: "/vuex" },
],
},
};
export default navGroup;
工具函数
xxx/docs/.vitepress/theme/helper/utils.ts
import _ from "lodash";
import navGroupTemp from "./nav-group";
// 接受navGrouplink，返回对应的第一个sidebar（既第一篇文档）
export const getFirstSideBarLink = (navGrouplink, allSidebar, baseUrl) => {
const sidebar = allSidebar[navGrouplink + "/"];
let firstSidebar;
const handler = (items) => {
for (const it of items) {
if (it.items) handler(it.items);
else firstSidebar = it;
break;
}
};
handler(sidebar.items);
let link;
if (firstSidebar) {
let base = baseUrl;
base = base.slice(0, -1);
link = base + navGrouplink + "/" + firstSidebar.link;
}
return link;
};
// 根据当前路由 获取 对应的顶部导航
export const getNavs = (router, baseUrl) => {
let navGroup = _.cloneDeep(navGroupTemp);
const { path } = router.route;
const index = baseUrl === "/" ? 1 : 2;
const navItemlink = "/" + path.split("/")[index];
for (const key in navGroup) {
const match = navGroup[key].nav?.find((it) => it.link === navItemlink);
if (match) return navGroup[key].nav; // 返回找到的根键，例如 'holyTrinity'
}
};
自定义主题：home页
xxx/docs/.vitepress/theme/home.vue
<template>
<div class="home">
<div class="other"></div>
<div class="docss">
<template v-for="key in Object.keys(navGroup)" :key="key">
<div class="docs">
<img :src="navGroup[key].icon" />
<div class="content">{{ navGroup[key].content }}</div>
<div class="title" @click="goByNavGroup(navGroup[key])">
{{ navGroup[key].title }}
</div>
</div>
</template>
</div>
</div>
</template>
<script setup name="customHome" lang="ts">
// @ts-nocheck
import _ from 'lodash';
import {ref} from "vue";
import navGroupTemp from "./helper/nav-group";
import { useRouter, useData } from "vitepress";
import {getFirstSideBarLink} from "./helper/utils"
const navGroup = ref(_.cloneDeep(navGroupTemp));
const { site, theme } = useData()
const router = useRouter();
const goByNavGroup = (item) => {
const [firstNav] = item.nav;
const link = getFirstSideBarLink(firstNav.link, theme.value.sidebar, site.value.base);
router.go(link);
};
</script>
<style scoped lang="scss">
.home {
width: 100%;
max-width: 1024px;
background-color: rgba($color: #000000, $alpha: 0.01);
height: 100vh;
margin: auto;
.other {
height: 100px;
}
.docss {
margin: auto;
display: flex;
flex-wrap: wrap;
.docs {
padding: 0 16px;
// height: 180px;
margin-bottom: 20px;
cursor: pointer;
img {
width: 100%;
border-radius: 4px;
background-color: rgba($color: #000000, $alpha: 0.1);
}
.title {
text-align: center;
font-weight: 700;
}
.content {
text-align: center;
font-size: 13px;
}
}
// 媒体查询：当屏幕宽度小于600px时
@media screen and (max-width: 600px) {
.docs {
width: 50%;
img {
height: 90px;
}
}
}
// 媒体查询：当屏幕宽度在400px到600px之间时
@media screen and (min-width: 600px) and (max-width: 800px) {
.docs {
width: 33%;
img {
height: 110px;
}
}
}
// 媒体查询：当屏幕宽度大于800px时
@media screen and (min-width: 800px) {
.docs {
width: 25%;
img {
height: 130px;
}
}
}
}
}
</style>
自定义主题： 入口
xxx/docs/.vitepress/theme/index.ts
import _ from "lodash";
import { watch } from "vue";
import Home from "./home.vue";
import DefaultTheme from "vitepress/theme";
import { getFirstSideBarLink, getNavs } from "./helper/utils";
export default {
extends: DefaultTheme,
enhanceApp({ app, router, siteData }) {
watch(
() => router.route.path,
(val) => {
// 获取基础nav
const nav = getNavs(router, siteData.value.base);
// 动态修改站点数据（毕竟使用useData不生效），比如这里动态设置navbar
if (nav) {
// 补充完整nav的link，并设置合适的active高亮
nav.forEach((it) => {
const res = getFirstSideBarLink(
it.link,
siteData.value.themeConfig.sidebar,
""
);
it.link = res;
it.activeMatch = "/" + it.link.split("/")[1] + "/";
});
siteData.value = {
...siteData.value,
themeConfig: {
...siteData.value.themeConfig,
nav,
},
};
}
}
);
app.component("customHome", Home);
},
};
其他
注意我使用了侧边栏自动生成插件 vitepress-sidebar
xxx/docs/.vitepress/config.mts
import { defineConfig } from 'vitepress'
import { withSidebar } from 'vitepress-sidebar';
import fs from "node:fs";
import path from "node:path";
const vitePressOptions = defineConfig({
title: "丁知识库",
description: "A VitePress Site",
base: "/vitepress",
cleanUrls: true,
themeConfig: {
nav: [],
sidebar: [],
// socialLinks: [
// { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
// ]
}
})
// 获取都有哪些项目
const projectRoot = path.resolve(process.cwd());
const docsPath = path.resolve(projectRoot, 'docs');
const ignoreDir = ['.vitepress', '.DS_Store'];
const docs = fs.readdirSync(docsPath, { withFileTypes: true }).filter(it => {
const isIgnore = ignoreDir.includes(it.name)
const isFile = fs.statSync(path.resolve(it.parentPath, it.name)).isFile();
return !isIgnore && !isFile;
});
const vitePressSidebarOptions = docs.map(it => ({
documentRootPath: 'docs',
scanStartPath: it.name,
basePath: `/${it.name}/`,
resolvePath: `/${it.name}/`,
useTitleFromFileHeading: true,
collapsed: true,
rootGroupCollapsed: true,
useFolderLinkFromSameNameSubFile: true, // 如果此值为true,则当存在与文件夹同名的子文件时,将在文件夹中创建一个链接,用于导航至该文件,而该文件不会显示在子项中。
// folderLinkNotIncludesFileName: true
}))
export default defineConfig(withSidebar(vitePressOptions, vitePressSidebarOptions));
预览效果
