标签归档:emoji

Hexo添加emoji

为Hexo添加emoji表情,同时表情使用twitter的twemoji。

使用markdown-it渲染

markdown-it

安装markdown-it

1
2
$ npm un hexo-renderer-marked --save
$ npm i hexo-renderer-markdown-it --save

把原来的hexo渲染换成基于markdown-it的渲染。

安装markdown-it-emoji插件

hexo-renderer-markdown-it原装只有5个插件,分别是:

  • markdown-it-abbr
  • markdown-it-footnote
  • markdown-it-ins
  • markdown-it-sub
  • markdown-it-sup

没有emoji的表情插件,因此要安装 markdown-it-emoji 该插件
markdown-it-emoji
进入到markdown-it的node-modules目录下安装该插件
..hexo\very9s\node_modules\hexo-renderer-markdown-it\node_modules

1
npm install markdown-it-emoji --save

配置_config.yml文件

在hexo的配置文件下添加markdown-it配置代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 //用emoji插件
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol: ¶

基本配置到此结束

基本的emoji表情测试如下:

Classic markup: 😉 😢 😆 😋

Shortcuts (emoticons): 😃 😦 😎 😉


使用twemoji表情

twemoji
仍然是在markdown-it插件目录下clone twemoji

1
git clone git@github.com:twitter/twemoji.git

于是目录下多了twemoji文件夹。

配置markdown-it-emoji插件

要使用twemoji还没有结束,还需要配置markdown-it-emoji的index.js
修改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
'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;

md.core.ruler.push('emoji', emoji_replace(md, opts.defs, opts.shortcuts, opts.scanRE,
opts.replaceRE));

md.renderer.rules.emoji = function(token, idx) { //修改规则
return twemoji.parse(token[idx].content);
};
};

重新渲染

重新渲染hexo g
一切OK! 😎

twemoji样式

发现表情巨大,于是修改样式。按照markdown-it-emoji的官方说明
在我的模板中添加样式:

1
2
3
.emoji {
height: 1.2em;
}

这下一切都OK啦~

😎 给点评论鼓励我把~