Artitalk配置图床
官方文档原话为:在存储说说的应用中的
class
下的_User
添加列,列名称为imgToken
,值为在去不图床获得的token,but因为年代久远,此方式已经出现问题,无法直接使用。
另外,欢迎来我的博客查看文章 火柴人儿的小站,此博客 基于雨云-新一代云服务提供商搭建。
我先把修改方法说一下,方便大家直接取用,之后再说为什么这么改
-
首先还是照官方文档说的,在存储说说的应用中的
class
下的_User
添加列,列名称为imgToken
,值为在去不图床获得的token(去不获得的token为xxxx|xxxxxxxxxxx,存到imgToken中时要删除xxxx|,保留后面的值,并且前面加上Bearer ,如下图,Bearer后面要有空格),token的权限保留一个上传图片即可
-
下载artitalk.js文件
官方教程中artitalk.js文件引用的是外部在线的文件,所以复制这个链接下载js即可https://unpkg.com/artitalk@3.3.4/artitalk.js
下载完后修改引用路径为相对路径
<script type="text/javascript" src="../js/artitalk.js"></script>
我的目录结构如下
-
修改artitalk.js
若不想那么麻烦一个一个修改,可以下载我修修改完的文件,下载完后只需要修改album_id为你的相册id即可
下载链接:artitalk.js
-
搜索7bu
将
https://7bu.top/api/upload
改为https://7bu.top/api/v1/upload
-
搜索imgToken&&
将其后面括号内的内容
xhr.setRequestHeader("Authorization","Basic VGVzdDoxMjM0NTY="),xhr.setRequestHeader("token",imgToken)
修改为
xhr.setRequestHeader("Authorization",imgToken),xhr.setRequestHeader("Accept","application/json")
-
搜索sourceUrl.data.url
都修改为
sourceUrl.data.links.url
(也可以将第二个的"![](“+sourceUrl.data.url+”)"整个修改为
sourceUrl.data.links.markdown
) -
搜索data.append
将其后面括号内的"image"修改为
"file"
并且在此语句后额外添加一句代码
data.append("file",file); data.append("album_id",1234);
这里的album_id是去不图床建的相册的id,若不设此参数会上传到默认相册,相册id的查看方法如下
-
进入去不图床➡️我的相册,点击F12打开开发者工具
-
点击此按钮
-
然后去点击你想看id的相册,此时这两个位置都能显示你的相册id
-
-
-
修改完成后hexo三连(不要运行gulp命令,会导致artitalk.js报错)
hexo cl && hexo g && hexo d
-
上传图片,在输入框会成功回显markdown样式连接
-
发布
-
恭喜你,已经成功配置artitalk图床
原因
下面说一下为什么这么改,主要还是因为artitalk很长时间没有维护了,而这期间去不图床进行过更新,之前的请求无法上传图片和获取图片
-
一开始我根据官方文档进行配置,结果在我的尝试下发现一直无法上传,最后发现是因为Artitalk在上传时使用的去不图床的上传链接为:https://7bu.top/api/upload,然而去不图床更改过上传链接,改为了https://7bu.top/api/v1/upload,既然如此,那就修改请求地址为新的地址即可。
-
然而因为去不图床更改过请求头、请求参数和响应体,所以请求时要额外设置请求头Accept,请求参数的image要改为file
-
最后终于上传成功了,结果在输入框回显的是![](undefined),这就是因为响应体变了,返回的数据属性名不一样了,所以需要修改sourceUrl.data.url
这样,就终于成功完成了图床的配置。