（记录一个小白也就是我使用gpt修改的东西）很早之前导航站就使用了icheer大佬的小嘎聊天室外挂，奈何自己不懂代码就只会修改一些前端样式，现在有了chatgpt4，便尝试使用它修改代码，于是就给聊天室添加上了表情包功能，预览地址：点我

引入方式：在html代码里插入 (添加 fold 属性可以让聊天室默认折叠起来)

1
<script src="//dh.z-l.top/chat.js" async="async" fold></script>

这个表情包也是使用的现有的 OwO.js 表情包插件，项目地址:OWO.js, 预览地址：OωO Demo

7月14日更新： 支持上传图片

增加上传图片的功能，使用的是基于chevereto图床的插件的一个功能

官方介绍引入是这样的

1
<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload"></script>

Chevereto插件文档地址：https://v4-user.chevereto.com/integrations/pup.html#how-it-works

基础的引入选项

data-url是目标Chevereto网站的URL，但是我修改为现在使用的公益图床却不生效，所以直接修改了pup里的配置，反正是能用了，直接在引入里添加data-auto-insert=”direct-links”也不生效，也是改了pup.js能用了，不知道为什么，如果有大佬看到知道的求告知一下😭（找了十几个使用chevereto的网站才看到现在使用的不用注册能上传图片的😝）

显示图片

icheer大佬的小嘎聊天室原来只能发文字，查看处理发送消息代码，发现可以使用正则替换，（就类似一些微信公众号发送关键字会收到预先指定好的内容一样）于是让ChatGpt生成了一段代码，检测到发送的内容包含图片链接时，给它加上一个img标签，这样聊天室就可以显示图片了（可以试试在聊天室发送“台湾”）。

1
2
 // 使用正则表达式进行替换给图片地址添加img标签
t.msg = t.msg.replace(/(https?:\/\/.*\.(?:png|jpg|jpeg|gif|webp|svg))/gi, '<img src="$1" alt="Image" style="max-width: 100%;">');

同理可以修改让聊天室显示 音乐、视频、pdf文件等等，还有其他一些玩法可以试试发送哎奇艺视频地址

发表情包

表情包使用的是本博客同款的OwO表情包插件，按照作者的方法引入发送表情包是发送的带有img标签的html代码，由于聊天室限制字数，所以发送表情包也是使用了前面说的正则替换，选择发送的标签包后可以看到输入框会出现代表那个表情包的代码，发送后就会显示那个表情包。

如果觉得我加的表情包够用可以直接引用我的链接，在html代码里插入即可，我已经把OwO插件整合进这个js中了。

1
<script src="//dh.z-l.top/chat.js" async="async" fold></script>

自定义表情

如果有喜欢的表情包，但我添加的表情里面没有，可以自行下载上面的chat.js文件自己修改OwO表情包json文件的api地址，由于我没有完善，替换api地址暂时无效。

感谢看到这里，由于能力和时间暂时就写成这样了，也修改了一些其他地方，有问题请留言滴滴我

代办：

聊天中图片点击放大显示（使用图片灯箱插件）

显示网易云歌曲

发图片（使用现有图床插件）

小人举牌(发送关键词 ”/jp 你的内容“)

每天60s新闻(发送关键词 ”日报“)

新消息邮件通知（使用vercel和qq邮箱smtp）

。。。

。。。

参考资料

小尬聊天室外挂：https://ld246.com/article/1534741351807?r=icheer

OwO 表情插件：https://github.com/DIYgod/OwO

纯代码给 WordPress 文章和评论添加 OwO 表情教程:https://cloud.tencent.com/developer/article/2160309

typecho新增OwO自定义表情包，适配所有主题，全网最详细:https://blog.wm404.com/2022/05/07/c3028464.html