不妨去其他博客看看»» 友链|

为Typecho博客评论添加表情包

默认分类 · 2023-11-17

前言

垃圾代码,丢给gpt改一下还是很垃圾

第一步:上传图片

不自带表情,需自备(可以试试这个bot @Stickerdownloadbot)
改成001.webp,002.webp依次类推
上传在同一目录

改代码

<a onclick="toggleStickerBox()">表情</a>
  <span id="sticker_box" style="display: none;"></span>
    <script>
    const stickers = [
        //这里填你的图片
      '001', '002', '003', '004', '005', '006', '007', '008'
    ];
    const stickerBox = document.getElementById('sticker_box');
    stickers.forEach(sticker => {
      const button = document.createElement('button');
      button.className = 'sk';
      button.onclick = function() {
        sticker01(sticker);
      };

      const img = document.createElement('img');
      //这里填图片目录
      img.src = `//图片目录/${sticker}.webp`;
      img.style.height = '50px';
      img.style.width = '50px';
      img.loading = "lazy";

      button.appendChild(img);
      stickerBox.appendChild(button);
    });
    function toggleStickerBox() {
      const divToToggle = document.getElementById('sticker_box');
      divToToggle.style.display = divToToggle.style.display === 'none' ? 'block' : 'none';
    }
    function sticker01(stickernum) {
      const textarea1 = document.getElementById('textarea');
      //这里填图片目录
      textarea1.value += `<img src="//图片目录/${stickernum}.webp" height="100px" width="100px">`;
    }
  </script>
  <style>
    .sk {
      background-color: rgba(54, 25, 25, 0);
      border: none;
    }
  </style>

<a onclick="toggleStickerBox()">表情</a>帖到</form>之前

其余的帖到</form>之后

改设置

typecho后台>设置>评论
允许使用的HTML标签和属性:
<img src="" height="" width="">

最后

效果看评论

(来了就留下一个评论吧~)

  1. 秀一同学 2023-12-04

    找了半天的表情按钮……

    1. admin111223 (作者)  2023-12-04
      @秀一同学

      隐蔽色

  2. wu先生 2023-11-27

  3. 芙樱竹 2023-11-22

    博客挺好,就是这个字体我感觉可以改一改,如果是轻博文还好,如果到了后期有字数比较多的文章读起来会挺费眼的.
    现代网站对于字体的选择一般都是非常保守的,太过于艺术的字体在阅读流畅度和无障碍适配上都存在很大问题,所以建议可以全部换掉或者只保留部分艺术字体.
    还有就是这个评论插件在移动设备大小的屏幕上显示的有点挤,可以试试通过css调一下间距.

  4. Mr.Chou 2023-11-22

    嘿,来得早不如来得巧..正好一直有添加表情的动机可惜技术有限。
    话说表情换成EMOJI要怎么改呢?

    1. admin111223 (作者)  2023-11-22
      @Mr.Chou

      这个>>> https://pastebin.com/1pH54F8t

      1. Mr.Chou 2023-11-22
        @admin111223

        好嘞,我这就去试试..

  5. 王润泽 2023-11-21

    哈哈,二次元风格,挺有意思👍

    1. admin111223 (作者)  2023-11-21
      @王润泽

      嘿嘿

  6. Tt 2023-11-20

  7. 2023-11-18

    我看看,,图片加载有些慢呢,不过很可爱

  8. 表情包不戳~

Theme Jasmine by Kent Liao RSS
阿里云ECS 2H2G 99元/年| OSS 免费20GB使用
x