HexoPlusPlus-从一个妄想到现实

我一直都习惯在线写作，但因为口袋里没钱，不能买服务器用动态博客，使用Hexo，即使实现了集成部署，想要在github上直接书写，尤其是出门在外有所灵感，国内手机登陆github真的是极其糟糕的体验。博客本就是碎片化写作和高质量文章发布处，使用hexo却使我无法发挥博客的用处。

先前，我曾使用白嫖的Euserv搭建的Typecho，也是用过wordpress.com白嫖的wordpress，但两个都不符合我对速度和可用性的追求，一个连CloudFlare能不能连上都是问题，另一个中国支持贼差【虽然可以用万能Worker可以替换加解决,但是就是不想用啊】。免空的选择又难以择手，弄来弄去还是用回Hexo。

但是Hexo就是有一点不爽，每次使用的时候就必须要在本地进行构建静态网页，然后上传到GithubPage。后来实现了集成部署【没想到折腾了很长时间的集成部署最后用到这里了】，方便了不少，直接在Github上面改源代码。但相较于Typecho和Wordpress，没有后台的写作总感觉有点难受，每次更改源代码都要上Github，在国内这种大环境下总是不太好使的。

2020年最后一个月，我总是在想如何解决这个问题，我的要求很简单，能弄个在线书写环境就好了。

在当时，真的只是睡觉的时候想想，现在回头不禁感慨，这妄想真的实现了。

由于我的文件是存储在Github上，于是我第一个先去Github文档查找相关资料，果不其然，Github的API能够上传、删除、下载【废话】、列表文件，并且能通过base64上传，直接免去了手写头的问题.关于调用限制，没鉴权时每个ip每小时只有60次，但一旦鉴权每个用户每小时就有5000次。这些api完全能够支撑起一个在线写作的环境,https://developer.github.com/v3/guides/getting-started/更是详细讲解并提供了数个例子。

这篇文章,就是详细讲解我如何把这个梦想变成现实.具体步骤很多,请慢慢咀嚼

这篇不是使用文档,而是教程

原理 - GithubAPI

譬如罢，上传一个文件，首先你要鉴权，在header中写入：

content-type: "application/json;charset=UTF-8"
Authorization: "token  ${hpp_githubimagetoken}"

Anyone,你也可以在url后面加上?access_token=传参，但是这样不安全，Github官方也是提示将在明年彻底禁用传参鉴权

但是记得GithubAPI不允许空User-Agent，所以你还得在header中加入UA：

user-agent: "GoogleChrome",

OK这么一搞鉴权这一块就完毕了，接下来，我们要搞基本功能

Github更改一个文件的url是一样的，为了方便接下来的书写和表达，我们统一将以下url称为RESTURL：

https://api.github.com/repos/${Github用户名}/${Github仓库名字}/contents/${Github文件路径}/${Github文件名}?ref=${Github分支}

拉取信息

默认情况下，直接GET RESTURL就能获取该文件/文件夹的信息,例如获取我AVorBV.md源文件,那么RESTURL如下:

https://api.github.com/repos/ChenYFan/blog/contents/source/_posts/AVorBV.md?ref=master

直接GET[我的是公开仓库,不需要鉴权就能获取],得到数据如下:

{
"name": "AVorBV.md",
"path": "source/_posts/AVorBV.md",
"sha": "a0bd826f999a9bb73ac56251415f9e57199600a7",
"size": 15742,
"url": "https://api.github.com/repos/ChenYFan/blog/contents/source/_posts/AVorBV.md?ref=master",
"html_url": "https://github.com/ChenYFan/blog/blob/master/source/_posts/AVorBV.md",
"git_url": "https://api.github.com/repos/ChenYFan/blog/git/blobs/a0bd826f999a9bb73ac56251415f9e57199600a7",
"download_url": "https://raw.githubusercontent.com/ChenYFan/blog/master/source/_posts/AVorBV.md",
"type": "file",
"content": "dGl0bGU6IEFWP0JWIQphdX...",
"encoding": "base64",
"_links": {
"self": "https://api.github.com/repos/ChenYFan/blog/contents/source/_posts/AVorBV.md?ref=master",
"git": "https://api.github.com/repos/ChenYFan/blog/git/blobs/a0bd826f999a9bb73ac56251415f9e57199600a7",
"html": "https://github.com/ChenYFan/blog/blob/master/source/_posts/AVorBV.md"
}
}

