Waline评论之修改记录

2021-08-15

依稀记得2016年中时我购买了人生第一台（也是唯一一台）锤子手机——Smartisan T2。当时是受了一个同事的蛊惑，但使用没多久就在一次醉酒后丢失了。与锤子手机的这次短暂相会，让我知道了一个折腾牛人，就是锤子科技的创始人——罗永浩。

我不是为了输赢，我就是认真。

《生命不息折腾不止》——当你试图放弃一个你知道是正确的事情的时候，希望你能看看这本书。这是一个理想主义者的奋斗。

也许受老罗影响吧，一直以来我都挺爱折腾的。

Waline评论昵称不能少于3个字符

部署好Waline后我在本地测试时发现一个个人觉得比较奇怪的问题，我输入昵称“老麦”并进行评论时提示一个错误，「昵称不能少于3个字符」。老实说，这个我还是有点不能理解的，Waline作者不知为何会作出这样的限制，毕竟用两个中文字作为昵称的人还是很多的。

试图在官方文档里找这个配置参数，无果，只好选择重新构建Client。

环境准备

安装Node.js (nodejs.org)，打开官网我们可以找到两个版本进行安装，一个是14.17.5 LTS，另外一个版本则是16.6.2 Current，虽然Node 14默认使用npm@v6，但还是建议安装LTS版本，毕竟稳定才是王道。由于Waline需要用到npm@v7版本，所以如果安装14.17.5 LTS，我们还需要更新一下npm的版本。

1
npm i -g npm

拉取项目：

1
git clone https://github.com/walinejs/waline.git

安装依赖：

1
2
3
4
5
// 进入项目目录
cd waline

// 安装项目依赖
npm i

重构Waline Client

1
2
3
4
5
// 进入Client目录
cd ./packages/client/

// 用VSCode打开该目录
code .

打开\src\components\CommentBox.vue，搜索// check nick；

1
2
3
4
5
6
7
8
// check nick
        if (
          (requiredMeta.indexOf('nick') > -1 || comment.nick) &&
          comment.nick.length < 3
        ) {
          inputRefs.value.nick?.focus();
          return alert(locale.value.nickError);
        }

将comment.nick.length < 3修改成comment.nick.length < 2，保存；

运行npm run build，这样Waline的客户端就完成构建了。

引用新的客户端

方法很简单，将生成目录dist里的文件git push到Github上，套上Jsdelivr就可以直接引用了。

 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
28
29
30
31
32
33
34
// hugo-theme-stack 默认的引入代码

<script src='//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script>
<div id="waline" class="waline-container"></div>
<style>
    .waline-container {
        background-color: var(--card-background);
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        padding: var(--card-padding);
    }
    .waline-container .vcount {
        color: var(--card-text-color-main);
    }
</style>

{{- with .Site.Params.comments.waline -}}
{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}}
{{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "avatarcdn" "avatarCDN" "avatarforce" "avatarForce" -}}

{{- range $key, $val := . -}}
    {{- if $val -}}  
        {{- $replaceKey := index $replaceKeys $key -}}
        {{- $k := default $key $replaceKey -}}

        {{- $config = merge $config (dict $k $val) -}}
    {{- end -}}
{{- end -}}

<script>
    /// Waline client configuration see: https://waline.js.org/en/reference/client.html
    new Waline({{ $config | jsonify | safeJS }});
</script>
{{- end -}}

将第一行修改为<script src='//cdn.jsdelivr.net/gh/skybbx/img/waline/Waline.min.js'></script>即可，更多引用方法可以参考官方文档：引入客户端 | Waline。

如果你跟我一样只需修改这个昵称字符判定，可以直接引用我修改后的客户端。

CDN地址为：https://cdn.jsdelivr.net/gh/skybbx/img/waline/

Gravatar头像

Gravatar由于被qiang的关系，一直以来我都是使用极客CDN的代理，表现很稳定，可最近这两天却发现开始出问题了，经常出现加载不了的情况。好在这种代理有很多大佬在做，既然不稳定就换一个吧。这次看中的是老庞做的代理。传送门：自建Gravatar国内+全球镜像加速服务 | 城南旧事 (loli.top)

Waline上更换头像CDN

因为Waline上Gravatar头像默认的CDN就是极客的，修改方法很简单，查看官方文档——前端配置 | Waline，定义一个配置avatarCDN即可。案例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script src="//cdn.jsdelivr.net/gh/skybbx/img/waline/Waline.min.js"></script>
<div id="waline"></div>
<script>
  new Waline({
    el: '#waline',
    serverURL: '客户端地址',
    copyright: true,
    requiredMeta: ['nick', 'mail'],
    avatarCDN: 'https://gravatar.loli.top/avatar/',
  });
</script>

另：可以用{ $config | jsonify | safeJS }将前端的配置集成到Config里。

Wordpress上更换头像CDN

将下面代理添加到主题的functions.php即可。

1
2
3
4
5
6
// gravatar使用 CDN
function replace_gravatar($avatar) {
$avatar = str_replace(array("//gravatar.com/", "//secure.gravatar.com/", "//www.gravatar.com/", "//0.gravatar.com/", 
"//1.gravatar.com/", "//2.gravatar.com/", "//cn.gravatar.com/"), "//gravatar.loli.top/", $avatar);
return $avatar;}
add_filter( 'get_avatar', 'replace_gravatar' );