FacePack:在博客中用表情包罢

经常关注本站的朋友（如果有）可能已经发现了，在评论区多了下面这样一个奇怪的按钮,点开来就会出现这样一个摆满了派对鹦鹉特别简陋的表格:

在把这个表格的CSS终于做完，按钮的位置终于调好了后，这已经是六月份的事了。这四个月五个月做了许多事情，包括调整了UI、把React从bundle里拆出来等等。总之终于可以向大家公布这个开源的表情包嵌入项目——FacePack。

FacePack是一个特别简单的，与后端基本无关的表情显示/输入插件。它显示表情的原理很简单，就是把指定的HTML元素内所有符合预先设定的模板的字符串全部换成<img>标签。而表情是事先通过一个json文件进行定义的。

为什么你该使用FacePack？

1. 与后端基本无关，你不需要改动太多你的PHP代码就可以使用
2. 轻松地在文章、评论中引入表情包

表情包定义文件

[code lang="json"][/*包含表情包的数组*/ { "id": "parrots",/*表情包的唯一标识，用于生成与替换模板字符串*/ "name": "鹦鹉派对",/*表情包的名字*/ "p_url": "https://cdn.jsdelivr.net/gh/jmhobbs/cultofthepartyparrot.com/parrots/", "default": "{p_url}hd/{id}parrot.gif",/*没有url字段的表情会使用default的模板在加载时自动生成url字段*/ "faces": [/*包含每个表情的定义*/ { "id": "60fps"/*表情的唯一标识*/ },{ "id": "birthday", "url": "{p_url}hd/{id}partyparrot.gif"/*表情的图像文件的url*/ },{ "id": "wtm惊讶", "url": "https://image.yukicat.net/2020/08/20200830071200300.gif" }] } ][/code]

完整的文件定义可以参考相关源代码，你也可以参考本站使用的定义文件做出修改。

部署方法

UMD

以后可能会加入

npm包

要使用npm包的方式部署FacePack，你需要对Javascript已经有了一定的了解，并能较熟练地使用npm、Yarn这样的包管理器。

在创建了你自己的npm项目后，使用下列方式引入

npm:

[code lang="bash"]npm i --save https://github.com/YukiCat-Dev/FacePack.git[/code]

Yarn:

[code lang="bash"]yarn add https://github.com/YukiCat-Dev/FacePack.git[/code]

你可以参照deploy-display.js、deploy-selector.js，修改selector与编写适用于你的站点的部署脚本。关于这两个脚本是什么会在下一节说明。

本站目前就是采取npm包的形式引入。对于有许多自定义脚本的网站，建议采取npm包的方式，提取公共模块（本站就把React从包中拆了出来，古腾堡会引用一份React），对于客户端加载速度有一定的优化。

直接修改部署脚本

你也可以直接fork FacePack的Github仓库，修改src下的deploy-display.js、deploy-selector.js，并使用jsDelivr引入到你的网站。

deploy-display是显示表情的脚本，deploy-selector是显示表情输入选择器（上面那个截图是n个版本前的）的脚本。

在修改deploy-display时，你要关注的是document.querySelectorAll()的参数。这一参数决定了哪些元素中的表情包模板字符串会被替换。你可以使用开发人员工具方便地获取对应的selector path。通过更改这一参数你可以同时替换博文和评论里的所有表情包。

在修改deploy-selector时，你要关注的是new FaceSelectorDeployer()的参数中popcorn这个字段，你需要把它改成唤出选择器的按钮的引用。还有一个是commentArea，这个要改成你的评论区的元素引用，FacePack会使用这个引用实现输入表情。

两个文件共同有一个需要关注的点：importExternalFacePacks()。这个函数会自动下载并加载表情包定义文件。当然你可以继续使用里面已经有的值，它导向本站的表情包定义文件。

当然，将仓库clone到本地，修改后把文件传到你的服务器上也是可以的。

[code lang="bash"]git clone https://github.com/YukiCat-Dev/FacePack.git[/code]

最后

无论你最后选择了哪种引入方式，你都需要在你的主题的评论页面(一般是comment.php)做出以下修改：

1. 使用wp_enqueue_script()载入脚本
2. 准备一个唤出选择器的按钮

另外，本站的FacePack selector蹭了我们用的主题Blocksy的样式。实际部署的时候会发现其实很难看（dbqdbq:yukicat.肥肥:）所以朋友们可以自己写一下CSS。以后会改的吧

项目使用GPLv3协议开源。如果有任何问题可以前往仓库发起issue（最好能去！）或在下方评论。

有人用的话就有动力完善了吧

Enjoy~:yukicat.catshake:

感谢

本站中的部分表情包与本文特色图像来源于CultOfPartyParrots