在参照亦小封Butterfly的魔改教程：关于本站时，由于他使用的twikoo评论系统，和自己的Waline不同，主题自带的评论数好像只有单页文章或页面，所以另外使用适合Waline的方法并记录过程。

前提

由于leancloud被墙，所以需要有自己的域名绑定leancloud应用。

参考教程

MeuiCat
Butterfly的魔改教程：关于本站

示例

本站
关于作者

数据来源

由于Waline使用的数据库是Leancloud，所以评论相关数据都可以在里面的应用上找到，如下图可以看到自己的评论数:

同时需要在应用凭证中的服务器地址和AppID、AppKey：

由于leancloud被墙，默认的api地址经常打不开，所以需要把api绑定到自己的域名，在设置-应用凭证中绑定：

复制CNAME配置到cloudflare进行解析，其中cloudflare要关闭代理，不然会不成功：

绑定成功就代替默认的为新服务器地址了。

源码

由于我的pjax没适配好，所以就没在原教程的js中修改，自己新建[BlogRoot]\source\js\aligu.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const appId = '你的AppID';
const appKey = '你的AppKey';
const restApiUrl = 'https://api.your-server.com/1.1/classes/Comment'; // 替换为你的 LeanCloud REST API 地址

function fetchCommentsCount() {
  fetch(restApiUrl, {
    headers: {
      'X-LC-Id': appId,
      'X-LC-Key': appKey,
      'Content-Type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(data => {
    if (data.results) {
      const commentCount = data.results.length; // 获取评论总数
      document.getElementById('comment-count').innerText = `${commentCount} 条评论`;
    } else {
      console.error('未能获取评论数据:', data);
    }
  })
  .catch(error => console.error('获取评论数据出错:', error));
}

// 在页面加载完成后调用 fetchCommentsCount 函数
document.addEventListener("DOMContentLoaded", fetchCommentsCount);

以上代码由chatGPT生成，其中restApiUrl项中https://api.your-server.com换成应用凭证中的自己绑定的REST API 服务器地址(保留1.1/classes/Comment，这是特定数据类的路径)，例如：https://api.sample.com/1.1/classes/Comment。

然后在原教程的[blogRoot]/themes/butterfly/layout/includes/page/about.pug 页面，大概在93行修改以下内容：

1
2
3
4
5
6
.about-layout.Statistics
  span= site.posts.length + _p('篇文章')
- span.N_comments 评论数量
+ span#comment-count
  span= site.tags.length + _p('个分类')
  span= totalcount(site) + _p('字')

在主题配置中_config.butterfly.yml引入：

1
2
3
bottom
    ...
    - <script src="/js/aligu.js"></script>