简单模拟QQ聊天栏组件

注意

此页为于 SCP 维基内部使用的"组件"页。用于在其他页面中引用。

未经组件作者或工作人员允许,请勿修改此页的内容。

评分: +73

简介

这是一个旨在让你以更简单的格式插入聊天记录的组件。基本的思路是用Wikidot的基础语法(##颜色|文本##、//斜体//、{{等宽}})替代复杂的[[div class="..."]]和[[span class="..."]]。

优点:

不需要写一句就include一下,只需要非常非常简单的维基语法。
源代码更简洁,可读性更强。
加载速度更快。
更方便二次修改。

由于部分版式会魔改Wikidot基础语法,此组件在带版式的页面上可能出现奇奇怪怪的bug。请在讨论区报告版式兼容问题。

使用教程

要引用此组件,需要在页面最开头插入以下代码:

[[include :scp-wiki-cn:component:ezchat
|darkmode=↵填入"*",可以启用暗色模式。留空则是亮色模式。
|customHeadColor=↵必须和下面那个选项一起启用或者关闭。填入"*",自定义标题栏的背景颜色。
|headColor=↵在上面那个选项启用后,在这个选项填入一个任意格式的颜色值。留空则和底部输入栏保持一致。
]]

然后,在你需要插入聊天记录的地方:

第一步

复制粘贴下面的内容。

[!-- =====从这里开始复制===== --]
[[div class="ezchat container"]]
[[div class="ezchat head"]]
##ezchat-ui-icon return|返回## ##ezchat-ui-button messages|99+## ##head-title|聊天名称## ##ezchat-ui-icon menu|菜单##
[[/div]]
[[div class="ezchat chat-content"]]
[!-- =====聊天记录主体从这里开始===== --]

[!-- =====聊天记录到这里结束===== --]
[[/div]]
[[div class="ezchat bottom"]]
##ezchat-ui-icon voice|语音## ##bottom-input|待发送的消息内容## ##ezchat-ui-icon emojis|表情## ##ezchat-ui-icon more|更多##
[[/div]]
[[/div]]
[!-- =====从这里结束复制===== --]

其中,"99+"、"聊天名称"、"待发送的消息内容"都是可以随意填写的。

第二步

告诉组件你需要哪些人出来聊天。

以这样的形式定义一个用户:

除了id之外,所有的选项都不是必填的。例如,如果聊天记录中需要一个叫"林南"的角色,但不想要头像只想要头像框颜色,可以这样做:

[[include :scp-wiki-cn:component:ezchat-define
|id=linnan
|color=#114514
]]

想定义一个新的用户,就要把这段代码重新复制一遍,再修改里面的内容。

但你也可以不定义用户,这样头像会显示为默认头像,适合故事里的NPC。

第三步

在"[!-- =====聊天记录主体从这里开始===== --]"和"[!-- =====聊天记录到这里结束===== --]"之间,以这样的形式插入聊天记录:

↓最基础的聊天记录。
##name userid|用户名称##
> 你好啊

↓自己发送的信息(节省时间的小窍门:选中后按一下编辑面板的"div")。
[[div]]
##name userid|用户名称##
> 为什么你们都在左边,就我在右边,你们是不是孤立我?
[[/div]]

↓一个人连续发送了几条消息。类似Discord,这样可以省略几个头像。
##name userid|用户名称##
> UP主您好

> 吃小份去吧

↓群管理发的消息。
##name admin userid|{{管理员}}用户名称##
> 作为管理我是不是应该制止这类话题?

↓群主发的消息。
##name host userid|{{群主}}用户名称##
> 严肃观看。

↓有群头衔的成员发的消息。
##name title userid|{{头衔名称}}用户名称##
> 你们这群真是压抑完了。

↓自己发送的信息,但希望头衔在用户名称的左边。其实我觉得无所谓。
[[div]]
##name title userid|用户名称{{头衔名称}}##
> 我这个级别的基米有权哈任何人。
[[/div]]

↓一个人发送了很长一段消息,里面有换行。
##name userid|用户名称##
> 发长难句为什么不加逗号既然你知道句子很长很难那不应该加上逗号让读者读明白吗不然他们一口气看下去读到一半发现自己不知道在读哪里该怎么办
> 逗号又不要钱而且不加标点会让整个段落看起来像一团乱麻读者需要反复阅读才能理解你的意思这难道不是浪费大家的时间吗写作的目的是沟通而不是制造障碍所以请记得在适当的地方加上逗号让句子更清晰易懂
> 说起来其实这就是Wikidot引用块的语法吧?

↓@某个人。
##name userid|用户名称##
> 出来修bug,##at|@被at的用户名称##!

↓贴表情。
##name userid|用户名称##
> 你喜欢大红按钮吗?emoji没有。但我们有。
{{##emoji|😭 2## ##emoji|😡 3##}}

↓贴大红按钮(效果见末尾)。
##name userid|用户名称##
> K圣。
{{##emoji emoji-red-button|1## ##emoji emoji-red-button-fast|2##}}

↓居中提示消息,比如入群、禁言或者拍一拍。
//说的道理拍了拍你//

↓回复某条消息。
##name userid|用户名称##
> ##reply|用户名称2:进攻D点!##
> 不行!

↓发送图片。
##name userid|用户名称##
> [[image 图片URL地址]]

其中,userid需要被替换为你定义的角色,如果按照上面的例子,那就应该替换成linnan。如果只有一个光秃秃的name,这个人的头像就会变成默认的用户图标。

请注意,userid不能是:name、admin、title、host、ezchat-ui-icon等关键字,否则可能导致bug,就像你不能给某个python变量起名为"False"或者"if"一样。

示例

返回 99+ Sara.AIC舰长群菜单

超绝可爱Sara酱群主

那什么,反正这是一个聊天记录示例。

@全体成员我现在展示一下这些格式

NPC1

不赖
我看这个Sara也是风韵犹存

🤣 4 🎉 3 🥵 4

NPC2

1

超绝可爱Sara酱群主

你知道幻象计划吗?它拯救的小粉丝超出你的想象。
QQ20250528-130932.png

O5-3"小孩"加入了群聊

真的O5-3

大家好。

管理员S处

谁家小孩?

🤣 9 🐛 7 😈 3 💥 2 😭 2 😚 2 😎 2 😨 1 🤤 1 😂 1 🎃 1 🤔 1 🐱1 🔥 1

邪恶黑标BasaltHighlighter.AIC

S处:谁家小孩?
S处区完了

2025年10月7日

超绝可爱Sara酱群主

更新:Kcorena 制作的大红按钮GIF已被部署在此组件。你可以通过##emoji emoji-red-button|1##的方式展示这个完美的续标识。

3 5

2025年10月8日

超绝可爱Sara酱群主

更新:Sharia Vanilla 为此组件制作了一个组件扩展,允许你真的通过点击贴表情的方式增加贴表情的数量。点击此处查看。

语音有bug请在讨论区反馈,谢谢捏表情更多

:root{
 --ezchat-layer-1:#ffffff;
 --ezchat-layer-2:#f3f3f3;
 --ezchat-layer-3:#e2e2e2;
 --ezchat-layer-4:#cdcdcd;
 --ezchat-font-color:#000000;
 --ezchat-name-color:#6b6b6b;
 --ezchat-head-color: var(--ezchat-layer-3);
}
 
/*SVGdataURL*/
 
:root{
 
 --ezchat-icon-chevron-left: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1sZWZ0IiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjM1NCAxLjY0NmEuNS41IDAgMCAxIDAgLjcwOEw1LjcwNyA4bDUuNjQ3IDUuNjQ2YS41LjUgMCAwIDEtLjcwOC43MDhsLTYtNmEuNS41IDAgMCAxIDAtLjcwOGw2LTZhLjUuNSAwIDAgMSAuNzA4IDB6Ii8+Cjwvc3ZnPg=="); /* 返回 左箭头 */
 
 --ezchat-icon-list: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktbGlzdCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjUgMTJhLjUuNSAwIDAgMSAuNS0uNWgxMGEuNS41IDAgMCAxIDAgMUgzYS41LjUgMCAwIDEtLjUtLjV6bTAtNGEuNS41IDAgMCAxIC41LS41aDEwYS41LjUgMCAwIDEgMCAxSDNhLjUuNSAwIDAgMS0uNS0uNXptMC00YS41LjUgMCAwIDEgLjUtLjVoMTBhLjUuNSAwIDAgMSAwIDFIM2EuNS41IDAgMCAxLS41LS41eiIvPgo8L3N2Zz4="); /* 菜单 三横线 */
 
 --ezchat-icon-mic: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktbWljIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik0zLjUgNi41QS41LjUgMCAwIDEgNCA3djFhNCA0IDAgMCAwIDggMFY3YS41LjUgMCAwIDEgMSAwdjFhNSA1IDAgMCAxLTQuNSA0Ljk3NVYxNWgzYS41LjUgMCAwIDEgMCAxaC03YS41LjUgMCAwIDEgMC0xaDN2LTIuMDI1QTUgNSAwIDAgMSAzIDhWN2EuNS41IDAgMCAxIC41LS41eiIvPgogIDxwYXRoIGQ9Ik0xMCA4YTIgMiAwIDEgMS00IDBWM2EyIDIgMCAxIDEgNCAwdjV6TTggMGEzIDMgMCAwIDAtMyAzdjVhMyAzIDAgMCAwIDYgMFYzYTMgMyAwIDAgMC0zLTN6Ii8+Cjwvc3ZnPg=="); /* 语音 麦克风 */
 
 --ezchat-icon-emoji-smile: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZW1vamktc21pbGUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTggMTVBNyA3IDAgMSAxIDggMWE3IDcgMCAwIDEgMCAxNHptMCAxQTggOCAwIDEgMCA4IDBhOCA4IDAgMCAwIDAgMTZ6Ii8+CiAgPHBhdGggZD0iTTQuMjg1IDkuNTY3YS41LjUgMCAwIDEgLjY4My4xODNBMy40OTggMy40OTggMCAwIDAgOCAxMS41YTMuNDk4IDMuNDk4IDAgMCAwIDMuMDMyLTEuNzUuNS41IDAgMSAxIC44NjYuNUE0LjQ5OCA0LjQ5OCAwIDAgMSA4IDEyLjVhNC40OTggNC40OTggMCAwIDEtMy44OTgtMi4yNS41LjUgMCAwIDEgLjE4My0uNjgzek03IDYuNUM3IDcuMzI4IDYuNTUyIDggNiA4cy0xLS42NzItMS0xLjVTNS40NDggNSA2IDVzMSAuNjcyIDEgMS41em00IDBjMCAuODI4LS40NDggMS41LTEgMS41cy0xLS42NzItMS0xLjVTOS40NDggNSAxMCA1czEgLjY3MiAxIDEuNXoiLz4KPC9zdmc+"); /* 表情 笑脸 */
 
 --ezchat-icon-plus-circle: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGx1cy1jaXJjbGUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTggMTVBNyA3IDAgMSAxIDggMWE3IDcgMCAwIDEgMCAxNHptMCAxQTggOCAwIDEgMCA4IDBhOCA4IDAgMCAwIDAgMTZ6Ii8+CiAgPHBhdGggZD0iTTggNGEuNS41IDAgMCAxIC41LjV2M2gzYS41LjUgMCAwIDEgMCAxaC0zdjNhLjUuNSAwIDAgMS0xIDB2LTNoLTNhLjUuNSAwIDAgMSAwLTFoM3YtM0EuNS41IDAgMCAxIDggNHoiLz4KPC9zdmc+"); /* 更多 圆圈加号 */
 
}
 
/*ezchat*/
 
#main-content.ezchat{background: var(--ezchat-layer-2);
 display: flex;
 width:100%;
 font-size:1rem;
}#main-content.ezchatp{line-height: unset !important;
}#main-content.ezchat.container{flex-direction: column;
 color: var(--ezchat-font-color);
}#main-content.ezchat.head{flex-direction: row;
 justify-content: space-between;
 background: var(--ezchat-layer-3);
 padding:1rem 1rem;
 width:auto;
 align-items:center;
}#main-content.ezchat.chat-content{flex-direction: column;
}#main-content.ezchat.bottom{flex-direction: row;
 justify-content: space-between;
 padding:1rem 1rem;
 align-items:center;
 width:auto;
 background: var(--ezchat-layer-3);
 margin-top:2rem;
}
 
