如何让Hexo博客支持emoji显示

我们知道Hexo博客默认的markdown渲染引擎hexo-renderer-marked是不支持emoji渲染的，如果hexo博客需要支持emoji，我们需要更换其markdown渲染引擎为hexo-renderer-markdown-it，然后安装markdown-it-emoji插件，最后更改站点的markdown配置即可。

步骤

首先卸载hexo-renderer-marked，一定要卸载，不然hexo还是会默认选择这个作为markdown渲染引擎，如果卸载报错，删除package.json中hexo-renderer-marked这一行然后删除node_module重新安装依赖就好啦

1	npm un hexo-renderer-marked -S

安装hexo-renderer-markdown-it和markdown-it-emoji

1	npm i hexo-renderer-markdown-it markdown-it-emoji -S

更改站点的markdown配置，注意是根目录里站点的配置而不是主题设置哦

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
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ''

至此就大工告成啦，来试试！🐯 🎉

同时支持如emoji编码编译如:tiger:这种，以及输入法带的emoji表情两种编译哦！

补充：踩坑记录

在做这个emoji支持设置的时候，也看了好几个网上的文章，都是这样写的配置：

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: true
    permalinkClass: header-anchor
    permalinkSymbol: ¶

注意最后一行permalinkSymbol的设置，经过我的摸索后，发现这个是设置anchors锚点，即文章的TOC目录展现的锚点链接标志，如果按这样设置，会发现你的目录长这样：

链接前面加上了这个很丑的标志，我很好奇为什么那么多博文为什么都这样写，我就不信这个邪，没有写上面anchors锚点相关配置试了试，发现跑起来，好多文章都页面空白并报错：

看来是不能删除这个配置了，可是又不想看到这个丑陋的标志，于是我试了下设置permalinkSymbol: ''，即设置他为空，发现成功跑起来并正确渲染无报错啦（正如本文所示）！

再补充：hexo-renderer-markdown-it介绍

hexo-renderer-markdown-it是一款用于 Markdown 解析和渲染的插件，最大的几个特性如下

用于替换 Hexo 默认自带的 Markdown 渲染器（比hexo-renderer-marked更快）。
提供了更丰富的 Markdown 解析和渲染。
提供数学公式Latex支持
支持上标^sup，下标_sub

在浏览器官方Git仓库的时候我发现官方教程配置：

这里就用了¶这个符号，难怪这么多博文都用了这个丑陋的符号，这锅得官方背呀！😂 😂