SimpleZero

自用博客评论表情分享
前言最近实在不知道该写些啥了,由于主题的自带表情还是较为缺少,于是我自己添加了一些表情,所以在此分享一下表情添加方...
扫描右侧二维码阅读全文
20
2018/06

自用博客评论表情分享

前言

最近实在不知道该写些啥了,由于主题的自带表情还是较为缺少,于是我自己添加了一些表情,所以在此分享一下表情添加方法,持续更新中

此教程所提供的替换文件仅用于HandSome主题,如其他主题需自己进行修改

部分表情预览

1.png
4.png
5.png
6.png
7.png
9.png


注意事项

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


添加方法

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

.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;}

7.当你完成了上面一步,那么接下来刷新缓存看看效果吧!

附件点此下载

最后修改:2018 年 12 月 24 日 04 : 37 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论

47 条评论

  1. 小柒
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)

  2. 萧小七
      Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 72.0.3626.119(Google Chrome 72.0.3626.119)

    留名!

  3. Noob
      Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)


    博主,我的好像出问题了

    1. SimpleZero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @Noob

      修改这条CSS .comment-content-true img {max-width: 110px!important;}

      1. Noob
          Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @SimpleZero

        谢博主

  4. Noob
      Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

    是不是markdown不支持标签啊

  5. Noob
      Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

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

    1. SimpleZero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @Noob

      typecho后台-设置-评论 允许img标签即可

      1. Noob
          Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @SimpleZero

        卧槽,折腾了我三天,感觉自己好傻逼

  6. TEst
      Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

  7. yama
      Android 7.1.1(Android 7.1.1) / Firefox 60.0(Firefox 60.0)

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

    1. SimpleZero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
  8. 森七
      Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 50.0.2661.102(Google Chrome 50.0.2661.102)

    要是有呆毛的岂不是

  9. mumu
      Mac OS X 10.11.3(Mac OS X 10.11.3) / Google Chrome 49.0.2623.54(Google Chrome 49.0.2623.54)

    ok

  10. randolfz
      Android 5.1(Android 5.1) / Google Chrome 70.0.3538.64(Google Chrome 70.0.3538.64)

    大爱博主,救救我,呜呜呜

    1. Zero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.102(Google Chrome 70.0.3538.102)
      @randolfz

      得改css鸭~

      1. randolfz
          Android 5.1(Android 5.1) / Google Chrome 70.0.3538.64(Google Chrome 70.0.3538.64)
        @Zero

        层级太多了,被我改的面目全非,绝望,

  11. randolfz
      Android 5.1(Android 5.1) / Google Chrome 70.0.3538.64(Google Chrome 70.0.3538.64)

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

  12. randolz
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.77(Google Chrome 70.0.3538.77)

    好可爱

    1. Zero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.77(Google Chrome 70.0.3538.77)
  13. Lingki_Chin
      Android 7.1.1(Android 7.1.1) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)

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

  14. Vapaus
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)

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

  15. Page
      Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)

    效果好棒,头像还会转

  16. 月宅
      Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 63.0.3239.26(Google Chrome 63.0.3239.26)

    表情挺棒的,但你这种方式有点复杂,还是推荐弄成 *.jpg 的方式,因为你这个...是手动加进去的相对地址。太麻烦了。

    但我还是收藏一发为好。这个似曾相识,好像隔壁diygod的

    1. Zero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.81(Google Chrome 69.0.3497.81)
      @月宅

      对呀 OWO是DiyGay的2333,捂脸

    2. Zero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.81(Google Chrome 69.0.3497.81)
      @月宅

      从TG和B站扒下来的表情2333

  17. 梁Sir
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 62.0(Firefox 62.0)

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

    1. Noob
        Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @梁Sir

      我加到自定义css里面不行,所以我选择放在header里面

    2. SimpleZero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.81(Google Chrome 69.0.3497.81)
      @梁Sir

      不显示图片? 只显示链接吗?把Typecho的评论类型里的img填上

    3. SimpleZero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.81(Google Chrome 69.0.3497.81)
      @梁Sir

      把文章中提到的那些CSS加入到主题后台设置的自定义CSS中就可以了哦

  18. ssr
      Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)

    喜欢小电视

  19. star
      Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)

    是我看过最全的了

  20. mikusa
      Android 7.0(Android 7.0) / Google Chrome 68.0.3440.70(Google Chrome 68.0.3440.70)

    这么多表情啊

  21. 小石博客
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.75(Google Chrome 68.0.3440.75)

    有点想试试

  22. 蓝爵薇
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)

  23. 繁华
      Mac OS X(Mac OS X) / Mozilla Compatible(Mozilla Compatible)
    该评论仅登录用户及评论双方可见
    1. SimpleZero
        Android 8.0.0(Android 8.0.0) / Opera 1.170623.032(Opera 1.170623.032)
      @繁华

      不好意思,最近在外地,没带电脑,主题的话点击页脚的handsome即可跳转到作者的博客

      1. 繁华
          Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 53.0.2785.104(Google Chrome 53.0.2785.104)
        @SimpleZero

        您改的比原作者的好看多了,,,哈哈寻思问问您的卖不卖呢。。。

  24. Levone
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.15(Google Chrome 68.0.3440.15)

  25. 秋枫酱
      Android 7.0(Android 7.0) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)

    @医疗兵

  26. AUK CL
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)

    好多表情包啊!收藏了

    1. SimpleZero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.139(Google Chrome 66.0.3359.139)
      @AUK CL

  27. 温柔猫
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 47.0.2526.108(Google Chrome 47.0.2526.108)

    还是这个卡哇伊

  28. 广树
      Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)


    喜欢萌狼这堆表情包

    1. Zero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.139(Google Chrome 66.0.3359.139)
  29. 清秋暖冬
      Android 8.1.0(Android 8.1.0) / Android Webkit 4.0(Android Webkit 4.0)

    QQ新版表情包

    1. Zero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.139(Google Chrome 66.0.3359.139)