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即可https://unpkg.com/artitalk@3.3.4/artitalk.js

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

    1
    <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.url+”)”整个修改为sourceUrl.data.links.markdown)

    • 搜索data.append

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

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

      1
      2
      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报错，将artitalk.js改名为artitalk.min.js就可以避免被gulp压缩，引入的地方记得也要修改）

    1
    hexo cl && hexo g && hexo d

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

    image-20240911112243688

  6. 发布

    image-20240911112253802

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

原因

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