Hexo添加emoji表情

发表于 | 分类于 | 字数统计: 421 字 | 阅读时长 ≈ 2分钟

废话不多说，直接动手干吧。 具体表情参考 GFM 表情列表 😜

安装

1
2
3
npm install hexo-filter-github-emojis --save
npm un hexo-renderer-stylus --save
npm i hexo-renderer-stylus-plus --save

打开 站点配置文件，添加以下内容

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

解决渲染错误问题

  • 修改 themes/next/layout/_partials/head.swig, 解决渲染错误问题，渲染 emoji 表情时会被自动加上 a 标签
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <script type="text/javascript" id="hexo.configurations">
      var NexT = window.NexT || {};
      var CONFIG = {
        root: '{{ theme.root }}',
        scheme: '{{ theme.scheme }}',
        sidebar: {{ theme.sidebar | json_encode }},
        fancybox: {{ theme.fancybox }},
        tabs: {{ theme.tabs.enable }},
        motion: {{ theme.use_motion }},
        duoshuo: {
          userId: '{{ theme.duoshuo_info.user_id | default() }}',
          author: '{{ theme.duoshuo_info.admin_nickname | default(__('author'))}}'
        },
        algolia: {
          applicationID: '{{ theme.algolia.applicationID }}',
          apiKey: '{{ theme.algolia.apiKey }}',
          indexName: '{{ theme.algolia.indexName }}',
          hits: {{ theme.algolia_search.hits | json_encode }},
          labels: {{ theme.algolia_search.labels | json_encode }}
        },
        *{# ↓ 在这里修改，其他未动 ↓ #}
        {# 添加 emojis 参数 #}
        emojis: {
          className: '{{ config.githubEmojis.className | default('github-emoji') }}'
        }*
      };
    </script>
  • 修改 themes/next/source/js/src/utils.js
    1
    2
    3
    4
    5
    6
    // 注意看 CONFIG.emojis.className 那一行，其他未动
    $('.content img')
      .not('[hidden]')
      .not('.group-picture img, .post-gallery img, *img.' + CONFIG.emojis.className*)
      .each(function () {
      ……

自定义emoji 样式

在 站点配置文件 中，我们配置：

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

在 themes/next/source/css/_variables/base.styl 中使用 hexo-site-config 方法获取 站点配置文件 中的值，我们添加

1
2
3
4
5
6
7
8
// Github emojis class name
// --------------------------------------------------
get_emoji_class() {
  emoji_class = hexo-site-config('githubEmojis.className')
  return emoji_class ? emoji_class : 'github-emoji'
}

$github-emojis-class-name   = get_emoji_class()

最后在自定义样式文件 themes/next/source/css/_custom/custom.styl 中添加：

1
2
3
4
5
6
7
img.{$github-emojis-class-name} {
  display: inline;
  height: 1.7em;
  width: 1.7em;
  vertical-align: -0.4em;
  border: none !important;
}

到这里就可以啦。🍀