让 Hexo NexT 支持 emoji 表情

发表于 更新于 分类于

将 markdown 转化为 html 的转化器叫做 markdown 渲染器。

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

在 NexT 的 issue 上有推荐使用 hexo-tag-emojis 这个插件来支持 emoji 表情，但可惜的是这个插件已经不再维护，已经不支持 Hexo v3+ 了。还好在 Hexo 的 plugins 页，我们找到了另外一个 emoji 插件 hexo-filter-github-emojis。

下面我们就来实现 Hexo NexT 对 emoji 的支持。

Version

Hexo 3.3.9
NexT 5.1.2

安装

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

配置

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

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

具体的每个配置项含义可以看插件的文档。

基本使用

  1. 在 Emoji Cheat Sheet 中找到你想要的表情，然后点击即可复制。
  2. 使用方法和 GitHub 一样，比如你想发一个笑脸 😊 直接输入笑脸对应的 emoji 编码 :smile： 就可以。
  3. 默认配置下是使用图片表情，如果需要使用 Unicode 表情，可以将上面配置中的 unicode 设置为 true，就会渲染如 😄 😏 😌

兼容 Hexo NexT 处理

hexo NexT 使用 FancyBox 这个图片插件，在 themes/next/source/js/src/utils.js 中：

看红框中的代码可以知道在文章中 img 标签没有被 a 标签包含时，会加上 a 标签，所以在渲染 emoji 表情时，会被自动加上 a 标签。

这样就导致渲染错误。我们修改 themes/next/layout/_partials/head.swig：

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
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 注意看 CONFIG.emojis.className 那一行，其他未动
$('.content img')
  .not('[hidden]')
  .not('.group-picture img, .post-gallery img, img.' + CONFIG.emojis.className)
  .each(function () {
    var $image = $(this);
    var imageTitle = $image.attr('title');
    var $imageWrapLink = $image.parent('a');

    if ($imageWrapLink.size() < 1) {
        var imageLink = ($image.attr('data-original')) ? this.getAttribute('data-original') : this.getAttribute('src');
      $imageWrapLink = $image.wrap('<a href="' + imageLink + '"></a>').parent('a');
    }

    $imageWrapLink.addClass('fancybox fancybox.image');
    $imageWrapLink.attr('rel', 'group');

    if (imageTitle) {
      $imageWrapLink.append('<p class="image-caption">' + imageTitle + '</p>');

      //make sure img title tag will show correctly in fancybox
      $imageWrapLink.attr('title', imageTitle);
    }
  });

$('.fancybox').fancybox({
  helpers: {
    overlay: {
      locked: false
    }
  }
});

这样修改完就全部显示正常了。

最后一点点改进

图片 emoji 表情的高宽都是固定设定为 20，看起来太小了，所以我们需要自定义一下样式，但是自定义样式出现一个问题。

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

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

我们看到 className 的值为 github-emoji，这个值是在渲染 emoji 图片表情时，img 标签上的 class，如：

1
<img class="github-emoji" title="smile" alt="smile" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f604.png?v7" height="20" width="20">

这个值是可以动态配置的，所以我们写样式的就必须动态的去获取 className 的值。

我们需要在 themes/next/source/css/_variables/base.styl 定义一个变量去获取 className 的值，*.styl 文件是使用 hexo-renderer-stylus 插件，这个插件只有 hexo-config 这个方法去获取 主题配置文件 中的值，但是我们的 className 是写在 站点配置文件 中，是没办法获取到的。

还好在这个 issue 有说到一个解决办法，所以我们替换 hexo-renderer-stylus 插件 ：

1
2
$ npm un hexo-renderer-stylus --save
$ npm i hexo-renderer-stylus-plus --save

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

1
2
3
4
5
6
7
8
9
// 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;
}

现在一切完美了。Enjoy it！✨