Artitalk配置图床

Artitalk配置图床

官方文档原话为：在存储说说的应用中的 class 下的 _User 添加列，列名称为 imgToken，值为在去不图床获得的token，but因为年代久远，此方式已经出现问题，无法直接使用。

另外，欢迎来我的博客查看文章 火柴人儿的小站，此博客 基于雨云-新一代云服务提供商搭建。

我先把修改方法说一下，方便大家直接取用，之后再说为什么这么改

1. 首先还是照官方文档说的，在存储说说的应用中的 class 下的 _User 添加列，列名称为 imgToken，值为在去不图床获得的token（去不获得的token为xxxx|xxxxxxxxxxx，存到imgToken中时要删除xxxx|，保留后面的值，并且前面加上Bearer ，如下图，Bearer后面要有空格），token的权限保留一个上传图片即可
   
   

2. 下载artitalk.js文件

   官方教程中artitalk.js文件引用的是外部在线的文件，所以复制这个链接下载js即可https://unpkg.com/artitalk@3.3.4/artitalk.js

   下载完后修改引用路径为相对路径

   <script type="text/javascript" src="../js/artitalk.js"></script>
   

   我的目录结构如下

   

3. 修改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.links.markdown)

   • 搜索data.append

     将其后面括号内的"image"修改为"file"

     并且在此语句后额外添加一句代码

     data.append("file",file);
     data.append("album_id",1234);
     

     这里的album_id是去不图床建的相册的id，若不设此参数会上传到默认相册，相册id的查看方法如下

     1. 进入去不图床➡️我的相册，点击F12打开开发者工具

     2. 点击此按钮

        

     3. 然后去点击你想看id的相册，此时这两个位置都能显示你的相册id
        

4. 修改完成后hexo三连（不要运行gulp命令，会导致artitalk.js报错）

   hexo cl && hexo g && hexo d
   

5. 上传图片，在输入框会成功回显markdown样式连接

   

6. 发布

   

7. 恭喜你，已经成功配置artitalk图床

原因

下面说一下为什么这么改，主要还是因为artitalk很长时间没有维护了，而这期间去不图床进行过更新，之前的请求无法上传图片和获取图片

• 一开始我根据官方文档进行配置，结果在我的尝试下发现一直无法上传，最后发现是因为Artitalk在上传时使用的去不图床的上传链接为：https://7bu.top/api/upload，然而去不图床更改过上传链接，改为了https://7bu.top/api/v1/upload，既然如此，那就修改请求地址为新的地址即可。

• 然而因为去不图床更改过请求头、请求参数和响应体，所以请求时要额外设置请求头Accept，请求参数的image要改为file

• 最后终于上传成功了，结果在输入框回显的是，这就是因为响应体变了，返回的数据属性名不一样了，所以需要修改sourceUrl.data.url

这样，就终于成功完成了图床的配置。