这样子,我们只要提取json中的sha,就能知道到hash,进而进行修改.
但这样子有个非常尴尬的一点,单文件获取会把content一口气拿过来
例如下面的RESTURL

https://api.github.com/repos/ChenYFan/CDN/contents/img/hpp_upload/1612843011000.jpg?ref=master

你获取的时候会发现返回了这个:

{
"message": "This API returns blobs up to 1 MB in size. The requested blob is too large to fetch via the API, but you can use the Git Data API to request blobs up to 100 MB in size.",
"errors": [
{
"resource": "Blob",
"field": "data",
"code": "too_large"
}
],
"documentation_url": "https://docs.github.com/rest/reference/repos#get-repository-content"
}

很显然,直接用GithubAPI不能获取单个文件的hash值

那怎么办？

答：列表获取

我们把之前的RESTURL去掉小尾巴,变成这样:

https://api.github.com/repos/ChenYFan/CDN/contents/img/hpp_upload?ref=master

这样就能获取这个目录下整个列表,然后用json循环查找遍历name,再通过name拉hash即可.

只是这样查询时间会略微变长.

新建

如果是新建,body中这么写

{
    branch: ${上传的分支},
    message: ${上传的信息},
    content: ${base64过的文件}, 
    sha: ""
}

接着使用PUT形式访问RESTURL

创建成功后状态码应该返回：

201 Created

更新

body与新建类似，但是首先你要通过拉取信息获取该文件sha值.

{
    branch: ${上传的分支},
    message: ${上传的信息},
    content: ${base64过的文件}, 
    sha: "${此文件hash}"
}

接着使用PUT形式访问RESTURL

更新成功后状态码应该返回：

200 OK

删除

相对来说,删除就更简单了

{
    branch: ${删除文件的分支},
    message: ${删除的信息},
    sha: "${此文件hash}"
}

hash这一步逃不掉,用DELETE形式访问RESTURL,返回200说明删除成功

原理 - CloudFlareWorkers

之前看过Laziji-VBlog项目,这个项目新颖的一点是将文章发布在gists,然后用户通过api访问获取.

但这样有两个致命问题:

1.API没鉴权，每小时单个ip只能访问60次，一开就爆
2.在国内受干扰，不稳定

并且什么迁入迁出麻烦、token容易忘记等等问题

最最最早版本中,我是打算纯静态实现文章编辑和更改的，但很快我就遇到了和VBlog一样的缺陷，这逼使我切换了平台。

好诶，既然直连效果那么差，我们就选择中继。利用服务器中继我们首先排除【用Hexo基本就是贪无服务器】。目前比较流行的无服务器平台有Heroku、CloudFlareWorker和Vercel，Heroku支持了多种服务器语言，CFWorker基于GoogleV8，因为JSProxy在国内意外走红，Vercel在国内拥有较好的运营商线路。

我们第一个排除heroku，冷启动唤醒需要10s，并且无法绑定域名【这里其实也可用worker反代（bushi】。目光看向worker和vercel，又有一个新问题出来，自定义配置存哪？

存变量里当然是个好主意，但是很难修改。外部存储也不是什么大问题，mongodb、firebase、Leancloud都可以上手，但我个人终究不喜欢为了查询而发送子请求。

由于我是OIer【虽然很差】，习惯使用C++的逻辑，因为JS的逻辑和C++其实差不多，所以我更倾向用WorkerJS书写。

非常赞的是，去年11月，CloudFlare官方宣布KV在一定额度内免费，并且免费额度喜人：

存：1GB大小
读：10W次/天【注：这里和Worker免费版本调用次数相同】
写：1k次/天
删：1k次/天
列：1k次/天
单个限额：25MB

并且worker里面使用KV函数异常简单，绑定KVNAME后：

async function FUNCNAME(){
await KVNAME.get(INDEX) //读
await KVNAME.put(INDEX,VALUE) //写
await KVNAME.delete(INDEX) //删
}

按照官方文档的说法，实际读取与读取静态页面差不多，我写了个简单测试函数，根据时间戳判断，单次读取只需要不超过2ms。

并且worker有非常赞的fetch函数，无痛自定义header，拉取后端无压力。

好，那么就开始吧。

实现 - 迈出的第一步

首先你要绑定个监听器：

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

由于fetch只能在async函数执行,于是我们写个async:

async function handleRequest(request) {
return new Response()
}

可以，这样我们就简单实现了一个无服务器函数

