Discord 样式样版
GOTO 20
今日 4:28 PM

怎么使用?

首先引用这个版式,只需要引用一次且不需要再引用暗码原版式以及discord源代码:

[[include :semimonth:theme:darkcode-discord
|header-subtitle='可填页面标题'
]]

完整扩展:

[[include :semimonth:theme:darkcode-discord
|header-title='版头大标题'
|header-subtitle='版头小标题'
|side-logo=侧边栏顶部标志
|main-height=正文区域高度,填auto时则直接显示全部楼层
]]

Corvas
今日 4:28 PM
其次,将以下内容放置到正文区。这是右边的服务器在线列表。

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

[[div class="discord-userlist"]]
[[div class="userlist-reader"]]
+* 在线用户 — (人数)
[[include :semimonth:component:discord-userlist |reader= --]
]]
[[/div]]

+* 受访者 — (人数)
[[include :semimonth:component:discord-userlist |user= --]
|usericon=用户头像地址
|username=用户名
|usercolor=链接颜色(可不填)
]]

+* 采访者 — (人数)
[[include :semimonth:component:discord-userlist |user= --]
|usericon=用户头像地址
|username=用户名
|usercolor=链接颜色(可不填)
]]
[[/div]]

[[div class="discord-main"]]
在此插入discord组件,参照此处下方教程
[[/div]]
[[/div]]

Userlist 组件简易教程

GOTO 20
今日 4:29 PM
该组件由以下的结构组成:

[[include :semimonth:component:discord-userlist {{模式}}
变量
]]


它具有以下六个变量:

|usericon= <- 用户头像地址
|username= <- 用户名
|userid= <- 用户的uid,注意与|user-id=区别
|userlink= <- 点击用户名后的跳转链接(可选,默认为username的账户地址)
|usercolor= <- 用户名颜色(可选,默认为#84878d
|description= <- 用户名下方的“个人状态”(可选,不填入文本时使用户名垂直居中)


并具有以下四种模式,分别适配不同的变量组合。其中除usercoloruserlinkdescription外所有变量均为必填。

|user= —] <- usericonusernameusercolordescription
|user-shot= —] <- useridusernameusercolordescription
|unset= —] <- usericonusernameuserlinkusercolordescription
|reader= —] <- usercolordescription


模式一可自定义头像地址与用户名,但用户名不应虚构。(推荐
模式二可自定义头像地址与用户名,但用户名不应虚构。同时你还需要获取到该用户的uid以显示其头像。(不推荐
模式三可自定义头像地址、用户名与跳转链接。所有变量均可虚构。
模式四指定读者本身,所以无需过多配置。需搭配[[div class="userlist-reader"]]使用,否则在未登录用户的视角下在线列表将变得略为怪异。

提示:

1. 创建空行

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

像这样。

2. 分组

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

  • 少人:采访对象(发起人、主创)、采访小组(采访者123、整理员123)
  • 多人:采访者、受访者、协助者

Discord 组件简易教程

GOTO 20
msg-time = 所填文本

若是不懂怎么搞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= --] ]]
[!------------------ 组件结束 -------------------]

Corvas
今日 4:40 PM
就是这样。以及如果你注意到了的话,用户列表和discord组件,都有同样的输入项,这是在提醒你可以在两个组件中直接复制,以生成同样的用户头像、用户名、用户名颜色。

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

扩展效果

GOTO 20
今日 4:45 PM
若想令某个元素在小于740px的屏幕下隐藏的话,在那个元素里的class中填上 mob-hid。该代码可以配合

[[div class="mob-hid"]]
正文
[[/div]]

若想启用目录的话,可以将以下代码置于用户列表之下。mob-hid可去掉。

[[div class="userlist-toc mob-hid"]]
+* 目录
[[toc]]
[#dstart 回到开头]
[[/div]]

分割区域

可在楼层之间插入以下代码。若不想使之生成标题锚点的话,可在加号后加上星号(*):

大标题

[[div class="ds-divider"]]
+ 效果正如本楼的开头
[[/div]]


[[div class="ds-divider"]]
+* 这样就不会生成锚点啦
[[/div]]

次标题

[[div class="ds-subtitle"]]
++ 效果见下
[[/div]]


或者

[[div class="ds-subtitle"]]
++ 效果见下
[[/div]]

ps:加以下代码到楼层收尾代码后,可以将尾部线条遮盖。

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

ps2:可将脚注块 [[footnoteblock]] 放入其中,以将“脚注”一行改为该样式。

方块型

标签型

GOTO 20
今日 4:45 PM
就是这样1

在线用户 - 1

{$usericon}scp-logo-cn-400.png
{$username}评分:
评分: +1+x
评分: +1+x

采访对象 - 2

avatar.php?userid=4915183avatar.php?userid=4915183
hoah2333
正在玩 SCP基金会
avatar.php?userid=4055881avatar.php?userid=4055881
Etinjat
正在直播 写代码

采访小组 - 2

GOTO20.pngGOTO20.png
GOTO 20
I'm a Robot.
corvas.pngcorvas.png
Corvas
I'm not Roboter.
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License