Discord 聊天室组件扩展

[[div_ class="discord"]]
[[div_ class="messages-panel"]]
[[div_ class="messages-group"]]
[[div_ class="messages"]]

[[/iftags]]

[[div_ class="message two"]]

[[div_ class="body"]]

Corvas

今天 15:54

[[div_ class="content"]]

这是什么？

这是由 hoah2333 与 Etinjat 共同制作的 Discord 聊天室组件扩展。原为基金会半月刊的访谈特刊所制作。组件效果见半月刊设定访谈第一期。

本组件不与任何 SCP、故事、GoI 格式、设定所挂钩。也就是说该组件不为半月刊专用，你可以把它用在任何你喜欢的文章之中，比如 Discord 观谬群组之类的。

[[/div]]
[[/div]]
[[/div]]

[[div_ class="message one"]]

[[div_ class="body"]]

GOTO 20

今天 16:17

[[div_ class="content"]]

怎么使用？

模块暂不可用： 此动态功能尚未由只读迁移站支持。

本组件为暗码版式与 Discord 聊天室组件的扩展，你需要先引入暗码版式，但无需再次引入原 Discord 聊天室组件。

在页面顶部填入以下代码：

[[include :scp-wiki-cn:theme:darkcode]]
[[include :scp-wiki-cn:component:discord-extension |source= --]]]

其中，component:discord-extension支持多种变量。完整引入代码如下：

[[/div]]
[[/div]]
[[/div]]

[[iftags -_源代码]]

[[div_ class="message two
"]]

Corvas

今天 16:30

[[/iftags]]

其次，将以下内容放置到正文区。这是本组件的标准结构：

[[module rate]]
[[div class="discord-wrap"]]
[[div class="discord-userlist"]]

在此插入 Userlist 组件，可参照本页下方的简易教程。

[[/div]]

[[div class="discord-main"]]

在此插入 Discord 聊天室组件，可参照原 Discord 聊天室组件中的说明或本页下方的简易教程。

[[/div]]
[[/div]]

以下为一个标准示例：

[[div class="discord-wrap"]]
[[module rate]]
[[div class="discord-userlist"]]
[[div class="userlist-reader"]]

[!----------如果前面不使用 [[module rate]] 的话可用这个： -------------]
[[include :scp-wiki-cn:component:discord-extension-source |reader-and-rate= --]]]

其中，组件第二行的 [[module rate]] 仅为建议添加位置，你可以将评分模块移动到别的你觉得顺眼的地方。或者直接去掉，使用 userlist 组件的评分模块。

以下为组件各部分详解。

[[/div]]
[[/div]]
[[/div]]

Userlist 组件简易教程

[[iftags -_源代码]]

[[div_ class="message one
"]]

GOTO 20

今天 16:55

[[/iftags]]

Userlist 组件由以下结构组成：

[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] {{模式}}
变量
]]

它具有以下六个变量：

并具有以下几种模式，分别适配不同的变量组合。其中除usercolor、userlink、description外所有变量均为必填。模式五中所有变量均为选填。

|user= --] <- usericon、username、userlink、usercolor、description
|user-shot= --] <- userid、username、userlink、usercolor、description
|unset= --] <- usericon、username、userlink、usercolor、description
|reader= --] <- usercolor、description
|rate= --] <- usericon、username

模式一：可自定义头像地址与用户名，点击后链接将自动跳转至与用户名同名的用户个人资料页。（推荐）
模式二：可自定义用户名，点击后链接将自动跳转至与用户名同名的用户个人资料页。同时你还需要获取到该用户的 uid 以显示其头像。（不推荐）
模式三：可自定义头像地址、用户名与跳转链接。
模式四：指定读者本身，使用默认设置。但同样可填写以上内容，以显示给未登录访客。另外，需搭配[[div class="userlist-reader"]]使用，否则在未登录用户的视角下在线列表将变得略为怪异。
模式五：可以将用户列表里的评分栏转为用户样式，可自定义头像部分和评分文本。默认头像为 Discord 头像，默认评分文本为 评分：。
模式六：整合模式4和5，并调整了手机排版。

~~注意前两个模式的用户名不应虚构，否则将出现“未找到用户”的提示。~~已可通过填写 userlink 来解决此问题。
由于通常位于右上角的用户模块已隐藏，所以我们建议你至少使用 1 个模式四部件。

