​ 博客建好了，评论系统没有好看又个性的表情包是万万不行的，所以我今天就来搞事情了，我也是看别人的博客才做的，其实不是很难，但也有坑，好了，废话不多说，现在开始

​ 我用的hexo主题是butterfly，此博客是基于此的，原理是相通的，

打开主题的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
valine:
  enable: true # valine 评论系统开关
  appId: xxxxxxxxxx # leancloud application app id
  appKey: xxxxxxxxx # leancloud application app key
  notify: false # valine mail notify (true/false) Deprecated in v1.4.0+
  verify: false # valine verify code (true/false) Deprecated in v1.4.0+
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
  placeholder: 请开始你的表演，请文明发言哦！ # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header info
  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)
  emojiCDN: '//i0.hdslb.com/bfs/emote/' # 存放表情的cdn库
  enableQQ: true # 
  requiredFields: nick,mail # required fields nick/mail/link
  bg: images/mapleblog/t.png # valine background
  count: true # dispaly comment count in top_img
  emojiMaps: {} # 存放表情yaml文件的 这是我后来加上的

添加属性emojiMaps

原配置文件中是没有emojiMaps的，需要自己加上

1
emojiMaps: {} # 存放表情yaml文件的

创建自己的CDN或引入别人的CDN

​ emojiCDN 这个是用来放CDN路径的，我用的是哔哩哔哩的cdn，当然你也可以自己创建CDN，比较常见的方式是在github上去创建一个代码库，把你千辛万苦抠来的表情存到仓库，然后用法也特别简单。

1
2
//加载任何GitHub版本，提交或分支
https://cdn.jsdelivr.net/gh/你的用户名/仓库名@版本号/文件路径

创建emojiMaps的yaml文件(官方用的是json文件也行，配置方式不一样)

1
2
3
4
5
6
7
8
9
[tv_白眼]: c1d59f439e379ee50eef488bcb5e5378e5044ea4.png 
[tv_doge]: 6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png 
[tv_坏笑]: 1f0b87f731a671079842116e0991c91c2c88645a.png 
[tv_难过]: 87f46748d3f142ebc6586ff58860d0e2fc8263ba.png  
[tv_生气]: 26702dcafdab5e8225b43ffd23c94ac1ff932654.png  
[tv_委屈]: d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png 
[tv_斜眼笑]: 911f987aa8bc1bee12d52aafe62bc41ef4474e6c.png 
[tv_呆]: fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png 
[tv_发怒]: 34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png

注意！文件名是有要求的

以butterfly为例，打开butterfly主题目录>layout>includes>comments>valine.pug 你就会看到如下内容

1
2
3
- let emojiMaps = '""'
if site.data.valine  #这是引入valine.yaml文件，文件名：valine
  - emojiMaps = JSON.stringify(site.data.valine)

写好之后存在哪呢？

（if site.data.valine #这是引入valine.yaml文件，文件名：valine）

hexo的全局变量：site，指向的是hexo根目录下的source目录，data指的是source目录下_data目录（没有就自己建一个），由此可知valine.yml文件应存放到 _data目录下。

与哔哩哔哩对应的valine.yml文件我放在这里了，自己拿

提交或启动看效果

1
hexo clean && hexo g && hexo d

附加QQ头像问题

valine.pug

1
2
#vcomment.vcomment
script(src=url_for(theme.CDN.valine)) valine 的js文件CDN路径

首先要自己去官网下载js文件，再引入

具体教程请看火喵