Docker系列 WordPress系列 动态对话页面
本文最后更新于 405 天前,如有失效请评论区留言。

本博客由ZGOCLOUD大力赞助!如何更快地访问本站?有需要可加电报群获得更多帮助。本博客用什么VPS?创作不易,请支持苯苯!推荐购买本博客的VIP喔,10元/年即可畅享所有VIP专属内容!

日志

  • 2023-01-31:有小伙伴对donate插件感兴趣,遂更新了详细教程。具体见“Donate插件”部分。
  • 2022-11-03:发现html格式的图片或链接不会消失,不推荐markdown格式;重写部分教程。
  • 2022-11-03:增加了特别的donate动画,具体效果如下。代码托管在bloghelper/donate。用法同sponsor-page。我改动了一下代码,去除了paypal和bitcoin的格子;同时调整了方格的整体位置,看上去更加自然:

前言

今天咱们又来整点花活了!应小伙伴sherwin的请求,我抽空搞了一个“动态对话”页面,界面大致如下:

msedge_R0zL4Hr9xR

就是一个具有动态对话的页面。显然,这个对话是高度自定义的。该对话基于Vue/JS/CSS,所以操作很简单的,这里总结一下教程,希望对后来者有帮助。本教程的方法适用于所有可以使用js/css的博客平台(比如WordPress)。

这个“动态对话”还是很酷的,建议都布署一下!

准备工作

我已经将必要的文件上传到bloghelper/chatbox里了。从这里下载,文件列表如下:

botui-theme-bensz.css
botui.min.css
botui_bensz.js
talk.js
index.html.txt

其中botui-theme-bensz.css定义了对话样式。botui_bensz.js定义了Vue.jsbotui.js的工作环境。talk.js定义了对话。index.html.txt是一段HTML代码,作为WordPress古登堡编辑器HTML区块的输入内容。

下载完后,可以上传到网站某个目录(比如根目录)。确保存在一个url,使得https://url/botui_bensz.js可以被访问。比如,对于我的博客而言,该urlblognas.hwb0307.com/checkbot,即所有人均可通过地址https://blognas.hwb0307.com/checkbot/botui_bensz.js访问该文件。

对于某些WordPress用户而言,插件Add From Server可能是有益的,因为它会为WordPress根目录内所有文件提供一个可被访问的URL。它在我的系列WordPress教程《Docker系列 WordPress系列 国服最强博客看板娘没有之一》、《Docker系列 WordPress系列 自建随机图API之静态壁纸》和《WordPress系列 自建随机图API之动态壁纸》中均有应用。按需安装该插件即可。

新建页面

如下图所示,基于古登堡编辑器新建一个页面:

Code_YzrhWCvkWw

然后插入一个HTML区块,填入以下内容:

<link href="https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/chatbox/botui-theme-bensz.css" rel="stylesheet">
<link href="https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/chatbox/botui.min.css" rel="stylesheet">
<div class="entry-content">
<!-- rgba(242, 242, 242, 0.5) -->
<div id="kelecnbot" class="popcontainer" style="min-height: 300px; padding: 2px 6px 4px; background-color: transparent; border-radius: 10px;"><bot-ui></bot-ui></div>
</div>
<script src="https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/chatbox/botui_bensz.js"></script>
<script src="https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/chatbox/talk.js"></script>
<script>
bot_ui_ini()
</script>
<!--iframe src="https://blognas.hwb0307.com/donate/drinks/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe-->

请注意!!第8行中的:

<script src="https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/chatbox/talk.js"></script>

中的talk.js换成自己定义的对话即可。

另外3个重要的文件——botui-theme-bensz.cssbotui.min.cssbotui_bensz.js——也可以自己改好后换成自定义文件的路径。如果没有特别的偏好,你也可以直接使用我托管在huangwb8/bloghelper上的设置。

该页面还有一些建议的操作,比如:

  • 更改固定链接。我改为了about
  • 允许评论

最后,更新发布即可!这个页面可以放到菜单里。不会放的人可以看我的教程《Docker系列 WordPress系列 WordPress的菜单》。

Donate插件

不感兴趣的可以直接跳过 (~ ̄▽ ̄)~

值得注意的是,我在上面新建的HTML区块里注释了一小段代码:

<!--iframe src="https://blognas.hwb0307.com/donate/drinks/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe-->

它是一个开源的donate项目,经sponsor-page魔改而来。相关代码托管在bloghelper/donate,最终效果如下:

