hexo整合emoji

发表于 | 更新于: | 分类于 | | 阅读次数:
阅读时长 ≈ 1

想不想让你的博客支持这样的表情？

😄
😃
😏
😟
😑

:smile:
:smiley:
:smirk:
:worried:
:expressionless:

这样

😩
😅
😥
😭
😂

:weary:
:sweat_smile:
:disappointed_relieved:
:sob:
:joy:

还有这样

😱
😠
😤
😎
😈

:scream:
:angry:
:triumph:
:sunglasses:
:smiling_imp:

敲黑板！看这里！！

一共两种方式

第一种（改动markdown渲染模板）

这种方式有问题，改了之后会对渲染文章的时候文章标题点击无效。

安装markdown-it

把原来的hexo渲染换成基于markdown-it的渲染。

1
2
3
4
5
npm un hexo-renderer-marked --save

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

npm install markdown-it-emoji --save

配置hexo的_config.yml文件

在hexo的配置文件下添加markdown-it配置代码：

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  #用emoji插件
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ¶

第二种

在 Hexo 中默认的 markdown 渲染器是 hexo-renderer-marked ，这个渲染器是不支持 emoji 表情的。

安装

1
npm install hexo-filter-github-emojis --save

配置

在主题中添加配置

1
2
3
4
5
6
githubEmojis:
  enable: true
  className: github-emoji
  unicode: false
  styles:
  localEmojis:

finish !!!

0%