Why do this

Current static blogs, such as VitePress, mainly use markdown to write content. Although markdown is more readable, it is a bit troublesome to paste images in the article, you need to save the image to the asset directory first, and then write the image address in markdown.

I usually use Feishu to write documents in my work, and I think it is very convenient, so I wondered if I could write documents on Feishu, and then automatically export Feishu's documents into blog articles.

Introduction to the main functions

1. Export the Feishu document to a markdown file
2. Static Blog System to Generate Exported Articles (Using VitePress)
3. Automatically translate Chinese documents into English
4. Umami access statistics are integrated
5. Integrated Artalk commenting system

How to use

Configure the Feishu app

Install Feishu first: https://www.feishu.cn/

and sign up for a personal account

After performing the following steps, you can obtain the following three parameters:

FEISHU_APP_ID = AppID of the Feishu app
FEISHU_APP_SECRET = the secret of the Feishu app
FEISHU_SPACE_ID = ID of the knowledge base

Create a new app

Go to the Feishu Open Platform and create an app

https://open.feishu.cn/app

Add bot capabilities to your app

Once added, there will be a bot item in the menu

Add permissions for Feishu documents

in Permissions Management

Turn on the 'docx:document:readonly' and 'wiki:wiki:readonly' permissions for the app.

Get app credentials

In the App Credentials and even Information, get the appid and app secret

Publish your app

Point Create Version

Make sure that the app is approved

Create a group and connect to the bot

Set the group as an administrator of the Feishu Document Library

Open "Knowledge Space Settings"

"Member Settings" - > add in "Add Administrator", and add this group to Administrator.

And remember the address of the knowledge base, in the browser address bar. The box selection in the screenshot below

Export Feishu documents

Check out the project

git clone https://github.com/ftyszyx/feishu-vitepress.git

Install dependencies

Switch to the feishu_vitepress of the project directory

npm install

Configure environment variables

Modify feishu-pages-". env.bak is .env

and configure the corresponding Feishu parameters (explained in the previous section)

FEISHU_APP_ID=
FEISHU_APP_SECRET
FEISHU_SPACE_ID=
OUTPUT_DIR=.. /blog #markdown输出目录
DOC_DIR_NAME=docs #输出目录名
RES_BASE_URL="/"

Export Feishu documents

npm run export

It will be exported to the /blog/docs directory

Translate the document into English

If you use the edge library to translate, it may not be translated well

npm run trans_en
```The generated documentation is in

<img src="/assets/KabZbcHZfo8uMlxxelccMyOjn5f.png" src-width="358" class="m-auto" src-height="133" align="center"/>
## Run your blog locally

Modify blog-". env.bak is .env

and modify

```ts
BASE_URL="/" #网站根目录, generally /,

run

npm run dev

After success, it is displayed

Just visit http://localhost:5173/

Precautions for writing Feishu documents

Article cover image

The image of the first line of the document will be converted into the cover field of the document properties

The picture refers to the aspect ratio of the WeChat official account: 2.35:1

The height is 160, and the width is 376

The height is 320, and the width is 752

The height is 800 and the width is 1880

Attribute fields supported by the article

The second line of the document, which can be equipped with document attributes. YAML is supported

layout: home #指明用home layout (not required.) vitepress attribute, if it is the homepage, use home.
title: Learn Technology #标题
hide: false #是否不导出当前页, not required
hide_child: true #是否导出子节点, not required 
keywords: #用于搜索和网站seo, not required- feishu
  - vitepress

Category of the article

The classification of articles will be automatically matched to the root node name of the Feishu document (case-insensitive)

For example, the root node name of this article is product.

When you export an article, it's automatically assigned

if (category) meta["categories"] = meta.categories || [category.trim().toLowerCase()];

Reference Items

Export Feishu Documentation: link

Blog style reference: link

My blog demonstrates the effect

[github_page address] (https://ftyszyx.github.io/feishu-vitepress/)

[Alibaba Cloud Address] (https://blog.bytefuse.cn/)