Hexo博客正文嵌入QQ表情

     在迁移以前CSDN的文章到Hexo时,发现CSDN文章一个比较好玩的东东就是可以在内容中加入QQ表情,于是想弄到Hexo里面。

方案一

     一开始想到的做法是把QQ表情下载下来,上传到七牛,然后用Markdown插入图片功能插入图片。

     由于`Markdown`插入图片不支持调整图片显示大小,QQ表情图片大于行高,预览的时候就被pass掉。      想到`Markdown`支持原生`html`语法,于是就想用`html`的`img标签`插入图片,调整一下显示大小。编辑预览时发现显示挺正常的,如下图所示:      可是在网页里预览却令人大跌眼镜,这是个什么鬼:      而且网页里,这个表情点击后还可以弹出来预览,真是画蛇添足。

     看了一下生成后网页的源代码,如下:

     估计是Fancybox搞的鬼,它对html格式img标签做了什么处理吧,这种简单的做法在Hexo里不可取,只能另寻方案!

     还好以前接触过一点点css,稍微懂得一点点,可以用background:url(xxx)的方式将图片作为标签文字的背景嵌入,这样表情就不能点击。

方案二

     首先想到的是a标签,于是自定义了几个样式,用于不同的QQ表情,分别引用不同的表情url。(Hexo主题自定义css样式,见文末)

1
2
3
4
5
#自定义CSS
a.qqangry {background:url(https://lxzh.oss-cn-hangzhou.aliyuncs.com/qqimg/angry.gif) no-repeat center center;background-size:90%;}
a.qqawkward {background:url(https://lxzh.oss-cn-hangzhou.aliyuncs.com/qqimg/awkward.gif) no-repeat center center;background-size:90%;}
a.qqcry {background:url(https://lxzh.oss-cn-hangzhou.aliyuncs.com/qqimg/cry.gif) no-repeat center center;background-size:90%;}
a.qqcurse {background:url(https://lxzh.oss-cn-hangzhou.aliyuncs.com/qqimg/curse.gif) no-repeat center center;background-size:90%;}
1
2
3
#Markdown正文中引入a标签插入表情
生气表情前面的文字<a class="qqangry">&ensp; &ensp;</a>表情后面的文字
哭泣表情前面的文字<a class="qqcry">&ensp; &ensp;</a>表情后面的文字

     网页预览一下,貌似还可以,如下图:

      注:上图中使用了两个空格占位符,不然表情没法显示(PS:没有更好的办法,如有大神,请不吝指导一下),本文中段落首行缩进也是用了三个空格占位符&ensp; &ensp; &ensp;
     不过,看着总觉得有点怪怪的,文字下面那一横线看着有点不爽,怎么把它去掉呢?

方案三

     想到几年前自己复制hao123网址大全自己做了一个个人导航网页,如下每个文字前面的图标,用到的是i标签实现的:

     于是,尝试将方案二中的a标签换成i标签

1
2
3
4
5
#自定义CSS
i.qqangry {background:url(https://lxzh.oss-cn-hangzhou.aliyuncs.com/qqimg/angry.gif) no-repeat center center;background-size:90%;}
i.qqawkward {background:url(https://lxzh.oss-cn-hangzhou.aliyuncs.com/qqimg/awkward.gif) no-repeat center center;background-size:90%;}
i.qqcry {background:url(https://lxzh.oss-cn-hangzhou.aliyuncs.com/qqimg/cry.gif) no-repeat center center;background-size:90%;}
i.qqcurse {background:url(https://lxzh.oss-cn-hangzhou.aliyuncs.com/qqimg/curse.gif) no-repeat center center;background-size:90%;}
1
2
3
#Markdown正文中引入i标签插入表情
生气表情前面的文字<i class="qqangry">&ensp; &ensp;</i>表情后面的文字
哭泣表情前面的文字<i class="qqcry">&ensp; &ensp;</i>表情后面的文字

     效果如下:
生气表情前面的文字   表情后面的文字
哭泣表情前面的文字   表情后面的文字
     那讨厌的横线终于没了,大功告成!!!   

附一:Hexo主题自定义CSS样式

     这里有篇文章讲得比较详细,我简单重复啰嗦一下。
     本博用的是HexoNexT-Mist主题,找到博客themes\next\source\css目录下的main.styl文件,在文末加入一行@import "_myCss/myCss";,然后在css目录下新建一个_myCss目录,并新建一个文本文件,保存为myCss.styl文件,编辑该文件即可自定义各种css样式啦,祝使用愉快~   

附二:QQ表情排队集合