hexo+next使用Valine评论系统

valine

原文地址:hexo+next使用Valine评论系

来必力

博主原来的博客使用的来必力系统,确实卡顿太厉害。作为一枚程序猿岂能允许这么磨磨唧唧的东西一直存在,甲方说优化,优化掉。因为我最不喜欢在评论系统里看到还需要登录这样的步骤。

先展示下现在的东东


载入

终于出来了,评论试试


发布一条评论试试

咦,还得登陆一下,输个邮箱试试

提示登录.png

什么鬼,那就登录吧!!!


支持很多第三方登录

看到了吧,你可以登陆了。噗噗噗~


登录窗口

还没有放弃的真是我崇拜的大哥啊。
当然,吐槽归吐槽,也不是一无是处,当时选择一是没有其他可选的,而是看了看有些截图,还不错。比如下面这样的(我用github第三方登录的):


评论

输入框右上角还有个小铃铛,点点试试


所有评论

是吧,还不错吧。哈哈哈。

再来看看来必力的后台吧(我可以跳过墙,所以速度还可以)

image.png

毕竟是国际化的,能选中文。


分析
评论管理
设置
通知提醒

到此为止吧。

给hexo添加Valine评论功能

后面了解到一款国人开发的评论系统叫Valine用的是LeanCloud作为数据库,洁面很简洁,不像来必力那样花哨只是单纯的评论,简洁到没有后台!!!删除和管理评论只能直接操作数据库。
这里写下为Hexo-Next模板添加Valine的过程和坑点。
1.Next模板要5.14(免去自己手动修改的麻烦)。不是这个版本的可以考虑升级或者自己手动修改,修改教程在 https://github.com/iissnan/hexo-theme-next/pull/1983
2.注册LeanCloud并创建一个开发版应用(免费)


3.在LeanCloud -> 存储 -> 创建Class -> 无限制的Class(坑点1)
class名称为:Comment
LeanCloud创建Class

4.在LeanCloud-设置-把除数据存储其他选项都关闭。


安全域名中添加域名,一定要注意格式(坑点2)

例如:https://www.nobige.cn:443

5.在Next模板下的_config.yml搜索Valine进行填写appid和appkey

功能展示

下面说下各个选项的含义

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid:    # your leancloud application appid
  appkey:    # your leancloud application appkey
  notify: true # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: ヾノ≧∀≦)o 来呀!吐槽一番吧! # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

一般改动的为appid和appkey其他默认即可,如果要开启email通知除了修改_config.yml文件之外还要将LeanCloud -> 设置邮件模板 -> 用于重置密码的邮件主题进行修改

你在{{appname}} 的评论收到了新的回复

<p>Hi, {{username}}</p>
<p>
你在 {{appname}} 的评论收到了新的回复,请点击查看:
</p>
<p><a href="你的网址首页链接" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>

CDN修改

建议将自带的CDN改成第三方CDN,为啥???10+s的加载那酸爽是在是过瘾。
文件目录:next/layout/_third-party/comments/valine.swig

//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js

官方的CDN是

//unpkg.com/valine/dist/Valine.min.js

更多高级用法请到官网查看 https://valine.js.org/

推荐阅读更多精彩内容