/*ezchathead*/
 
#main-content.ezchat.headp, .ezchat.bottomp{display: contents;
}#main-contentspan[style*="ezchat-ui-icon"]{display:inline-block;
 font-size:0;
 width:1.4rem;
 height:1.4rem;
 background-position:center;
 background-repeat:no-repeat;
 background-size: cover;
}span[style*="ezchat-ui-icon return"]{background-image: var(--ezchat-icon-chevron-left);
}#main-contentspan[style*="ezchat-ui-icon menu"]{background-image: var(--ezchat-icon-list);
}#main-contentspan[style*="ezchat-ui-button messages"]{display:inline-block;
 background: var(--ezchat-layer-4);
 border-radius:1rem;
 padding:0.1rem 0.3rem;
 font-size:0.75rem;
}#main-contentspan[style*="head-title"]{display:block;
 width: calc(100% - 6rem);
 padding-left:1rem;
}
 
/*ezchatbody*/
 
#main-content.ezchat.chat-content>p{display:block;
 margin:0.8rem 1.2rem;
 padding:0;
}#main-content.ezchatblockquotep{
 /*display: contents; */
 padding:0;
 margin:0;
}#main-content.ezchat.chat-contentp>span[style*="name"]{padding-left:1.4rem;
 color: var(--ezchat-name-color);
 font-size:0.9rem;
 display:inline-block;
}#main-content.ezchat.chat-contentp>span[style*="name"]::before{display:inline-block;
 width:1.8rem;
 height:1.8rem;
 border-radius:50%;
 border:solid2px var(--ezchat-layer-4);
 content: '';
 margin:0.4rem 0.4rem -1.2rem -1.1rem;
 background-position:center;
 background-repeat:no-repeat;
 background-size: cover;
}#main-content.ezchat.chat-contentp>span[style="color: name"]::before{background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDhhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0yLTNhMiAyIDAgMSAxLTQgMCAyIDIgMCAwIDEgNCAwem00IDhjMCAxLTEgMS0xIDFIM3MtMSAwLTEtMSAxLTQgNi00IDYgMyA2IDR6bS0xLS4wMDRjLS4wMDEtLjI0Ni0uMTU0LS45ODYtLjgzMi0xLjY2NEMxMS41MTYgMTAuNjggMTAuMjg5IDEwIDggMTBjLTIuMjkgMC0zLjUxNi42OC00LjE2OCAxLjMzMi0uNjc4LjY3OC0uODMgMS40MTgtLjgzMiAxLjY2NGgxMHoiLz4KPC9zdmc+); /* 默认头像 */
 background-size:65%;
}#main-content.ezchatblockquote{display:inline-block;
 padding:0.3rem 0.8rem;
 box-shadow:none;
 background: var(--ezchat-layer-1);
 border-radius:0.5rem;
 width: max-content;
 margin: -0.4rem 0rem 0.9rem 3.8rem;
 max-width: min(25rem, calc(100% - 10rem));
 border: unset;
}#main-content#page-content.ezchat.chat-contentp>tt{font-family: unset;
 font-size: unset;
 margin: -1.2rem 0rem -0.3rem 2.6rem;
 display:block;
 background-color: unset;
 border-radius: unset;
 max-width: min(20.1rem, calc(100% - 5rem));
 color: unset;
 padding: unset;
}#main-content#page-content.ezchat.chat-contentdivp>tt{width:15rem;
 text-align:right;
 margin: -0.5rem 0rem -0.8rem 1.9rem;
}#main-content.ezchat.chat-contentpspan[style*="emoji"]{display:inline-block;
 background: var(--ezchat-layer-3);
 border-radius:0.4rem;
 padding:0.2rem 0.3rem;
 font-size:0.8rem;
 margin:0rem 0.3rem 0.3rem 0rem;
}#main-content.ezchat.chat-content>pem{text-align:center;
 display:block;
 font-style:normal;
 font-size:0.9rem;
 color:#959595;
}#main-content.ezchat.chat-contentp>span[style*="reply"]::after{content: '↸';
 transform: scaleX(-1) translateY(-0.1rem);
 display:inline-block;
 padding-right:0.8rem;
 font-size:75%;
}#main-content.ezchat.chat-contentp>span[style*="reply"]{background: var(--ezchat-layer-2);
 border-radius:0.2rem;
 padding:0.2rem 0.4rem 0.3rem 0.4rem;
 margin:0.3rem 0rem 0.3rem -0.2rem;
 font-size:0.9rem;
 display:inline-block;
 color: var(--ezchat-name-color);
}#main-content.ezchatblockquoteimg{width:100%;
 display:block;
 margin:0.5rem 0rem 0.4rem 0rem;
 border-radius:0.5rem;
}#main-content.ezchat.chat-contentdiv{display: flex
;
 flex-direction: column;
 align-items: flex-end;
}#main-content.ezchat.chat-contentdivp>span[style*="name"]{display: flex
;
 flex-direction: row-reverse;
 margin:0rem 0rem -1.4rem 0rem;
}#main-content.ezchat.chat-contentdivp>span[style*="name"]::before{margin:0rem 0.9rem -0.1rem 0.6rem;
}#main-content.ezchat.chat-contentdivblockquote{margin:0.4rem 3.4rem 0rem 0rem;
}#main-content#page-content.ezchat.chat-contentdivpspantt{text-align:right;
 margin:0rem 0rem 0rem calc(100% - min(23rem, calc(100% - 2rem)));
}#main-content#page-content.ezchat.chat-contentp>span[style*="title"]tt{background: #be7dd936;
 color:#a444b5;
}#main-content#page-content.ezchat.chat-contentp>span[style*="host"]tt{background: #d9b97d36;
 color:#c88621;
}#main-content#page-content.ezchat.chat-contentp>span[style*="admin"]tt{background: #7dd9d536;
 color:#3c8ea1;
}#main-content#page-content.ezchat.chat-contentp>:is(span[style*="admin"], span[style*="host"], span[style*="title"]) tt{border-radius:0.3rem;
 margin:0.2rem 0.2rem;
 padding:0.1rem 0.2rem;
 font-size:0.75rem;
 display:inline-block;
 font-family: unset;
}#main-content#page-content.ezchat.chat-contentdivp>:is(span[style*="admin"], span[style*="host"], span[style*="title"]) tt{margin-bottom:0.5rem;
 margin-top:0.1rem;
}#main-content.ezchatspan[style="color: at"]{color:#28a5f8;
 cursor:pointer;
}
 
