生成配置导航的方法

字数: 0 字时长: 0 分钟

vitepress 会根据文件夹的目录结构自动识别生成路由，侧边的配置导航需要手动填写

目录结构

根据目录结构生成对应的 url 路由地址

生成路由后，我们需要配置左侧的配置导航，可以手动填写，也可以采用脚本，我是采取了脚本的方法。

我新建了一个与.vitepress 平级的scripts 文件夹存放脚本文件gen-sidebar.mjs ,接着修改启动方式脚本，在主题配置config.mjs 里修改配置导航

jsjsonjs

// gen-sidebar.mjs
// 按照自己的目录结构修改参数 此处我的md只放在fronted与notes两个文件夹
import { readdirSync, statSync } from "node:fs";
import { join, extname } from "node:path";
import { writeFileSync } from "node:fs";
import { fileURLToPath } from "node:url";
import { dirname, resolve } from "node:path";

// 当前脚本目录：假设项目结构是 <docs>/.vitepress/make-sidebar.js
const __dirname = dirname(fileURLToPath(import.meta.url));
const DOCS_ROOT = resolve(__dirname, "..");
const SCAN_BASE = join(DOCS_ROOT, "frontend"); // 要扫描的目录
const OUTPUT_FILE = join(DOCS_ROOT, ".vitepress", "fronted.json");

function scan(dir, base = "") {
  const items = [];
  for (const name of readdirSync(dir, { withFileTypes: true })) {
    const fullPath = join(dir, name.name);
    const relPath = join(base, name.name);
    if (name.isDirectory()) {
      items.push({
        text: name.name,
        collapsed: true,
        items: scan(fullPath, relPath),
      });
    } else if (extname(name.name) === ".md" && !name.name.startsWith("@")) {
      // 跳过以 @ 开头的文件
      const link =
        "/frontend/" + relPath.replace(/\\/g, "/").replace(/\.md$/, "");
      items.push({ text: name.name.replace(/\.md$/, ""), link });
    }
  }
  return items.sort((a, b) => {
    // 目录放前面，文件放后面；可按需要自行排序
    return (a.items ? -1 : 1) - (b.items ? -1 : 1);
  });
}

const sidebar = scan(SCAN_BASE);
writeFileSync(OUTPUT_FILE, JSON.stringify(sidebar, null, 2));
console.log("✅ 新路由json 已生成");

json

// package.json
"scripts": {
    "docs:dev": "npm run gen-sidebar && vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview",
    "gen-sidebar": "node scripts/gen-sidebar.mjs",
    "commit": "git-cz"
  },

// config.mjs
export default defineConfig({
  themeConfig: {
    ......,
    sidebar: {
      '/frontend/': fronted,
      '/notes':notes
    },
  },
});

于是，我每次执行本地启动项目npm run docs:dev就会生成一份新的配置导航到对应的目录文件里，同时更新配置。

生成配置导航的方法 ​

生成配置导航的方法