本篇文章是在小康博客懒人大佬的基础上编写,感谢两位大佬。

开通使用Valine

目前,Butterfly主题已集成多种评论模块,个人喜欢简约的Valine,操作如下:

  1. 注册LeanCloud账号

    右上角选择国际版。(华北和华东需要实名认证,国际不需要)

  2. 创建应用,选择开发版
  3. 创建后点击设置进入应用
  4. 复制AppID、AppKey
  5. 点击进入设置–>安全中心,设置博客的域名
  6. 配置butterfly.yml如下:
    1
    2
    3
    4
    5
    6
    7
    comments:
    # Up to two comments system, the first will be shown as default
    # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments
    use:
    - Valine #将此处注释取消掉即可
    # - Disqus
    text: true # Display the comment name next to the button
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    valine:
    appId: #将刚才AppID复制到此处
    appKey: #将刚才AppKey复制到此处
    pageSize: 8 # comment list page size
    avatar: monsterid # gravatar style https://valine.js.org/#/avatar
    lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
    placeholder: Please leave your footprints # valine comment input placeholder (like: Please leave your footprints)
    guest_info: nick,mail,link # valine comment header info (nick/mail/link)
    recordIP: false # Record reviewer IP
    serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
    bg: # valine background
    emojiCDN: # emoji CDN
    enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
    requiredFields: nick,mail # required fields (nick/mail)
    option:
  7. 可以添加评论框文字输入特效,配置butterfly.yml如下:
    1
    2
    3
    4
    5
    activate_power_mode:
    enable: true
    colorful: true # open particle animation (冒光特效)
    shake: false # open shake (抖動特效)
    mobile: false

Valine添加博主标签

  • 效果图

添加博主小伙伴访客标签
添加浏览器和操作系统图标,需fontawesomeV5支持
邮箱检测更严格
增加 QQ 邮箱识别(原版只能通过昵称栏输入 QQ 号识别)
meta placeholder可自定义

  1. 查看Butterfly版本号
    查看HexoBlog\themes\Butterfly\package.json文件内容知道自己使用的版本
  2. 替代valine.pug 文件
    Butterfly主题2.x.x版本修改: HexoBlog\themes\Butterfly\layout\includes\comments\valine.pug(点击此处下载,适用于 Butterfly 主题 <= V2.3.5
    Butterfly主题3.x.x版本修改: HexoBlog\themes\Butterfly\layout\includes\third-party\comments\valine.pug(点击此处下载

说明:1.不同的版本替换的文件和路径都不一样,别下错了。2.其他版本参照这两个版本修改即可。
3. 编辑butterfly.yml文件,找到valine配置,添加以下配置项:

1
2
3
4
5
6
7
8
9
10
master:    # md5加密后的博主邮箱
- 0842094af76e39e0f2756cf03a7d2a1f
friends:
- d61d6a3bba0f74897db827b58fb140f3
metaPlaceholder: # 输入框的背景文字
nick: 昵称/QQ号(必填)
mail: 邮箱(必填)
link: 网址(https://)
tagMeta: '博主,小伙伴,访客' # 标签要显示的文字,默认'博主,小伙伴,访客'
verify: false # 评论时是否需要验证,需jQuery支持
  1. 编辑butterfly.yml文件,将CDN中的valine链接改为https://cdn.jsdelivr.net/gh/HCLonely/[email protected]/dist/Valine.min.js
  2. 改完之后hexo clean && hexo g && hexo d一下,不然不会生效。

进阶版-评论微信通知

使用valine-admin,具体参照小康博客Valine评论之Valine-admin配置攻略

说明:博主自己发评论不会提醒,请注意。