鬼才方法实现hexo自定义emoji+自定义插件

发表于 | 更新于 | 分类于
本文字数： 3.2k | 阅读时长 ≈ 7 分钟 | 评论数：

　　:-cmx-01-: :-cmx-00-: :-cmx-pop-: :-cmx-pipi-: :-cmx-elpt-: :-cmx-stbr-:
　　如你所见，现在我的blog已经可以插入站娘表情包了:-cmx-doge-:虽然实现方法非常鬼才……但是以我现在的水平实在找不到更好的办法了x
　　以及半夜回访了一下留言板里的几个新面孔忍不住发出如下吐槽：
　　别人的什么都不会：
　　JS基本不了解，但是熟悉×××与○○○的连接，会基本的△△△，简单接触过□□□。
　　我的什么都不会：
　　json是JavaScript的儿子吗？:-cmx-05-:


.+†+.

　　JS和css文件右键审查都能看到，输入emoji的方式和长毛象不太一样，因为用空格+冒号的方式很容易和其它html代码以及盘古之白冲突……【我就直说了吧，主要是和盘古之白冲突=-=，所以暂时决定为：

1
:-emoji-:

　　这么去掉空格之后还可以实现emoji连发……当然问题也很多就是了……

已知bug

　　首先和next主题用的swig标签一样，不可以在行内元素中使用，包括: -和- :都不行，会被识别成emoji标签，如果要用的话需要在中间加一个空格，但是不至于导致整个渲染程序崩溃，顶多是渲染出一堆奇怪的字符和空格而已。
　　另外为了浏览美观我在生成的span前后都加了空格，而span的内容是空的，复制的时候连续的emoji就会变成一大串连续的空格，这个我暂时也没有什么好办法【
　　但是你开了盘古之白的话连续emoji之间的空格似乎会被精简到一个，具体原理我也不太清楚 :-cmx-05-:
　　还有就是emoji目前只能应用在p元素，列表和center这些元素尚不支持，等性能稳定之后再考虑扩展应用范围吧。

实现方法

　　真的很鬼才【
　　本来是试图用JS截取分隔符之内的字符串，然后逐个生成span，最后将span的文本内容转化为span的id，再根据ID修改span的背景图片。
　　结果第一步就卡住了……不是对象未定义就是函数不存在，然后我怀疑谷歌出来的那几个正则可能也有点问题。一怒之下我直接把标签开头用正则替换成<span class="co5emoji" id="，标签结尾替换成"></span>，试图让标签之间输入的内容直接被识别成html元素的ID……
　　然后它居然成功了！！！:-cmx-05-: 我一时竟不知道用什么词语来形容我的心情，只能我说可真nm是个前端鬼才啊【贬义
　　然而怎么完成的不重要，能跑就行，能跑就行，能跑就行。
　　然后就是用id逐个设定背景图片，这个很简单啦【应该可以用JS实现自动化一下？

优化方案（咕咕中

使用JS完成自动化css样式设定

　　因为id是直接手动写入的，在json里写emoji list似乎没什么意义了……不知道有没有能直接获得元素的id然后把id写入到文件名里的方法。
　　emmmm，先用classname批量获取元素，然后再把url设置成x.Id+.png，最后用x.style设定背景图片【或者直接新写一个img进去？
　　听起来似乎可行，等我明天努力一下好了x

使用中文标点解决识别错误的问题

　　行内代码块里一般不会出现中文标点，如果用中文标点来作为特征标签的话应该可以解决大部分识别错误的问题，但是源码写出来可能就不太好看了？
　　兼顾美观与输入便利，暂定为【 -和- 】吧。【希望盘古之白不要自己给我的标签中间加上空格emmmmmmmmm

写一套彩色字体

　　想来想去这似乎是最简单的方法了。不用考虑JS代码，只需要在font-family前面加上我自定义的字体就行，貌似font awsome用的也是这种方案？不过更新emoji库可能会有些麻烦的样子。
　　还有自定义字体插入的符号应该要用svg吧，AI真的好难用啊——

支持大号表情

　　想把小白人表情也引进一下，1.5em的大小好像就不太够用了，另外就是目前emoji span的尺寸都是
1.5em×1.5em的正方形。计划新设计一种标签来写入大号和特殊尺寸的表情，应该就需要用JS进一步识别span的内容然后写入img标签了。
　　那么这个功能……等我实现了css自动化再说吧 :-cmx-doge-:

自定义插件

　　写代码真的好可怕啊我现在一边打字一边往键盘上掉头发……
　　讲真我现在有点后悔拉黑了微博上那个找我来卖护颈仪的……

　　在主题/source/lib下新建一个文件夹，我的是co5emoji，然后再新建一个dist文件夹，把你的JS代码和css文件扔进去。如果需要引用图片的话需要在dist文件夹里再新建一个img文件夹。
　　好嘛这个其实没什么好说的……主要是next的layout比较看不懂OTL

Next layout

　　layout部分参考了自带的盘古之白，生效的位置也是一样的。
　　在layout/_custom文件夹里新建co5emoji.swig文件，然后写入以下内容：

1
2
3
4
5
6
{% if theme.co5emoji %}	//设置变量名
  {% set co5emoji_js = url_for(theme.vendors._internal + '/co5emoji/dist/co5emoji.js')%}	//设置js文件的引用地址
  {% set co5emoji_css = url_for(theme.vendors._internal + '/co5emoji/dist/styl.css')%}	//设置css文件的引用地址
  <script src="{{ co5emoji_js }}"></script>	//引用JS文件
  <link rel="stylesheet" type="text/css" href="{{ co5emoji_css }}">	//引用css文件
{% endif %}

　　如果你的自定义插件也和我一样是JS+css的形式的话，只要把co5emoji和styl.css替换成你自己的文件名就好。
　　还有记得去掉注释……swig的注释貌似不是这个格式，肯定会报错【

　　然后在主layout的底部加上：

1
{% include '_custom/co5emoji.swig' %}

　　或者你只需要在博客正文和主页中生效的话，把include标签插入到post.swig和index.swig里就好了，不清楚具体位置的话，可以参考我之前写的盘古之白调教日记【。

　　最后在next/_config.yml里加上一行co5emoji: true即可（改成你刚才自己在swig里写的变量名），如果不知道加在哪儿，还是直接搜索盘古之白在底下另起一行就好。不过要注意的是应该加在第一个搜索结果的前面，后面的几个似乎是自定义变量还是别的什么，注释里写了不要乱动，所以还是不要加在底下了_(:3」∠)_
　　设置完毕之后应该是需要hexo clean重新生成一下才会显示，但是JS文件和css文件是可以即时生成的，只要刷新浏览器即可。

　　总觉得看的代码多了以后笔记这种东西似乎越写越简单了【希望我某天爬坑回来还能看得懂我写了什么 :-cmx-05-: