Waline评论与Lsky兰空图床

前言

giscus改为waline后不能上传图片, 配置好后还是会弹图片大于128KB, 可能我哪里搞错了吧.
查阅waline源码有一个defaultUpdateImage
限制图片文件大小128KB, 但自定义后还是会走到这里判断.
遂自己改造了一下, 并记录一路碰到的许多问题.

2023.02.06 破案了, 感谢是非题提醒主题后续将主题参数 url 改成 api,
详见2023.1.12的commit.
好细节!
这个故事告诉我们要及时拉取.
所以我把Stellar的提交历史放到了便签关注

获取兰空Token

搭建LskyPro

兰空搭建https://blog.thatcoder.cn/Lsky%E5%85%B0%E7%A9%BA%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA/

获取Token

一个Post请求就可以获取Token, 但前端的一切都是公开的, 意味着你的Token一定暴露.
所以建一个专门用来当博客评论图床的账号, 给少点鉴权限.

Post请求

1	`https://你的部署地址/api/v1/tokens`

你可以使用ApiPost网页版

ApiPost网页版请求方法

成功响应

填装body参数 `email` `password`

请求成功得到一个类似 3|xxxxxxxxxxxxxxxxxxxxxx 的响应参数, 前面的竖杠和数字不要漏了.

搭建waline

这个不用服务器, vercel一步到位, 详情参考官方教程.

waline之vercel部署https://waline.js.org/guide/get-started/#vercel-%E9%83%A8%E7%BD%B2-%E6%9C%8D%E5%8A%A1%E7%AB%AF

hexo启用waline

不同主题不一样, 如果主题没适配waline可以自己在生成文章的地方适当位置添加一个div给上唯一id, 等下会用到.
这里给Stellar主题评论启用waline

根目录/_config.stellar.yml

# 评论 twikoo服务
comments:
  service: waline
  waline:
    serverURL: https://你部署的地址/ # waline 地址
    locale:
      placeholder: "" # 输入框内提示文字
    # Custom emoji
    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: 
      # 适配了兰空图床V1、V2版本
      # 以兰空图床V1为例，下列填写内容为：
      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代码)

路径在上面

<script type="module">
import { init } from '/custom/package/waline/dist/waline.mjs';  //md 我这里用CDN还是会提示大于128KB, 所以直接引入了
const el = document.getElementById("waline_container");   //这里是你的评论div#id
var idPath = el.getAttribute('comment_id');
if (!idPath) {
  idPath = decodeURI(window.location.pathname);   // 给评论div加上唯一标识, 不如评论乱串文章.
}
const waline = init({
  el: '#waline_container',    //这里是你的评论div#id
  search: false,  //关闭表情查找 不大好用
  // 设置 emoji 为微博与哔哩哔哩
  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, // 评论数统计
  // pageview: true, // 浏览量统计
  serverURL: 'https://你的waline地址',    // 记得改自己的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');   // 记得改自己的token
    headers.set('Accept', 'application/json');
    // headers.set("Content-Type","multipart/form-data");
    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跨域问题, 不妨试试下面的文章.

本文为钟意撰写, 采用 CC BY-NC-SA 4.0 许可协议, 转载请注明出处。