Artitalk配置图床

仰望星空的打工人
237 阅读3分钟

Artitalk配置图床

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

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

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

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

    image-20240911115843870

    image-20240911111052523

  2. 下载artitalk.js文件

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

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

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

    我的目录结构如下

    image-20240911110338994

  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. 点击此按钮

        image-20240911113153231

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

        image-20240911113428072

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

     hexo cl && hexo g && hexo d

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

    image-20240911112243688

  6. 发布

    image-20240911112253802

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

原因

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

  • 一开始我根据官方文档进行配置，结果在我的尝试下发现一直无法上传，最后发现是因为Artitalk在上传时使用的去不图床的上传链接为：7bu.top/api/upload，然而去不图床更改过上传链接，改为了7bu.top/api/v1/uplo…，既然如此，那就修改请求地址为新的地址即可。
  • 然而因为去不图床更改过请求头、请求参数和响应体，所以请求时要额外设置请求头Accept，请求参数的image要改为file
  • 最后终于上传成功了，结果在输入框回显的是，这就是因为响应体变了，返回的数据属性名不一样了，所以需要修改sourceUrl.data.url
avatar
文章
阅读
粉丝