feat: 🚀 支持 permalink 高亮 nav

Author: Kele-Bingtang

README.md

@@ -5,8 +5,8 @@
 ## TODO
 
 - 文章页隐藏分类和标签（位置不够），支持配置项开启
-- 归档、目录进入后，导航栏对应的 label 没有高亮，需要转为高亮的 link
 - F12 打开慢的问题，可能监听器触发了多次，需要优化下
 - 去掉 dev 启动时终端打印的 scss 语法废弃提示
+- cleanUrl 改为 false 来校验下功能
 - 首页 top 0 位置时监听 F12，开启壁纸功能
 - 归档页添加 commit 图标风格，如：`http://niubin.site/archive.html`

docs/.vitepress/locales/zh.ts

@@ -13,7 +13,7 @@ export default defineConfig({
     // 开启行号
     lineNumbers: true,
     image: {
-      // 默认禁用；设置为 true 可为所有图片启用懒加载。
+      // 默认禁用；设置为 true 可为所有图片启用懒加载
       lazyLoading: true,
     },
     // 更改容器默认值标题

plugins/vitepress-plugin-catalogue/src/helper.ts

@@ -88,6 +88,12 @@ const isMdFile = (filePath: string) => {
   return ["md", "MD"].includes(fileExtension);
 };
 
+/**
+ * 判断数组中是否存在某个元素，支持正则表达式
+ *
+ * @param arr 数组
+ * @param name 元素
+ */
 const isSome = (arr: Array<string | RegExp>, name: string) => {
   return arr.some(item => name.includes(item as string) || (item instanceof RegExp && item.test(name)));
 };

plugins/vitepress-plugin-doc-analysis/src/helper.ts

@@ -85,6 +85,12 @@ const isMdFile = (filePath: string) => {
   return ["md", "MD"].includes(fileExtension);
 };
 
+/**
+ * 判断数组中是否存在某个元素，支持正则表达式
+ *
+ * @param arr 数组
+ * @param name 元素
+ */
 const isSome = (arr: Array<string | RegExp>, name: string) => {
   return arr.some(item => item === name || (item instanceof RegExp && item.test(name)));
 };

plugins/vitepress-plugin-permalink/src/helper.ts

@@ -104,11 +104,20 @@ const isMdFile = (filePath: string) => {
   return ["md", "MD"].includes(fileExtension);
 };
 
+/**
+ * 判断数组中是否存在某个元素，支持正则表达式
+ *
+ * @param arr 数组
+ * @param name 元素
+ */
 const isSome = (arr: Array<string | RegExp>, name: string) => {
   return arr.some(item => item === name || (item instanceof RegExp && item.test(name)));
 };
 
-export const standardLink = (permalink: string) => {
+/**
+ * 处理 permalink 的格式为 /xxx 或者 /xx/xx，即开头带有 /，结尾不带 /
+ */
+export const standardLink = (permalink = "") => {
   let finalPermalink = permalink;
   if (!finalPermalink.startsWith("/")) finalPermalink = "/" + finalPermalink;
   if (finalPermalink.endsWith("/")) finalPermalink = finalPermalink.replace(/\/$/, "");

plugins/vitepress-plugin-permalink/src/index.ts

@@ -29,14 +29,12 @@ export default function VitePluginVitePressPermalink(option: PermalinkOption = {
       const pathToPermalink: Record<string, string> = {};
       // Key 为 permalink，Value 为 path
       const permalinkToPath: Record<string, string> = {};
-      // 多语言 key 数组
+      // 多语言 key 数组，排除 root 根目录
       const localesKeys = Object.keys(locales || {});
 
       for (const [key, value] of Object.entries(permalinks)) {
-        let newValue = value;
         // 如果设置了多语言，则 permalink 添加语言前缀
-        const localesKey = localesKeys.find(k => key.startsWith(k));
-        if (localesKey) newValue = `/${localesKey}${value.startsWith("/") ? value : `/${value}`}`;
+        let newValue = getLocalePermalink(localesKeys, key, value);
 
         pathToPermalink[key] = newValue;
 
@@ -49,15 +47,13 @@ export default function VitePluginVitePressPermalink(option: PermalinkOption = {
 
       themeConfig.permalinks = { map: pathToPermalink, inv: permalinkToPath };
 
-      // TODO 归档、目录进入后，导航栏对应的 label 没有高亮，需要转为高亮的 link
-      // themeConfig.nav = themeConfig.nav?.map((n: any) => {
-      //   const link = standardLink(n.link);
-      //   const permalink = permalinkToPath[link];
-      //   if (permalink) n.link = permalink;
-      //   return n;
-      // });
-
       vitepressConfig = config.vitepress;
+
+      if (!localesKeys.length) return setDefaultActiveMatch(themeConfig.nav, permalinkToPath);
+
+      localesKeys.forEach(localeKey => {
+        setDefaultActiveMatch(locales[localeKey].themeConfig?.nav, permalinkToPath);
+      });
     },
     configureServer(server: ViteDevServer) {
       const {
@@ -86,3 +82,30 @@ export default function VitePluginVitePressPermalink(option: PermalinkOption = {
     },
   };
 }
+
+/**
+ * 给 permalink 添加多语言前缀
+ * @param localesKeys 多语言 key 数组，排除 root 根目录
+ * @param path 文件路径
+ * @param permalink 永久链接
+ */
+const getLocalePermalink = (localesKeys: string[] = [], path = "", permalink = "") => {
+  // 过滤掉 root 根目录
+  const localesKey = localesKeys.filter(key => key !== "root").find(key => path.startsWith(key));
+  if (localesKey) return `/${localesKey}${permalink.startsWith("/") ? permalink : `/${permalink}`}`;
+
+  return permalink;
+};
+
+const setDefaultActiveMatch = (nav: any[] = [], permalinkToPath: Record<string, string>) => {
+  if (!nav.length) return;
+
+  nav.forEach(item => {
+    const link = standardLink(item.link);
+    const path = permalinkToPath[link];
+
+    // 官方归档 activeMatch 是一个正则表达式字符串
+    if (path && !item.activeMatch) item.activeMatch = path;
+    if (item.items) setDefaultActiveMatch(item.items, permalinkToPath);
+  });
+};

plugins/vitepress-plugin-sidebar-resolve/src/helper.ts

@@ -242,6 +242,12 @@ const resolveFileName = (
   return { index, title, type, name };
 };
 
+/**
+ * 判断数组中是否存在某个元素，支持正则表达式
+ *
+ * @param arr 数组
+ * @param name 元素
+ */
 const isSome = (arr: Array<string | RegExp>, name: string) => {
   return arr.some(item => item === name || (item instanceof RegExp && item.test(name)));
 };