接下来的函数就应该在async这个主函数写。

然后是最基本的fetch，fetch应该说是worker里最特色的函数了。

如果直接返回，那么就不用加await,因为在async里面返回了一个await

return fetch('https://api.github.com/repos/ChenYFan/blog/contents/source/_posts')

如果要拉回来做运算，那么要加await，毕竟fetch返回的是promise

const res = await fetch('https://api.github.com/repos/ChenYFan/blog/contents/source/_posts')

CFWorker能用.text()函数和.json()函数处理返回的内容：

这地方我偷懒了,本来应该用then来获取promise的值,但是个人习惯了await嵌套写法,所以这地方写的其实不标准,轻喷

const first_name = await JSON.parse(await(await fetch('https://api.github.com/repos/ChenYFan/blog/contents/source/_posts')).text())[0]["name"]
return new Response(first_name)

这个其实等价下面的：

const first_name = (await(await fetch('https://api.github.com/repos/ChenYFan/blog/contents/source/_posts')).json())[0]["name"]
return new Response(first_name)

当然显然是下面的好写,但我习惯测试方便都用上面的

我们也可以通过自定义方式来自定义header完成鉴权和UA设置:

const getinit = {
          method: "GET",
          headers: {
            "content-type": "application/json;charset=UTF-8",
            "user-agent": `${USERAGENT}`,
            "Authorization": `token ${TOKEN}`
          },
}
const first_name = await JSON.parse(await(await fetch('https://api.github.com/repos/ChenYFan/blog/contents/source/_posts',getinit)).text())[0]["name"]
return new Response(first_name)

那么接下来就很简单了。

实现 - 面板的设计

Worker支持返回数据的设置，我们可以通过修改content-type达到返回页面的效果,并且可以通过JS奇妙的语法完成PHP难以做到的事情。

首先先定义一个网页：

const re_html =  `<h1>Hello,World!</h1>`

然后要返回吧：

return new Response(re_html, {
    headers: { "content-type": "text/html;charset=UTF-8" }
})

这个地方content-type务必要设置,不然默认返回是文本形式

然后打开预览就能看到了:

然后关于拼接,其实完全不必用+连接，可以用``包裹,然后用${变量名}来代替

const inner = `Hello,World!`
const re_html =  `<h1>${inner}</h1>`
return new Response(re_html, {
    headers: { "content-type": "text/html;charset=UTF-8" }
})

这种写法帮我省下精力重看代码

面板怎么说,其实直接用material-dashboard套的

实现 - 后端API的设计

后端API本质上是一个中继,简单如我

废话不说直接上代码。

问题解决 - 存储问题

KV是能存东西.配置是符合键的形式的,一个键名配对一个键值,这和KV的存储方式相同.但是这么多配置项,如果一个一个读过去,KV迟早比worker早读爆.缓存没用,还得赔一个清除缓存的APIKey,太亏了.

所以HPP将所有配置JSON.stringify后存储到了一个键名为hpp_config的键.

那关于账户密码,难道不能存KV吗?

能,当然能,但是问题是如果在登录页面还要读KV,那被打了怎么办

况且,在粘贴代码完后到设置界面,中间有一段时间,万一有个人搞你咋办呢.

所以HPP学习Twikoo进行强鉴权,在保证不被盗取的情况下还能减少KV读取量,岂不美哉

问题解决 - 多层文件夹

默认情况下，访问无文件名的RESTURL会列出当前文件夹下的所有文件,但列不出文件夹下的文件.我们先看获取示例，以https://api.github.com/repos/ChenYFan/blog/contents/source/_drafts?ref=master为例子:

