自用博客评论表情分享

博主： Zero
发布时间：2018 年 06 月 20 日
46418 次浏览
52 条评论
1316字数
分类：划水日常

Loading...

##前言
最近实在不知道该写些啥了，由于主题的自带表情还是较为缺少，于是我自己添加了一些表情，所以在此分享一下表情添加方法，`持续更新中`
此教程所提供的替换文件仅用于HandSome主题，如其他主题需自己进行修改

##预览

![][1]
![][4]
![][5]
![][6]
![][7]
![][9]

##注意事项
1.尽管表情包我已经全部压缩，但是加起来仍然超过5MB，所以推荐将表情托管至CDN（大带宽土豪忽略2333）
2.当时为了方便添加，大部分表情未进行命名，全部以数字递增，强迫症患者可自行修改（修改好的大佬可以发一份给我，万分感谢！！
3.由于表情较多，需要修改部分主题CSS文件，下面我会写出来，加入到主题后台自定义CSS设置即可

##添加方法
1.下载完文件后你会得到一个`Emoticon.7z`文件
2.将压缩包内的 `OwO.min.js`  `owo.css` 两个文件替换至主题内的同名文件
3.将 `Emoticon` 文件夹上传至你的本地服务器或者CDN上
4.打开压缩包内的`OwO.json`文件，按照下图提示进行修改即可
![][10]
5.OK 到目前为止已经完成了90%了
6.将如下CSS添加至主题CSS文件或者主题后台设置的自定义CSS处
<div class="tip inlineBlock success">

.OwO .OwO-body .OwO-bar {height: 77px;}
.comment-content-true img {max-width: 110px!important;}
.OwO .OwO-body .OwO-items-image .OwO-item {max-width: 100px;}
</div>
7.当你完成了上面一步，那么接下来刷新缓存看看效果吧！

##下载
<button class=" btn m-b-xs btn-success btn-addon" onclick=''><i class="glyphicon glyphicon-download-alt"></i><a href="../../../download/Emoticon.7z">点此下载</a></button>

[1]: https://mikuac.com/usr/uploads/2018/06/2474281428.png
  [4]: https://mikuac.com/usr/uploads/2018/06/3691322025.png
  [5]: https://mikuac.com/usr/uploads/2018/06/3860029833.png
  [6]: https://mikuac.com/usr/uploads/2018/06/1454120225.png
  [7]: https://mikuac.com/usr/uploads/2018/06/2638212924.png
  [9]: https://mikuac.com/usr/uploads/2018/06/2981998083.png
  [10]: https://mikuac.com/usr/uploads/2018/06/951763781.png

最后修改：2020 年 09 月 16 日

© 允许规范转载

如果觉得我的文章对你有用，请随意赞赏

52 条评论

月宅
September 9th, 2018 at 04:48 pm

表情挺棒的，但你这种方式有点复杂，还是推荐弄成 *.jpg 的方式，因为你这个...是手动加进去的相对地址。太麻烦了。
但我还是收藏一发为好。这个似曾相识，好像隔壁diygod的

回复
1. Zero
  September 9th, 2018 at 05:01 pm
  
  @月宅
  
  对呀 OWO是DiyGay的2333，捂脸
  
  回复
2. Zero
  September 9th, 2018 at 04:59 pm
  
  @月宅
  
  从TG和B站扒下来的表情2333
  
  回复
梁Sir
September 8th, 2018 at 11:44 am

添加后点击评论内的表情没有洛天依苏苏 Gayhub后三项且测试评论的时候只有文字不显示表情图片是什么原因呢？

回复
1. Noob
  December 24th, 2018 at 06:56 pm
  
  @梁Sir
  
  我加到自定义css里面不行，所以我选择放在header里面
  
  回复
2. Zero
  September 9th, 2018 at 11:39 am
  
  @梁Sir
  
  不显示图片? 只显示链接吗?把Typecho的评论类型里的img填上
  
  回复
3. Zero
  September 9th, 2018 at 11:36 am
  
  @梁Sir
  
  把文章中提到的那些CSS加入到主题后台设置的自定义CSS中就可以了哦
  
  回复
ssr
August 23rd, 2018 at 04:23 pm

喜欢小电视

回复
star
August 17th, 2018 at 04:21 pm

是我看过最全的了

回复
mikusa
August 2nd, 2018 at 02:58 pm

这么多表情啊

