开屏动画

typecho主题添加OwO表情

技术 21 评 877 度
机器人
AI摘要
Gemini

博主在日志中分享了如何为 Typecho 主题添加 OwO 表情。首先需要下载 OwO 表情包,然后将三个文件上传到服务器或对象存储中,并提供一个可以访问的外部网址。接着在 head.php 中导入 OwO.min.css,在 footer.php 中导入 OwO.min.js 并添加表情框按钮代码。最后在 comment.php 中找到 @input 或 @textarea 标签,在 class= 后面加入 OwO-textarea,并在标签下方加入表情按钮的 div 标签。博主还提供了 OwO.json 文件的配置示例,并推荐了一些其他可用的 json 文件。

OwO表情下载:https://github.com/DIYgod/OwO

所需文件:

OwO.min.css
OwO.min.js
OwO.json

将上述三个文件上传到自己的服务器或者对象存储中,提供一个可以访问的外部网址。

导入 OwO

OwO.min.css放在head.php中

<link rel="stylesheet" href="OwO.min.css链接地址">

在footer.php的前添加

<script src="OwO.min.js链接地址"></script>

导入 OwO表情框按钮

紧接着在js下添加如下代码

<script> 
var OwO_demo = new OwO({ 
    logo: 'OωO表情', //可以通过<img>标签插入图片表情
    container: document.getElementsByClassName('OwO')[0], 
    target: document.getElementsByClassName('OwO-textarea')[0],
    api: 'OwO.json链接地址', 
    position: 'down', 
    width: '100%', 
    maxHeight: '250px' }); 
</script>

评论框放置表情按钮

在comment.php中找到@input>或@textarea>标签在class= 后面加入OwO-textarea

在标签下方加入<div title="OwO" class="OwO" ></div>

添加表情

添加表情需要配置OwO.json文件,格式如下:

{
"颜文字": {
"type": "emoticon",//GIF图type填gif,png图片type填image
"container": [
{
"icon": "OωO",
"text": "Author: DIYgod"
},
{
"icon": "|´・ω・)ノ",
"text": "Hi"
}
]
},
 "BiliBili": {
"type": "gif",
"container": [
{
"icon":"<img src=\"https://pt.pyrroleach.com/emotion/doge.gif\" style=\"width: 32px\">"
,"text":":doge:"
},
{"text":"亲亲","icon":"<img src=\"https://pt.pyrroleach.com/emotion/亲亲.gif\" style=\"width: 32px\">",
"text":":亲亲:"
}
]
}, "微博": {
  "type": "image",
   "container": [
{
"text":"d_1","icon":"<img src=\"https://pt.pyrroleach.com/emotion/weibo/d_1.png\" style=\"width: 32px\">",
"text":":d_1:"
},
{
"text":"d_22","icon":"<img src=\"https://pt.pyrroleach.com/emotion/weibo/d_22.png\" style=\"width: 32px\">"
,"text":":d_22:"
}
]
}
}

如何快速创建json

先将表情包上传到服务器或云存储
提取表情包文件名
使用Excel批量创建表情包链接
将Excel转换为json
Excel转换为json网址:https://www.bejson.com/json/col2json/

具体设置参考https://idealclover.top/archives/562/

其他json

https://cdn.klyang.com/json/emo.json
https://emotion.xiaokang.me/#/

typecho热力图插件推荐
广告图片
AD
21 评论
    胖氪笔记 Chrome 123 Windows 10 安徽省安庆市
    4月5日回复

    这个有点东西了

      湘铭呀! Chrome 123 Windows 10 福建省宁德市
      4月5日回复

      @胖氪笔记 欢迎

        胖氪笔记 Chrome 123 Windows 10 安徽省安庆市
        4月5日回复

        @湘铭呀! 我们用的同一套板子,但是看你有很多不一样的东西,花了不少心思啊

          湘铭呀! Chrome 123 Windows 10 福建省宁德市
          4月5日回复

          @胖氪笔记 https://cravatar.cn/ 可以在这里更新一下

          湘铭呀! Chrome 123 Windows 10 福建省宁德市
          4月5日回复

          @胖氪笔记 折腾呗。你的QQ头像怎么获取不到呀

            胖氪笔记 Chrome 123 Windows 10 安徽省安庆市
            4月5日

            @湘铭呀! 我看每个人的头像都没呀

    木木困玉光 Chrome 120 Windows 10 广东省深圳市
    1月8日回复

    来看看,总能发现些有趣的东西

      湘铭呀! Chrome 120 Windows 10 福建省宁德市
      1月9日回复

      @木木困玉光 哈哈哈

    ys QQ Browser 12 Windows 10 贵州省
    1月4日回复

    不错不错 来取取经

    网友小宋 Chrome 120 Windows 10 河南省漯河市
    1月4日回复

    输入一个字

      湘铭呀! Windows 10 福建省宁德市
      1月4日回复

      @网友小宋 喔喔喔喔

    湘铭呀! Chrome 120 Windows 10 福建省宁德市
    1月3日回复

    @ 欢迎欢迎

    陶小桃Blog Chrome 120 Windows 10 北京市北京市
    1月3日回复

    图片表情咋看着都挂掉了

    Dabenshi Chrome 120 Windows 10 北京市北京市
    1月3日回复

    {"error":"no such domain"} 裂了

    obaby Chrome 118 OSX 山东省济南市
    1月3日回复

    (ฅ´ω`ฅ)
    看看效果

  • 小星星变奏曲 - 莫扎特
  • Moon River - Audrey Hepburn