代码 •

给博客加上滑稽

实现这个功能绝大多数功劳都在一些dalao身上,本文只是讲一下如何使用QwQ。

巨人的肩膀

这个功能的实现是基于DIYGOD大佬的轮子OwO表情面板
ps.突然发现好像已经和OwO没什么关系了,用上了OwO的壳。不过也安利一下diygod的OwO,也是相当好用的!

owo.jpg

后来有人加以精简,今天我要讲的内容就是以精简后的OwO为基础。

基础功能的实现

首先来看看一个平淡的评论框

平淡的评论框.PNG

十分的平淡无奇,10个网站可能9个的评论框长这样那么如何使它变得不一样呢? 那就给他加上一个评论框叭。

首先,你得有个召唤评论框的按钮,比如手机的开机键能让手机开关机一样。那么我们在合适的位置加上一个合适的按钮。用一个div包裹住一个span标签,再给他加上独一无二的id,就像这样,好极了。

<div class="OwO-logo"> 
  <span>按我出表情</span> 
</div> 

现在这个评论框是不是有一点不一样了?

有点不一样的评论框.PNG

但是实际上你怎么按它也不会出现表情框,因为它是一个没有灵魂的按钮。现在我们给他注入灵魂。我们赋予它的使命是“按他出表情”。那么我们先把要召唤出的东西写出来。就像这样,没错(尼尔叔叔脸)。

这里需要用到OwO的css文件

<link rel="stylesheet" href="OwO.min.css" /> 
<div id="OwO-container">
  <div class="OwO OwO-open" id="qaq"> 
    <div class="OwO-body" id="OwO-body"> 
      <ul id="OwO-pp" class="OwO-items OwO-items-emoticon OwO-items-show" style="max-height: 197px;"> 
        <li class="OwO-item"><img src="chaiquan.png" /></li> 
        <li class="OwO-item"><img src="chaiquanbugaoxin.png" /></li> 
      </ul> 
    </div>
  </div> 
</div> 

那么需要展示的内容就全部放出来了,开始注入灵魂!

出现了,狗子!.PNG

先让按钮成为一个按钮。所谓按钮,就是让他按一下开,按一下关(认真)。由于此版本的OwO需要jq。所以我们就可以使用jq的toggle()来实现按钮的本质功能。

先引入jquery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

then,将上面提到的按钮的html加上个onclick

<div class="OwO-logo" onclick="$('#qaq').toggleClass('OwO-open');">
  <span>按我出表情</span>
</div>

解释一下,在OwO的css中,不加OwO-open这个class的话,OwO表情框本体是处于display:none的状态。

这样一来,这个按钮就成为一个按钮了呢

康康效果.gif

请不要吐槽我的gif,我有认真在做了QAQ。

接下来,如何点击一下表情就可以跑到评论框里去呢。那么请出今天的核心js

Smilies = {
    dom: function(id) {
        return document.getElementById(id);
    },
    grin: function(tag) {
        tag = ' ' + tag + ' ';
        myField = this.dom("comment");
        document.selection ? (myField.focus(), sel = document.selection.createRange(), sel.text = tag, myField.focus()) : this.insertTag(tag);
    },
    insertTag: function(tag) {
        myField = Smilies.dom("comment");
        myField.selectionStart || myField.selectionStart == "0" ? (startPos = myField.selectionStart, endPos = myField.selectionEnd, cursorPos = startPos, myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length), cursorPos += tag.length, myField.focus(), myField.selectionStart = cursorPos, myField.selectionEnd = cursorPos) : (myField.value += tag, myField.focus());
    }
}

将这这段代码加到页面的底部,然后再给表情也加上onclick。

<li class="OwO-item" onclick="Smilies.grin('');"><img src="chaiquan.png" /></li> 
<li class="OwO-item" onclick="Smilies.grin('');"><img src="chaiquanbugaoxin.png" /></li> 

这样一来,就可以实现按一下表情就出现了。那么基本功能到这里就完成了哟。我这里输出的是用于解析的短代码,你也可以换成<img src="xxx">来实现功能。

其他问题

新增表情:想要新增表情 ,以一下格式添加到<ul id="OwO-pp">中即可。

JS如何定位评论框:上面的JS是会输出至id为comment的评论框中,如果想修改目标,则修改上面JS代码的第7行和第11行即可。

附件

本教程的示例代码下载

[dl href="pan.baidu.com/s/1UI7TwrVd7vyTOZ1L5HOJhg"]test.zip[/dl]

💫 评论卡 取消回复

