Hexo使用emoji表情

本文章不对emoji的使用做太深入的研究，因为在写文章上是一个不太必要的需求，也是一个鲜少使用的东西，总之能用就行。

如何使用

直接给出结论：

1. 将表情符号复制并粘贴到Markdown格式的文本中 推荐
2. 直接使用表情符号的Unicode编码，格式：&#x[Unicode编码];
   例如，😊的 Unicode 编码是 U+1F60A —— 对应的 HTML 实体编码是 😊
   直接在md文件的文本内容里面输入HTML实体编码即可😊😊

Tip1: 如果您使用的是静态网站生成器，请确保将HTML页面编码为UTF-8。
Tip2: 千万不要去折腾什么插件了！不需要插件！没错，就是我折腾了好久卸载了

• 附上可供使用的工具：
  Windows 10周年更新内置的 Emoji键盘 win + .快捷键唤出 推荐👍

  在线工具-Emoji表情符号(可搜索)：https://www.toolhelper.cn/Encoding/Emoji 推荐

  最推荐，附有表情说明，及其Unicode编码

  Emoji大全(可搜索)：https://emoji6.com/emojiall/ 推荐

  可备用

  EMOJI中文网(可搜索)：https://www.emojiall.com/zh-hans

  速度有点慢，东西也太多了，不太好用

• Markdown 官方教程 - Markdown 使用 Emoji 表情

  发现MD还有官网，官方教程中有提到复制粘贴的方法

原理

因为emoji表情符号也是Unicode字符的一种。

1. Markdown文件显示的原理
   像 VSCode 中通过插件预览 Markdown 文件的功能，以及其他类似的 Markdown 预览功能，通常也是通过 Markdown 渲染引擎生成的 HTML 页面来实现的。

2. emoji正常显示的原理
   Markdown本身对于文本中的普通Unicode字符都有很好的支持，包括表情符号。
   所以在Markdown文本中，你可以直接使用表情符号的Unicode编码，或者直接复制粘贴表情符号，当 Markdown 文件被渲染时，渲染引擎会将表情符号正确地转换为对应的图像，并在最终生成的 HTML 页面中显示出来。
   通常情况下，Markdown 渲染引擎会将表情符号识别为 Unicode 字符，就像对待普通的文本文字一样，并不会对其做什么处理。这和直接在 HTML 页面中使用表情符号是一样的效果。

3. Hexo渲染的HTML页面显示emoji
   Hexo依赖于 hexo-renderer-marked 渲染引擎来解析 Markdown 文本，和vscode中预览是一样的原理，只是使用的渲染器不同而已

hexo中使用emoji的问题

因为之前从未在md使用过emoji，突然有想要使用的念头，于是在不太了解的情况下试图找到方法。于是导致产生了一系列的问题。

1. 误解
   由于一些误解性的信息导向，以至于我一度以为Hexo不支持使用emoji

   • vscode的Markdown Preview Enhanced插件是支持emoji的

   • 在搜索引擎搜索，hexo中使用emoji表情，很多都是这样说：

     • Hexo 默认的 Markdown 渲染器是 hexo-renderer-marked，这个渲染器不支持 emoji 表情。
     • Hexo 默认的 markdown 渲染引擎不支持将 Github emoji 渲染到静态的 html 页面中

     然后教你安装 hexo-filter-github-emojis 插件，并启用配置

   但是，他们几乎都是在说 使用 表情符号简码 的方式来 在Hexo中使用Emoji

   表情符号简码，通过键入表情符号短代码来插入表情符号，如：:smile:、:punch:

2. 配置并使用 hexo-filter-github-emojis 插件
   在参考了这三篇文章之后，卸载了原渲染器插件，安装了hexo-renderer-markdown-it并添加了如下配置：

   参考文章 文章1 - 22.8、文章2 - 23.10、文章3 - 21.8
   文章2的苏苏的小屋博客做的不错，不过有点花过头了XD

   # Markdown-it config
   ## markdown 渲染引擎配置，默认是hexo-renderer-marked，这个插件渲染速度更快，且有新特性
   ## 因为不能支持原来的全局资源文件夹，引用图片，没找到解决的方法，故不使用，还是原配好啊
   ## 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

   然后发现，博客上发布的文章基本没有什么变化，样式上渲染的算是接受度很好，我一度想着会不会样式会变的太大，还得花事件去修整，这里算是放了大心。
   再然后，我发现页面上的图片引用都失效了！！！

3. 图片引用的问题
   似乎是更换的插件不支持全局资源文件夹引用，但是又因为文章的链接索引有日期在，想要通过相对路径引用到就需要好多../，如果每次都要这么干绝对受不了，且一定会有更好的办法
   然后各种搜索，各种尝试，下载了好几个插件，设置什么的，但是都没有解决这个问题。
   折腾许久未果，果断卸载了hexo-filter-github-emojis 插件，重装回原来的hexo-renderer-marked插件
   于是，问题又变回了：如何使用emoji的问题

   期间想到了也许可以通过使用base64来解决这个问题，因为图片是可以转成base64格式的字符串的，那么emoji应该也可以，那么有没有一些在线，将emoji及其base64格式的字符整理的网页呢？

   但是搜索并没有找到什么现有可用的一些这样的东西，甚至找不到相关的文章

   github还真有这样一个项目！base64-emoji

   不过后来知道了，才知道，emoji本身其实是一种unicode字符，并不是图片，所以并不应该转换成base64，而是可以直接使用的，也许因此才没有相关文章。

   不过一些表情包，emoji就是图片，也是因此才会更加误以为emoji其实也是一些小图片吧(如搜狗输入法上自带的，有的还是存在C盘哪里的？忘记了。才发现搜狗如果输入一些关键字，就会出现对应的emoji，选择它会把图片放到md的同目录下，并添加到md上)

   最后，在各种尝试下，终于得出了使用emoji的方法，也即是文章开头的方法

• 那么问题来了，在html页面如何使用emoji表情？js如何使用emoji？ 参考一篇文章

附录

hexo全局资源文件夹引用

![img](/images/vue/组件生命周期.png)
该格式会被渲染器解析为img元素渲染到页面上
[]里的值会被解析为img元素的alt属性，即如果找不到图片会显示为img这个字符串
()里的则会解析为img元素的src属性

表情符号简码

对于表情符号，GitHub Markdown支持使用特定的简码来直接显示表情。当你在Markdown文本中使用表情符号的简码时，GitHub会自动将其解析并替换为对应的表情符号图像，从而在文档中显示出来。

这种自动替换是GitHub的一个特性，使得Markdown文本中的表情符号可以直观地显示出来，增强了文档的可读性和趣味性。