/*ezchatbottom*/
 
#main-contentspan[style*="ezchat-ui-icon voice"]{background-image: var(--ezchat-icon-mic);
}#main-contentspan[style*="ezchat-ui-icon emojis"]{background-image: var(--ezchat-icon-emoji-smile);
}#main-contentspan[style*="ezchat-ui-icon more"]{background-image: var(--ezchat-icon-plus-circle);
}#main-contentspan[style*="bottom-input"]{display:inline-block;
 width: calc(100% - 8rem);
 padding:0.3rem 1rem;
 background: var(--ezchat-layer-1);
 border-radius:0.7rem;
}
 
/*customEMOJI*/
 
#main-content.ezchat.chat-contentpspan[style*="emoji emoji-red-button"]::before{content: '';
 display:inline-block;
 width:1.1rem;
 height:0.7rem;
 background: url(https://scpsandboxcn.wikidot.com/local--files/oxygen9-files-2/red_button.gif) no-repeatcenter / contain;
 transform: scale(1.5) translateY(0.1rem);
}#main-content.ezchat.chat-contentpspan[style*="emoji emoji-red-button-fast"]::before{content: '';
 display:inline-block;
 width:1.1rem;
 height:0.7rem;
 background: url(https://scpsandboxcn.wikidot.com/local--files/oxygen9-files-2/red_button_fast.gif) no-repeatcenter / contain;
 transform: scale(1.6) translateY(0.1rem);
}

Footnotes

. 如果想在其他地方插入这个表情,只能以[[image]]的形式直接嵌入图像。不过由于Wikidot的抽象问题,如果你尝试以这样的形式插入"XX回应了你的消息",会出现bug:

//##at|XXX## 回应了你的消息:[[image https://scpsandboxcn.wikidot.com/local--files/oxygen9-files-2/red_button.gif width="20px"]]//

一个解决方案是这样做:

= //##at|XXX## 回应了你的消息:[[image https://scpsandboxcn.wikidot.com/local--files/oxygen9-files-2/red_button.gif width="20px"]]//

它强制为em元素包裹了一层p元素,从而让CSS正常工作。可以把https://scpsandboxcn.wikidot.com/local--files/oxygen9-files-2/red_button.gif换成https://scpsandboxcn.wikidot.com/local--files/oxygen9-files-2/red_button_fast.gif,大红按钮的速度会加快。

原创组件

页面版本: 22, 最后编辑于: 10 Oct 2025 16:54

讨论 (13)

SCP基金会

控制,收容,保护

简介

使用教程

第一步

第二步

第三步

示例