已有 48 条评论

  1. 小太
    小太
    3月4日 • 回复

    哇可以可以!Gif截图我推荐个工具:GifCam,这个Gif只有两帧xswl2333

    1. 季悠然
      季悠然
      3月4日 • 回复

      我是用两张图片合成的hhhhh,现在想想好好笑

  2. test
    test
    2019年12月15日 • 回复

    emoji表情 test

  3. LaoCloud
    LaoCloud
    2019年07月20日 • 回复

    大佬的主题好好看!!! QAQ
    我是来交换友链哒 !!
    我的ID: Lao's Blog
    我的链接: http://blog.laoooo.cn:801/
    我的头像: http://img.laoooo.cn:801/2019/07/18/5d2ff27c66a50.jpeg
    一句话描述: "练习Bug时长两年半的程序员"

    1. 季悠然
      季悠然
      2019年07月21日 • 回复

      加上啦,话说这个801端口真的没问题吗

      1. LaoCloud
        LaoCloud
        2019年07月21日 • 回复

        怎么你们都好奇我801端口 我也想用80/443啊,家里电信不给开

        1. 季悠然
          季悠然
          2019年07月25日 • 回复

          你也太。。强了,用电脑挂的还是架了个服

          1. LaoCloud
            LaoCloud
            2019年07月25日 •

            家里加了个服,我真的是菜鸡哇

  4. 蝉时雨
    蝉时雨
    2019年06月12日 • 回复

  5. psyduck
    psyduck
    2019年05月18日 • 回复


    这个网站好可爱!我也要整一个!

  6. andy
    andy
    2019年05月14日 • 回复

    大佬~麻烦问下 为啥评论里显示的是 (chaiquan)

  7. XiaoZe
    XiaoZe
    2019年05月04日 • 回复

    你好,我想问一下首页的文字怎么才能让他居中呢?直接加<center>标签不行!

  8. yin
    yin
    2019年04月23日 • 回复

  9. 蜗哥
    蜗哥
    2019年04月06日 • 回复

    博主请教一下,我用了你的这个主题,发现,发的评论里的表情,发送后,无法显示出来,并且那个友链模板也没办法用,开启后,访问错误,能教教我怎么回事吗?(头一次用typecho

    1. 季悠然
      季悠然
      2019年04月10日 • 回复

      这个会在下一个版本修复,可以先将comments.php第35行中的/C/themes/G/IMG/bq/$1.png改成
      /usr/themes/G/IMG/bq/$1.png哦

  10. susu
    susu
    2019年04月04日 • 回复

  11. 酸奶瓶盖
    酸奶瓶盖
    2019年03月30日 • 回复

    伪静态怎么弄啊

  12. 哪路神仙
    哪路神仙
    2019年03月28日 • 回复

    帅啊

  13. 好

    2019年03月19日 • 回复

    测试

  14. 烨哥
    烨哥
    2019年03月12日 • 回复

  15. 小彦
    小彦
    2019年03月12日 • 回复

    看懂了,是jquery的toggle隐藏层

    1. 季悠然
      季悠然
      2019年03月14日 • 回复

      没错哟

  16. 宫保鸡丁盖浇饭
    宫保鸡丁盖浇饭
    2019年03月11日 • 回复

    这是什么,网站

  17. 演员
    演员
    2019年03月06日 • 回复

    支持!

  18. 萌尤导航
    萌尤导航
    2019年03月04日 • 回复

    已收录贵站,欢迎回访,谢谢支持!
    收录页短网址:http://mim.im/b089

  19. BigCoke
    BigCoke
    2019年03月02日 • 回复

    找半天没找到滑稽

    1. 季悠然
      季悠然
      2019年03月02日 • 回复

      看来我要把滑稽放在最前面了

  20. FSpark
    FSpark
    2019年03月02日 • 回复

    对呀,怎么能少得了滑稽呢?好评!

    1. 季悠然
      季悠然
      2019年03月02日 • 回复

  21. XUHENG
    XUHENG
    2019年02月28日 • 回复

    扒走了扒走了

  22. 佬黑
    佬黑
    2019年02月24日 • 回复

    开学加油

    1. 季悠然
      季悠然
      2019年03月02日 • 回复

      谢谢ww

  23. 坏鱼炒年糕
    坏鱼炒年糕
    2019年02月23日 • 回复

    第一次开博客就选了你的模板 有个问题就是。。背景的图 有办法自适应吗,,,或者能弄成纯色吗。。。。目前的图片是固定分辨率的。。。如果换成其他各种分辨率来看不知道会变成什么样子。。。
    还有个建议就是文章列表能不能支持下单排!!目前的双排导致标题实在是太短了

    1. 季悠然
      季悠然
      2019年02月24日 • 回复

      谢谢反馈,已经更新啦!

      1. 坏鱼炒年糕
        坏鱼炒年糕
        2019年02月24日 • 回复

        效果拔群!

  24. 浅夏
    浅夏
    2019年02月20日 • 回复

    看你的主题搞好了

    1. 季悠然
      季悠然
      2019年02月22日 • 回复

      哈哈,直接看代码才是最高效的

  25. 浅夏
    浅夏
    2019年02月20日 • 回复

    用了,emm,然后评论列表的表情解析咋写呢

  26. SomeBottle
    SomeBottle
    2019年02月19日 • 回复

    些瓶来申请一下友链...
    名称: Bottle咸站
    站点链接: https://imbottle.com
    站点头像: https://ww2.sinaimg.cn/large/ed039e1fgy1ft1plam1e5j2046046t94
    站点介绍: SomeBottle的咸鱼小站

    1. 坏鱼炒年糕
      坏鱼炒年糕
      2019年02月24日 • 回复

      友链里看到了KasuganoSora还行233

      1. SomeBottle
        SomeBottle
        2019年02月24日 • 回复

        哈哈,经常看到Akkariin,加了个友链

    2. 季悠然
      季悠然
      2019年02月22日 • 回复

      加上啦

    3. SomeBottle
      SomeBottle
      2019年02月19日 • 回复

      补充一下我站友链:
      INTRO引导页->邻居们

  27. c0sMx
    c0sMx
    2019年02月13日 • 回复

    开学加油

    1. 季悠然
      季悠然
      2019年02月13日 • 回复

      突然想起来dalao的开学

      一起加油吧
      刚刚什么都没发生~~

  28. 某昴486
    某昴486
    2019年02月13日 • 回复

    吼啊,开学加油

    1. 季悠然
      季悠然
      2019年02月13日 • 回复

      hhh,科目二加油哦!

      1. 某昴486
        某昴486
        2019年02月14日 • 回复

        会的