前言
giscus改为waline后不能上传图片, 配置好后还是会弹图片大于128KB, 可能我哪里搞错了吧.
查阅waline源码有一个defaultUpdateImage
限制图片文件大小128KB, 但自定义后还是会走到这里判断.
遂自己改造了一下, 并记录一路碰到的许多问题.
2023.02.06 破案了, 感谢是非题提醒主题后续将主题参数 url 改成 api,
详见2023.1.12的commit.
好细节!
这个故事告诉我们要及时拉取.
所以我把Stellar的提交历史放到了便签关注
获取兰空Token
搭建LskyPro
获取Token
一个Post请求就可以获取Token, 但前端的一切都是公开的, 意味着你的Token一定暴露.
所以建一个专门用来当博客评论图床的账号, 给少点鉴权限.
Post请求1
| https://你的部署地址/api/v1/tokens
|
你可以使用ApiPost网页版
ApiPost网页版请求方法
填装body参数 `email` `password`
请求成功得到一个类似 3|xxxxxxxxxxxxxxxxxxxxxx 的响应参数, 前面的竖杠和数字不要漏了.
搭建waline
这个不用服务器, vercel一步到位, 详情参考官方教程.
hexo启用waline
不同主题不一样, 如果主题没适配waline可以自己在生成文章的地方适当位置添加一个div给上唯一id, 等下会用到.
这里给Stellar主题评论启用waline
根目录/_config.stellar.yml1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
comments:
service: waline
waline:
serverURL: https://你部署的地址/
locale:
placeholder: ""
emoji:
- https://unpkg.com/@waline/emojis@1.1.0/bilibili
- https://unpkg.com/@waline/emojis@1.1.0/qq
- https://fastly.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs
imageUploader:
fileName: file
tokenName: Authorization
api: https://你的兰空地址/api/v1/upload
token: Bearer 1|xxxxxxx你的token
resp: data.links.url
|
Stellar主题用户配置完要是可以上传文件就不用往下看了.
自定义js
路径: themes/stellar/layout/_partial/plugins/comments/waline/script.ejs
我的这个文件肯定是加载了, 但到上传图片时会限制128KB, 按理用了imageUploader就不应该还是走的数据库存储base64策略, 唉
自己动手吧.
以下代码参考waline官网和xaoxuu, 所以不同主题也适用(不同的是看你代码放哪里, 要是主题不是js模板引擎即ejs结尾,
就改成js代码)
路径在上面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
| <script type="module">
import { init } from '/custom/package/waline/dist/waline.mjs';
const el = document.getElementById("waline_container");
var idPath = el.getAttribute('comment_id');
if (!idPath) {
idPath = decodeURI(window.location.pathname);
}
const waline = init({
el: '#waline_container',
search: false,
emoji: [
'https://unpkg.com/@waline/emojis@1.1.0/bilibili',
'https://unpkg.com/@waline/emojis@1.1.0/qq',
'https://fastly.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs'
],
reaction: true,
comment: true,
serverURL: 'https://你的waline地址',
path: idPath,
imageUploader: (file) => {
let formData = new FormData();
let headers = new Headers();
formData.append('file', file);
headers.append("Access-Control-Allow-Headers", "*");
headers.append("Access-Control-Allow-Origin", "*");
headers.set('Authorization', 'Bearer 1|xxxxxxx你的兰空tokens');
headers.set('Accept', 'application/json');
return fetch('https://你的兰空地址/api/v1/upload', {
method: 'POST',
headers: headers,
body: formData,
mode: 'cors',
})
.then((resp) => resp.json())
.then((resp) => resp.data.links.url);
},
});
</script>
|
结语
至此结束了, 要是也碰到奇葩的fetch跨域问题, 不妨试试下面的文章.
