在 Hugo 主题 Stack 中轻松配置 Waline 评论系统

我用它换掉了国内用不了的 disqus

你以前也许听说过或用过 Valine。Waline 与它差不多,但管理功能集成在内,并可以更方便地部署。

如果你使用其他没有 Waline 支持的 Hugo 主题或其他博客系统,按本文部署后可以参考官方文档来引入客户端

在 LeanCloud 上部署数据库

注册 LeanCloud 国际版并进入控制台

如果您决定使用 LeanCloud 国内版,您需要为您创建的应用额外绑定已备案的域名。

创建开发版新应用(随意命名)并复制设置 - 应用凭证中的前三项值,稍后会添加在 Vercel 中的环境变量里。

在 Vercel 上部署服务端

点击按钮跳转到 Vercel.com 部署
点击按钮跳转到 Vercel.com 部署

(推荐)使用 GitHub 登录,创建存储库(可以是私有 Repo),跳过创建团队(反正这也不是什么需要团队协作的项目),部署。

两分钟左右部署就会完成。

完成部署后在 Settings 中找到 Environment Variables,分别添加三个环境变量 LEAN_IDLEAN_KEYLEAN_MASTER_KEYVALUE 分别填写在 LeanCloud 中获得的 APP IDAPP KEY、和 Master Key

记得注册你的管理员账号,以免被访客注册。第一个注册的用户会得到管理权限。

在配置文件中配置客户端

最后打开站点根目录下的 config.yaml,在 params 下添加以下几行:(如果你当初拷贝了 Stack 提供的 config.yaml 文件,那么这段在第 60 行左右,只需填入 serverURL 即可)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
        # Waline client configuration see: https://waline.js.org/en/reference/client.html
        waline:
            serverURL: https://<PUT_YOUR_OWN_HERE>.vercel.app/
            lang: zh-CN
            visitor: true
            avatar:
            emoji:
                - https://cdn.jsdelivr.net/gh/walinejs/emojis/qq
            requiredMeta:
                - name
                - email
                - url
            placeholder:
            locale:
                admin: Admin

记得替换 serverURL 为你自己部署的 Vercel App 地址,在这里查阅各项参数的含义。

快速上手 | Waline

然后可以使用 hugo server 看下效果,使用 Waline 时不会像 disqus 一样在本地预览时屏蔽评论。

Emoji

你可以为你的 Waline 客户端添加多套表情。

题外话,严格来说,这些表情似乎不能称作 emoji。真正的 emoji 必须能被编码,而不是一张图片。

Waline 提供了一系列开箱即用的表情预设。你可以直接将它们添加到 emoji 选项中:

Alus

https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/alus

哔哩哔哩

https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili

QQ

https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq

贴吧

https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tieba

Twitter Emoji

https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji

微博

https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo

本站的配置

例如本站目前的 Waline 部分配置如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
        # Waline client configuration see: https://waline.js.org/en/reference/client.html
        waline:
            serverURL: https://c.moefox.tech/
            lang: zh-CN
            visitor: false
            avatar:
            emoji:
                - https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tieba
                - https://cdn.jsdelivr.net/gh/walinejs/emojis/qq
                - https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/alus
            requiredMeta:
                - name
                - email
                - url
            placeholder:
            locale:
                admin: 博主

B站和微博的表情看多了会让我生理性不适,因此没有添加进本站的客户端中。

评论管理

评论管理 (管理端)

部署完成后,请访问 <serverURL>/ui/register 进行注册。首个注册的人会被设定成管理员。

管理员登陆后,即可看到评论管理界面。在这里可以修改、标记或删除评论。

用户也通过评论框注册账号,登陆后会跳转到自己的档案页。

未经允许禁止转载
最后更新于 Oct 19, 2021 23:21 UTC
主站由 Vercel 驱动,如遇需使用 IPv6 或主站无法访问请访问托管于 GitHub Pages 的镜像(实时同步)。
由于 Pages 的局限性,我引入了 Google Analytics 来收集访问数据;这些数据只是我自己看着玩的,不会被泄露;
您大可屏蔽它的 Cookie,这不会影响您浏览本站的所有内容或发表评论。
本站支持 IPv6 网络。
萌ICP备 20213003号
Built with Hugo
主题 StackJimmy 设计