Skip to content

VitePress

VitePress 非常适用于生成文档网站,他是由 Vue 社区创立的,很多 Vue 社区的技术文档都用它来生成。

目录构建

想让 Feishu Pages 与 VitePress,你需要基于 目录树文件 docs.json 来构建 VitePress 的 Sidebar。

配置

你可以在 VitePress 的配置文件中实现 Sidebar 的生成,请将 docs.json 放到 VitePress 文档项目根目录。

然后修改配置 .vitepress/config.mts,增加:

ts
import { DefaultTheme, defineConfig } from 'vitepress';
const docs = require("../docs.json")
/**
 * Convert feishu-pages's docs.json into VitePress's sidebar config
 * @param docs from `docs.json`
 * @returns
 */
const convertDocsToSidebars = (docs: any) => {
  const sidebars: DefaultTheme.SidebarItem[] = [];
  for (const doc of docs) {
    let sidebar: DefaultTheme.SidebarItem = {
      text: doc.title,
      link: doc.slug,
    };
    if (doc.children.length > 0) {
      sidebar.items = convertDocsToSidebars(doc.children);
    }
    sidebars.push(sidebar);
  }

  return sidebars;
};


export default defineConfig({
  ignoreDeadLinks: true,
  themeConfig: {
    sidebar: convertDocsToSidebars(docs),
  },
});

请将 feishu-pages 生成的 dist 目录下的 .md 文件复制到 VitePress 的 docs 目录。

更多可以参考 Feishu Pages 写的例子:

https://github.com/longbridgeapp/feishu-pages/tree/main/website