Hexo中使用emoji表情

背景

上一篇文章我想在文章中使用emoj来丰富页面,发现Hexo默认的markdown渲染引擎不支持将Github emoji渲染到静态的html页面。我们需要换一个支持emoji的引擎,再增加一个emoji插件即可。

Markdown 引擎安装

命令行如下:

1
2
3
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-**it** --save
npm install markdown-**it**-emoji --save

Markdown 引擎配置

完成插件安装后还需要修改Hexo站点配置文件_config.yml(不是主题配置)

加入下列代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
## markdown 渲染引擎配置,默认是hexo-renderer-marked,这个插件渲染速度更快,且有新特性
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-footnote
- markdown-it-sup
- markdown-it-sub
- markdown-it-abbr
- markdown-it-emoji
anchors:
level: 2
collisionSuffix: 'v'
permalink: false
permalinkClass: header-anchor
permalinkSymbol:

这里需要注意render:下的html:配置项,它的作用是控制Markdown渲染引擎是否转移文档中出现的html标签,默认为false,这里要设置为true,否则会导致<!--more-->渲染失败。

plugins:中的最后一项- markdown-it-emoji是手动添加的,官方Github Wiki中给出的配置不包含这一项,其他配置参照的Github Wiki中的默认配置。

使用方法

输入对应的emoji编码

例如:输入笑脸对应的emoji编码:smile:就可以得到😄

emoji编码合集

可以查阅这篇文章

请我喝杯咖啡吧~

支付宝
微信