Cameudis' Blog

Binary Hack, Computer System, Music, and whatever

0%

【Blog#0x01】使用Valine给Hexo博客添加评论功能

0x00 查看Valine支持的主题

可以在 Valine中文文档 - 在Hexo中使用 查看Valine已经在哪些主题中默认适配。Hexo的默认主题 landscape 也在列表中。

适配主题列表

0x01 配置LeanCloud应用

https://leancloud.cn/ 注册账号,实名认证验证邮箱后可以创建应用。应用的名字和描述都没有要求,可以自行取名。
在应用的 设置-安全中心-Web 安全域名 处,加入Hexo博客的域名(比如我就是填https://cameudis.github.io/

Web安全域名设置

创建完毕后,在应用的 设置-应用凭证 处,可以看到应用的AppIDAppKey,等会要用。

0x02 配置Hexo设置

如果是支持的主题,那么在 /themes/[theme_name]/_config.yml 中,会有相关的配置设置。比如 landscape 主题的配置文件中有如下配置:

1
2
3
4
5
6
7
8
9
10
11
12
# valine comment system. https://valine.js.org
valine:
enable: false # if you want use valine,please set this value is true
appId: # leancloud application app id
appKey: # leancloud application app key
notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
verify: false # valine verify code (true/false)
pageSize: 10 # comment list page size
avatar: mm # gravatar style https://valine.js.org/#/avatar
lang: zh-cn # i18n: zh-cn/en
placeholder: Just go go # valine comment input placeholder(like: Please leave your footprints )
guest_info: nick,mail,link #valine comment header info

由于直接更改该处的配置,会在更新主题的时候被覆盖。所以hexo推荐在整个网页的 _config.yml 文件中添加一个 theme_config section,或者创建一个 _config.[theme_name].yml ,并把想要改的配置复制过来修改。
两种方法的详细说明请参考Hexo文档 - Alternate Theme Config

这里本人采用后者(hexo默认会生成一个 _config.landscape.yml,十分贴心)。将上面这段代码复制到 _config.landscape.yml 之后,将 enable 改为 true,将 appIdappKey 改为LeanCloud应用中提供的 appIdappKey

其他的配置选项可以自行探究,比如 placeholder 就是在评论框里显示的灰字等等。

0x03 生成并发布

接下来只要生成并发布网页,就可以在文章下面看到评论区啦!

1
2
3
hexo clean
hexo g
hexo d

0x04 相关阅读材料

valine文档 - 快速开始
希望读者能开发出更多新姿势(?)