为什么做这个
目前的静态博客如vitepress,主要是用markdown来写内容。markdown虽然可读性比较好,但是在文章中贴图片有点麻烦,需要先保存图片到asset目录下,再在markdown中写图片地址。
平时工作主要用飞书写文档,觉得很方便,所以就想能不能在飞书写文档,然后自动将飞书的文档导出成博客的文章。
主要功能介绍
- 将飞书文档导出成markdown文件
- 生成导出的文章的静态博客系统(使用vitepress)
- 自动翻译中文文档为英文
- 集成了umami访问统计
- 集成了artalk评论系统
如何使用
配置飞书应用
先安装飞书:https://www.feishu.cn/
并注册一个个人版账号
通过下面步骤后可以获取下面三个参数:
FEISHU_APP_ID=飞书应用的appid
FEISHU_APP_SECRET=飞书应用的secret
FEISHU_SPACE_ID=知识库的id
新建应用
去飞书开放平台,新建一个应用
为应用添加机器人能力
![](/feishu-vitepress/assets/ThhAba6CPo8ZwyxOLjDcUHTBnFb.DTMWfnYh.png)
添加好后,菜单中会有机器人项
![](/feishu-vitepress/assets/XK09b0UXZoDT8Rx8W4TcHAQXnGx.CTygTyGR.png)
增加飞书文档权限
在权限管理中
为应用开启 docx:document:readonly
和 wiki:wiki:readonly
权限。
获取应用凭证
在应用凭证甚而信息中,获取appid和app secret
![](/feishu-vitepress/assets/JQWfb98Agoinicxr3cmc8xTSnQb.DQDv23VU.png)
发布应用
点创建版本
![](/feishu-vitepress/assets/ZwIxb5fmQon35TxNe5bccLL3nEc.CvrT4uQR.png)
确保应用是审核通过状态
建立群,并接入机器人
![](/feishu-vitepress/assets/BDjkbEwESoRMpVxW5lacSSFFnbb.CbPvT_pX.png)
![](/feishu-vitepress/assets/A60LbBZ3ZoivhGxX9gacdiFUnmg.S-eIB2sC.png)
将群设成飞书文档库的管理员
打开「知识空间设置」
![](/feishu-vitepress/assets/QjzVbOYV1oHuEJx0ePacehR2nHb.BRR-jWv4.png)
「成员设置」->「添加管理员」中添加,把这个 群加成 管理员。
![](/feishu-vitepress/assets/VXMNbc9g7ogqEHxeFnWc8uejnng.B_pLNFmh.png)
并记住知识库的地址,在浏览器地址栏中。下方截图中的框选部分
![](/feishu-vitepress/assets/AxwvbdUqyoP2WjxPy1Rc68HynBd.BojFkI7f.png)
导出飞书文档
检出工程
git clone https://github.com/ftyszyx/feishu-vitepress.git
安装依赖
切到工程目录feishu_vitepress下
npm install
配置环境变量
修改feishu-pages-》.env.bak为.env
并配置好对应的飞书参数(在上一节中有说明)
FEISHU_APP_ID=
FEISHU_APP_SECRET
FEISHU_SPACE_ID=
OUTPUT_DIR=../blog #markdown输出目录
DOC_DIR_NAME=docs #输出目录名
RES_BASE_URL="/"
导出飞书文档
npm run export
会导出到/blog/docs目录下
翻译文档为英文
使用edge库去翻译,有可能翻译的并不好
npm run trans_en
生成的文档在
![](/feishu-vitepress/assets/KabZbcHZfo8uMlxxelccMyOjn5f.DID8p7Db.png)
本地运行博客
修改blog-》.env.bak为.env
并修改
BASE_URL="/" #网站根目录,一般是/,
运行
npm run dev
成功后,显示
![](/feishu-vitepress/assets/NPi7biYogolFhPxYWi7c9ms0ntb.B01CHEU2.png)
飞书文档编写注意事项
文章封面图片
文档的第一行的图片,会转成文档属性的cover字段
图片参考微信公众号的长宽比例: 2.35:1
高度是160宽度就是376
高度是320宽度就是752
高度是800宽度就是1880
文章支持的属性字段
文档的第二行,可以配文档属性。支持yaml
layout: home #指明用home layout(非必须。vitepress属性,如果是首页就用home.非首页不用填)
title: 学技术 #标题
hide: false #是否不导出当前页,非必须
hide_child: true #是否导出子节点,非必须
keywords: #用于搜索和网站seo,非必须
- feishu
- vitepress
文章的类别
文章的分类会自动匹配到飞书文档的根结点名(不区分大小写)
例如本文章根目录结点名是product.
在导出文章时,会自动分配
if (category) meta["categories"] = meta.categories || [category.trim().toLowerCase()];
参考项目
导出飞书文档参考:链接
博客样式参考:链接
本人博客演示效果