「更新：添加 Waline 评论 & 访客统计」

更新：添加 Waline 评论 & 访客统计

2021/09/29 字数统计： 1.8k 阅读时间： 3 mins 访问次数： ... 评论统计： ...

　　开评论了（开评论了）:4o-3:
　　虽然倒腾成功了但完全没有一点成就感，可能是因为明天要进禁绝幻想我又开始狠狠地 emo 了……

　　略有耳闻 Valine 的安全性不尽人意，于是启用了据说是基于 Valine 开发的 轻量易用 的评论插件 Waline，然后到手准备改一下元素嵌套顺序，找了个在线 JS 格式化网站把源码扔进去一看—— 4972 行。
　　请问是我对 21 世纪的简体中文形容词有什么误解吗 :4o-4:

部署

　　基本跟着官方文档一步步做下来就成功了，吐槽一下 LeanCloud 和 Vercel 居然都要验证手机号，今日份的人类不行.jpg

更改 Vercel 权限

　　使用 Vercel 创建仓库需要给它访问所有仓库的权限，但后续使用中只需要让它访问已创建的 Waline 仓库即可，所以本着多一事不如少一事的原则（好像也不太对），总之在部署完毕之后我修改了相应的权限。
　　在 Github 页面点击右上角头像选择 Settings，在页面左侧边栏选择 Security log，可以在列表中发现 Vercel 创建仓库的记录。
　　点击 Vercel 可以进入应用权限管理界面，拉到最下面的 Repository access，将设置从 All repositories 变更为 Only select repositories 并在下拉菜单中选中你的 Waline 仓库。

引入无样式代码

　　因为想自己写 css 所以一开始就看中了 Waline 自带的无样式版本，不如说这个无样式版本才是我选择它的根本原因……
　　当然目前的 css 效果还比较感人，只是暂时能用的范畴。另外不知道为啥这次是 chrome 里的滚动条给我整不会了，不仅无法修改样式甚至还能拖动调整输入框的大小，啊？？？:4o-4:
　　开始用了官方链接引入无事发生，检查了一下控制台发现是默认没有开启 https……干脆直接保存到本地了，另外去掉链接中的 @1.0.0 就可以获得最新版本的代码。

启用访客 & 评论统计

　　以 ejs 为例，在 layout 中写入以下内容，如果没有特殊需要建议直接和字数统计放在一起，也共用 css 样式：

<span class="word-count">访问次数：
  <span id="<%- url_for(post.path) %>" class="waline-visitor-count"></span>
</span>
<span class="word-count">评论统计：
  <span id="<%- url_for(post.path) %>" class="waline-comment-count"></span>
</span>

　　原理是官方文档中提到 Waline 会自动查找页面中 class 值为 waline-visitor-count 的元素，获取其 id 为查询条件，并将得到的值填充到其中。所以只需要创建带有所需 id 和 class 的元素即可。
　　是说这个统计似乎是与本地共用的……可恶我一边码字一边疯狂刷新本地浏览页面的坏习惯就此暴露了 :4o-3:

更新：部署文章前进入 LeanCloud 后台
　　　手动将 Counter 数据设置为 1 可以解决这个问题【掩耳盗铃

修正

删除默认 emoji

　　在 waline 配置代码中为 emoji 配置一个空数组，写法：emoji: []

禁用图片上传功能

　　在 Waline 配置代码中写入 uploadImage: false，并在 css 样式中为 .vactions 设置 display:none;
　　……是说把这个功能禁用掉之后居然不会自动删除对应的 UI 也是见了鬼了【

设置必填项

　　在 Waline 配置代码中写入 requiredMeta: ['nick', 'mail'] 后，用户需要填写昵称和邮箱之后才能提交评论。

在特定页面关闭评论

　　在 layout 文件中加入判断条件，以 ejs 为例：

<% if (post.comment != false){ %>
// 如果 post 的 comment 值不等于 false，则渲染以下元素
  <div class="comment-block">
    <hr>
    // 这是个分割线
  <div id="waline"></div>
  // 生成 Waline 需要的 div
  </div>
<% } %>

　　完成后即可在 markdown 文件前缀中添加 comment: false 来关闭评论。
　　另外评论和访客统计同样需要加入判断条件，否则两个数据会恒定统计为 0。

隐藏用户 UA

　　一早就想吐槽一个评论留言板为什么要显示来评论的人用的什么系统和浏览器……结果这玩意居然还没做关闭入口，试图用 jQuery remove 掉不知道为啥也没反应，估计还是异步加载的问题，总之先用 display:none; 隐藏一下。

　　更新：逐行阅读了官方文档后……【为什么这一条搜索不出来啊
　　在 Vercel 服务端中添加环境变量 DISABLE_USERAGENT 并将值设为 true后重新部署，检查前端会发现显示用户 UA 的 .vmeta 标签中返回了空的字符串。
　　但是我依然没办法隐藏这个元素 :4o-2:

将输入框标签更改为 placeholder

　　在 Waline 配置代码中写入以下内容：

window.onload = function(){
  $("#waline-nick" ).attr( "placeholder" , "昵称" );
  $("#waline-mail" ).attr( "placeholder" , "邮箱" );
  $("#waline-link" ).attr( "placeholder" , "链接" );
}

　　并在 css 中设置 .vheader-item label 样式为 opacity: 0。

未完成：显示站点自带 emoji

　　显然还是异步加载的问题，先挖个坑以后解决【
　　……当然如果这个问题需要我读完这 4972 行代码那就算了……

無色人間。