组件中心
什么是组件？
组件是一种通过 [[include]] 代码引入其他页面、进而快捷引用预设代码的页面类型。组件必须属于 component: 分类并带有组件标签。在本维基中，最常见的组件例子无疑是图像框与生存难度模块。
本中心页用于陈列所有站内已有的组件，以便创作者查找使用。同时，各个组件的附属页面也会列于此处。我们对组件及其附属页面做了简单的分类：
- 标志表示本组件并非本站原创，而是从站外引进；
- 标志表示这是一个介绍本组件如何使用的补充资料；
- 标志代表这是一个附属组件，通常要配合主组件使用；
- 标志代表这是一个组件后端，通常不会被直接引用。
如果你发布了一个组件，可以编辑本中心页，将其添加至合适的位置。如某个组件长期未链接至本中心页，职员将会代为添加。
教程：添加组件
2025/8/10 的更新后，添加组件的方式有所不同，请各位搬运者 / 创作者注意。
组件要求
在发布组件前，请先确认您的组件满足以下要求：
- 被发布在后室中文维基（即本站）而不是从站外引用。
- 没有违反任何相关的规定，包括但不限于内容政策和 CSS 守则。
- 带有组件标签，且属于 component: 分类。
- 能够通过 [[include]] 语法在其他页面引用并正常工作。
- 不属于版式。
添加新组件
首先，请判断您的组件属于以下分类的哪一种，并打开对应的段落页：
在段落页的最下方，使用如下代码添加你的组件：
[[div class="component-box"]]
++ [[[component:url|组件名]]]
> 作者：[[user 你的用户名]]
[[div class="component-display"]]
[[include component:url]]
[[/div]]
一段字数不限的介绍，但最好不要超过 100 字。注意，仅可写一段介绍，不能换行。
[[/div]]
请将其中蓝色加粗的部分修改为你组件相关的内容。其中，component:url 指组件发布的地址，例如，生存难度组件的地址就是 component:level-class。
在添加完毕后，请将组件页面的父页面设置为本页。
如果你的组件是从其他语言维基搬运而来，请额外为 component-box 添加 import 类：
[[div class="component-box import"]]
++ [[[component:url|组件名]]]
> 作者：[[user 你的用户名]]
[[div class="component-display"]]
[[include component:url]]
[[/div]]
一段字数不限的介绍，但最好不要超过 100 字。注意，仅可写一段介绍，不能换行。
[[/div]]
部分组件可能需要用户交互作为展示的一部分，例如多重折叠组件等。对此，请为 component-display 添加 enable 类：
[[div class="component-box"]]
++ [[[component:url|组件名]]]
> 作者：[[user 你的用户名]]
[[div class="component-display enable"]]
[[include component:url]]
[[/div]]
一段字数不限的介绍，但最好不要超过 100 字。注意，仅可写一段介绍，不能换行。
[[/div]]
部分组件可能无法直接展示效果，例如成人内容警告等。对此，请为 component-display 添加 picture 类，并将引用代码更换为预览图：
[[div class="component-box"]]
++ [[[component:url|组件名]]]
> 作者：[[user 你的用户名]]
[[div class="component-display picture"]]
[[include component:url]][[image 预览图地址]]
[[/div]]
一段字数不限的介绍，但最好不要超过 100 字。注意，仅可写一段介绍，不能换行。
[[/div]]
如您在添加过程中遇到了其他问题，请联系活跃的技术职员解决。
使用说明、附属组件与组件后端
在介绍组件之后，如果有的话，用以下格式标记你的使用说明（作为组件的补充资料）、附属组件（标签同样为组件）与组件后端（标签为组件后端）。
[[div class="component-box"]]
++ [[[component:url|组件名]]]
> 作者：[[user 你的用户名]]
[[div class="component-display"]]
[[include component:url]]
[[/div]]
一段字数不限的介绍，但最好不要超过 100 字。注意，仅可写一段介绍，不能换行。
* [[span class="icon essay"]]@@ @@[[/span]]使用说明：[[[link|链接名]]]
* [[span class="icon component"]]@@ @@[[/span]]附属组件：[[[link|链接名]]]
* [[span class="icon component-base"]]@@ @@[[/span]]组件后端：[[[link|链接名]]]
[[/div]]
请将使用说明、附属组件与组件后端的父页面均设置为您的主要组件。
注意：您当前的设备较窄（例如手机、小型平板），可能导致部分组件预览有误。
要知道组件的具体表现，请进入其页面查看。
注意：点击屏幕右侧的半圆按钮，即可打开目录。
首次打开目录时，需要点击两次按钮。
对层级、子层级、房间等页面进行评级或分类的组件。
作者：YellowISlol
如何使用：
[[include :backrooms-wiki-cn:component:level-class
|class=等级
]]
class 处的可用参数包括以下内容，支持简繁体及英文输入。
| English |
简体中文 |
繁體中文 |
| 0 |
1 |
2 |
3 |
4 |
5 |
0 |
1 |
2 |
3 |
4 |
5 |
0 |
1 |
2 |
3 |
4 |
5 |
| unknown |
未知 |
未知 |
| habitable |
宜居 |
宜居 |
| deadzone |
死区 |
死區 |
| pending |
等待分级 |
等待分級 |
| n/a |
不适用 |
不適用 |
| amended |
修正 |
修正 |
| omega |
终结 |
終結 |
该组件支持简繁切换，如下方代码所示：
[[include :backrooms-wiki-cn:component:level-class
|lang=cn/tr
|class=等级
]]
在
lang 处选择语言，cn 表示简体中文，tr 表示繁体中文，不填默认选择简体中文。
自定义等级
[[include :backrooms-wiki-cn:component:level-class
|lang=cn/tr
|class=等级名字
|color=#000000（带有井号的十六进制色号代码。）
|image=链接（至图片的链接。）
|one=在这
|two=随便
|three=放文字
]]
使用 CSS 进行自定义：
你可以使用 CSS 进行额外的自定义，将代码放入到 [[module css]] 中或者是放入到页面的版式内都可以。在这一组件中，不要把 [[module css]] 放在 [[include]] 里面，把它放在那个的下面或者是页面的顶部或底部。
将这些代码放入到你的页面/版式中以编辑所有的颜色，因为组件的 |color= 部分仅能控制背景：
[[module css]]
.sd-container {
/* 字体 */
--sd-font: Poppins, Noto Sans SC, Noto Serif SC;
/* 边框 */
--sd-border: var(--gray-monochrome); /* 大多数等级 */
--sd-border-secondary: 0, 0, 0; /* 不适用 */
--sd-border-deadzone: 20, 0, 0; /* 死区 */
/* 标志 */
--sd-symbol: var(--sd-border) !important; /* 大多数标志 */
--sd-symbol-secondary: 255, 255, 255; /* 4 级以上的是白色 */
/* 文本 */
--sd-bullets: var(--sd-border) !important; /* 点句符文本颜色 */
--sd-text: var(--swatch-text-secondary-color); /* 顶部框文本颜色 */
/* 等级颜色 */
--class-0: 247, 227, 117;
--class-1: 255, 201, 14;
--class-2: 245, 156, 0;
--class-3: 249, 90, 0;
--class-4: 254, 23, 1;
--class-5: 175, 6, 6;
--class-unknown: 38, 38, 38;
--class-habitable: 26, 128, 111;
--class-deadzone: 44, 13, 12;
--class-pending: 182, 182, 182;
--class-n-a: 38, 38, 38;
--class-amended: 185, 135, 212;
--class-omega: 25, 46, 255;
}
[[/module]]
旧版颜色：
如果你不喜欢新版的样式，想要用回旧版的红色边框色，只需要在你的页面中与组件一同引入下方的代码：
[[module css]]
.sd-container {
--sd-border: 90, 29, 27;
--sd-image: 90, 29, 27;
--sd-symbol: 90, 29, 27;
}
[[/module]]
适用于层级的评级系统，也是最经典的一个。
作者：Br Miller
实体：2/5實體：2/5
少量敌意存在少量敵意存在
希版层级等级组件是新版层级等级组件的升级版本，其添加了对特定层级的食物及水资源的评级功能且修改了整体的生存难度计算方式。
作者：Meauzeek Zampona
LPCS（层级属性分类系统）是对层级的固有属性进行评估的一套分类系统，用于描述一个层级的客观性质。可与生存难度系统（层级等级系统）搭配使用，也可单独使用。
作者：GaplouelPew
以标签的方式给你的层级分类。注意：该组件与生存难度系统冲突。
对实体、物品、现象等页面评级或分类的组件。
作者：DrBobtail & Kai4C & CutTheBirch
性质：
HVM
VRL-A
VRL-B
NCR
MCH
CBR
SYN
DMN
SSV
CVL
RAD
NRO
TXC
PYR
RLA
UNQ
AGR
BNV
PSY
{$custom-name}
对实体进行多方面的分类。
作者：Eltrac
PLS 根据现象的「影响」和「形式」做了较为系统的分类。
作者：GaplouelPew
PLAS 对现象进行分级并进行简单的描述。
作者：
Abdallah Amr
现象威胁度评级是一种简洁、优雅的 UI，能够展现现象的大致特征，并具备高度的灵活度与可定制性。
这些组件通常只会出现在某些团体 / 设定相关的文章中。
作者：Eltrac
/**
* EBCS Stylesheet
*/
div.ebcs {
background: #fff;
box-shadow: var(--box-shadow, 0 0.05rem 0.15rem rgba(0,0,0,.4));
padding: 0;
margin: 0.5em 1em
}
@media screen and (max-width: 767px) {
div.ebcs { margin: 0.5em 0 }
}
div.ebcs br:first-child,
div.ebcs br:last-child {
display: none
}
div.ebcs p,
div.ebcs h2 {
margin: 0;
padding: 0
}
div.ebcs .ebcs-header .ebcs-title,
div.ebcs .ebcs-header,
div.ebcs .ebcs-body {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
/* 头部 */
div.ebcs .ebcs-header {
justify-content: space-between;
padding: 1em 0;
width: 100%
}
div.ebcs .ebcs-header .ebcs-title h2 {
background: rgb(var(--main-accent, 39,174,96));
color: #fff;
font-size: 120%;
position: relative;
left: -.6em;
padding: .2em .5em;
box-shadow: var(--box-shadow, 0 0.05rem 0.15rem rgba(0,0,0,.4))
}
div.ebcs .ebcs-header .ebcs-title h2::before {
content: 'EBCS';
display: none
}
@media screen and (max-width: 767px) {
div.ebcs .ebcs-header .ebcs-title h2::before { display: inline }
div.ebcs .ebcs-header .ebcs-title h2 .normal-text, .ebcs-number span { display: none }
}
div.ebcs .ebcs-header .ebcs-number {
font-size: 130%;
padding: .1em 0;
}
div.ebcs .ebcs-header .ebcs-iets {
background-color: rgb(var(--blockquote-bg-color, 0,10,8,0.03));
padding: 0.1em 0.5em;
position: relative;
right: 1em;
box-shadow: inset var(--box-shadow, 0 0.05rem 0.15rem rgba(0,0,0,.4));
border-radius: 3px;
display: inline-flex;
align-items: center;
}
div.ebcs .ebcs-header .ebcs-iets strong { vertical-align: middle }
/* 主体 */
.ebcs-body {
padding: 1em;
background-color: rgb(var(--blockquote-bg-color, 0,10,8,0.03));
justify-content: space-between;
gap: 1em;
align-items: flex-start
}
@media screen and (min-width: 768px) {
.ebcs-body { padding-left: 1.5em }
}
.ebcs-body .ebcs-meta { width: 100% }
.ebcs-body .ebcs-meta span {
padding: .3em 0;
display: inline-block;
width: 100%
}
.ebcs-body span:not(.ebcs-des) {
border-bottom: 1px solid #ddd;
}
.ebcs-body .ebcs-img {
flex-shrink: 0
}
.ebcs-body .ebcs-img {
border-radius: 3px;
box-shadow: var(--box-shadow, 0 0.05rem 0.15rem rgba(0,0,0,.4));
overflow: hidden;
width: 30%;
height: auto
}
.ebcs-body .ebcs-img img {
display: block;
transition: transform .3s
}
.ebcs-body .ebcs-img:hover {
overflow: visible
}
.ebcs-body .ebcs-img:hover img {
transform: scale(1.5)
}
.ebcs-body .ebcs-img[class*="{$"] {
display: none
}
@media screen and (max-width: 767px) {
div.ebcs div.ebcs-body { display: block }
div.ebcs div.ebcs-body .ebcs-img { width: 80%; margin: 1em auto }
}
为实体生物学家协会制作的专用实体分类系统。
这些组件会在页面内添加额外的信息，辅助文章的表达。
作者：Sekai_s 等
著作信息模块是一种评分模块的变体，可以让你在页面中添加任意世界观外的文本。需要由读者点击评分模块旁的一个小信息按钮，文本才会显示在一个对话框中。
作者：Eltrac
这个组件意在模仿维基百科的导航预览功能。使用者只要将鼠标放在一个超链接上，就能够看到作者预先设置好的有关这个链接页面的介绍。
作者：W Asriel
这是一个使用方式较为简易的作品展示工具，搬运自 SCP 基金会中文分部。
作者：Vovawe
这是一个能让你通过表格为页面制作维基信息框的组件。
这些组件会改变页面部分元素的样式，满足你的美学需求。改变全局美学样式的组件被称为版式，在版式中心和原创版式中心中浏览。
作者：Ambersight
本组件可以快速更改版式最上方的标题（即当前显示的“The Backrooms”与“你曾经来过这里”），从而更好地为文章内容服务。
作者：无
这个组件可以改变侧栏的显示状态，使其变为默认展开。
作者：Woedenaz
在页面左上角增添一个展开按钮，用于切换侧边栏的显示，效果类似移动端设计。本中心页就使用了这一组件。
作者：AbytherUs
本组件将会给标准的图像框组件添加一条特殊代码。当鼠标指针悬浮在一张图片上时，那张图片将会被放大。
作者：Eltrac
该组件为代码基础薄弱的写手和新人提供易于使用的排版工具，提升文档的美观度。
作者：jan Jejasa
设备名称：附录块
启动日期：2023-6-7
当前状态：运作中
把一个折叠放在 addendumblock div 中，你就能得到一个附录块。附录块的外观像是一个按钮，按下即可显示更多内容。如你所料，这些文本就在附录块中。
更改折叠的样式，可以用于采访、日志记录、附录、文件记录等等。
作者：scutoid studios
改变折叠块的样式，使其更适合用于陈列 FAQ（常见问题）。当然，你也可以将之用于其他用途。注意：该组件会改变所有折叠块的样式，并且与所有同类组件冲突。
作者：H_W
基于[[gallery]]模块制作的图片框， 其可以在不打开新页面的前提下实现点击图片查看清晰图片的效果。
作者：AbytherUs & H_W
Level 0 是一处非线性空间，外观类似于一家零售店的储藏后室。与它此前被确认的形式相似，Level 0 中的所有房间都在外观上呈现出具有共同表面特征的统一制式模样，例如泛黄的墙纸、潮湿的地毯和以不一致方式安装的荧光灯具。然而，本层中不存在两个完全相同的房间。
被安装在本层空间中的荧光灯保持无规律闪烁，并以恒定频率发出嗡鸣。这种噪声尤其响亮，明显比正常的荧光灯所能制造的噪音更加刺耳，而对灯具装置进行检查以确定噪声来源的尝试以失败告终。浸湿地毯的物质成分始终无法被查明。它既不是水，同时也不能被安全地饮用。
这是一个带有进行文本介绍的滚动侧栏的图片框，鼠标悬停时可出现描述文本。
作者：Einoshima
蚯蚓形状的底部导航栏，可以替代单调的 [[div class="footer-wikiwalk-nav"]]。
作者：ReyDay
在 CROM 的嵌入卡片中显示预览文本。
这些组件能够提供额外的功能，而不仅仅是美化已有元素、功能的外观样式。
作者：hoah2333
这是一个繁简转换组件，旨在方便不同地区的读者顺利地阅读到自己所熟悉的文字。
作者：scutoid studios
一个点击即可播放音乐的组件。注意：一旦你点击此组件，音乐将不断循环播放，直到您关闭或刷新当前网页。为避免带来困扰，此处的按钮仅供预览，不可点击。
这些组件在特定情况下会被强制使用，它们在维基的运作中不可或缺。
作者：
Sekai_s 等
请按如下方式引用此页：
图像名：1
图像作者：Alex
授权协议：CC BY-SA 3.0
来源链接：无
更多授权相关信息，请查阅授权指导。
在页面末尾添加一个授权信息栏，包含引用本页面时可使用的授权信息与本页面内引用图像的授权信息。
停用组件
这些组件已经被更新的组件代替，请勿使用。
页面版本: 106, 最后编辑于: 15 Aug 2025 06:23
