记录一次飞书文档转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
大概记录