痛点

语雀可以跨端,但是没有博客的灵活性,无法实现博客的各类自定义功能。

思路

在L站上看到了 白嫖个人站:NotionNext,真得好香!帖子,其中的GitHub项目提到了 Elog ,可以批量导出Markdown 文件,并兼容语雀。可以按照 Elog 官网接入Hexo

Elog Markdown 批量导出工具、开放式跨平台博客解决方案,随意组合写作平台(语雀/Notion/FlowUs/飞书)和博客平台(Hexo/Vitepress/Halo/Confluence/WordPress等)

Elog可以将语雀中的文档导出为Markdown文件,结合 Hexo+Github Action+butterfly+vercel 就可以实现语雀更新文档,定时/实施将语雀文档发布到公网

实现上的问题、对应的技术分析

语雀的文档和 Hexo 解析 Markdown 文件的格式不一致的问题

Hexo 要求每个Markdown 文件开头有一段 YAML 或 JSON 代码块,用于配置写作设置。否则无法渲染Markdown文件。

Elog 会将用户自定义的 front matter 和 预定义属性合并后,输出新的带有 front matter 的 markdown 文档。主要用在Hexo渲染Markdown文件开头的代码块。

可以做下面2个配置实现目录

  1. 需要在Elog配置文件中配置deploy.local.format=matter-markdown
  2. 语雀在写一个文章开头需要加上下面的内容,具体的xml含义可以参考 Hexo Front matter
1
2
3
4
5
6
7
8
---
title: Windows Terminal 集成git bash
tags: ['windows','windows Terminale']
categories: ['windows']
cover: "https://zfe.space/images/letter/y.png"
top_img: "https://zfe.space/images/letter/y.png"
date: 2022-12-07 16:30:43
---

利用 CloudFlareWorker 开启 Artitalk_SafeMode 模式

目的:防刷和防止暴露 learnCloude 的密钥信息

按照 Artitalk_SafeMode 进行配置,但是 CF 的 worker 中的js粘贴下面的代码,假设这个workers名字叫做 blog-artitalk-safemode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/**
* Welcome to Cloudflare Workers! This is your first worker.
*
* - Run "npm run dev" in your terminal to start a development server
* - Open a browser tab at http://localhost:8787/ to see your worker in action
* - Run "npm run deploy" to publish your worker
*
* Learn more at https://developers.cloudflare.com/workers/
*/
function rp(p) {
return p.split("?")[0]
}
function l(p) {
return p[getJsonLength(p) - 1]
}

function remove_protocol(domain){
return domain.slice(8)
}


function getJsonLength(jsonData) {

var jsonLength = 0;

for (var item in jsonData) {

jsonLength++;

}

return jsonLength;
}

export default {
async fetch(request, env, ctx) {
var AppId = (function () { try { return env.APPID } catch (e) { return "" } })()
var AppKey = (function () { try { return env.APPKEY } catch (e) { return "" } })()
if (AppId == "" || AppKey == "") { return new Response('Artitalk-Safe异常:您没有设定appid和appkey') }
var ServerDomain = (function () { try { return env.SERVERDOMAIN } catch (e) { return `${(AppId.substr(0, 8)).toLowerCase()}.api.lncldglobal.com` } })()
var atComment = (function () { try { return env.ATCOMMENT == "true" ? true : false } catch (e) { return true } })()
var CORS = (function () { try { return env.CORS } catch (e) { return '*' } })()
console.log(request.url,"===")
const url = new URL(request.url)

const urlObj = new URL(url)
const path = urlObj.href.substr(urlObj.origin.length)
const classac = l(rp(path).split('/'))
if (classac == "atComment" && !atComment) { return new Response('{"code":101,"error":"Artitalk-Safe:评论功能未开启"}', { headers: { "content-type": "application/json;charset=utf-8" } }) }
if (classac == "_File" || classac == "_Followee" || classac == "_Follower" || classac == "_Installation" || classac == "_Role") { return new Response('{"code":101,"error":"Artitalk-Safe:操作是禁止的"}', { headers: { "content-type": "application/json;charset=utf-8" } }) }

var hostname = remove_protocol(ServerDomain)
url.hostname = hostname
console.log(url,"+++");


var reqHEDNew = new Headers(request.headers)
if (reqHEDNew.get("X-LC-Id")) {
reqHEDNew.set("X-LC-Id", AppId)
reqHEDNew.set("X-LC-Key", AppKey)
}
if (reqHEDNew.get("x-lc-sign")) {
reqHEDNew.delete("X-LC-Sign")
}

var reqNew = new Request(request, { headers: reqHEDNew })
var responsefetch = await fetch(url.toString(), reqNew)

var resHEDNew = new Headers(responsefetch.headers)
resHEDNew.set("Access-Control-Allow-Origin", CORS)
resHEDNew.set("test-header", "9.99")
var response = new Response(responsefetch.body, { headers: resHEDNew })
return response
},
};

进入 CloudFlare -> Workers和Pages -> blog-artitalk-safemode -> 设置-> 变量和机密添加变量

APPID

APPKEY

SERVERDOMAIN,这里填写 https://

图片虽然可以解析出来,但是没有压缩

Elog提供了自定义配置图床功能:图床平台配置,可以接入各大对象存储平台,也可以自定义图床(参考文档)

成果展示

结语

把写这篇文章的前因后果,实现方式,依赖的技术点,以及最终成果的数据、性能对比、后续的优化思路、参考资料等等表达清楚。