Waline评论之修改记录
依稀记得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的版本。
1npm i -g npm
拉取项目:
1git clone https://github.com/walinejs/waline.git
安装依赖:
1// 进入项目目录
2cd waline
3
4// 安装项目依赖
5npm i
重构Waline Client
1// 进入Client目录
2cd ./packages/client/
3
4// 用VSCode打开该目录
5code .
打开\src\components\CommentBox.vue
,搜索// check nick
;
1// check nick
2 if (
3 (requiredMeta.indexOf('nick') > -1 || comment.nick) &&
4 comment.nick.length < 3
5 ) {
6 inputRefs.value.nick?.focus();
7 return alert(locale.value.nickError);
8 }
将comment.nick.length < 3
修改成comment.nick.length < 2
,保存;
运行npm run build
,这样Waline的客户端就完成构建了。
引用新的客户端
方法很简单,将生成目录dist
里的文件git push到Github上,套上Jsdelivr就可以直接引用了。
1// hugo-theme-stack 默认的引入代码
2
3<script src='//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script>
4<div id="waline" class="waline-container"></div>
5<style>
6 .waline-container {
7 background-color: var(--card-background);
8 border-radius: var(--card-border-radius);
9 box-shadow: var(--shadow-l1);
10 padding: var(--card-padding);
11 }
12 .waline-container .vcount {
13 color: var(--card-text-color-main);
14 }
15</style>
16
17{{- with .Site.Params.comments.waline -}}
18{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}}
19{{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "avatarcdn" "avatarCDN" "avatarforce" "avatarForce" -}}
20
21{{- range $key, $val := . -}}
22 {{- if $val -}}
23 {{- $replaceKey := index $replaceKeys $key -}}
24 {{- $k := default $key $replaceKey -}}
25
26 {{- $config = merge $config (dict $k $val) -}}
27 {{- end -}}
28{{- end -}}
29
30<script>
31 /// Waline client configuration see: https://waline.js.org/en/reference/client.html
32 new Waline({{ $config | jsonify | safeJS }});
33</script>
34{{- 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<script src="//cdn.jsdelivr.net/gh/skybbx/img/waline/Waline.min.js"></script>
2<div id="waline"></div>
3<script>
4 new Waline({
5 el: '#waline',
6 serverURL: '客户端地址',
7 copyright: true,
8 requiredMeta: ['nick', 'mail'],
9 avatarCDN: 'https://gravatar.loli.top/avatar/',
10 });
11</script>
另:可以用{ $config | jsonify | safeJS }
将前端的配置集成到Config里。
Wordpress上更换头像CDN
将下面代理添加到主题的functions.php即可。
1// gravatar使用 CDN
2function replace_gravatar($avatar) {
3$avatar = str_replace(array("//gravatar.com/", "//secure.gravatar.com/", "//www.gravatar.com/", "//0.gravatar.com/",
4"//1.gravatar.com/", "//2.gravatar.com/", "//cn.gravatar.com/"), "//gravatar.loli.top/", $avatar);
5return $avatar;}
6add_filter( 'get_avatar', 'replace_gravatar' );