模式一示例：

此即右方的用户 hoah2333 所使用的代码。

模式三示例：

此即右方的用户 Corvas 所使用的代码。

模式四示例：

[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |reader= --]
|usercolor=用户名颜色
|description=用户描述
]]

模块暂不可用： 此动态功能尚未由只读迁移站支持。

以下是显示给未登录用户的自定义代码，不填则使用默认值：

[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |reader= --]
|username=用户名，默认为: 游客
|usericon=头像，默认为: default_avatar
]]

本页面为演示默认值情况，所以右方的用户模块所使用的颜色及个人状态与本示例不同。

模式五示例：

[[include :scp-wiki-cn:component:discord-extension-source |userlist= --]| rate= --]
|usericon=选填，不填则使用默认图像。
|username=选填，不填则使用默认文本 评分：
]]

此为右方评分栏样式。

模式六示例：

此模式目的是为了在宽屏时显示读者的账户，在宽屏时隐藏，同时让评分模组置于账户上，但不受隐藏读者账户的影响：

[[include :scp-wiki-cn:component:discord-extension-source |reader-and-rate= --]]]

在此情况下，为了区分评分栏和用户栏的自定义选项，需要在原本选项下加后缀 -rate 或 -reader，如：

|usericon-rate=评分栏头像
|usericon-reader=浏览者头像

原本代码为：

[[div class="userlist-reader mob-show"]]
+* 在线用户 - 1
[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |rate= --]
]]
[[/div]]
[[div class="userlist-reader"]]
+* 在线用户 - 2
[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |rate= --]
]]
[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |reader= --]
]]
[[/div]]

提示：

1. 创建空行

在平列的四个@中间，加上空格，即一个空格左右两边都有 2 个@，即@@ @@。该处需独立为一行。

像这样。

2. 隐藏用户头像的灰色边框

[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] | 任意模式= --]
|userlist-class=noimgbd
]]

3. 分组

你可以在两名用户之间加上+* XXX — （人数）来分组或标记用户。人员的分组可以按人数来进行，多双数一组，以减少组别减少窄屏下空间占用。可以参照以下分类（括号内为填入 description 的文本）：

少人：采访对象（发起人、主创）、采访小组（采访者123、整理员123）
多人：采访者、受访者、协助者

[[/div]]
[[/div]]
[[/div]]

Discord 组件简易教程

[[iftags -_源代码]]

[[div_ class="message one
"]]

GOTO 20

今天 17:17

[[/iftags]]

若是不懂如何使用 Discord 聊天室组件，这里是一个精简版教程：

[!------------------ 组件开始 -------------------]
[[include :scp-wiki-cn:component:discord-chat-source |inc-start= --] ]]
[[# d-start]]
[!----------- 重复此可为多个用户设置样式 -----------]
[[include :scp-wiki-cn:component:discord-chat-source |inc-user= --]
|user-id=唯一预设名
|username=用户名
|usericon=用户头像地址
|usercolor=用户名颜色
]]

[!------------------ 叠楼开始串 -------------------]

[[include :scp-wiki-cn:component:discord-chat-source |inc-msg-start= --]
|user-id=唯一预设名
|username=用户名
|msg-time=@@ @@
]]
重复复制此块可以叠楼层
[[include :scp-wiki-cn:component:discord-chat-source |inc-msg-end= --] ]]

[!------------------ 叠楼结束串 -------------------]