[
    {
        "name": "TEST.md",
        "path": "source/_drafts/TEST.md",
        "sha": "3b12464976a5fd9e07d67dd7d5cf4f0f10188410",
        "size": 4,
        "url": "https://api.github.com/repos/ChenYFan/blog/contents/source/_drafts/TEST.md?ref=master",
        "html_url": "https://github.com/ChenYFan/blog/blob/master/source/_drafts/TEST.md",
        "git_url": "https://api.github.com/repos/ChenYFan/blog/git/blobs/3b12464976a5fd9e07d67dd7d5cf4f0f10188410",
        "download_url": "https://raw.githubusercontent.com/ChenYFan/blog/master/source/_drafts/TEST.md",
        "type": "file",
        "_links": {
            "self": "https://api.github.com/repos/ChenYFan/blog/contents/source/_drafts/TEST.md?ref=master",
            "git": "https://api.github.com/repos/ChenYFan/blog/git/blobs/3b12464976a5fd9e07d67dd7d5cf4f0f10188410",
            "html": "https://github.com/ChenYFan/blog/blob/master/source/_drafts/TEST.md"
        }
    },
    {
        "name": "TEST",
        "path": "source/_drafts/TEST",
        "sha": "18391dac960bd390d4213818b7a79c63dcd2fb44",
        "size": 0,
        "url": "https://api.github.com/repos/ChenYFan/blog/contents/source/_drafts/TEST?ref=master",
        "html_url": "https://github.com/ChenYFan/blog/tree/master/source/_drafts/TEST",
        "git_url": "https://api.github.com/repos/ChenYFan/blog/git/trees/18391dac960bd390d4213818b7a79c63dcd2fb44",
        "download_url": null,
        "type": "dir",
        "_links": {
            "self": "https://api.github.com/repos/ChenYFan/blog/contents/source/_drafts/TEST?ref=master",
            "git": "https://api.github.com/repos/ChenYFan/blog/git/trees/18391dac960bd390d4213818b7a79c63dcd2fb44",
            "html": "https://github.com/ChenYFan/blog/tree/master/source/_drafts/TEST"
        }
    }
]

文件夹是dir,文件是file,甚至可以通过self往下找,连路径都不用拼接了,那事情就好办了,写个搜索递归吧.

这个地方在群里我一直和2X吵架,因为我觉得此处用广搜比较好,然后我一直想写BFS,结果写着写着就成DFS了,你甚至现在还能看到一个叫fetch_bfs的函数

async function fetch_bfs(arr, url, getinit) { //开始深搜
          try {
            const hpp_getlist = await JSON.parse(await (await fetch(url, hpp_githubgetdocinit)).text()) //拉取github列表
            for (var i = 0; i < getJsonLength(hpp_getlist); i++) { //循环查找
              if (hpp_getlist[i]["type"] != "dir") { //如果不是文件夹
                arr.push(hpp_getlist[i])//弹到目标数组末尾
              } else { //否则
                await fetch_bfs(arr, hpp_getlist[i]["_links"]["self"], getinit) //进入该文件夹深搜
              }
            }
            return arr;
          } catch (e) { return {} }
}

代码本意很简单,传入一个空数组,抓取列表,循环递归,如果不是文件夹就扔到数组,是的话就向下搜索其实就是DFS嘛

用try的原因是因为莫些人没有草稿，不用try的话这个函数就会炸，没草稿返回空数组。

然后就试试呗，以获取草稿列表为例：

if (path == "/hpp/admin/api/get_draftlist") { //判断路径
          let hpp_doc_draft_list_index = await KVNAME.get("hpp_doc_draft_list_index") //获取索引
          if (hpp_doc_draft_list_index === null) {//如果没有索引
            const filepath = githubdocdraftpath.substr(0, (githubdocdraftpath).length - 1) //分离路径
            const url = `https://api.github.com/repos/${hpp_githubdocusername}/${hpp_githubdocrepo}/contents${filepath}?ref=${hpp_githubdocbranch}` //拼接RESTURL
            hpp_doc_draft_list_index = await JSON.stringify(await fetch_bfs([], url, hpp_githubgetdocinit)) //开始深搜
            await KVNAME.put("hpp_doc_draft_list_index", hpp_doc_draft_list_index) //保存索引
          }
          return new Response(hpp_doc_draft_list_index, { //返回路径
            headers: {
              "content-type": "application/json;charset=UTF-8",
              "Access-Control-Allow-Origin": hpp_cors
            }
          })
}

我们来做个小实验：

结构如下：

-source/_drafts
  ~TEST.md
  -TEST
    ~TEST.md
    -TEST
      ~TEST.md
      -TEST
        ~TEST.md

那么CloudFlareWorker会这样搜索:

其实我本来想这样的

【考虑到大多数人都没有建立文件夹的习惯，本来bfs的效率会更高的(´இ皿இ｀)】

【但其实两者子请求数目是一样的】

我们去CloudFlare发一个请求啊，结果非常Amazing啊：

dfs完美解决嵌套问题。

问题解决 - 缓存问题

手机端POST之谜

之前开发网页的时候，我总是希望缓存越长越好，因为有些资源从来没有变过却要重复使用。于是，我给博客加上了ServiceWorker这就是我咕咕咕的理由

