1. 注册LeanCloud 账号：

  • 进入 LeanCloud 官网https://leancloud.app，注册一个账号。
  • 创建一个新的应用以便使用 LeanCloud 提供的后端服务。

2. 获取 Valine App ID 和 App Key：

  • 在 LeanCloud 控制台中，进入你创建的应用。
  • 在左侧导航栏中找到“设置”选项。
  • 在应用凭证部分，复制 App ID, App Key, REST API 服务器地址

3. 在 Hugo 主题中引入 Valine：

  • 找到需要添加 Valine 的页面或模板文件，一般是 single.html。
  • 在模板文件下方添加以下代码片段：
<div id="comments"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js"></script>
<script>
  new Valine({
    el: '#comments',
    appId: 'App-ID',
    appKey: 'App-Key',
    serverURLs: "REST API 服务器地址",
    placeholder: '说点什么吧...',
  });
</script>

完成以上步骤后，即可使用 Valine 评论系统。用户可以在你的网页中发表评论，并且评论数据会被保存到 LeanCloud 中。

注意：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js"></script>

这里的代码使用的链接来自 jsDelivr CDN，这是一个常用的 CDN 提供商。它可以帮助你加载 Vue.js 和 Valine 的最新版本文件，而不需要自己托管这些文件。

如果你遇到了 CDN 加载速度较慢的问题，你可以尝试使用其他的 CDN 地址来加载这些文件，如：

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/valine/dist/Valine.min.js"></script>

有时显示不了评论是连不上 LeanCloud 服务器，这时可尝试绑定 API 访问域名。可以在 LeanCloud 左侧导航栏中进入“设置”-“域名绑定”选项，绑定你的二级域名，然后进入你的域名服务平台进行 CNAME 解析，最后把 serverURLs 换成你的二级域名地址。