[[# d-end]]
[[include :scp-wiki-cn:component:discord-chat-source |inc-end= --] ]]
[!------------------ 组件结束 -------------------]

详细教程请参见 Discord 聊天室组件页。
另外，在该组件页中所提及的所有“可选项目”均可在本扩展中使用。

[[/div]]
[[/div]]
[[/div]]

[[iftags -_源代码]]

[[div_ class="message two
"]]

Corvas

今天 20:34

[[/iftags]]

就是这样。以及如果你注意到了的话，用户列表和 Discord 聊天室组件都有同样的变量（如下所示）。这是在提醒你可以在两个组件中直接复制对应的变量，以生成同样的用户头像、用户名、用户名颜色。

|username=用户名
|usericon=用户头像地址
|usercolor=用户名颜色

[[/div]]
[[/div]]
[[/div]]

扩展效果

[[iftags -_源代码]]

[[div_ class="message one
"]]

GOTO 20

今天 21:17

[[/iftags]]

你已被邀请加入一个服务器

[[div class="invite-imgblock" style="background-image: url('https://o5command-int.wdfiles.com/local--files/tech-team:graphic-templates/scp-logo-cn-400.png
')"]]

[[a class="invite-name" href="https://discord.gg/uCFCeKj
"]]SCP-CN 官方中文分部
[[/a]]
● 43 人在线 ● 319 位成员

[[[https://discord.gg/uCFCeKj
|加入]]]

@@
|image=组件左方图片链接
|link=点击“加入”后跳转的链接
|name=服务器名称
|description=服务器描述
]]

上方的示例代码如下：

[[include :scp-wiki-cn:component:discord-extension-source |invite= --]
|image=@@https://o5command-int.wdfiles.com/local--files/tech-team:graphic-templates/scp-logo-cn-400.png@@
|link=@@https://discord.gg/uCFCeKj@@
|name=SCP-CN 官方中文分部
|description=[[span style="color: #3ba55d;"]]●[[/span]] 43 人在线 [[span style="color: #747f8d;"]]●[[/span]] 319 位成员
]]

另，当需要在版式之外的页面引用时，需要额外加多这行来引用此部分的源代码。注意，如果需要创建复数个邀请链接，那么，只需要在其中的一个填上这行代码即可。

|invite-source= true

@@}}
[[/div]]

遮蔽楼层尾部分割线：将以下代码加到每个楼层结尾代码之后。

[[div class="ds-bgblock"]]
[[/div]]

像这样：

[[include :scp-wiki-cn:component:discord-chat-source |inc-msg-end= --] ]]
[!--------放置于此下--------]
[[div class="ds-bgblock"]]
[[/div]]

[[/div]]
[[/div]]
[[/div]]

......
......
......

[[iftags -_源代码]]

[[div_ class="message one
"]]

GOTO 20

今天 27:94

[[/iftags]]

就是这样，喵！

[[/div]]
[[/div]]
[[/div]]

Footnotes

1.这是一个脚注。
2.我是一条脚注，要是看我不顺眼，那……也不要去掉我嘛。

[[/div]]
[[/div]]
[[/div]]
[[/div]]

在线用户 - 1

[[image {$usericon}]]

[[span class="set-name" style="/*(￣▽￣)ノ*/" ]](￣▽￣)ノ
[[/span]]评分:

[[image {$usericon}]]

[[span class="set-name" style="/*(￣▽￣)ノ*/" ]](￣▽￣)ノ
[[/span]]评分:

模块暂不可用： 此动态功能尚未由只读迁移站支持。

[[image {$usericon}]] default_avatar

[[span class="set-name" style="/*{$username}*/" ]]{$username}[[/span]]游客

{$description}

[[a href="http://www.wikidot.com/user:info/hoah2333
"]][[/a]]

[[div_ class="username" style="color: #EED79B
;"]]
hoah2333

[[div_ class="description" style="/*正在玩 Visual Studio Code*/"]]
正在玩 Visual Studio Code

[[a href="http://www.wikidot.com/user:info/Etinjat
"]][[/a]]

[[div_ class="username" style="color: green
;"]]
Etinjat

[[div_ class="description" style="/*正在直播 写代码*/"]]
正在直播 写代码

[[a class="userlist-link" href="http://scp-wiki-cn.wikidot.com/component:discord-chat
"]][[/a]]

[[div_ class="username" style="color: #ff5e56
;"]]
GOTO 20

[[div_ class="description" style="/*I'm a Robot.*/"]]
I'm a Robot.

[[a class="userlist-link" href="https://crom.avn.sh/
"]][[/a]]

[[div_ class="username" style="color: #60b9dc
;"]]
Corvas

[[div_ class="description" style="/*I'm not Crom, Don't Ping me.*/"]]
I'm not Crom, Don't Ping me.

[!---------------------------------------------]
[!-----------------源代码---------------------]
[!---------------------------------------------]

SCP基金会中文分部

这是什么？

怎么使用？

以下为组件各部分详解。

Userlist 组件简易教程

模式一示例：

模式三示例：

模式四示例：

模式五示例：

模式六示例：

提示：

1. 创建空行

2. 隐藏用户头像的灰色边框

3. 分组

Discord 组件简易教程

扩展效果

在线用户 - 1

目录