记录一次飞书文档转md嵌入vitepress做静态站点

需求

使用大佬写的插件来做。
需要一个富文本编辑器，富文本编辑器编辑完成后，能显示为静态站点，并且能返回自己的系统的目标路由。产品问我能不能把飞书的文档转换出来，并且给我发了一篇文章。
产品发的文档
但是后面完成后，发现这个文档其实有点老旧，要看feishu-pages插件作者的最新文章。
最新文档

配置飞书机器人

飞书开放后台

新建一个飞书应用，然后添加机器人功能

开通必要权限。

• docx:document:readonly
• wiki:wiki:readonly
• drive:drive:readonly
• board:whiteboard:node:read
  
  在这里搜索权限并且开通
  

在飞书里面新建一个群聊名字你随意弄比如 Feishu Pages

群聊中点击设置


添加你的应用，在此之前应用要发布。

在你的知识库中，点击设置

添加管理员，将你的群聊，添加进来。
在页面的链接中，找到知识库id

到此，配置完成
你可以获取到知识库id,应用的信息

搭建应用

feishu-pages的作者提供了示例站点，我们可以拿过来用，也可以自己搭建。
新建一个vitepress应用。

https://vitepress.dev/zh/guide/getting-started#installation

npx vitepress init

根目录新建一个.env文件，然后填入你的
APP_ID
APP_SECRET
FEISHU_SPACE_ID:知识库id

FEISHU_APP_ID=
FEISHU_APP_SECRET=
FEISHU_SPACE_ID=
FEISHU_LOG_LEVEL=1
OUTPUT_DIR=
BASE_URL=/
ROOT_NODE_TOKEN=
URL_STYLE=
SKIP_ASSETS=

然后安装feishu-pages

npm i feishu-pages -D

{"scripts": {"docs:dev": "vitepress dev","docs:build": "vitepress build","docs:preview": "vitepress preview","getdocs": "feishu-pages"},"devDependencies": {"feishu-pages": "^0.7.6"}
}

然后写个 "getdocs": "feishu-pages"
我们来执行下。

npm run getdocs

如果你对目录有要求，可以配置

比如你想要根目录下，

这里生成了docs.json文件，可以解析这个文件来生成侧边栏。
插件作者有代码示例

https://github.com/longbridge/feishu-pages/blob/main/website/.vitepress/config.mts

直接拿来用。
先安装下vitepress包

npm i vitepress -D

安装下 markdown-it-mathjax3 支持数学公式。

npm i markdown-it-mathjax3 -D

当然如果你不用数学公式的话，不用安装，将配置项的math注释掉

npm run docs:dev

执行下，跑起来。修改配置项。

因为我们配置.env

所以vitepress配置要对应。

跑起来后是404，因为docs目录下没有index.md，默认首页为index.md。因为配置文件指定来srcDir为docs目录。

我们可以手动复制一份进去，也可以每次拉docs的时候,cp一份。
"getdocs": "feishu-pages && cp index.md docs/"
现在首页正常了。

配置下nav



进来可以正常访问了。

国际化配置

需要我们的知识库文档改成这样，根据语言。


slug是配置该文档/目录的名称。我们执行下
npm run getdocs

目录有了，想要切换的时候保持一致，还需要这样，中文英文的文件标题一致

这样生成的结构是这样的

配置参考
https://vitepress.dev/zh/guide/i18n

样式

现在的样式和飞书文档里面还是不一样的

我复制的作者的例子。因为现在还没有配置样式。
这里我直接抄的是插件作者demo的。

{"scripts": {"docs:dev": "vitepress dev","docs:build": "vitepress build","docs:preview": "vitepress preview","getdocs": "feishu-pages && cp index.md docs/"},"devDependencies": {"feishu-pages": "^0.7.6","markdown-it-mathjax3": "^4.3.2","vitepress": "^1.6.3","autoprefixer": "^10.4.15","postcss": "^8.4.30","sass": "^1.67.0","tailwindcss": "^3.3.3"}
}

复制后安装下。
npm i

根目录三个文件

postcss.config

module.exports = {plugins: {tailwindcss: {},autoprefixer: {},},
};

style.scss

@tailwind base;
@tailwind components;
@tailwind utilities;ul {ul {list-style-type: circle;ul {list-style-type: square;}}
}ol {ol {list-style-type: lower-alpha;ol {list-style-type: lower-roman;}}
}.callout {padding: 1em 1em 1em 3em;margin: 1.5em 0;border: 2px solid #ccc;border-radius: 5px;font-size: 1em;@apply relative;&-emoji {left: 1em;top: 0.8em;font-size: 1.2em;@apply absolute;}p,ul,ol {margin-top: 0;}& > *:last-child {margin-bottom: 0;}&-bg-1,&-bg-8 {@apply bg-red-50 dark:bg-red-950;}&-bg-2,&-bg-9 {@apply bg-orange-50 dark:bg-orange-950;}&-bg-3,&-bg-10 {@apply bg-yellow-50 dark:bg-yellow-950;}&-bg-4,&-bg-11 {@apply bg-green-50 dark:bg-green-950;}&-bg-5,&-bg-12 {@apply bg-blue-50 dark:bg-blue-950;}&-bg-6,&-bg-13 {@apply bg-purple-50 dark:bg-purple-950;}&-bg-7,&-bg-14 {@apply bg-gray-50 dark:bg-gray-950;}&-border-1,&-border-8 {@apply border-red-200 dark:border-red-800;}&-border-2,&-border-9 {@apply border-orange-200 dark:border-orange-800;}&-border-3,&-border-10 {@apply border-yellow-200 dark:border-yellow-800;}&-border-4,&-border-11 {@apply border-green-200 dark:border-green-800;}&-border-5,&-border-12 {@apply border-blue-200 dark:border-blue-800;}&-border-6,&-border-13 {@apply border-purple-200 dark:border-purple-800;}&-border-7,&-border-14 {@apply border-gray-200 dark:border-gray-800;}@apply text-gray-800 dark:text-gray-200;
}.grid {margin: 1.5em 0;
}iframe {@apply w-full aspect-video;border-width: 1px;
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {content: ['docs/**/*.md'],theme: {extend: {},},darkMode: 'class',plugins: [],
};

然后引入下
在主题文件，在.vitepress目录下新增theme/index.ts

import DefaultTheme from 'vitepress/theme';
import '../../style.scss';
export default {...DefaultTheme,
};

over
大概记录