Very9s: Hexo添加emoji

2016-06-10

Hexo添加emoji

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

¶使用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配置代码：

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：

'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啦~

¶ 给点评论鼓励我把~

5 条评论:

yuchen2017年3月29日上午9:16
博主你好，请问每个标题前的那个符号怎么去掉？
回复删除
回复
yuchen2017年3月29日上午9:24
谢谢博主，已经弄明白了
回复删除
回复
Muggle2017年4月1日下午4:52
O(∩_∩)O很高兴对你有帮助~
回复删除
回复
bink2017年12月30日上午11:30
您好，谢谢您的教程，我注意到您这里有个错误
“- markdown-it-emoji //用emoji插件”这句会报错，因为在yml中注释是#
回复删除
回复
Muggle2017年12月31日上午5:25
谢谢你的提醒。我这个注释是写文章的时候加上去的，不是写yml的时候加上去的^_^我已改正拉~~
回复删除
回复

添加评论

谢谢您的留言^_^