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渲染器，運行的命令如：

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

以後安裝markdown-it-emoji插件：

npm install markdown-it-emoji --save

編輯站點配置文件

這裏的站點配置文件是指位於博客根目錄下的 _config.yml，編輯它，而後在末尾添加以下內容：

# 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,安裝命令以下:

npm install twemoji

安裝完以後，編輯node_modules/markdown-it-emoji/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;
  //使用 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中添加如:

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中添加

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