Discord 聊天室组件扩展

[[module css]] /* 去掉页面顶部的警告标识 */ #page-content #u-component-top-box, #page-content #u-component-top-box+hr{     display: none; } .extension-title {     margin: 1rem 0; } .extension-title tt{ font-size: 1.2rem !important; padding: 0.5rem;     font-weight: 600;     letter-spacing: 2px;     background: #40496e;     margin: 1rem 0; } [[/module]] [[include :scp-wiki-cn:theme:darkcode]] [[include :scp-wiki-cn:component:discord-extension-source |source= --] |header-subtitle='Discord 聊天室组件扩展' ]] [[div class="discord-wrap"]] [[div class="discord-main"]] [[include :scp-wiki-cn:component:discord-chat-source |inc-start= --] ]] [[# d-start]] [[include :scp-wiki-cn:component:discord-chat-source |inc-user= --] |user-id=one |username=GOTO 20 |usericon=http://scp-wiki.wdfiles.com/local--files/component:discord-chat/GOTO20.png |usercolor=#ff5e56 ]] [[include :scp-wiki-cn:component:discord-chat-source |inc-user= --] |user-id=two |username=Corvas |usericon=http://scp-wiki.wdfiles.com/local--files/component:discord-chat/corvas.png |usercolor=#60b9dc ]] [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-start= --] |user-id=two |username=Corvas |msg-time=今天 15:54 ]] ++* 这是什么？ 这是由 [[*user hoah2333]] 与 [[*user Etinjat]] 共同制作的 Discord 聊天室[[[component:discord-extension-source|组件扩展]]]。原为基金会半月刊的访谈特刊所制作。组件效果见[[[semimonth-talkshow-01|半月刊设定访谈第一期]]]。 本组件不与任何 SCP、故事、GoI 格式、设定所挂钩。也就是说该组件不为半月刊专用，你可以把它用在任何你喜欢的文章之中，比如 Discord [[[our-wiki-1|观谬群组]]]之类的。 @@ @@ [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-end= --]]] [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-start= --] |user-id=one |username=GOTO 20 |msg-time=今天 16:17 ]] ++* 怎么使用？ [[module ListUsers users="."]] [[span class="at_mention"]]@%%title%%[[/span]] [[/module]] 本组件为[[[theme:darkcode|暗码版式]]]与 [[[component:discord-chat|Discord 聊天室组件]]]的扩展，你需要先引入暗码版式，但无需再次引入原 Discord 聊天室组件。 在页面顶部填入以下代码： [[div class="blockquote"]] @@[[include :scp-wiki-cn:theme:darkcode]]@@ @@[[include :scp-wiki-cn:component:discord-extension |source= --]]]@@ [[/div]] 其中，{{component:discord-extension}}支持多种变量。完整引入代码如下： [[div class="blockquote"]] @@ @@ @@[[include :scp-wiki-cn:component:discord-extension |source= --]@@ |header-title='版头大标题' |header-subtitle='版头小标题' |side-subtitle='侧栏小标题' |side-logo=url('链接') {{侧边栏顶部标志的地址}} |main-height=正文区域高度，填{{auto}}时则直接显示全部楼层 @@]]@@ @@ @@ [[/div]] [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-end= --]]] [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-start= --] |user-id=two |username=Corvas |msg-time=今天 16:30 ]] 其次，将以下内容放置到正文区。这是本组件的标准结构： [[div class="blockquote"]] @@[[module rate]]@@ @@[[div class="discord-wrap"]]@@ @@[[div class="discord-userlist"]]@@ {{在此插入 Userlist 组件，可参照[#toc0 本页下方的简易教程]。}} @@[[/div]]@@ @@ @@ @@[[div class="discord-main"]]@@ {{在此插入 Discord 聊天室组件，可[[[component:discord-chat|参照原 Discord 聊天室组件中的说明]]]或[#toc1 本页下方的简易教程]。}} @@[[/div]]@@ @@[[/div]]@@ [[/div]] 以下为一个标准示例： [[div class="blockquote"]] @@ @@ @@[[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= --]]]@@}} @@+*@@ 用户组名 -（人数） @@ @@ @@[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |user= --]@@ |usericon=用户头像地址 |username=用户名 |usercolor=链接颜色（可不填） |description=描述（可不填） @@]]@@ @@ @@ @@[[div class="discord-main"]]@@ @@[[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= --] ]]@@ @@[[/div]]@@ @@[[/div]]@@ [[/div]] 其中，组件第二行的 {{@@[[module rate]]@@}} 仅为建议添加位置，你可以将评分模块移动到别的你觉得顺眼的地方。或者直接去掉，使用 {{userlist}} 组件的评分模块。 ++* **以下为组件各部分详解。** [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-end= --] ]] [[div class="ds-divider"]] + Userlist 组件简易教程 [[/div]] [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-start= --] |user-id=one |username=GOTO 20 |msg-time=今天 16:55 ]] Userlist 组件由以下结构组成： [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] {{模式}}@@ {{变量}} @@]]@@ [[/div]] 它具有以下六个变量： [[div class="blockquote"]] {{|usericon=}} <- 用户头像地址（注意：我们无法通过你所填写的用户名自动抓取头像，所以如果需要填入真实用户，请自行获取其头像) {{|username=}} <- 用户名 {{|userid=}} <- 用户的 uid，注意与{{|user-id=}}区别 {{|userlink=}} <- 点击用户名后的跳转链接（可选，默认为{{username}}的账户地址） {{|usercolor=}} <- 用户名颜色（可选，默认为[[span style="background-color: #202225; color: #84878d; padding: 0 3px;"]]#84878d[[/span]]） {{|description=}} <- 用户名下方的“个人状态”（可选，不填入文本时使用户名垂直居中） [[/div]] 并具有以下几种模式，分别适配不同的变量组合。其中除{{usercolor}}、{{userlink}}、{{description}}外所有变量均为必填。模式五中所有变量均为选填。 [[div class="blockquote"]] {{|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}} [[/div]] **模式一**：可自定义头像地址与用户名，点击后链接将自动跳转至与用户名同名的用户个人资料页。（##green|推荐##） **模式二**：可自定义用户名，点击后链接将自动跳转至与用户名同名的用户个人资料页。同时你还需要获取到该用户的 uid 以显示其头像。（##red|不推荐##） **模式三**：可自定义头像地址、用户名与跳转链接。 **模式四**：指定读者本身，使用默认设置。但同样可填写以上内容，以显示给未登录访客。另外，需搭配{{@@[[div class="userlist-reader"]]@@}}使用，否则在未登录用户的视角下在线列表将变得略为怪异。 **模式五**：可以将用户列表里的评分栏转为用户样式，可自定义头像部分和评分文本。默认头像为 Discord 头像，默认评分文本为 {{评分：}}。 **模式六**：整合模式4和5，并调整了手机排版。 ------ --注意前两个模式的用户名不应虚构，否则将出现“未找到用户”的提示。--已可通过填写 {{userlink}} 来解决此问题。 由于通常位于右上角的用户模块已隐藏，所以我们**##yellow|建议##**你至少使用 1 个模式四部件。 +++* 模式一示例： [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |user= --]@@ |usericon=@@http://www.wikidot.com/avatar.php?userid=4915183@@ |username=hoah2333 |usercolor=#EED79B @@|description=正在玩 **SCP 基金会**@@ @@]]@@ [[/div]] 此即右方的用户 {{hoah2333}} 所使用的代码。 +++* 模式三示例： [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |unset= --]@@ |username=Corvas |usericon=@@http://scp-wiki.wikidot.com/local--files/component:discord-chat/corvas.png@@ |userlink=@@https://crom.avn.sh/@@ |usercolor=#60b9dc |description=I'm not Crom, Don't Ping me. @@]]@@ [[/div]] 此即右方的用户 {{Corvas}} 所使用的代码。 +++* 模式四示例： [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |reader= --]@@ |usercolor=用户名颜色 |description=用户描述 @@]]@@ [[/div]] [[module ListUsers users="."]] 此即右方的用户 {{%%title%%}} 所使用的代码。 [[/module]] ------ 以下是显示给未登录用户的自定义代码，不填则使用默认值： [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |reader= --]@@ |username=用户名，默认为: {{游客}} |usericon=头像，默认为: [[image http://d2qhngyckgiutd.cloudfront.net/default_avatar width="15rem"]] @@]]@@ [[/div]] 本页面为演示默认值情况，所以右方的用户模块所使用的颜色及个人状态与本示例不同。 +++* 模式五示例： [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:discord-extension-source |userlist= --]| rate= --]@@ |usericon=@@选填，不填则使用默认图像。@@ |username=@@选填，不填则使用默认文本@@ {{评分：}} @@]]@@ [[/div]] 此为右方评分栏样式。 +++* 模式六示例： 此模式目的是为了在宽屏时显示读者的账户，在宽屏时隐藏，同时让评分模组置于账户上，但不受隐藏读者账户的影响： [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:discord-extension-source  |reader-and-rate= --]@@]] [[/div]] 在此情况下，为了区分评分栏和用户栏的自定义选项，需要在原本选项下加后缀 {{-rate}} 或 {{-reader}}，如： [[div class="blockquote"]] |usericon-rate=评分栏头像 |usericon-reader=浏览者头像 [[/div]] ------ 原本代码为： [[div class="blockquote"]] @@[[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]]@@ [[/div]] +++* 提示： +++++* 1. 创建空行 在平列的四个@中间，加上空格，即一个空格左右两边都有 2 个@，即{{@@@@@@ @@@@@@}}。该处需独立为一行。 @@  @@ 像这样。 +++++* 2. 隐藏用户头像的灰色边框 [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:discord-extension-source |userlist= --] | 任意模式= --]@@ |userlist-class=noimgbd @@]]@@ [[/div]] +++++* 3. 分组 你可以在两名用户之间加上{{@@+* XXX — （人数）@@}}来分组或标记用户。人员的分组可以按人数来进行，多双数一组，以减少组别减少窄屏下空间占用。可以参照以下分类（括号内为填入 {{description}} 的文本）： * 少人：采访对象（发起人、主创）、采访小组（采访者123、整理员123） * 多人：采访者、受访者、协助者 [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-end= --] ]] [[div class="ds-divider"]] + Discord 组件简易教程 [[/div]] [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-start= --] |user-id=one |username=GOTO 20 |msg-time=今天 17:17 ]] 若是不懂如何使用 Discord 聊天室组件，这里是一个精简版教程： [[div class="blockquote"]] @@[!------------------ 组件开始 -------------------]@@ @@[[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= --] ]]@@ @@[!------------------ 组件结束 -------------------]@@ [[/div]] 详细教程请参见 [[[component:discord-chat|Discord 聊天室组件页]]]。 另外，在该组件页中所提及的所有“[[[component:discord-chat#toc10|可选项目]]]”均可在本扩展中使用。 [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-end= --] ]] [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-start= --] |user-id=two |username=Corvas |msg-time=今天 20:34 ]] 就是这样。以及如果你注意到了的话，用户列表和 Discord 聊天室组件都有同样的变量（如下所示）。这是在提醒你可以在两个组件中直接复制对应的变量，以生成同样的用户头像、用户名、用户名颜色。 [[div class="blockquote"]] |username=用户名 |usericon=用户头像地址 |usercolor=用户名颜色 [[/div]] [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-end= --] ]] [[div class="ds-divider"]] + 扩展效果 [[/div]] [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-start= --] |user-id=one |username=GOTO 20 |msg-time=今天 21:17 ]] [!--------------------------------------------------------] [[div class="extension-title"]] {{邀请扩展}} [[/div]] [!--------------------------------------------------------] ------ 来看看中分的 Discord 吧！https://discord.gg/uCFCeKj [[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 位成员 ]] 其基本格式如下： [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:discord-extension-source |invite= --] @@ |image=组件左方图片链接 |link=点击“加入”后跳转的链接 |name=服务器名称 |description=服务器描述 @@]]@@ [[/div]] 上方的示例代码如下： [[div class="blockquote"]] @@[[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 位成员 @@]]@@ [[/div]] 另，当需要在版式之外的页面引用时，需要额外加多这行来引用此部分的源代码。注意，如果需要创建复数个邀请链接，那么，只需要在其中的一个填上这行代码即可。 [[div class="blockquote"]] |invite-source= true [[/div]] ------ [!--------------------------------------------------------] [[div class="extension-title"]] {{在窄屏下隐藏/显示元素}} [[/div]] [!--------------------------------------------------------] ------ 若想令某个元素在通常情况下隐藏，但在小于 740px 的屏幕下显示的话，在那个元素里的 class 中填上 mob-show。 [[div class="blockquote"]] @@[[div class="mob-show"]]@@ 正文 @@[[/div]]@@ [[/div]] ---- 若想令某个元素在小于 740px 的屏幕下隐藏的话，在那个元素里的 class 中填上 mob-hid。 [[div class="blockquote"]] @@[[div class="mob-hid"]]@@ 正文 @@[[/div]]@@ [[/div]] ------ [!--------------------------------------------------------] [[div class="extension-title"]] {{启用目录}} [[/div]] [!--------------------------------------------------------] ------ 将以下代码置于用户列表下方。mob-hid 为选填项，可去除。 [[div class="blockquote"]] @@[[div class="userlist-toc mob-hid"]]@@ @@+* 目录@@ @@[[toc]]@@ @@[#d-start 回到开头]@@ @@[[/div]]@@ [[/div]] ---- 你可以在目录前后加上以下两条代码来使用户点击时分别跳转至开头与结尾。文字可自定义。当然此前你需要把锚点 {{@@[[# d-start]]@@}} {{@@ [[# d-end]]@@}} 放进 discord 组件里。 [[div class="blockquote"]] @@[#d-start 点我直达开头]@@ ---- @@[#d-end 点我直达结尾]@@ [[/div]] 效果如下： [[div class="blockquote"]] [#d-start 点我直达开头] ---- [#d-end 点我直达结尾] [[/div]] ------ [!--------------------------------------------------------] [[div class="extension-title"]] {{楼层间分割线型标题}} [[/div]] [!--------------------------------------------------------] ------ 可在楼层之间插入以下代码。若不想使之生成标题锚点的话，可在加号后加上星号（*）： **大标题** [[div class="ds-divider"]] +* 大标题 [[/div]] [[div class="blockquote"]] @@[[div class="ds-divider"]]@@ @@+ 大标题@@ @@[[/div]]@@ ---- @@[[div class="ds-divider"]]@@ @@+* 这样就不会生成锚点啦@@ @@[[/div]]@@ [[/div]] **次标题** [[div class="ds-subtt"]] ++* 方块型 [[/div]] [[div class="blockquote"]] @@[[div class="ds-subtt"]]@@ @@++ 方块型次标题@@ @@[[/div]]@@ [[/div]] 或者 [[div class="ds-subtitle"]] 标签型 [[/div]] [[div class="blockquote"]] @@[[div class="ds-subtitle"]]@@ @@++ 标签型次标题@@ @@[[/div]]@@ [[/div]] ---- 可将脚注块 {{@@[[footnoteblock]]@@}} 放入次标题结构当中，以将“脚注”一行改为该样式。 本页脚注样式示例： [[div class="blockquote"]] @@[[div class="ds-subtitle"]]@@ @@[[footnoteblock]]@@ @@[[/div]]@@ [[/div]] 由于用方块型会存在有bug，所以可以去掉脚注的自带标题，然后把脚注模组放置于其底下，可以形成自定义脚注标题的效果，像这样： [[div class="blockquote"]] @@[[div class="ds-subtt"]]@@ @@脚注@@ @@[[/div]]@@ @@[[footnoteblock title=""]]@@ [[/div]] ------ [!--------------------------------------------------------] [[div class="extension-title"]] {{楼层分割线}} [[/div]] [!--------------------------------------------------------] ------ **生成楼层分割线：**可置于楼层的开头，以解决因插入空间而令楼层顶部缺少分割线而感觉奇怪的问题。 [[div class="blockquote"]] @@[[div class="ds-hr"]]@@ @@[[/div]]@@ [[/div]] 像这样： [[div class="blockquote"]] @@[[div class="ds-hr"]]@@ @@[!--------放置于此上--------]@@ {{@@[[include :scp-wiki-cn:component:discord-chat-source |inc-msg-start= --]@@}} @@[[/div]]@@ [[/div]] ----  **遮蔽楼层尾部分割线：**将以下代码加到每个楼层结尾代码之后。 [[div class="blockquote"]] @@[[div class="ds-bgblock"]]@@ @@[[/div]]@@ [[/div]] 像这样： [[div class="blockquote"]] {{@@[[include :scp-wiki-cn:component:discord-chat-source |inc-msg-end= --] ]]@@}} @@[!--------放置于此下--------]@@ @@[[div class="ds-bgblock"]]@@ @@[[/div]]@@ [[/div]] [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-end= --] ]] ...... ...... ...... [[div class="ds-hr"]] [[/div]] [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-start= --] |user-id=one |username=GOTO 20 |msg-time=今天 27:94 ]] 就是这样，喵！[[footnote]]我是一条脚注，要是看我不顺眼，那……也不要去掉我嘛。[[/footnote]] [[include :scp-wiki-cn:component:discord-chat-source |inc-msg-end= --] ]] [[div class="ds-bgblock"]] [[/div]] [[div class="ds-subtitle"]] [[footnoteblock]] [[/div]] [[# d-end]] [[include :scp-wiki-cn:component:discord-chat-source |inc-end= --] ]] [[/div]] [[div class="discord-userlist"]] [[div class="userlist-reader mob-show"]] +* 在线用户 - 1 [[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |rate= --] |username=(￣▽￣)ノ ]] [[/div]] [[div class="userlist-reader"]] +* 在线用户 - 2 [[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |rate= --] |username=(￣▽￣)ノ ]] [[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |reader= --] ]] [[/div]] +* 采访对象 - 2 [[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |user= --] |usericon=http://www.wikidot.com/avatar.php?userid=4915183 |username=hoah2333 |usercolor=#EED79B |description=正在玩 **Visual Studio Code** ]] [[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |user= --] |usericon=http://www.wikidot.com/avatar.php?userid=4055881 |username=Etinjat |usercolor=green |description=正在直播 **写代码** ]] +* 采访小组 - 2 [[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |unset= --] |usericon=http://scp-wiki.wikidot.com/local--files/component:discord-chat/GOTO20.png |username=GOTO 20 |userlink=http://scp-wiki-cn.wikidot.com/component:discord-chat |usercolor=#ff5e56 |description=I'm a Robot. ]] [[include :scp-wiki-cn:component:discord-extension-source |userlist= --] |unset= --] |username=Corvas |usericon=http://scp-wiki.wikidot.com/local--files/component:discord-chat/corvas.png |userlink=https://crom.avn.sh/ |usercolor=#60b9dc |description=I'm not Crom, Don't Ping me. ]] [[div class="userlist-toc mob-hid"]] +* 目录 [#d-start 组件介绍] [[toc]] [#d-end 跳到结尾] [[/div]] [[/div]] [[/div]]