注意
此页为于 SCP 维基内部使用的"组件"页。用于在其他页面中引用。
未经组件作者或工作人员允许,请勿修改此页的内容。
使用示例
John Jacob Jingleheimer Schmidt
这是测试消息。
哇哦,真的吗?
这可真酷!
这是多行消息吗?
你真的这么想?
那可太好了!
对,它有多个行!
耶!
多谢,JaonHax!
等等,我是不是弄坏了它的滚动功能?
是啊。
我想是的。
那,好吧。
我猜 JaonHax 不得不让这玩意儿没有最大高度限制,嗯?
对,我想也是。
不管怎样,我们大概应该让读到这里的好人们继续去忙他们自己的事情。
拜,好人!
嗯,拜!
使用方法
/*Basicmessagecode*/ .text-container.text{border-radius:18px; text-align:left; display:inline-block; padding:8px12px; font-weight:500; margin:1.5px10px; max-width:300px; } /*Containerfor "received" messages*/ .recv{text-align:left; margin-right:20px; } /*Containerfor "sent" messages*/ .sent{text-align:right; margin-left:20px; }.sent.text{border-bottom-right-radius:3px; background-color:#267AE9; color:white; }.recv.text{border-bottom-left-radius:3px; background-color:#dadada; color:black; } /*Fancystuffonthecornersofmessageswithanothermessagefromsamepersonabovethem*/ .sent.text:not(:first-child) {border-top-right-radius:4px; }.recv.text:not(:first-child) {border-top-left-radius:4px; }.text-containerp{margin:0015px; } /*Messageareastuff*/ /*Headerstyling*/ .text-container-wraph1, .text-container-wraph2, .text-container-wraph3, .text-container-wraph4, .text-container-wraph5, .text-container-wraph6{color:black; font-weight:bold; margin:0auto10px; position:relative; top:-8px; } /*Externalbox*/ .text-container-wrap{text-align:center; margin:auto; display:block; margin-top:25px; width:400px; padding-top:25px; border-radius:10px; border:3pxsolid#666; background-color:#fff; overflow:none; box-sizing:border-box; pointer-events:none!important; position:relative; } /*Makeitsoitlookslikeausercan'thighlightthetext (eventhoughtheycan), soitfeelsmorebelievable*/ .text-container-wrap*::selection{background-color:transparent!important; color:inherit!important; } /*Internalbox*/ .text-container{box-shadow:1px1px7px#aaainset; margin:0pxauto25px; width:350px; display:block; padding:25px0px6px; background-color:#f7f7f7; }
所以,你想用我的这个东西,嗯哼?那么首先,你需要在你的页面顶端版式下方添加如下组件(任何维基均可使用):
[[include :scp-wiki:component:text-style]]
接着,在你想要的地方添加如下语法。也可以在一个页面中添加多次。
[[div class="text-container-wrap"]]
+++ 你的发信人名称
[[div class="text-container"]]
[!-- 记住这个地方 --]
[[/div]]
[[/div]]
确保将"你的发信人名称"替换为你想要出现在顶端的名称——或者根本没有!如果你不添加发信人名称,文本消息框会自动调整为不显示发信人的形式!它也能根据不同大小的标题自动调整高度!
标准尺寸标题
这是占位符短信框…
这样你能明白我的意思吧!
这是占位符短信框…
这一个没有标题…
这样你能明白我的意思吧!
更大的标题
这是占位符短信框…
这样你能明白我的意思吧!
非常极其超级小的标题
这是占位符短信框…
这样你能明白我的意思吧!
现在,还记得不到 5 秒之前我让你记住的那个地方吗?你需要将所有短信置于其中。方法如下(根据发送(sent)或接受(received)短信,将"sent/recv"改为"sent"或"recv"):
单独短信:
[[div class="sent/recv"]]
[[span class="text"]]只有我一个人...[[/span]]
[[/div]]
多行短信:
[[div class="sent/recv"]]
[[span class="text"]]我是 _
多行 _
短信!![[/span]]
[[/div]]
一系列附加短信:
[[div class="sent/recv"]]
[[span class="text"]]这是一系列[[/span]]
[[span class="text"]]附加短信![[/span]]
[[/div]]
一系列非附加短信(但是来自于同一个人):
[[div class="sent/recv"]]
[[span class="text"]]这是一系列[[/span]]
[[/div]]
[[div class="sent/recv"]]
[[span class="text"]]非附加短信![[/span]]
[[/div]]
对于最后一种情况,你需要确保将所有 sent/recv 改为相同的值,这样它们才能显示为来自同一个人。
就这样了!你现在已经知道怎么使用这个了!现在回去用它来做些很酷的东西吧!
- 添加图像/附件支持
- 添加用时间戳标记消息的功能
- 添加插入日期/时间分隔符的功能(带有日期/时间的水平线,从而表示时间的进展)
- 将来我能想到的其他东西