但hpp不能进行太强的缓存,否则可能造成获取文件不够及时.

于是，在文章获取这一块，我故意将get写成post,发送空值,电脑端乖乖的每次都把请求发出去,毫无异常.

然后手机端炸了

万万没想到,safari会将post请求给缓存了

缓存也就罢了,结果ajax连onreadystatechange都缓存了不返回,然后接下去的函数全炸了

没办法,只好在post里面加时间戳

ajax.send(new Date().getTime());

文章索引问题

然后是索引问题【本质上是把结果缓存在KV里】，因为在文件夹众多的情况下dfs会将每个文件夹找过去，先不说时间这个问题（毕竟一次子请求大约在60ms-150ms徘徊，文件夹多的情况下也尚能忍受），主要是文件夹一多，子请求跟着多起来了，worker子请求超时是30s（10ms是运算时间，我寻思只要没有上亿篇文章，加个数组应该不会炸10ms时间），并且子请求算总请求，要是这么搞一次，worker怕是不够用了，所以得加个KV强缓存：

await KVNAME.put("hpp_doc_list_index", hpp_doc_list_index)
await KVNAME.put("hpp_doc_draft_list_index", hpp_doc_draft_list_index)

在发布、删除等可能会导致缓存失效的情况下清除KV缓存：

await KVNAME.del("hpp_doc_list_index")
await KVNAME.del("hpp_doc_draft_list_index")

功能实现 - 自动更新

这怕是所有Worker程序里面第一个实现自动更新的程序了【所以我最近发包很快啊】

其实刚开始没想到这么多，后来@MCSeekeri 开了#21,其中提到了这一点,然后我就开了#23。

查一遍CloudFlareAPI文档，我们就会发现这做起来简直轻而易举：

curl -X PUT "https://api.cloudflare.com/client/v4/accounts/9a7806061c88ada191ed06f989cc3dac/workers/scripts/this-is_my_script-01" \
     -H "X-Auth-Email: user@example.com" \
     -H "X-Auth-Key: c2547eb745079dac9320b638f5e225cf483cc5cfdda41" \
     -H "Content-Type: application/javascript" \
--data "addEventListener('fetch', event => { event.respondWith(fetch(event.request)) })"

curl,我寻思fetch也能做到.

const update_script = await (await fetch(`https://raw.githubusercontent.com/HexoPlusPlus/HexoPlusPlus/main/index.js`)).text() //获取更新脚本
const up_init = {
            body: update_script,//更新脚本内容
            method: "PUT",//method是put
            headers: {
              "content-type": "application/javascript",//content-type和文档一样
              "X-Auth-Key": hpp_CF_Auth_Key,//GlobalKey,账户最高Token
              "X-Auth-Email": hpp_Auth_Email//登录邮箱
            }
}
          const update_resul = await (await fetch(`https://api.cloudflare.com/client/v4/accounts/${hpp_account_identifier}/workers/scripts/${hpp_script_name}`, up_init)).text()//拼接workerid,请求url,上传
          return new Response(JSON.parse(update_resul)["success"])//查询更新状态

OK那没问题了,手动更新完成.

那自动更新呢?

目前自动更新理论上可以实现,使用CronJob每天定时执行函数.
但我懒

其实你也可以用其它什么能定时访问的带上cookie访问/hpp/admin/api/update就行

功能实现 - 文章管理&草稿

其实就是上传文件

当然因为是hexo，本来就有/source/_posts和/source/_drafts两个草稿分区,所以在1.1.0版本,将docpath改为了docroot,通过定位hexo根目录来实现全站自适应管理.

功能实现 - 图床

我知道有很多人还是困扰于图床这个问题,PicGo虽然能实现上传,但是配置一大堆,麻烦,并且配置不能随意迁移;PicX也使用Github+JSD做图床,但是没有中继速度慢,国内难以上传.

其实还是上传文件

但是我们必须知道,CFWorker单次执行最多10ms,正常图片三四百KB,在worker里base64,这能不超时我把CF吃了.

没办法,我们只能在前端进行base64,然后将编码后的值直接上传,用Worker中继.

功能实现 - 说说

这个最早受Artitalk影响，在artitalk官方群里潜伏了一年，我明确知道说说这一块的用户需求是多么大，并且大多数都是小白，不想用太多配置。

于是，HPP_TALK诞生了。诞生的初衷就是简化发布和配置流程，在1.1.2版本版本中自带了一个预览页面，实现了无域名也能使用说说。

