这是我参与8月更文挑战的第15天,活动详情查看:8月更文挑战
Next V7.7.1 自带很多评论系统,其中Valine诞生于2017年8月7日,是一款基于Leancloud的快速、简洁且高效的无后端评论系统。Valine具有添加方便,轻量,运行、加载速度快,不需要用户登录等优点。
本文介绍Next中添加Valine评论系统的方法。
依赖leancloud
- 申请leancloud账号,官网链接。
- 登录leancloud,进入控制台点击创建应用。
- 填写应用名称,选择开发版
- 创建成功后点击应用右上角的
齿轮进入应用设置
- 设置选项卡中选择
应用 Keys,右边AppID和AppKey就是我们需要的标识和密钥。
本地设置
在Next
主题配置文件中修改valine字段内的值,将enable设置为true,将刚刚得到的AppID和AppKey填入相应字段中。
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
enable: true
appid: XXXXXXXXXXX< your AppID>XXXXXXXXXXXX # Your leancloud application appid
appkey: XXXXXX<your AppKey>XXXXXXX # Your leancloud application appkey
notify: true # Mail notifier
verify: true # Verification code
placeholder: 遗憾莫过于难忘你的背影,却找不到你来过的痕迹 ... # Comment box placeholder
avatar: mm # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: # Language, available values: en, zh-cn
visitor: true # Article reading statistic
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0
修改enable和AppID、AppKey之后:
- notify:评论后的邮件提示,还需要在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>
- verify:评论时需要验证码
- placeholder:占位符,就是在没有评论时默认的提示文字
- visitor:标题和首页显示浏览量(与不蒜子的会重复,可以选择一个保留)
说明
Next V7.7.1 已经集成了相关程序包,不需要额外安装,只要填入AppID和AppKey就好,否则容易出现各种奇怪的问题(别问我怎么知道的)
数据安全
可选操作:在【Leancloud】 -> 【设置】 -> 【安全中心】 -> 【Web 安全域名】把你的域名加进去,可防止数据被篡改。
标题Valine字段翻译
这个字段生成过程和其他不一样,定义的变量在post下的comments下的valine,修改zh-Hans.yml
post:
comments:
valine: 评论次数
源码踪迹
相关的Valine评论数生成的源文件是
themes -> next -> scripts -> filters -> comment -> valine.js
该函数在同文件夹下的
common.js文件内
因此在zh-Hans.yml中定义post.comments.valine 变量的翻译字段