注意：
此页为于后室维基内部所使用的组件页面。该页面内容可在其它页面中被使用或引用。
介绍
关于组件
这是由 Eltrac 制作的 CSS 组件，包含了各种你可以在文档编写中用到的 div 和小组件，意在帮助没有编写 CSS 能力的作者更好地排版。
以下内容包含了许多后室写手常用的元素，例如便签纸、隐藏文字之类的，尽管他们实现起来并不麻烦（至少没有麻烦到需要有人来写一个组件），但缺少代码基础的作者通常难以自行实现这些效果，而且他们对提升文档的表现力有非常显著的作用。创造本组件的意图是为新人降低门槛，让作者在使用默认版式（或者其他不包含特殊 div 的版式）时也能丰富自己的排版布局。
所以如果你觉得以下组件很常见，或者是文档的描述有一些过于通俗，记住这是给没有代码基础的人制作的，让他们使用这些组件一定程度上可以减少神风的出现。
使用组件
若想要使用本组件，请在顶部添加以下代码：
[[include :backrooms-wiki-cn:component:layout-helpers]]
但这仅仅是引入了 CSS，若要使用这些组件，请阅读以下文档。
相关语法基础
这一节是给对维基语法中的 div 和 span 语法不熟悉的使用者准备的，如果你已经熟知如何使用 div 和 span 标签，并懂得如何为他们添加 class 类名，那么你可以跳过本节。
什么是标签
标签（Tag）来自于超文本标记语言（HTML），是创建元素的标识符。在 Wikidot 的维基语法中，可以用类似的方法使用 div 和 span 标签。
标签通常包含四个部分：起始标签、属性、内容和结束标签。其中，起始标签和结束标签是必不可少的。
[[div]] <- 这是起始标签
...... <- 这是内容
[[/div]] <- 这是结束标签如你所见，起始标签和结束标签都是被两个中括号包裹的，在两个中括号之间的英语单词叫做标签名，它们唯一的区别是结束标签的标签名前面用一个斜杠线（/）。要注意的是，所有标签都必须以起始标签开头，以结束标签结尾，它们之间的就是标签的内容。
什么是属性
如果你有使用过下拉框组件，那么你可能会知道，下拉框组件可以自定义展开和收起时，标题显示的文字，就像这样：
[[collapsible show="展开随便什么" hide="收起随便什么"]]
内容
[[/collapsible]]其中，show 和 hide 就是 collapsible 标签的属性，show 代表展开时显示的文本，hide 代表收起时显示的文本。从这一个例子中，我们可以得出：
- 属性能够拓展标签的功能
- 属性定义了标签的某一特殊值
- 属性必须以「属性名="属性值"」的形式写在起始标签里
- 属性必须写在标签名之后
- 属性必须用空格与标签名和其他属性隔开
要注意的是，给属性赋值的时候，使用的引号是半角引号，也就是英文引号，所以说，你在书写标签的时候应当关闭中文输入法。
什么是块级元素和行内元素
这是 Web 前端里的概念，但你需要理解他们，而且理解他们并不困难。
首先要明确的是，元素就是标签的结果，我们写下的标签在被浏览器渲染之后就成为了元素。以上文提到的 div 和 span 为例，div 是一个块级元素，span 是一个行内元素。
块级元素通常自成一行，不与其他块级元素共行（一些特殊的情况除外）。在前端开发中，块级元素还有一些 CSS 属性上的限制，但这里就不赘述了。
行内元素，顾名思义，是在一行之间的元素，也可以理解为，它们是块级元素的子元素。我们写的文字在被 Wikidot 解析后都会被放进 p 标签里，p 标签就是一个块级元素，所以我们写的文字就可以理解为行内元素。
举个例子，下面是一个引用块：
一个引用块是块级元素，但我是行内元素。
如果你还是不理解，记住：div 是块级元素，span 是行内元素；当你在创建一个盒子、容器的时候，就需要 div；当你在给文字添加样式的时候，就需要 span。
常用标签和属性
div 和 span
在维基语法中，div 的起始标签、内容和结束标签需要分行书写。就像这样：
[[div class="example"]]
内容
[[/div]]相对的，span 的起始标签、内容和结束标签不需要分行书写。就像这样：
[[span class="example"]]内容[[/span]]class 属性
class 的中文译名是「类」，class 属性的值被称作「类名」。通常情况下，拥有相同类名的元素拥有相同的样式（即外观）和作用，在使用本组件的时候会经常用到。
在给一个元素添加类名的时候，请注意多个类名应该用空格分开。
[[span class="example-1 example-2"]]示例[[/span]]style 属性
style 属性允许你给单个元素添加 css 样式，就像这样：
[[span style="color:#fff"]]我是一段白色的文字[[/span]]
[[span style="background:#000"]]我是一段背景黑色的文字[[/span]]如果你没有 CSS 基础，你大概不会用到这个属性。
CSS 模块
CSS 模块是维基语法的一部分，它允许你在页面中添加 CSS 选择器并给他们添加属性，就像这样：
[[module CSS]]
selector {
attribution: value
}
[[/module]]后文在自定义某些组件的颜色时，可能会提到他。
组件文档
文档中用作示例的文本有一部分是通过怪奇灵感生成器生成随机主题后用狗屁不通文章生成器生成的。
网格布局（Grid Layout）
有些时候你可能需要在一行里展示多个块，就像这样：
一般来讲，我们都必须务必慎重的考虑考虑。 了解清楚水晶寄生酒店到底是一种怎么样的存在，是解决一切问题的关键。 奥斯特洛夫斯基曾经提到过，共同的事业，共同的斗争，可以使人们产生忍受一切的力量。我希望诸位也能好好地体会这句话。 要想清楚，水晶寄生酒店，到底是一种怎么样的存在。 郭沫若曾经提到过，形成天才的决定因素应该是勤奋。带着这句话，我们还要更加慎重的审视这个问题： 叔本华说过一句富有哲理的话，普通人只想到如何度过时间，有才能的人设法利用时间。
带着这句话，我们还要更加慎重的审视这个问题： 带着这些问题，我们来审视一下水晶寄生酒店。 本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。 克劳斯·莫瑟爵士在不经意间这样说过，教育需要花费钱，而无知也是一样。我希望诸位也能好好地体会这句话。 生活中，若水晶寄生酒店出现了，我们就不得不考虑它出现了的事实。 一般来说， 莎士比亚曾经提到过，那脑袋里的智慧，就像打火石里的火花一样，不去打它是不肯出来的。
网格布局详解
上面的代码已经覆盖了大部分的使用场景，但如果你需要调整网格的大小，或者是想要更深入地了解网格布局，请继续阅读。
首先，网格布局由「容器」和「网格」组成。所有的网格都必须放在一个容器里。要创建这个容器，需要给 div 添加 grid-container 类。
[[div class="grid-container"]]
......
[[/div]]网格的类名是以 grid- 开头的，不同的类名代表了不同尺寸的网格，一共有这些可选用的网格尺寸：
- grid-large：超大号网格，大小为一行的 3/4
- grid-big：大号网格，大小为一行的一半
- grid-medium：中号网格，大小为一行的 1/3
- grid-small：小号网格，大小为一行的 1/4
你可以这样使用它们：
[[div class="grid-container"]]
[[div class="grid-large"]]
我是一个在大号网格
[[/div]]
[[div class="grid-small"]]
我是一个在小号网格
[[/div]]
[[div class="grid-medium"]]
我是一个在中号网格
[[/div]]
[[div class="grid-medium"]]
我是一个在中号网格
[[/div]]
[[div class="grid-medium"]]
我是一个在中号网格
[[/div]]
[[/div]]效果如下，为了方便观察，我给下面的网格加入到边框，正常使用时不会有边框。
我是一个在大号网格
我是一个在小号网格
我是一个在中号网格
我是一个在中号网格
我是一个在中号网格
小屏幕优化
即前端开发中的「响应式设计」，为了通俗易懂我没有使用这个名字。
当你在使用网格布局的时候，记住，有很多读者是通过手机阅读你的文章的，手机的屏幕较小，这个时候在一行里添加展示多个网格就会让阅读变得十分困难，这时候你可以使用 wd- 前缀。
顾名思义，wd 是 wide 的缩写，带有 wd- 前缀的网格只会在大屏幕上生效，即屏幕宽度大于 768 像素的显示器设备。举个例子，如果你想要在大屏幕上让两个网格显示在同一行，但在小屏幕上，你希望他们分行展示，你就可以这样写。
[[div class="grid-container"]]
[[div class="wd-grid-big"]]
......
[[/div]]
[[div class="wd-grid-big"]]
......
[[/div]]
[[/div]]除了 wd-grid-big，你可以使用的还有：
- wd-grid-large
- wd-grid-medium
- wd-grid-small
本组件还提供了一个简便写法，与 wd-grid-big 等效。
[[div class="grid-container"]]
[[div class="grid"]]
......
[[/div]]
[[div class="grid"]]
......
[[/div]]
[[/div]]文字修饰（Text Decoration）
隐藏文字
这是一段默认黑色，鼠标悬浮在上方时才会显示的文字。
这是一段默认隐藏，鼠标悬浮在上方时才会显示的文字。
这是一段默认模糊，复制后才能看到的文字。
强调文字
这是一段被高亮的文字
与其他划线文字不同的是，这一段文字的下划线更粗而且距离文字更远
这是一段画波浪线的文字
这段文字中有一段被圈出来的文字。
文字修饰颜色
默认情况下，高亮文字、划线文字、波浪线文字、被圈出来的文字，他们的非文字部分的颜色都是直接适应版式的 —bright-accent 变量。这在某些版式下可能不生效，或者达不到想要的效果，这个时候你可以这样修改它们的颜色，只需要把这一段代码放在文档的开头：
[[module CSS]]
:root {
--lh-highlighter: 在这里写上 rgb 颜色代码，类似 255,255,255 的形式
}
[[/module]]如果只是想单独修改某段文字，可以用 td-* 系列的类名，可用的有：
- td-red（红色）
- td-blue（蓝色）
- td-green（绿色）
- td-darkgreen（青绿色）
- td-yellow（黄色）
- td-orange（橙色）
- td-purple（紫色）
使用效果如：这是一段紫色的高亮文字。
诗词盒子（Lyric Box）
有时候你可能会需要在页面中加入居中的文本，例如在插入诗词、对话、自白的时候，就像这样下面这样。这里的边框是为了区分正文与示例内容刻意添加的，正常使用代码时不会带有边框。
我必须放任你们像无头苍蝇一样在后室里横冲直撞。
我必须确保有足够数量的人类依旧在后室里迷茫。
我必须确保后室里存在着足量的希望与绝望。
我也不知道为何会有像我这样奇怪的存在。
我也不知道为什么冥冥之中似乎真有什么人想要继续见证你们在后室里的前闯或彷徨。
可能后室意志确实不是无稽之谈吧。
如果你觉得行与行之间的间隙太小了，你可以这样：
我必须放任你们像无头苍蝇一样在后室里横冲直撞。
我必须确保有足够数量的人类依旧在后室里迷茫。
我必须确保后室里存在着足量的希望与绝望。
我也不知道为何会有像我这样奇怪的存在。
我也不知道为什么冥冥之中似乎真有什么人想要继续见证你们在后室里的前闯或彷徨。
可能后室意志确实不是无稽之谈吧。
另外，诗词盒子使用了 flex 布局进行居中，也就是说不仅是文字，放在这里面的任何内容包括图片，都能够被居中展示。
示例文本引用自生神，原作者 Cryer Walker 不匹配任何一个现有的用户名
便签纸（Note）
带有横线和边框的 div，类似笔记本的纸页，可以用来制作流浪者的日记本或者留下的纸条。
常规便签
这是一个普通的便签
可以在上面写普通的文字
带来一种普通的观感
更窄的便签
这是一个窄窄的便签
可以在上面写窄窄的文字
带来一种窄窄的观感
给便签加上 narrow 类！
没那么窄的便签
这是一个窄窄的便签
可以在上面写窄窄的文字
带来一种窄窄的观感
给便签加上 wide 类！
文字更紧密的便签
这是一个文字排列更紧密的便签
可以在页面里贴上一段紧密的文字
带来一种紧密的观感
给便签加上 tight 类！
带有胶带的便签
这是一个带有胶带的便签
可以在页面里贴上一段普通的文字
带来一种特别的观感
给便签加上 with-tape 类！
带有隔离绳的便签
这是一个带有隔离绳的便签
可以在上面写不太一样又没有什么区别的文字
带来一种特别的观感
给便签加上 with-string 类！
纸页式便签
这是一个纸页式的便签
可以在上面写不太一样又没有什么区别的文字
它有着固定的高度和页码
带来一种整齐的观感
纸页式便签需要两个 div！
[[div class="notepaper page with-string"]]
[[div class="notepaper-content"]]
文字
[[/div]]
[[/div]]这是纸页式便签的第二页
你可以在这一页的最下面看到它的页码
并且它是自动计数的
你只需要造 div 就好啦
通常情况下，纸页式便签会计算这一页所有的纸页并显示页数
如果你需要在一页中添加多组纸页，你可以把一组纸页放在一个 div 里：
[[div class="notepaper-group book-pattern"]]
你的纸页们
[[/div]]书页式便签
这是一个书页式便签
用来写日记或许是个不错的选择
一行可以显示两页
但是在小屏幕上看的话，就和纸页式便签没有区别
要做出这样的效果，你只需要把你的纸页式便签都放在一个 div 里
[[div class"notepaper-group book-pattern"]]
你的纸页式便签们
[[/div]]书衣
你可以给你的书页式便签套上书衣
[[div class"notepaper-group book-pattern book-wrapper"]]
你的纸页式便签们
[[/div]]要注意的是，notepaper-group 类会重置页面计数器，，如果你需要制作多个带有书衣的书页组，但并不希望他们的页数重新开始计数，可以这样做。
[[div class="notepaper-group"]]
[[div class="book-pattern book-wrapper"]]
第一页和第二页
[[/div]]
[[div class="book-pattern book-wrapper"]]
第三页和第四页
[[/div]]
[[/div]]告示（Sign）
在世界观里，有些组织可能会在文档里加入诸如通告、警告之类不属于正文的提示性文本，这通常需要突出显示，就像这样：
须知
经监督者议会商定，所有决定长期居住于旅馆房间的人员，无论其在社交网络上活跃程度如何，都会被标记为MIA，其将不再享有探险者总署的各项权利和福利。此决议长期有效。
深色告示
在以上代码的基础上，给 div 加上 signblock-dark 即可获得以下效果。
须知
经监督者议会商定，所有决定长期居住于旅馆房间的人员，无论其在社交网络上活跃程度如何，都会被标记为MIA，其将不再享有探险者总署的各项权利和福利。此决议长期有效。
警示
在以上代码的基础上，给 div 加上 signblock-dark 即可获得以下效果。
警告
经监督者议会商定，所有决定长期居住于旅馆房间的人员，无论其在社交网络上活跃程度如何，都会被标记为MIA，其将不再享有探险者总署的各项权利和福利。此决议长期有效。
报告（Report）
在世界观里，数据库文档可能会插入一些实验报告或是行动报告，就像这样：
光源催化原型 实验报告
研究人员：幽匿抚摸女士
报告时间：2020/12/1
记录开始。
一般来讲，我们都必须务必慎重的考虑考虑。 苏轼在不经意间这样说过，古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。带着这句话，我们还要更加慎重的审视这个问题： 光源催化原型，到底应该如何实现。 叔本华说过一句富有哲理的话，普通人只想到如何度过时间，有才能的人设法利用时间。这句话语虽然很短，但令我浮想联翩。 罗曼·罗兰在不经意间这样说过，只有把抱怨环境的心情，化为上进的力量，才是成功的保证。这似乎解答了我的疑惑。 从这个角度来看。
我们不得不面对一个非常尴尬的事实，那就是， 既然如此， 所谓光源催化原型，关键是光源催化原型需要如何写。 既然如何，裴斯泰洛齐在不经意间这样说过，今天应做的事没有做，明天再早也是耽误了。这似乎解答了我的疑惑。 这样看来， 了解清楚光源催化原型到底是一种怎么样的存在，是解决一切问题的关键。 赫尔普斯曾经提到过，有时候读书是一种巧妙地避开思考的方法。带着这句话，我们还要更加慎重的审视这个问题： 可是，即使是这样，光源催化原型的出现仍然代表了一定的意义。 而这些并不是完全重要，更加重要的问题是， 那么， 我认为， 从这个角度来看， 一般来说， 现在，解决光源催化原型的问题，是非常非常重要的。 所以， 我们一般认为，抓住了问题的关键，其他一切则会迎刃而解。 左拉在不经意间这样说过，生活的道路一旦选定，就要勇敢地走到底，决不回头。这句话语虽然很短，但令我浮想联翩。 就我个人来说，光源催化原型对我的意义，不能不说非常重大。 从这个角度来看。
记录结束。
与直接用引用块或其他 div 做成的报告不同的是，reportblock 中的分割线会贯穿整个 div 而不会在两边留下空隙。如果你对颜色不满意，可以这样改：
[[module CSS]]
:root {
--lh-border-color: rgb 颜色代码，类似 255,255,255
}
[[/module]]深色报告
给 reportblock 加上 reportblock-dark 类，即可获得以下效果
光源催化原型 实验报告
研究人员：幽匿抚摸女士
报告时间：2020/12/1
记录开始。
一般来讲，我们都必须务必慎重的考虑考虑。 苏轼在不经意间这样说过，古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。带着这句话，我们还要更加慎重的审视这个问题： 光源催化原型，到底应该如何实现。 叔本华说过一句富有哲理的话，普通人只想到如何度过时间，有才能的人设法利用时间。这句话语虽然很短，但令我浮想联翩。 罗曼·罗兰在不经意间这样说过，只有把抱怨环境的心情，化为上进的力量，才是成功的保证。这似乎解答了我的疑惑。 从这个角度来看。
记录结束。
附加类（With）
这里列出了一些可以给 div 或者 span 附加样式的类名，以 with- 开头，通常是添加边框和文字颜色的小改动，就不赘述，只列出可用的类名。
| 类名 | 适用于 | 效果 |
| with-border | div | 为元素添加宽度为 1px，颜色跟随 —bright-accent 的边框 |
| with-padding | div | 为元素添加内边距，宽度为 1rem，即一个字宽 |
| with-margin | div | 为元素添加竖直方向的外边距，宽度为 1rem |
| with-shadow | div | 为元素添加阴影 |
| with-box-style | div | with-border、with-padding、with-margin 的组合简写法 |
| with-big-font | div, span… | 将文字大小改为原来的 1.05 倍 |
| with-bigger-font | div, span… | 将文字大小改为原来的 1.1倍 |
| with-large-font | div, span… | 将文字大小改为原来的 1.2 倍 |
| with-huge-font | div, span… | 将文字大小改为原来的 1.5 倍 |
| with-giant-font | div, span… | 将文字大小改为原来的 2 倍 |
| with-small-font | div, span… | 将文字大小改为原来的 0.95 倍 |
| with-smaller-font | div, span… | 将文字大小改为原来的 0.9 倍 |
| with-tiny-font | div, span… | 将文字大小改为原来的 0.8 倍 |
| with-micro-font | div, span… | 将文字大小改为原来的 0.7 倍 |
| with-narrow-width | div | 将 div 块的宽度变为页面宽度的 75%，小屏幕为 90%，对文中诸如报告这样的 div 也有效，类似于便签的 narrow 类 |
| with-bg-* | div, span… | 为元素添加背景色，同时将文字颜色改为白色，将 * 替换成 red/blue/green/darkgreen/yellow/orange/purple 任意一个即可生效 |
使用范例
这是一个用以上附加类制作的自定义 div：
我认为， 海蓝悲剧，发生了会如何，不发生又会如何。 既然如此， 问题的关键究竟为何？ 问题的关键究竟为何？ 我们都知道，只要有意义，那么就必须慎重考虑。 海蓝悲剧，发生了会如何，不发生又会如何。 带着这些问题，我们来审视一下海蓝悲剧。 我认为， 一般来说， 每个人都不得不面对这些问题。 在面对这种问题时， 可是，即使是这样，海蓝悲剧的出现仍然代表了一定的意义。 我们都知道，只要有意义，那么就必须慎重考虑。 希腊说过一句富有哲理的话，最困难的事情就是认识自己。我希望诸位也能好好地体会这句话。 我们一般认为，抓住了问题的关键，其他一切则会迎刃而解。 既然如何， 问题的关键究竟为何？ 一般来讲，我们都必须务必慎重的考虑考虑。 米歇潘曾经提到过，生命是一条艰险的峡谷，只有勇敢的人才能通过。我希望诸位也能好好地体会这句话。问题的关键究竟为何？ 海蓝悲剧的发生，到底需要如何做到，不海蓝悲剧的发生，又会如何产生。海蓝悲剧的发生，到底需要如何做到，不海蓝悲剧的发生，又会如何产生。 对我个人而言，海蓝悲剧不仅仅是一个重大的事件，还可能会改变我的人生。
这是一个使用附加类修改了背景色和文字大小的告示组件。
须知
经监督者议会商定，所有决定长期居住于旅馆房间的人员，无论其在社交网络上活跃程度如何，都会被标记为MIA，其将不再享有探险者总署的各项权利和福利。此决议长期有效。
自定义变量
上文提到了某些组件可以通过添加 CSS 模块和一些代码来修改组件的颜色，其原理就是用更新的 CSS 替换了组件原生的 CSS 变量，组件所有的变量如下：
:root { --lh-paper-bg: 255, 251, 240; /* 便签纸的背景色，rgb 代码 */ --lh-string-color: var(--bright-accent); /* 隔离绳的颜色，rgb 代码 */ --lh-book-color: var(--bright-accent); /* 书衣的颜色，rgb 代码 */ --lh-tape-color: 90,90,90,0.3; /* 胶带的颜色，rgba 代码 */ --lh-white-bg: 249,249,249; /* 告示、报告的背景色 */ --lh-dark-bg: 50, 50, 50; /* 深色告示的背景色 */ --lh-highlighter: var(--bright-accent); /* 文字修饰的颜色 */ --lh-border-color: var(--bright-accent); /* 报告的边框颜色 */ /* 以下是特定的颜色代码，用于 td-* 系列类名 */ --lh-red: #c0392b; --lh-blue: #2980b9; --lh-green: #27ae60; --lh-dark-green: #16a085; --lh-purple: #8e44ad; --lh-orange: #e67e22; --lh-yellow: #f1c40f }
你可以通过上文提到的插入 CSS 模块的方法修改替换这些变量，只要他们被放在引入组件的 include 模块之后。