'说说发布页面'

'用户查看界面'

甚至支持自定义主题：

'由2X开发的说说主题'

HPPTALK配置也简单，后端配置可以直接缺省发布，而前段也只要传递4个变量。

【但是我但是傻乎乎用了cookie记录，下次绝壁用LocalStr】

功能实现 - TwikooPlus

其实这个东西写的很粗糙,大家就看看行了哈

Twikoo首次匿名登录实在把我看傻了,6个请求,放国外不得炸掉.

然后就看,实际上只有前面几个有效的,后面其实是获取配置.

首先规定一下RESTURL=https://tcb-api.tencentcloudapi.com/web?env=${ENVID}

三步走:

1.空手拉refresh_token
2.用refresh_token套access_token
3.用access_token套评论

其中refresh_token两小时有效,access_token30天有效

那就很有意思了同学们:

async function get_refresh_token() {
        /*第一步获得refresh_token*/
        const step_1_body = {
          action: "auth.signInAnonymously",
          anonymous_uuid: "",
          dataVersion: "1970-1-1",
          env: env_id,
          refresh_token: "",
          seqId: ""
        }
        const step_1 = {
          body: JSON.stringify(step_1_body),
          method: "POST",
          headers: {
            "content-type": "application/json;charset=UTF-8"
          }
        }
        /*refresh_token到手*/
        //console.log(step_1_body)
        return JSON.parse(await (await fetch(url, step_1)).text())["refresh_token"]
      }
      async function get_access_token(refresh_token) {
        const step_2_body = {
          action: "auth.fetchAccessTokenWithRefreshToken",
          anonymous_uuid: "",
          dataVersion: "1970-1-1",
          env: env_id,
          refresh_token: refresh_token,
          seqId: ""
        }
        const step_2 = {
          body: JSON.stringify(step_2_body),
          method: "POST",
          headers: {
            "content-type": "application/json;charset=UTF-8"
          }
        }
        /*access_token到手*/
        return JSON.parse(await (await fetch(url, step_2)).text())["access_token"];
      }
      async function get_comment(access_token, path, before) {

        const re_data = { "event": "COMMENT_GET", "url": path, "before": before }
        const step_3_body = {
          access_token: access_token,
          action: "functions.invokeFunction",
          dataVersion: "1970-1-1",//开始时间
          env: env_id,
          function_name: "twikoo",
          request_data: JSON.stringify(re_data),
          seqId: ""
        }
        const step_3 = {
          body: JSON.stringify(step_3_body),
          method: "POST",
          headers: {
            "content-type": "application/json;charset=UTF-8"
          }
        }
        return (await (await fetch(url, step_3)).text())
      }

这里要注意以下,套评论的时候要传递两个参数path和before,path是当前文章路径,before是上一条评论的创建时间戳CreatedAt

然后使用的时候来一波:

refresh_token = await get_refresh_token()
access_token = await get_access_token(refresh_token)
val = await get_comment(access_token, path, before)

同时用KV缓存

await KVNAME.put("hpp_comment_refresh_token", refresh_token)
await KVNAME.put("hpp_comment_access_token", access_token)

OK起飞

问题解决 - EditorMD移动端问题

本来HPP开始写的时候就是用EditorMD的,好康,功能多.

但是很快手机端就炸出问题了:

安卓:打一个字换一行
苹果:打一个字复制一遍

非常有问题,原仓库有一个Close的issues说把codemirror更新到最新版本就行,但是我更新到5.x最后一个版本问题仍复发.

Github上面大多数编辑器也用的是CodeMirror.

然后找了半天实在没有解决方案，就花一个下午时间手写了一个编辑器

用的是最基础的textarea，这能出兼容性问题我把Github整个吃了

预览功能是靠markedjs通过调整display在一个div里面预览,在1.1.0版本支持了代码高亮.

话说手写一个很多功能就很好集成了诶

结尾

还有很多开发细节想不起来了,先水到这里了,滚回去修bug了

QQ群:467731779

最后加一句，用HPP时CI强烈建议使用GithubAction并公开，我是也不明白我Travis-CI怎么把积分耗完的

预计会添加的功能：

  • Hexo、主题配置修改
  • 输入框粘贴上传图片
  • 友链系统
  • 基于KV/IPFS的自动保存功能
  • 列表分页功能
  • 博主工具箱

 目录