hexo博客添加emoji表情（转载）

2019-06-07

一直以来觉得单调的文字博客缺少着一点生机和活力，在这个表情包横行的世界里，只有生动的表情才能展现自己文字背后的感情，虽然我可以在文章中添加图片表情包，但是挑选并上传图片总是一件麻烦事，还不一定能够找到符合心境的合适表情，若是发颜文字比如(￣へ￣)或者是(≧∇≦)/等等，遇到换行就很尴尬了，因此需要添加emoji表情比如😕😝。原博客链接：Hexo中添加emoji表情

由于markdown 渲染引擎的问题，exo默认是采用hexo-renderer-marked,这个渲染器不支持插件扩展，因此也不支持emoji解析，还有一个支持插件扩展的是 hexo-renderer-markdown-it，这个支持插件配置，可以使用markwon-it-emoji 插件来支持emoji。需要将原来的 marked 渲染器换成 markdown-it渲染器。所以我们可以使用这个渲染引擎来支持emoji表情。

相关链接：

hexo-renderer-marked hexo-renderer-markdown-it markwon-it-emoji

安装过程

安装新的渲染器

首先进入博客目录，卸载hexo默认的marked渲染器，安装markdown-it渲染器，运行的命令如：

1
2
3

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

之后安装 markdown-it-emoji 插件 😃 ：

1 2	$ npm install markdown-it-emoji --save

据说hexo-renderer-markdown-it的速度要比 Hexo 原装插件要快，而且功能更多：

Main Features:

Support for Markdown, GFM and CommonMark

Extensive configuration

Faster than the default renderer | hexo-renderer-marked

Safe ID for headings

Anchors for headings with ID

Footnotes

编辑站点配置文件

这里的站点配置文件是指位于博客根目录下的 _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.
    permalink: false  
    permalinkClass: header-anchor
    # The symbol used to make the permalink
    permalinkSymbol: ¶

上面的是hexo-renderer-markdown-it的所有选项的配置，详细的每一项配置说明，需要到Advanced Configuration中查看。

注意要在plugins:选项中加上- markdown-it-emoji ，即加上emoji插件。

使用方法

在Emoji中找到你想要的表情，然后点击即可复制。
比如你想发一个笑脸 😄 直接输入笑脸对应的 emoji 编码 :smile: 就可以。

让我们emoji表情里尽情耍一耍~~~~🐰 🐨 🐸 🐞 🐾 😄 💙✈️👶🐤🎈🐻🌵👯😰🍂💋🎃🐙😊😇🙂🙃😉😀😃😄😁😆😅😂🤣☺️😌😍🥰😘😗😙😚😋😛😝😜🤪🤨🧐🤓😎🤩🥳😏😒😞😔😟😕🙁☹️😣😖😫😩🥱🥺😢😭😤😠😡🤬🤯😳🥵🥶😱😨😰😥😓🤗🤔🤭🤫🤥😶😐😑😬🙄😯😦😧😮😲😴🤤😪😵🤐🥴🤢🤮🤧😷🤒🤕🤑🤠