我并不建议你直接使用这段代码,因为https://blognas.hwb0307.com/donate/drinks/对应的收款码是我的而不是你的 (~ ̄▽ ̄)~ (当然你硬是要放的话,我是不会介意的,哈哈!)。

首先,我们去bloghelper/donate下载donate文件夹并通过SFTP等方式上传到WordPress网站的根目录:

Code_PK8F3FDZjR

donate文件夹有drinksimple两个子文件夹,代表了两种不同的展示效果;我只使用了drink。本小节只讲述drink设置的一些细节;至于simple,感兴趣的小伙伴可以自己去折腾,原理是相似的,不再赘述。

drink包含了一些文件,其中index.html直接决定了哪些元素可以被展示;script.jsstyle.css定义了元素的外观;而images文件内保存了一些重要的图片:

Code_tvU9ma6cWa

index.html

它主要有headerbody部分。是的,这个donate项目本质上只是一段HTML代码 (ฅ´ω`ฅ)

我们看一下header部分:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Donate Bensz</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
</head>

<title>Donate Bensz</title>中的Donate Bensz可以换成你想要的标题(其实内嵌在对话页面时没啥用)。而下面的一些css/js引用地址都是不需要改动的,默认即可。

然后看一下body部分,按提示修改即可:

Code_PTEdzOCqaS

images/coffee.gif就是那只乞讨的猫:

Code_vEHajHZo77

理论上,只要不断添加li标签,就可以生成多个卡片;其中的id属性可以决定卡片的类型。自己可以试试看!我只保留了微信和支付宝,bitcoin和paypal都被注释掉了。

script.js

该脚本也有一些重要的设置,比如定义收款码等图片的位置:

Code_Hl9oOKi7n6

其它内容印象中不用改动。

一般来说,中国大陆的普通用户只要改动一下支付宝和微信支付的图片即可(一般人是没有paypal和bitcoin的)。至于支付宝二维码链接,你只需要用一个扫二维码的应用扫一下自己的支付宝收款码,就可以得到一个链接,复制到alipya_donate_link并替换掉我的即可。

style.css

这个文件主要是一些CSS样式。与原作者相比,我有改动一些参数(具体忘了哪些了,当时边改边调),也不太难。我的style.css有一些中文注释,自己可以看一下,我就不细说了。如果你选择不同数量的卡片展示,调CSS样式可以获得较好的显示位置,效果比较协调一些。我觉得自己目前的状态是挺好的——如果你像我一样只有2个卡片,可以不用怎么改。

Code_rB4D0us0Mw

这个image/text3.png的外观如下:

Code_r55Ue9ZF6e

如果你要自定义一下文字啥的(比如将Bensz改为其它字或者去除它),可以用PhotoShop改一下text2.psd,保存为一个png文件再引用它即可;具体过程我就不细说了。实际上,这个图片和猫咪gif图构成了donate的基础背景。

使用方法

你可以直接访问https://你的博客域名/donate/drinks/进行调试。最后,只需将下面的代码加到页面HTML区块的最下面:

<iframe src="https://你的博客域名/donate/drinks/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe>

如图:

msedge_Y3GGq4sIBM

至于style就看个人喜好喽,不改也行,我目前的配置挺好的。不过,按我的经验,小伙伴们基本上都是白嫖,捐赠者极少,只能说有个猫咪可爱一点,实际意义并不大 (ฅ´ω`ฅ)

编辑botui-theme-bensz.css

如果你对我正在使用的样式感兴趣,可以查看:https://blognas.hwb0307.com/checkbot/botui-theme-bensz.css

这是一个很简短的CSS。我列举一些个人觉得比较重要的项目。其实对于经常玩CSS的人来说,这段代码的设置真的是so easy。

容器背景