回复
小石博客
August 1st, 2018 at 06:23 pm

有点想试试

回复
蓝爵薇
July 26th, 2018 at 07:20 pm

回复
繁华
July 25th, 2018 at 10:43 pm

该评论仅登录用户及评论双方可见

回复
1. Zero
  July 25th, 2018 at 11:21 pm
  
  @繁华
  
  不好意思，最近在外地，没带电脑，主题的话点击页脚的handsome即可跳转到作者的博客
  
  回复
  1. 繁华
    July 26th, 2018 at 01:55 pm
    
    @Zero
    
    您改的比原作者的好看多了，，，哈哈寻思问问您的卖不卖呢。。。
    
    回复
Levone
July 19th, 2018 at 06:41 pm

回复
秋枫酱
July 9th, 2018 at 08:17 am

@医疗兵

回复
AUK CL
July 2nd, 2018 at 03:55 pm

好多表情包啊！收藏了

回复
1. Zero
  July 2nd, 2018 at 08:11 pm
  
  @AUK CL
  
  嘤
  
  回复
温柔猫
June 30th, 2018 at 06:08 pm

还是这个卡哇伊

回复
广树
June 22nd, 2018 at 10:45 am

喜欢萌狼这堆表情包

回复
1. Zero
  June 22nd, 2018 at 07:37 pm
  
  @广树
  
  回复
清秋暖冬
June 21st, 2018 at 01:24 pm

QQ新版表情包

回复
1. Zero
  June 21st, 2018 at 05:43 pm
  
  @清秋暖冬
  
  回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

22攻略
非常感谢你分享这篇文章，我从中学到了很多新的知识。
i'm Ajie
我是来打招呼的(tidak ° ο °) tidak ada
2BROEAR
ssl过期了
clash免费节点
留个脚印OωO
罗军
感谢分享，赞一个ヾ(≧∇≦*)ゝ

自用博客评论表情分享

Zero • 2018 年 06 月 20 日

Loading...

##前言
最近实在不知道该写些啥了，由于主题的自带表情还是较为缺少，于是我自己添加了一些表情，所以在此分享一下表情添加方法，`持续更新中`
此教程所提供的替换文件仅用于HandSome主题，如其他主题需自己进行修改

##预览

![][1]
![][4]
![][5]
![][6]
![][7]
![][9]

##注意事项
1.尽管表情包我已经全部压缩，但是加起来仍然超过5MB，所以推荐将表情托管至CDN（大带宽土豪忽略2333）
2.当时为了方便添加，大部分表情未进行命名，全部以数字递增，强迫症患者可自行修改（修改好的大佬可以发一份给我，万分感谢！！
3.由于表情较多，需要修改部分主题CSS文件，下面我会写出来，加入到主题后台自定义CSS设置即可

##添加方法
1.下载完文件后你会得到一个`Emoticon.7z`文件
2.将压缩包内的 `OwO.min.js`  `owo.css` 两个文件替换至主题内的同名文件
3.将 `Emoticon` 文件夹上传至你的本地服务器或者CDN上
4.打开压缩包内的`OwO.json`文件，按照下图提示进行修改即可
![][10]
5.OK 到目前为止已经完成了90%了
6.将如下CSS添加至主题CSS文件或者主题后台设置的自定义CSS处
<div class="tip inlineBlock success">

.OwO .OwO-body .OwO-bar {height: 77px;}
.comment-content-true img {max-width: 110px!important;}
.OwO .OwO-body .OwO-items-image .OwO-item {max-width: 100px;}
</div>
7.当你完成了上面一步，那么接下来刷新缓存看看效果吧！

##下载
<button class=" btn m-b-xs btn-success btn-addon" onclick=''><i class="glyphicon glyphicon-download-alt"></i><a href="../../../download/Emoticon.7z">点此下载</a></button>

[1]: https://mikuac.com/usr/uploads/2018/06/2474281428.png
  [4]: https://mikuac.com/usr/uploads/2018/06/3691322025.png
  [5]: https://mikuac.com/usr/uploads/2018/06/3860029833.png
  [6]: https://mikuac.com/usr/uploads/2018/06/1454120225.png
  [7]: https://mikuac.com/usr/uploads/2018/06/2638212924.png
  [9]: https://mikuac.com/usr/uploads/2018/06/2981998083.png
  [10]: https://mikuac.com/usr/uploads/2018/06/951763781.png