valine自定义表情正确打开方式

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

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

打开主题的配置文件

valine:enable: true # valine 评论系统开关appId: xxxxxxxxxx # leancloud application app idappKey: xxxxxxxxx # leancloud application app keynotify: 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 sizeavatar: monsterid # gravatar style https://valine.js.org/#/avatarlang: zh-CN # i18n: zh-CN/zh-TW/en/japlaceholder: 请开始你的表演，请文明发言哦！ # valine comment input placeholder(like: Please leave your footprints )guest_info: nick,mail,link #valine comment header inforecordIP: false # Record reviewer IPserverURLs: # 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/linkbg: images/mapleblog/t.png # valine backgroundcount: true # dispaly comment count in top_imgemojiMaps: {} # 存放表情yaml文件的 这是我后来加上的

添加属性emojiMaps

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

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

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

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

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

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

[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 你就会看到如下内容

- 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文件我放在这里了，自己拿

提交或启动看效果

hexo clean && hexo g && hexo d

附加QQ头像问题

valine.pug

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

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

具体教程请看火喵

valine自定义表情正确打开方式相关推荐

苹果切换输入法_iPhone输入法的正确打开方式，让你打字更痛快
iPhone输入法的正确打开方式,让你打字更痛快手机是我们经常会使用到的一个物品,同时我们和手机的互动,目前主要是建立在输入法层面,尽管我们可以通过声音进行控制一些智能化的设备,但是这样的功能并没有 ...
Python Matplotlib绘图的正确打开方式
Python Matplotlib绘图的正确打开方式文章目录 Python Matplotlib绘图的正确打开方式 1.先搞懂fig.axes.axis `Figure` `Axes` `Axis` ...
这才是目前百度统计接口的正确打开方式20180322
这才是目前百度统计接口的正确打开方式20180322 关于百度统计接口的说明 1.登陆接口网站找到的有2种方式第一种调用(不能用) https://api.baidu.com/sem/common/ ...
jsDelivr的正确打开方式
原文地址:http://bili33.top/2020/02/08/jsDelivr-Usage/ 不常上CSDN,有问题请到我的博客的对应文章下面的评论区留言或者直接跟我QQ沟通,QQ在我的个人网站 ...
android动态设置错误页面,Android缺省页的正确打开方式(优雅的处理loading、error、empty...
Android缺省页的正确打开方式(优雅的处理loading.error.empty Android缺省页的正确打开方式(优雅的处理loading.error.empty各种状态缺省) MultiSt ...
极盾·析策，XDR的正确打开方式
近日, Gartner正式发布了2022安全运营技术成熟度曲线(Hype Cycle),正如大家所预测的那样,XDR终于站上了Peak of Inflated Expectations的顶端,成为安全 ...
opengl 贴图坐标控制_材质贴图正确打开方式
哈喽,各位观众朋友们好鸭~欢迎来到讲道理画图的地方,我是黄玮宁. 最近呀经常有小伙伴来问我那些不同通道的材质贴图该怎么用,而且频率不是一般的高,所以我觉得有必要来说说这些通道贴图的用法了. 视频版(B ...
Console控制台的正确打开方式
Console控制台的正确打开方式 console对象提供了访问浏览器调试模式的信息到控制台 -- Console对象|-- assert() 如果第一个参数断言为false,则在控制台输出错误信息| ...
任务队列和异步接口的正确打开方式(.NET Core版本)
layout: post title: 任务队列和异步接口的正确打开方式(.NET Core版本) category: dotnet core date: 2019-01-12 tags: dotne ...
log python_基于Python log 的正确打开方式
保存代码到文件:logger.py import os import logbook from logbook.more import ColorizedStderrHandler import sm ...