【VitePress】新增md文件后主动更新侧边栏导航

说在前面

   

• 操作系统：windows11
  
• node版本：v18.19.0
  
• npm版本：10.2.3
  
• vitepress版本：1.6.3
  
• 完备代码：github
  

  先看结果

• 模板用的就是官方主题
  
  
  
  
  
  
  

代码结构

具体说明

侧边栏格式

• 通常，侧边栏定义在config.mts中
  1. export default {
  2.   themeConfig: {
  3.     sidebar: [
  4.       {
  5.         text: 'Guide',
  6.         items: [
  7.           { text: 'Introduction', link: '/introduction' },
  8.           { text: 'Getting Started', link: '/getting-started' },
  9.           ...
  10.         ]
  11.       }
  12.     ]
  13.   }
  14. }

  复制代码
  例如上述代码定义了这样子的侧边栏：
  
  
  
  
• 而如今，我们需要根据目录内容，主动天生一个侧边栏
  

utils

• 在该目录下，我们实现了一个脚本，用于主动天生侧边栏内容
  1. import FastGlob from 'fast-glob';
  2. const { glob } = FastGlob
  3. import fs from 'fs/promises';
  4. import path from 'path';
  5. import type { DefaultTheme } from 'vitepress';
  6. import chokidar from 'chokidar';
  8. type SidebarConfig = Record<string, DefaultTheme.SidebarItem[]>;
  10. export async function generateAutoSidebar(): Promise<SidebarConfig> {
  11.     const basePath = path.join(process.cwd(), 'doc/reviews');
  12.     const branches = await glob('*/', {
  13.         cwd: basePath,
  14.         onlyDirectories: true,
  15.         deep: 1
  16.     });
  18.     const sidebar: DefaultTheme.SidebarItem[] = [];
  20.     for (const branchDir of branches) {
  21.         const branchName = branchDir.replace(/\/$/, '');
  22.         const mdFiles = await glob(`${branchDir}/*.md`, {
  23.             cwd: basePath,
  24.             ignore: ['**/_*.md']
  25.         });
  27.         const items: DefaultTheme.SidebarItem[] = mdFiles
  28.             .map(file => {
  29.                 const fileName = path.basename(file, '.md');
  30.                 return {
  31.                     text: `${fileName}.md`,
  32.                     link: `/reviews/${branchDir}/${fileName}`
  33.                 };
  34.             })
  35.             .sort((a, b) => {
  36.                 const numA = parseInt(a.text.match(/\d+/)?.[0] || '0');
  37.                 const numB = parseInt(b.text.match(/\d+/)?.[0] || '0');
  38.                 return numA - numB;
  39.             });
  41.         sidebar.push({
  42.             text: branchName,
  43.             collapsed: false,
  44.             items
  45.         });
  46.     }
  48.     return { '/reviews/': sidebar };
  49. }
  51. export async function writeSidebarConfig(): Promise<void> {
  52.     const sidebarConfig = await generateAutoSidebar();
  53.     const configContent = `// Auto-generated sidebar config
  54. import type { DefaultTheme } from 'vitepress';
  56. export const sidebarConfig: DefaultTheme.Config['sidebar'] = ${JSON.stringify(sidebarConfig, null, 2)};
  57. `;
  59.     var p = path.join(process.cwd(), 'doc/.vitepress/sidebar.generated.ts')
  61.     await fs.writeFile(
  62.         p,
  63.         configContent
  64.     );
  65. }
  68. writeSidebarConfig()

  复制代码
• 通过执行tsx doc/.vitepress/utils/generateSidebar.ts --watch，将在./doc/.vitepress/目录下主动天生sidebar.generate.ts文件，以上述reviews文件夹中内容为例，天生的内容为：
  1. // Auto-generated sidebar config
  2. import type { DefaultTheme } from 'vitepress';
  4. export const sidebarConfig: DefaultTheme.Config['sidebar'] = {
  5.   "/reviews/": [
  6.     {
  7.       "text": "aaa",
  8.       "collapsed": false,
  9.       "items": [
  10.         {
  11.           "text": "1.md",
  12.           "link": "/reviews/aaa/1"
  13.         },
  14.         {
  15.           "text": "2.md",
  16.           "link": "/reviews/aaa/2"
  17.         }
  18.       ]
  19.     },
  20.     {
  21.       "text": "bbb",
  22.       "collapsed": false,
  23.       "items": [
  24.         {
  25.           "text": "1.md",
  26.           "link": "/reviews/bbb/1"
  27.         }
  28.       ]
  29.     }
  30.   ]
  31. };

  复制代码
• 而后，在我们的config.mts中引用即可
  1. import { defineConfig } from 'vitepress'
  2. import { sidebarConfig } from './sidebar.generated.js';
  4. // https://vitepress.dev/reference/site-config
  5. export default defineConfig({
  6.   title: "coding",
  7.   description: "code review helper",
  8.   themeConfig: {
  9.     // https://vitepress.dev/reference/default-theme-config
  10.     nav: [
  11.       { text: 'Home', link: '/' },
  12.       { text: 'Reviews', link: '/reviews' }
  13.     ],
  15.     sidebar: sidebarConfig,
  16.   },
  17.   async buildEnd() {
  18.     const { writeSidebarConfig } = await import('./utils/generateSidebar.js');
  19.     await writeSidebarConfig();
  20.   }
  21. })

  复制代码

监听文件变化

• 在utils/generateSidebar.ts最后添加这一段，监控该目录下的文件变化，当有变化时，会主动调用writeSidebarConfig重新天生侧边栏内容
  1. // 开发模式文件监听
  2. if (process.env.NODE_ENV === 'development' || process.argv.includes('--watch')) {
  3.     const watcher = chokidar.watch('doc/reviews/**/*.md', {
  4.         ignored: /(^|[/\\])\../,
  5.         persistent: true
  6.     });
  8.     watcher
  9.         .on('add', () => writeSidebarConfig())
  10.         .on('unlink', () => writeSidebarConfig());
  12.     process.stdin.resume();
  13. }

  复制代码

使用pm2管理监听进程

• 发起在linux下使用，windows下有问题
  
• 安装
  1. npm install -D pm2

  复制代码
• 新建ecosystem.config.js
  1. module.exports = {
  2.     apps: [
  3.         {
  4.             name: 'vitepress',
  5.             script: 'npm',
  6.             args: 'run docs:dev',
  7.             watch: ['doc/.vitepress/sidebar.generated.ts']
  8.         },
  9.         {
  10.             name: 'sidebar-watcher',
  11.             script: 'npm',
  12.             args: 'run dev:sidebar',
  13.             watch: false
  14.         }
  15.     ]
  16. };

  复制代码
• 修改package.json
  1. {
  2.   "scripts": {
  3.     "start": "pm2 start eco.config.js",
  4.     "stop": "pm2 stop eco.config.js",
  5.     "docs:dev": "vitepress dev doc",
  6.     "docs:build": "vitepress build doc",
  7.     "docs:preview": "vitepress preview doc",
  8.     "docs:sidebar": "tsx doc/.vitepress/utils/generateSidebar.ts --watch"
  9.   },
  10.   "devDependencies": {
  11.     // ...
  12.   }
  13. }

  复制代码
• 运行
  1. npm run start

  复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。