Hexo中添加emoji表情

国庆的三天假前,都是玩CF和LOL的无限乱斗过来的,输了怨没随机到好的英雄,赢了就高高兴兴的😄 .

在假期的最后一天,感觉时间过的太快,靠吃饭的技能没提升,虚度的时光倒是溜走了。

看了参考文献之后,原来将markdown 变成html的转换器叫做markdown渲染器.在Hexo中默认的markdown渲染器 使用的是hexo-renderer-marked,是Hexo版本,这个渲染器不支持插件扩展。另外一个 markdown 渲染器 hexo-renderer-markdown-it,这个支持插件配置,可以使用 markwon-it-emoji插件来支持emoji。需要将原来的 marked 渲染器换成 markdown-it渲染器。我使用的Hexo3

安装过程

安装新的渲染器

首先进入博客目录,卸载hexo默认的marked渲染器,安装markdown-it渲染器,运行的命令如:

1
2
3
cd Documents/blog
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save

之后安装markdown-it-emoji插件:

1
npm install markdown-it-emoji --save

编辑站点配置文件

这里的站点配置文件是指位于博客根目录下的 _config.yml,编辑它,然后在末尾添加如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
- markdown-it-emoji # add emoji
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol:

上面的是hexo-renderer-markdown-it的所有选项的配置,详细的每一项配置说明,需要到Advanced Configuration中查看。

给新的渲染器添加twemoji

因为安装了markdown-it-emoji, :smile:渲染成😄了,是Unicode字符表情。感觉不好看,参考文章的介绍,安装twemoji,安装命令如下:

1
npm install twemoji

安装完之后,编辑node_modules/markdown-it-emoji/index.js文件,最终文件像:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
'use strict';
var emojies_defs = require('./lib/data/full.json');
var emojies_shortcuts = require('./lib/data/shortcuts');
var emoji_html = require('./lib/render');
var emoji_replace = require('./lib/replace');
var normalize_opts = require('./lib/normalize_opts');
var twemoji = require('twemoji') //添加twemoji
module.exports = function emoji_plugin(md, options) {
var defaults = {
defs: emojies_defs,
shortcuts: emojies_shortcuts,
enabled: []
};
var opts = normalize_opts(md.utils.assign({}, defaults, options || {}));
md.renderer.rules.emoji = emoji_html;
//使用 twemoji 渲染
md.renderer.rules.emoji = function(token, idx) {
return twemoji.parse(token[idx].content);
};
md.core.ruler.push('emoji', emoji_replace(md, opts.defs, opts.shortcuts, opts.scanRE, opts.replaceRE));
};

因为我安装twemoji的2.2.0之后,好像默认的是72X72,假如你不喜欢这个图片尺寸,可以通过css控制,在你的主题css中添加如:

1
2
3
4
5
6
img.emoji {
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}

的css代码,代码来自Tips,,是控制同行显示的。


由于我个人使用的是hexo-theme-next主题,导致最终渲染的文章中的emoji图片,会自动绑定fancybox,而且有边框和图片看起来很小,需要修改两个文件。

  1. 编辑 themes/next/source/js/src/utils.js
    将文件中的$('.content img').not('.group-picture img')替换为$('.content img').not('.group-picture img,.emoji'),这是为了防止生成的emoji图片被fancybox绑定,点击表情的图片,放大表情。
  2. themes/next/source/css/_custom/custom.styl中添加
1
2
3
4
5
6
7
8
9
10
img.emoji {
height: 1.5em;
width: 1.5em;
margin: 0 .05em 0 .1em !important;
vertical-align: -0.1em;
//override theme default style
padding:0px !important;
border:none !important;
display:inline !important;
}

重新启动Hexo本地站点就可以看到 Unicode字符表情变成了图片表情。如:blush: 😊

总结

明白markdown装html的叫做渲染器,学到npm卸载的命令。尝试了emoji-cheat-sheet.com 中的emoji-parser,暂时换不到,目前就用twemoji也不错,以后写博客的时候,加点表情或许更有意思呢。Hexo 开启调试模式的命令是hexo s --debug✌️

参考文献

  1. 让Hexo支持emoji表情
  2. Hexo添加emoji