How To Create A Good Level
SD:
生存难度：生存難度：
等级等級 0
- {$one}
- {$two}
- {$three}
如何使用：
[[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: 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]]
[[iftags +搬运]]
[[div class="lightblock"]]
[[=]]
注意：直接使用component:level-class即可，请忽视下面的:backrooms-wiki-cn
[[/=]]
[[/div]]
[[/iftags]]
[[module CSS]]
@import url("https://hoah.backroomswiki.cn/Backrooms/component-level-class/main.css");
[[/module]]
[[div class="lang-{$lang} sd-container"]]
[[div class="top-box class-{$class} color-{$color}" style="--custom-color: {$color}"]]
[[div class="header-diamond"]]
[[div class="bg"]]
[[/div]]
[[div class="diamondy diamond-color class-{$class} color-{$color}" style="--custom-color: {$color}"]]
[[/div]]
[[div class="diamondy diamond-pattern"]]
[[/div]]
[[div class="diamondy diamond-image class-{$class} {$image}" style="--custom-image: url("{$image}")"]]
[[/div]]
[[/div]]
[[div class="gradient-box"]]
[[div class="top-text"]]
[[span class="lang-cn"]]生存难度：[[/span]][[span class="lang-tr"]]生存難度：[[/span]]
[[/div]]
[[div class="bottom-text"]]
[[span class="lang-cn"]]等级[[/span]][[span class="lang-tr"]]等級[[/span]] {$class}
[[/div]]
[[/div]]
[[/div]]
[[div class="bottom-box class-{$class}"]]
* [[span class="{$one}"]]{$one}[[/span]][[span class="default"]]@@ @@[[/span]]
* [[span class="{$two}"]]{$two}[[/span]][[span class="default"]]@@ @@[[/span]]
* [[span class="{$three}"]]{$three}[[/span]][[span class="default"]]@@ @@[[/span]]
[[/div]]
[[/div]]
[[div style="display: none; [[iftags +组件]]display: initial;[[/iftags]]"]]
[[module css]]
.cntr td {
text-align: center;
}
[[/module]]
------
+* 如何使用：
[[div class="code"]]
@@[[include :backrooms-wiki-cn:component:level-class@@
|class=等级
]]
[[/div]]
{{class}} 处的可用参数包括以下内容，支持简繁体及英文输入。
[[table class="wiki-content-table cntr"]]
[[row]]
[[hcell colspan="6"]]English[[/hcell]][[hcell colspan="6"]]简体中文[[/hcell]][[hcell colspan="6"]]繁體中文[[/hcell]]
[[/row]][[row]]
[[cell]]0[[/cell]][[cell]]1[[/cell]][[cell]]2[[/cell]][[cell]]3[[/cell]][[cell]]4[[/cell]][[cell]]5[[/cell]]
[[cell]]0[[/cell]][[cell]]1[[/cell]][[cell]]2[[/cell]][[cell]]3[[/cell]][[cell]]4[[/cell]][[cell]]5[[/cell]]
[[cell]]0[[/cell]][[cell]]1[[/cell]][[cell]]2[[/cell]][[cell]]3[[/cell]][[cell]]4[[/cell]][[cell]]5[[/cell]]
[[/row]][[row]]
[[cell colspan="6"]]unknown[[/cell]][[cell colspan="6"]]未知[[/cell]][[cell colspan="6"]]未知[[/cell]]
[[/row]][[row]]
[[cell colspan="6"]]habitable[[/cell]][[cell colspan="6"]]宜居[[/cell]][[cell colspan="6"]]宜居[[/cell]]
[[/row]][[row]]
[[cell colspan="6"]]deadzone[[/cell]][[cell colspan="6"]]死区[[/cell]][[cell colspan="6"]]死區[[/cell]]
[[/row]][[row]]
[[cell colspan="6"]]pending[[/cell]][[cell colspan="6"]]等待分级[[/cell]][[cell colspan="6"]]等待分級[[/cell]]
[[/row]][[row]]
[[cell colspan="6"]]n/a[[/cell]][[cell colspan="6"]]不适用[[/cell]][[cell colspan="6"]]不適用[[/cell]]
[[/row]][[row]]
[[cell colspan="6"]]amended[[/cell]][[cell colspan="6"]]修正[[/cell]][[cell colspan="6"]]修正[[/cell]]
[[/row]][[row]]
[[cell colspan="6"]]omega[[/cell]][[cell colspan="6"]]终结[[/cell]][[cell colspan="6"]]終結[[/cell]]
[[/row]]
[[/table]]
该组件支持简繁切换，如下方代码所示：
[[div class="code"]]
@@[[include :backrooms-wiki-cn:component:level-class@@
|lang=cn/tr
|class=等级
]]
[[/div]]
在 {{lang}} 处选择语言，cn 表示简体中文，tr 表示繁体中文，不填默认选择简体中文。
------
++* 自定义等级
[[div class="code"]]
@@[[include :backrooms-wiki-cn:component:level-class@@
|lang=cn/tr
|class=等级名字
|color=#000000（带有井号的十六进制色号代码。）
|image=链接（至图片的链接。）
|one=在这
|two=随便
|three=放文字
@@]]@@
[[/div]]
+* 使用 CSS 进行自定义：
你可以使用 CSS 进行额外的自定义，将代码放入到 {{@@[[module css]]@@}} 中或者是放入到页面的版式内都可以。**在这一组件中，不要把 {{@@[[module css]]@@}} 放在 {{@@[[include]]@@}} 里面，把它放在那个的下面或者是页面的顶部或底部。**
将这些代码放入到你的页面/版式中以编辑所有的颜色，因为组件的 {{|color=}} 部分仅能控制背景：
[[div class="code"]]
@@[[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: 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]]@@
[[/div]]
++* 旧版颜色：
如果你不喜欢新版的样式，想要用回旧版的红色边框色，只需要在你的页面中与组件一同引入下方的代码：
[[div class="code"]]
@@[[module css]]@@
.sd-container {
@@ --sd-border: 90, 29, 27;@@
@@ --sd-image: 90, 29, 27;@@
@@ --sd-symbol: 90, 29, 27;@@
}
@@[[/module]]@@
[[/div]]
[[/div]]QT
生存难度：
- 安全
- 稳定
- 实体绝迹
[!-- 代码开启 --]
[[module css]]
/* 首先根目录！ */
:root {
--class-font:monospace;
--class-normal-class-border:0,0,0!important;
--class-unsafe-class-border:244,244,244!important;
--class-zero:255,255,255;
--class-one:214,214,214;
--class-two:173,173,173;
--class-three:148,121,121;
--class-four:122,78,78;
--class-five:0,0,0;
--class-zero-svg-url:url("http://backrooms-wiki-cn.wdfiles.com/local--files/component%3Alevel-class/zero.png");
--class-one-svg-url:url("http://backrooms-wiki-cn.wdfiles.com/local--files/component%3Alevel-class/one.png");
--class-two-svg-url:url("http://backrooms-wiki-cn.wdfiles.com/local--files/component%3Alevel-class/two.png");
--class-three-svg-url:url("http://backrooms-wiki-cn.wdfiles.com/local--files/component%3Alevel-class/three.png");
--class-four-svg-url:url("http://backrooms-wiki-cn.wdfiles.com/local--files/component%3Alevel-class/four.png");
--class-five-svg-url:url("http://backrooms-wiki-cn.wdfiles.com/local--files/component%3Alevel-class/five.png");
--class-unknown-svg-url:url("http://backrooms-wiki-cn.wdfiles.com/local--files/component%3Alevel-class/unknown.png");
--class-deadzone-svg-url:url("http://backrooms-wiki-cn.wdfiles.com/local--files/component%3Alevel-class/deadzone.png");
}
.new-class-level {
background:rgb(var(--class-one));
color:black;
border:0.121rem solid rgb(var(--class-normal-class-border));
font-family:var(--class-font);
background-image:var(--class-one-svg-url);
background-size:cover;
}
.new-class-level.level-0 {
background:rgb(var(--class-zero));
background-image:var(--class-zero-svg-url);
background-size:cover;
}
.new-class-level.level-2 {
background:rgb(var(--class-two));
background-image:var(--class-two-svg-url);
background-size:cover;
}
.new-class-level.level-3 {
background:rgb(var(--class-three));
background-image:var(--class-three-svg-url);
background-size:cover;
}
.new-class-level.level-4 {
background:rgb(var(--class-four));
border:0.121rem solid rgb(var(--class-unsafe-class-border));
background-image:var(--class-four-svg-url);
background-size:cover;
}
.new-class-level.level-5 {
background:rgb(var(--class-five));
border:0.121rem solid rgb(var(--class-unsafe-class-border));
background-image:var(--class-five-svg-url);
background-size:cover;
}
.new-class-level.level-unknown,
.new-class-level.level-未知 {
background:grey;
color:white;
font-weight:bold;
background-image:var(--class-unknown-svg-url);
background-size:cover;
}
.new-class-level.level-deadzone,
.new-class-level.level-死区 {
background:red;
color:black;
font-weight:bold;
background-image:var(--class-deadzone-svg-url);
background-size:cover;
}
.title-class::after {
font-size:1rem;
content:"";
}
.new-class-level.level-0 .title-class::after {
content:"0";
}
.new-class-level.level-1 .title-class::after {
content:"1";
}
.new-class-level.level-2 .title-class::after {
content:"2";
}
.new-class-level.level-3 .title-class::after {
content:"3";
}
.new-class-level.level-4 .title-class::after {
content:"4";
}
.new-class-level.level-5 .title-class::after {
content:"5";
}
.new-class-level.level-unknown .title-class::after,
.new-class-level.level-未知 .title-class::after {
content:"未知";
}
.new-class-level.level-deadzone .title-class::after, {
.new-class-level.level-死区 .title-class::after {
content:"死区";
}
ul li span[class$="}"] {
display: none !important;
}
.default {
display: none;
font-size: 0 !important;
}
.default::after {
font-size: 1.5rem;
}
ul li span[class$="}"] ~ .default {
display: flex;
}
span.list.level-0 ul li:nth-child(1) .default::after {
content: "安全";
}
span.list.level-0 ul li:nth-child(2) .default::after {
content: "稳定";
}
span.list.level-0 ul li:nth-child(3) .default::after {
content: "实体绝迹";
}
span.list li::before {
content:"";
background:black;
height:100px;
width:100px;
border-radius:50%;
color:red;
}
[[/module]]
[[iftags +组件]]
[[module css]]
.main-content::before {
background:red;
width:100%;
height:12vh;
content:"该页面为组件页面！";
color:black;
font-weight:bold;
text-align:center;
font-size:20px;
}
[[/module]]
[[div class="main-content"]]
[[/div]]
[[/iftags]]
[[div class="new-class-level level-{$class}"]]
[[span class="title-class"]]
++++ 生存难度：
[[/span]]
[[div class="list level-{$class}"]]
* [[span class="{$one}"]]{$one}[[/span]][[span class="default"]]@@ @@[[/span]]
* [[span class="{$two}"]]{$two}[[/span]][[span class="default"]]@@ @@[[/span]]
* [[span class="{$three}"]]{$three}[[/span]][[span class="default"]]@@ @@[[/span]]
[[/div]]
[[/div]]