为什么做这个
目前的静态博客如vitepress,主要是用markdown来写内容。
markdown虽然可读性比较好,但有以下几个疼点:
1、文章中贴图片有点麻烦,需要先保存图片到asset目录下,然后在markdown中写图片地址。
2、语法虽然简单,但有时还是记不住(年纪大了,记忆力下降)
3、不能方便的插入图表,流程图之类的。
4、换行很讨厌,如果不强制换行,所有的东西全挤在一行里。
平时工作主要用飞书写文档,觉得很方便,所以就想能不能在飞书写文档,然后自动将飞书的文档导出成博客的文章。
主要功能介绍
- 将飞书文档导出成markdown文件(集成到了github action,自动)
- 生成导出的文章的静态博客系统(使用vitepress实现,集成到了github action,自动)
- 自动翻译中文文档为英文(目前不是自动,因为机器翻译的文章经常会把一些空格或者符号搞乱,导致编译不过,需要手动修改,所以暂时先手动)
- 集成了umami访问统计(修改了一部分源码)
- 集成了artalk评论系统 (功能可用,但后台管理页面丑陋,后面找到合适的系统,再换掉)
如何使用
配置飞书应用
先安装飞书:https://www.feishu.cn/
并注册一个个人版账号
通过下面步骤后可以获取下面三个参数:
FEISHU_APP_ID=飞书应用的appid
FEISHU_APP_SECRET=飞书应用的secret
FEISHU_SPACE_ID=知识库的id
新建应用
去飞书开放平台,新建一个应用
为应用添加机器人能力
添加好后,菜单中会有机器人项
增加飞书文档权限
在权限管理中
为应用开启 docx:document:readonly
和 wiki:wiki:readonly
权限。
获取应用凭证
在应用凭证甚而信息中,获取appid和app secret
发布应用
点创建版本
确保应用是审核通过状态
建立群,并接入机器人
将群设成飞书文档库的管理员
打开「知识空间设置」
「成员设置」->「添加管理员」中添加,把这个 群加成 管理员。
并记住知识库的地址,在浏览器地址栏中。下方截图中的框选部分
导出飞书文档
检出工程
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
生成的文档在
本地运行博客
修改blog-》.env.bak为.env
并修改
BASE_URL="/" #网站根目录,一般是/,
运行
npm run dev
成功后,显示
飞书文档编写注意事项
文章封面图片
文档的第一行的图片,会转成文档属性的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()];
参考项目
导出飞书文档参考:链接
博客样式参考:链接
本人博客演示效果