给博客加上滑稽

2098天前 · 代码 · 12776次阅读

实现这个功能绝大多数功劳都在一些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('chaiquan');"><img src="chaiquan.png" /></li> 
<li class="OwO-item" onclick="Smilies.grin('chaiquanbugaoxin');"><img src="chaiquanbugaoxin.png" /></li> 

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

其他问题

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

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

附件

本教程的示例代码下载

👍 3

typecho 表情 评论

最后修改于1268天前

评论

贴吧 狗头 原神 小黄脸
收起

贴吧

  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡

狗头

  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头

原神

  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神

小黄脸

  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  1. Slot Gacor 201天前

    Hеllo, I enjoy reading аll օf your article. I likee to ᴡrite a little cߋmment to support yoᥙ.

  2. 1080 734天前

    1080

  3. 小太 1713天前

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

    1. 季悠然 1713天前

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

  4. test 1793天前

    chaiquan emoji表情 test

  5. LaoCloud 1941天前

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

    1. 季悠然 1940天前

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

      1. LaoCloud 1940天前

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

        1. 季悠然 1936天前

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

          1. LaoCloud
            LaoCloud 1936天前

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

  6. 蝉时雨 1978天前

    huaji huaji

  7. psyduck 2004天前

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

  8. andy 2008天前

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

  9. XiaoZe 2018天前

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

  10. yin 2029天前

    chaiquanzaijian

  11. 蜗哥 2046天前

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

    1. 季悠然 2042天前

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

  12. susu 2048天前

    chaiquan

  13. 酸奶瓶盖 2052天前

    伪静态怎么弄啊 chaiquanku

  14. 哪路神仙 2055天前

    帅啊

  15. 2064天前

    测试

  16. 烨哥 2071天前

    chaiquanzaijian

  17. 小彦 2071天前

    看懂了,是jquery的toggle隐藏层 chaiquan

    1. 季悠然 2069天前

      没错哟

  18. 宫保鸡丁盖浇饭 2072天前

    这是什么,网站

  19. 演员 2077天前

    支持! haha

  20. 萌尤导航 2079天前

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

  21. BigCoke 2081天前

    huaji 找半天没找到滑稽

    1. 季悠然 2081天前

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

  22. FSpark 2081天前

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

    1. 季悠然 2081天前

      huaji huaji huaji

  23. XUHENG 2083天前

    扒走了扒走了 huaji

  24. 佬黑 2086天前

    开学加油

    1. 季悠然 2081天前

      谢谢ww tushe

  25. 坏鱼炒年糕 2087天前

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

    1. 季悠然 2087天前

      谢谢反馈,已经更新啦!

      1. 坏鱼炒年糕 2087天前

        效果拔群! haha

  26. 浅夏 2091天前

    看你的主题搞好了 taikaixin

    1. 季悠然 2089天前

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

  27. 浅夏 2091天前

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

  28. SomeBottle 2092天前

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

    1. 坏鱼炒年糕 2087天前

      友链里看到了KasuganoSora还行233

      1. SomeBottle 2087天前

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

    2. 季悠然 2089天前

      加上啦 meigui

    3. SomeBottle 2092天前

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

  29. c0sMx 2098天前

    开学加油 chaiquanku

    1. 季悠然 2098天前

      突然想起来dalao的开学

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

  30. 某昴486 2098天前

    huaji 吼啊,开学加油

    1. 季悠然 2098天前

      hhh,科目二加油哦! huaji

      1. 某昴486 2097天前

        xiaoyan 会的

目录

avatar

季悠然

寻找有趣的灵魂

140

文章数

2097

评论数

3

分类

好热啊

arknights!

人的一生是短暂的,但如果卑鄙地过这短暂的一生,那就太长了。

莎士比亚

1547