soarli

记录一次Typecho增加表情包的实践
1.表情包先安排上:soarli.lanzous.com/izAqhdi3emf 密码:ag72把图片文件放在ha...
扫描右侧二维码阅读全文
09
2020/06

记录一次Typecho增加表情包的实践

1.表情包先安排上:

soarli.lanzous.com/izAqhdi3emf 密码:ag72

把图片文件放在

handsome/usr/img/emotion/

文件列表已安排,若无可通过:

dir > name.txt

得到。

2.了解json结构

目标格式为:

{
    "颜文字": {
        "type": "emoticon",
        "container": [
                {
                    "icon": "OωO",
                    "text": "Author: DIYgod"
                },
                {
                    "icon": "|´・ω・)ノ",
                    "text": "Hi"
                },
                {
                    "icon": "ヾ(≧∇≦*)ゝ",
                    "text": "开心"
                },
                {
                    "icon": "(☆ω☆)",
                    "text": "星星眼"
                },
                {
                    "icon": "(╯‵□′)╯︵┴─┴",
                    "text": "掀桌"
                },
                {
                    "icon": " ̄﹃ ̄",
                    "text": "流口水"
                },
                {
                    "icon": "(/ω\)",
                    "text": "捂脸"
                },
                {
                    "icon": "∠( ᐛ 」∠)_",
                    "text": "给跪"
                },
                {
                    "icon": "(๑•̀ㅁ•́ฅ)",
                    "text": "Hi"
                },
                {
                    "icon": "→_→",
                    "text": "斜眼"
                },
                {
                    "icon": "୧(๑•̀⌄•́๑)૭",
                    "text": "加油"
                },
                {
                    "icon": "٩(ˊᗜˋ*)و",
                    "text": "有木有WiFi"
                },
                {
                    "icon": "(ノ°ο°)ノ",
                    "text": "前方高能预警"
                },
                {
                    "icon": "(´இ皿இ`)",
                    "text": "我从未见过如此厚颜无耻之人"
                },
                {
                    "icon": "⌇●﹏●⌇",
                    "text": "吓死宝宝惹"
                },
                {
                    "icon": "(ฅ´ω`ฅ)",
                    "text": "已阅留爪"
                },
                {
                    "icon": "(╯°A°)╯︵○○○",
                    "text": "去吧大师球"
                },
                {
                    "icon": "φ( ̄∇ ̄o)",
                    "text": "太萌惹"
                },
                {
                    "icon": "ヾ(´・ ・`。)ノ\"",
                    "text": "咦咦咦"
                },
                {
                    "icon": "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃",
                    "text": "气呼呼"
                },
                {
                    "icon": "(ó﹏ò。)",
                    "text": "我受到了惊吓"
                },
                {
                    "icon": "Σ(っ °Д °;)っ",
                    "text": "什么鬼"
                },
                {
                    "icon": "( ,,´・ω・)ノ\"(´っω・`。)",
                    "text": "摸摸头"
                },
                {
                    "icon": "╮(╯▽╰)╭ ",
                    "text": "无奈"
                },
                {
                    "icon": "o(*////▽////*)q ",
                    "text": "脸红"
                },
                {
                    "icon": ">﹏<",
                    "text": ""
                },
                {
                    "icon": "( ๑´•ω•) \"(ㆆᴗㆆ)",
                    "text": ""
                },
                {
                    "icon": "(。•ˇ‸ˇ•。)",
                    "text": ""
                }
        ]
    },
    "Emoji": {
        "type": "emoji",
        "container": [
    "图片表情": {
        "type": "image",
        "container": [
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/face1.jpg\">",
                "text": "face1"
            },
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/face2.gif\">",
                "text": "face2"
            },
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/face3.jpg\">",
                "text": "face3"
            },
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/face4.jpg\">",
                "text": "face4"
            },
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/face5.jpg\">",
                "text": "face5"
            },
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/face6.jpg\">",
                "text": "face6"
            },
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/face7.jpg\">",
                "text": "face7"
            }
        ]
    },
    "岁纳京子": {
        "type": "image",
        "container": [
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/jz1.jpg\">",
                "text": "face1"
            },
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/jz2.gif\">",
                "text": "face2"
            },
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/jz3.gif\">",
                "text": "face3"
            },
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/jz4.gif\">",
                "text": "face4"
            },
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/jz5.jpg\">",
                "text": "face5"
            },
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/jz6.gif\">",
                "text": "face6"
            },
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/jz7.jpg\">",
                "text": "face6"
            }
        ]
    }
}

针对handsome,不支持自己插入img表签和emoji,且图片必须为png格式,经验证强制修改gif后缀为png可以解决。

ren *.gif *.png

对应其json的数据结构如下:

"新的表情栏目名称": {
    "name": "表情包文件夹名称",//只有图片表情类型才需要加这一项
    "type": "emoticon/emoji/image",
    "container": [
        {
            "icon": "OωO",
            "text": "Author: DIYgod"
        },
        {
            "icon": "OωO",
            "text": "Author: DIYgod"
        },
    ]
}
  • 表情名称name

该项只有当表情类型为图片表情时候才需要添加
name的值对应了emotion文件夹下的表情包文件夹名称。如值为aru,文件夹名称对应为aru
建议填写英文
表情类别type:

  • emoji emoji表情(typecho的数据库类型默认不支持emoji编码)
  • image: 图片表情,只支持.png 后缀的图片
  • container下存储的是表情的具体内容:
  • icon:表示的表情具体内容:

    • 颜文字就填具体的颜文字
    • emoji表情就填具体的emoji图标
    • 图片表情填写对应图片的文件名,如angry.png,填angry
    • text:指的是鼠标悬停在表情上面显示的提示文字,一般为中文提示

3.获取json


借助强大的Excel来实现。

再通过ExcelJSON工具www.bejson.com/json/col2json/#18获取json

按照规范修改OwO.json(在handsome/usr/下)。

4.修改CSS使过大的表情变小些

/usr/themes/handsome/assets/css/handsome.min.css

.comment-content-true img {
    max-width: 6%!important
}

参考资料:
www.xcnte.com/archives/354/

www.520niya.cn/xzt/7.html

ctimo.com/zy/137/hyimg.html

idealclover.top/archives/562/

github.com/DIYgod/OwO/blob/master/demo/OwO.json

www.kancloud.cn:8080/jarvis0912/handsome/1501180

最后修改:2020 年 06 月 10 日 06 : 32 PM

发表评论