typecho主题添加OwO表情

2024.01.03 技术 21 评 883 度

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:"
}
]
}
}