本模板是一个利用CSS代码,模仿QQ聊天(群聊)对话的效果实现。
本模板最大支持7个来往聊天,可根据使用情况直接修改原模板动态添加。
基本使用
基本使用包括对文字及头像部分的简单调用。
单接收者/发送者
本格式为只有1个发送者和1个接收者的模板呈现方式。
代码 | 示例 |
---|---|
{{ChatBubble
|receiver1 = 晓航每天都想划船
|receiver1-avatar = [[File:晓航头像.jpg|class=chat-widget-inline-avatar]]
|receiver1-label = Lv100 群主
|receiver1-text = 为什么要开一个新系列?
|sender1 = 靴猫
|sender1-avatar = [[File:靴猫自绘.jpg|class=chat-widget-inline-avatar]]
|sender1-label = Lv100 管理员
|sender1-text = 因为想发更多的糖呀。
}}
|
要点:
- 每个参数都要填写,尤其是receiver1/sender1,模板只有判断这两个参数不为空才可显示对应的聊天。
- receiver和sender可以只填写一个,从而获得只有一个人说了一句话的效果。
- 图片中的
class=chat-widget-inline-avatar
参数必须附带,否则样式会崩坏。
多接收者/发送者
代码 | 示例 |
---|---|
{{ChatBubble
|receiver1 = 晓航每天都想划船
|receiver1-avatar = [[File:晓航头像.jpg|class=chat-widget-inline-avatar]]
|receiver1-label = Lv100 群主
|receiver1-text = 为什么要开一个新系列?
|sender1 = 靴猫
|sender1-avatar = [[File:靴猫自绘.jpg|class=chat-widget-inline-avatar]]
|sender1-label = Lv100 管理员
|sender1-text = 因为想发更多的糖呀。
|sender2 = 靴猫
|sender2-avatar = [[File:靴猫自绘.jpg|class=chat-widget-inline-avatar]]
|sender2-label = Lv100 管理员
|sender2-text = 因为想发更多的糖呀。
|receiver3 = 晓航每天都想划船
|receiver3-avatar = [[File:晓航头像.jpg|class=chat-widget-inline-avatar]]
|receiver3-label = Lv100 群主
|receiver3-text = 得了发稿PTSD,每到周二、四、日晚上的七点都会精神性抽搐。
}}
|
要点:
- 如果在同一组发送者和接收者中,为了连续对话省略了一个发送者/接收者,那么新的参数编号必须+1。如在上面例子中,存在参数receiver1、sender1、sender2,若要再附带一个receiver,则需填写receiver3
进阶使用
本模板有多个高级参数,可以改变头衔颜色、文字颜色等等,已有的参数也可以通过使用特殊代码增强显示效果。
使用<img>标签修改头像图片(不推荐)
<img>
标签即将弃用,且存在安全问题,不建议使用。
代码 | 示例 |
---|---|
{{ChatBubble
|receiver1 = User:Zorua Fox
|receiver1-avatar = <img src="https://youshou.wiki/extensions/Avatar/avatar.php?user=Zorua_Fox" alt="Sender Avatar" class="avatar">
|receiver1-label = Lv100 群主
|receiver1-text = 这是一行测试文字。
}}
|
代码说明
代码说明:
{{ChatBubble
|receiver1 =<!-- 接收者(左侧)名称 -->
|receiver1-avatar =<!-- 接收者头像,可使用带样式的wikitext(如[[File:晓航头像.jpg|class=chat-widget-inline-avatar]])或使用img标签(不推荐)-->
|receiver1-label =<!-- 接收者头衔文字 -->
|receiver1-text =<!-- 接收者聊天内容 -->
|sender1 =<!-- 发送者(右侧)名称 -->
|sender1-avatar =<!-- 发送者头像,使用见上 -->
|sender1-label =<!-- 发送者头衔文字 -->
|sender1-text =<!-- 发送者聊天内容 -->
}}