自用博客评论表情分享

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

##前言
最近实在不知道该写些啥了，由于主题的自带表情还是较为缺少，于是我自己添加了一些表情，所以在此分享一下表情添加方法，`持续更新中`
此教程所提供的替换文件仅用于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 日

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

51 条评论

子豪
January 19th, 2022 at 08:48 pm

死伤过半(ó﹏ò｡)

回复
dbz
September 24th, 2020 at 07:49 am

404啦~

回复
dbz
September 24th, 2020 at 07:49 am

404啦~

回复
於季
September 22nd, 2019 at 07:29 pm

::(无语) 链接失效了...

回复
小柒
August 26th, 2019 at 04:13 pm

回复
萧小七
February 28th, 2019 at 05:19 pm

留名！

回复
Noob
December 24th, 2018 at 04:33 pm

博主，我的好像出问题了

回复
1. Zero
  December 24th, 2018 at 04:37 pm
  
  @Noob
  
  修改这条CSS .comment-content-true img {max-width: 110px!important;}
  
  回复
  1. Noob
    December 24th, 2018 at 04:42 pm
    
    @Zero
    
    谢博主
    
    回复
Noob
December 24th, 2018 at 03:53 pm

是不是markdown不支持标签啊

回复
Noob
December 24th, 2018 at 03:49 pm

博主，我添加了，评论的时候表情加载不出来

回复
1. Zero
  December 24th, 2018 at 03:52 pm
  
  @Noob
  
  typecho后台-设置-评论允许img标签即可
  
  回复
  1. Noob
    December 24th, 2018 at 03:55 pm
    
    @Zero
    
    卧槽，折腾了我三天，感觉自己好傻逼
    
    回复
TEst
December 24th, 2018 at 03:47 pm

回复
yama
December 15th, 2018 at 04:43 am

还是喜欢小电视喵喵抱走加收藏

回复
1. Zero
  December 15th, 2018 at 07:20 pm
  
  @yama
  
  回复
森七
November 25th, 2018 at 12:28 am

要是有呆毛的岂不是

回复
mumu
November 20th, 2018 at 01:34 pm

ok

回复
randolfz
November 12th, 2018 at 08:58 pm

大爱博主，救救我，呜呜呜

回复
1. Zero
  November 13th, 2018 at 12:54 pm
  
  @randolfz
  
  得改css鸭~
  
  回复
  1. randolfz
    November 15th, 2018 at 08:44 am
    
    @Zero
    
    层级太多了，被我改的面目全非，绝望，
    
    回复
randolfz
November 12th, 2018 at 08:57 pm

我看博主说不知道写什么了，那么，能不能出个教程拯救一下菜鸟，关闭盒子模式下如何设置背景呢，绝望

回复
randolz
November 11th, 2018 at 10:40 pm

好可爱

回复
1. Zero
  November 11th, 2018 at 10:41 pm
  
  @randolz
  
  回复
Lingki_Chin
October 14th, 2018 at 05:52 am

等着有空拿来玩玩，顺便改一些

回复
Vapaus
September 24th, 2018 at 06:57 pm

好东西，可加个小老虎表情也比较好看

回复
Page
September 10th, 2018 at 03:46 pm

效果好棒，头像还会转

回复
月宅
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
  
  回复