在Hexo的Yilia主题中使用emoji表情

2019-09-05

博文只有文字，未免显得有些单调，在合适地儿配上表情，可以使文章更生动有趣些，所以加上emoji表情还挺有必要。以下是折腾笔记~

卸载marked渲染器

1	npm un hexo-renderer-marked --save

安装markdown-it渲染器

1	npm i hexo-renderer-markdown-it --save

安装markdown-it-emoji插件

1	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'
    # If `true`, creates an anchor tag with a permalink besides the heading.
    url: false  
    permalinkClass: header-anchor
    # The symbol used to make the permalink
    permalinkSymbol: ¶

这样渲染出来的Unicode字符表情，黑色不大好看，想显示图片格式的话可以继续下面的步骤

安装twemoji

1	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');
//添加twemoji
var twemoji           = require('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));
};

默认图片显示的比较大，要调整下，修改themes\yilia\source-src\css\article-inner.scss，在.article-entry里增加img.emoji样式

.article-entry{
  ...
  img.emoji {
    height: 1.25em;
    width: 1.25em;
    margin: 0 .05em 0 .1em;
    vertical-align: -.1em;
  }
}

点击表情的时候会触发图片弹出层，所以要去掉点击弹出效果，修改themes\yilia\source-src\js\viewer.js

1	let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img):not(.emoji)'))

重新编译主题

1	npm run dist

如何使用❓
可以到这里寻找，比如上面的问号，可以搜question，然后在结果找到你想要的表情，点击复制Shortcodes下面的表情代码使用即可

参考：Hexo中添加emoji表情