经常关注本站的朋友(如果有)可能已经发现了,在评论区多了下面这样一个奇怪的按钮,点开来就会出现这样一个摆满了派对鹦鹉特别简陋的表格:
在把这个表格的CSS终于做完,按钮的位置终于调好了后,这已经是六月份的事了。这四个月五个月做了许多事情,包括调整了UI、把React从bundle里拆出来等等。总之终于可以向大家公布这个开源的表情包嵌入项目——FacePack。
FacePack是一个特别简单的,与后端基本无关的表情显示/输入插件。它显示表情的原理很简单,就是把指定的HTML元素内所有符合预先设定的模板的字符串全部换成<img>标签。而表情是事先通过一个json文件进行定义的。
为什么你该使用FacePack?
- 与后端基本无关,你不需要改动太多你的PHP代码就可以使用
- 轻松地在文章、评论中引入表情包
表情包定义文件
[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)做出以下修改:
- 使用wp_enqueue_script()载入脚本
- 准备一个唤出选择器的按钮
另外,本站的FacePack selector蹭了我们用的主题Blocksy的样式。实际部署的时候会发现其实很难看(dbqdbq:yukicat.肥肥:)所以朋友们可以自己写一下CSS。以后会改的吧
项目使用GPLv3协议开源。如果有任何问题可以前往仓库发起issue(最好能去!)或在下方评论。
有人用的话就有动力完善了吧
Enjoy~:yukicat.catshake:
感谢
本站中的部分表情包与本文特色图像来源于CultOfPartyParrots
Comments 3 条评论
博主 雪
:yukicat.catshake:异步邮件お願い
博主 kotorik
@雪 触れた:parrots.backward:
博主 青山1
:parrots.backward:哈哈挺可爱的,我以为是鸽子,用来催你更文的