评论表情? – OwO表情面板

留意我博客的dalao们可能都发现了我的评论里能添加表情了。

是的,我已经往我现在在使用的minty模板里添加了一个表情面板( OωO — 一朵炒鸡萌的表情面板 – Diygod | GitHub – DIYgod/OwO

然后使用了 sm.ms 图床存储表情包。

于是,have fun.

部署方式

前往  GitHub – DIYgod/OwO 下载DIYGod的OwO原件,获取到如下内容

 

然后里面的dist/*和demo/owo.json对我们有用。

把他们上传到服务器后,编辑您模板的文件,在<head></head> 中加入<link rel=”stylesheet” href=”{OwO.min.css的路径}”>

然后在<footer></footer> 中或者其他您认为可以的地方添加

<script src="{OwO.min.js的路径}"></script>
    <script>
        var OwO_demo = new OwO({
            logo: 'OωO表情',//更改面板前显示的内容
            container: document.getElementsByClassName('OwO')[0],
            target: document.getElementsByClassName('OwO-textarea')[0],//输入框的class
            api: './OwO.json',//OwO.json位置
            position: 'down',//位置
            width: '100%',//宽度
            maxHeight: '250px'//最大高度
        });
    </script>

需要修改的内容:

  • OwO.min.css的路径
  • OwO.min.js的路径
  • OwO.json位置

然后进入您的comments.php中找到<textarea></textarea>标签并为其添加OwO-textarea 的class属性。

然后在<footer class=”comment-form-footer”> 后添加<div class=”OwO”></div> ,然后保存。

于是,OwO面板的基础部分部署完成。

更换/增加/删除表情

表情的内容在OwO.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": [
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "? ",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "? ",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            },
            {
                "icon": "?",
                "text": ""
            }
        ]
    },
    "图片表情": {
        "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"
            }
        ]
    }
}

看着改就是了。

 

 

16 条评论

昵称

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

  1. haha
  2. haha

    |´・ω・)ノalert(‘xss’)

    1. Y2Nk4

      (๑•̀ㅁ•́ฅ)你忘记写script标签了兄嘚

  3. 猫先生

    表情包是怎么搞的?

    1. 很懒的樱花

      之前没看到所以没回复,我用第三方图床的
      sm.ms

  4. liwanglin12

    ∠( ᐛ 」∠)_做了没写文的我

    1. 很懒的樱花

      233

  5. Whatk

    这功能可以有~

    1. 很懒的樱花

      2333

  6. Whatk

    Get~

  7. 很懒的樱花

  8. 某昴

    |´・ω・)ノ挺好玩的

    1. 很懒的樱花

      233

  9. 悠然

    突然变得有意思了

    1. 很懒的樱花

      你说呢

  10. 很懒的樱花

    困,睡觉