默认字体是"Open Sans",sans-serif。该字体应该是通过开头的url(https://fonts.googleapis.com/css?family=Open+Sans)进行定义的。以此类推,可以定义任意google字体或其它字体。在实践中,我直接引用了一个自定义的btfFont字体,它是我之前在额外CSS中定义的。

background-color控制了整个框的颜色。因为我的博客背景本来就蛮好看的,为不了遮掩原本的背景,我使用了透明色,即background-color: transparent;

.botui-container{
    /* 字体大小 */
    font-size:20px;

    /* botui容器背景色 */
    /* background-color:rgba(242,242,242,0); */
    background-color: transparent;

    /* 字体 */
    font-family: "btfFont" !important
    /* font-family:"Open Sans",sans-serif */
}

机器人内容

.botui-message-content{
    padding:7px 13px;
    border-radius:15px;

    /* 字体颜色 */
    color:#595a5a;

    /* 机器人内容背景色 */
    background-color:#ccd5d5
}

点击者内容

.botui-message-content.human{
    /* 字体颜色 */
    color:#f7f8f8;

    /* 点击者内容背景色 */
    background-color:#919292
}

链接色

我个人建议使用主题色rgba(var(--themecolor-rgbstr)),这样会比较自然。

.botui-message-content-link{
    color:#919292
    /* color: rgba(var(--themecolor-rgbstr)); */
}

编辑talk.js

如果你对我正在使用的js感兴趣,可以查看:https://blognas.hwb0307.com/checkbot/talk.js

我们需要编辑的是最下方的对话。其实这段代码的逻辑很清楚的,我觉得已经不需要再多说了。比如,botui.action.button定义了一个问题。botui.message.bot定义了一个回答。content可以使用markdown语法定义链接或图片。特别值得注意的是,如果你在某个对话里引用了图片,应该使用type='html'指定文本类型(默认的markdown类型显示图片不正常)。

静静地看吧,自己学着调一下:


/*
* BotUI回复配置
*/
var botui = new BotUI("kelecnbot");
botui.message.bot({
   delay: 200,
   content: "Hi,小伙伴们???"
}).then(function() {
   return botui.message.bot({
       delay: 1000,
       content: "我是Bensz,可以叫我苯苯!"
   })
}).then(function() {
   return botui.message.bot({
       delay: 1000,
       content: "是一个每天在镜子前给自己磕头的硬核...咳咳!"
   })
}).then(function(){
   // 限制递归的数量:
   return resCircle(8)
});


// 异常对话相关的递归函数
// numCircle可以指定递归的最大次数。
var resCircle = function(numCircle) {

   // 一个关于消极态度的集合
   var negEva = ["小姐姐呐? ?","我劝你善良! ?","搞事情是吧? ?","哇酷哇酷! ?","快把小姐姐交出来!?","别挡着我看小姐姐 ?"]; 
   var indexNegEva = Math.floor((Math.random()*negEva.length)); 
   var negText = negEva[indexNegEva];

   // 一个关于消极态度response的集合
   var negResponse = ["本想介绍小姐姐给你认识,溜了溜了", "不要小姐姐了吗?", "不好意思,小姐姐归我了!", "哎,小姐姐只能独自伤心了。"]; 
   var indexNegResponse = Math.floor((Math.random()*negResponse.length)); 
   var negResponseText = negResponse[indexNegResponse];

   // 随机图链接
   var randPic = [
       "https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/aj8yp-6sabp.webp",
       "https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/aj8yp-6sabp.webp"
   ]; 
   var indexrandPic = Math.floor((Math.random()*randPic.length)); 
   var targetURL= randPic[indexrandPic];

   botui.action.button({
       delay: 1500,
       action: [{
           text: "牛逼呀! ?",
           value: "and"
       },
       {
           text: negText,
           value: "gg"
       }]
   }).then(function(res){
       if (res.value == "and") {
           botui.message.bot({
               delay: 1500,
               content: "???"
           }).then(function(){
               other()
           })
       } else if (numCircle === 0) {
           botui.message.bot({
               delay: 1500,
               content: "好了,不玩啦!你甚至不想称赞我哪怕一下...哎!"
           }).then(function(){
               other()
           })  
       } else {
           botui.message.bot({
               // loading: true,
               type: 'html', // HTML与Markdown不同,注意区别!
               delay: 1500,
               content: negResponseText + '<br /><img src="' + targetURL + '" width="500">'
           }).then(function() {
               var numCircle2 = numCircle - 1
               // console.log(numCircle)
               return resCircle(numCircle2)
           }) 
       }
   })
}

// 正常对话信息
var other = function() {
   // botui.message.bot({
   //     delay: 1500,
   //     content: "???"
   // }).then(function() {
   //     return 
   botui.message.bot({
           delay: 1500,
           content: "我喜欢折腾新事物和思考人生 ㄟ(▔,▔)ㄏ "
   }).then(function() {
       return botui.message.bot({
           delay: 1500,
           content: "略懂Linux/HTML/CSS/JavaScript/Python,专攻R"
       })
   }).then(function() {
       return botui.message.bot({
           delay: 1500,
           content: "主要研究方向:肿瘤学与生物信息学"
       })
   }).then(function() {
       return botui.message.bot({
           delay: 1500,
           content: "目前正在生物医学的道路上艰难求索..."
       })
   }).then(function() {
       return botui.action.button({
           delay: 1500,
           action: [{
               text: "为什么叫 Bensz 呢? ?",
               value: "next"
           }]
       })
   }).then(function(res) {
       return botui.message.bot({
           delay: 1500,
           content: "很久以前,在游戏《龙之谷》中我以“苯神仔”为名自居。"
       })
   }).then(function(res) {
       return botui.message.bot({
           delay: 1500,
           content: "后来不知怎的就沿用下来了(~ ̄▽ ̄)~ "
       })
   }).then(function() {
       return botui.action.button({
           delay: 1500,
           action: [{
               text: "域名有什么含意吗?(ง •_•)ง",
               value: "next"
           }]
       })
   }).then(function(res) {
       return botui.message.bot({
           delay: 1500,
           content: "最初是在NAS中安装的,所以以blognas开头。"
       })
   }).then(function(res) {
       return botui.message.bot({
           delay: 1500,
           content: "后来为了公众化,转移到了VPS中,但仍保留了该域名。"
       })
   }).then(function(res) {
       return botui.message.bot({
           delay: 1500,
           content: "所以blognas单纯是一个历史遗留问题。"
       })
   }).then(function() {
       return botui.action.button({
           delay: 1500,
           action: [{
               text: "您未来有什么计划吗?",
               value: "next"
           }]
       })
   }).then(function(res) {
       return botui.message.bot({
           delay: 1500,
           content: "更多地关注时事、前沿和技术。"
       })
   }).then(function(res) {
       return botui.message.bot({
           delay: 1500,
           content: "更加爱家人、爱世界!"
       })
   }).then(function() {
       return botui.action.button({
           delay: 1500,
           action: [{
               text: "您是不是漏了什么没说呀?(暗示)",
               value: "next"
           }]
       })
   }).then(function(res) {
       return botui.message.bot({
           delay: 1500,
           content: "对对,光顾着说自己了 (~ ̄▽ ̄)~ "
       })
   }).then(function(res) {
       return botui.message.bot({
           delay: 1500,
           content: "祝您身体健康、心想事成、前程似锦喽!"
       })
   }).then(function() {
       return botui.action.button({
           delay: 1500,
           action: [{
               text: "谢谢哈!那么如何支持您的工作呢?妈妈教育我不能白嫖...",
               value: "next"
           }]
       })
   }).then(function(res) {
       return botui.message.bot({
           delay: 1500,
           content: "常来看看就是我最大的荣幸!"
       })
   }).then(function(res) {
       return botui.message.bot({
           delay: 1500,
           content: "点击下方的小猫咪可以捐赠苯苯~"
       })
   }).then(function(res) {
       return botui.message.bot({
           type: 'html',
           // loading: true,
           delay: 1500,
           content: '或者点击<a href="https://blognas.hwb0307.com/thankyou" data-wpel-link="external" title="<strong>捐赠鼓励</strong>" target="_blank" rel="nofollow external noopener noreferrer"><strong>捐赠鼓励</strong></a> (~ ̄▽ ̄)~'
       })
   }).then(function(res) {
       return botui.message.bot({
           type: 'html',
           delay: 1500,
           content: '再次感谢!<br /><img src= "https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/wallhaven-v9jp8m.webp" width="500">'
       })
   });
}

最后建议:增加代码块

.then(function(res) {
        return botui.message.bot({
            delay: 1500,
            content: "XXX"
        })
    })

的时候,不要复制漏某个符号即可 (~ ̄▽ ̄)~

最终效果

前面也贴过,再贴一次:

msedge_R0zL4Hr9xR

小结

知道门路后,布署过程还挺简单的。不过我发现botui_bensz.js有两个bug:

  • 如果对话中出现多个链接,仅有最后一个链接会被正确显示(使用html语法即可)。
  • Argon主题中对Pjax不兼容。

也有可能是我用的这个脚本比较老了,有机会向开发者咨询一下,目前暂时先这样用着吧!如果安装过程有什么问题,欢迎评论区留言!

此外,我发现有些主题对于js中的HTML命令是不兼容的(这种就很过分),这样图片或链接是无法正常显示的。这种情况请按需要修改某些内容,比如:

// 随机图URL
negResponseText + '<br /><img src="' + targetURL + '" width="500">'

// 再次感谢里的图片URL
'再次感谢!<br /><img src= "https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/images/wallhaven-v9jp8m.webp" width="500">'

附:页面代码

个人自用HTML代码

<link href="./checkbot/botui-theme-bensz.css" rel="stylesheet">
<link href="https://bensz.hwb0307.top/bloghelper/chatbox/botui.min.css" rel="stylesheet">
<div class="entry-content">
    <!-- rgba(242, 242, 242, 0.5) -->
    <div id="kelecnbot" class="popcontainer" style="min-height: 300px; padding: 2px 6px 4px; background-color: transparent; border-radius: 10px;">
        <bot-ui></bot-ui>
    </div>
</div>
<script src="./checkbot/botui_bensz.js"></script>
<script src="./checkbot/talk.js"></script>
<script>
    window.pjaxLoaded = function(){
        bot_ui_ini()
    }
    $(window.pjaxLoaded);
    $(document).on('pjax:start', window.pjaxLoaded);
</script>
<iframe src="https://blognas.hwb0307.com/donate/drinks/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe>
<p style="color:grey;font-size:1.25rem;" align="center"><i>如果页面未出现任何对话,请按F5刷新网页喔!</i></p>

参考

---------------
完结,撒花!如果您点一下广告,可以养活苯苯😍😍😍

感谢ZGOCLOUD友情赞助 (ฅ´ω`ฅ) 本博客基于m2w创作。版权声明:除特殊说明,博客文章均为Bensz原创,依据CC BY-SA 4.0许可证进行授权,转载请附上出处链接及本声明。VIP内容严禁转载!由于可能会成为AI模型(如chatGPT)的训练样本,本博客禁止将AI自动生成内容作为文章上传(特别声明时除外)。如有需要,请至学习地图系统学习本博客的教程。加Telegram群可获得更多帮助喔! | 博客订阅:RSS | 广告招租请留言 | 博客VPS | 致谢渺软公益CDN |

评论

  1. 明月
    Windows Chrome 122.0.0.0
    2周前
    2024-3-17 11:56:50

    我改了talk.js里面的对话内容好像没什么效果哎,在网站上打开里面的内容并没有被修改过来

    • 博主
      明月
      Windows Edge 122.0.0.0
      1周前
      2024-3-19 15:23:14

      要看看你在页面用的脚本。 一般来说,这是因为您未引用自定义的talk.js导致的。

      • 明月
        Bensz
        Windows Chrome 122.0.0.0
        1周前
        2024-3-19 16:31:23

        成功啦,嘿嘿嘿

  2. 风竹
    Windows Edge 118.0.2088.69
    5月前
    2023-10-28 21:14:52

    请问一下您的代码块风格是怎么实现的呀

    • 博主
      风竹
      Windows Edge 118.0.2088.69
      5月前
      2023-10-28 21:23:00

      这个是主题自带的代码风格:

      查看图片
      msedge_1Q9zr6uvWc

      • 风竹
        Bensz
        Windows Edge 118.0.2088.69
        5月前
        2023-10-28 21:26:04

        啊啊啊,谢谢!!!之前看漏了,回复的真快啊哈哈哈哈

  3. danBoy
    Windows Chrome 108.0.0.0
    8月前
    2023-7-30 22:10:19

    求求解答:对话过程中图片依然不能输出,只有最后的图片,地址:https://danboycrush.top/withme

    • 博主
      danBoy
      Windows Edge 115.0.1901.188
      8月前
      2023-7-31 18:09:05

      你可以试试这样:

      查看图片
      msedge_vEeNngEPUm

      • danBoy
        Bensz
        Windows Chrome 108.0.0.0
        8月前
        2023-8-01 0:35:09

        注释代码也不能显示,我想是不是代码先后问题,但依旧没能解决,只能显示最后一个图片!

      • 博主
        danBoy
        Windows Edge 115.0.1901.188
        8月前
        2023-8-01 19:08:10

        这里是Argon主题对应的代码,你可以试试不要引用这些Pjax相关的内容:

        查看图片
        msedge_5BKtuSBF3L

        。如果不行,你可以直接查看源代码页面,然后直接下载对应的文件并上传到你的后台,以排除你的误操作导致功能不正常的可能性。

  4. Windows Edge 108.0.1462.54
    1年前
    2022-12-28 11:18:36

    嘿嘿,学到了,有点意思୧(๑•̀⌄•́๑)૭

    • 博主
      喃小柯
      Windows Edge 108.0.1462.54
      1年前
      2022-12-28 19:05:27

      可以 (~ ̄▽ ̄)~ 加油喔!

      • mnsjtxy
        Bensz
        Windows Chrome 119.0.6045.160
        3天前
        2024-3-26 17:27:40

        你好,请问可以问一下您的Argon是怎么配置的吗?谢谢

      • 博主
        mnsjtxy
        Windows Edge 123.0.0.0
        1天前
        2024-3-28 11:59:08

        如图:

        查看图片
        msedge_n34QOEtM6w

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