IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    Waline 评论系统贴图 API 设置示例

    Teacher Du发表于 2024-11-01 03:51:26
    love 0

    有小伙伴留言问到我的评论系统是如何整合去不图床的,在这里分享两个 API 设置示例,希望可以帮到有需要的博主,同时欢迎使用去不图床!

    API 设置示例一

    如果您和杜老师同样使用 Volantis 作为主题,那么仅需要在主题_config.yml 文件中,找到 Waline 设置项,加入 imageHosting: https://7bu.top/api/upload 就行了,注意该段是以去不图床为例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    waline:
    js: https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js
    path: # 全局评论地址 目前设置全局评论地址后visitor失效,这是waline的问题
    placeholder: 允许匿名评论,评论支持贴图,大家在截图后,在评论框粘贴,自动传至图床,欢迎使用体验~ # 评论占位提示
    imageHosting: https://7bu.top/api/upload # 图床api「默认使用去不图床」
    # 其他配置项按照yml格式继续填写即可 除了 [el path placeholder uploadImage] 选项
    meta: [nick,mail,link] # waline comment header info
    requiredFields: [nick,mail]
    serverURL: https://n.dusays.com # Waline 的服务端地址「必填」 测试用地址: https://waline-ruddy.vercel.app
    avatar: robohash # gravatar style https://waline.js.org/client/basic.html#avatar
    pageSize: 10 # 评论每页显示数量
    lang: zh-CN
    visitor: true

    API 设置示例二

    如果您使用的其它主题,可按照官方设置加入 uploadImage 即可,具体参考如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <head>
    ..
    <script src='//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script>
    ...
    </head>
    <body>
    ...
    <div id="waline"></div>
    <script>
    new Waline({
    el: '#waline',
    path: location.pathname,
    serverURL: 'https://your-domain.vercel.app'
    uploadImage: function(file) {
    const formData = new FormData();
    formData.append('image', file);
    return fetch('https://7bu.top/upload/upload.html', {
    method: 'POST',
    body: formData
    }).then(resp => resp.json()).then(resp => resp.data.url);
    }
    });
    </script>
    </body>


沪ICP备19023445号-2号
友情链接