代码教程

本篇教程以全站CSS内容为基础。
你亦可参考CSS使用指导为单个页面定制CSS。
**嗨，欢迎来到这里，无名的流浪者！
　　认真阅读本篇文章，你将会在这里学到一些代码的基础与进阶用法。
　　希望这对你的创作有所帮助。**
　　在常用的语法要点处，会使用红色标题高亮，就像这样。
　　正常的标题用深青色高亮，就像这样。
　　请记住本文的最后更新时间，以便在本页更新后及时获取新代码的使用方法。
　　本文搭配个人沙盒使用更佳！你可以在那里同步测试学到的代码哦~
　　本文最后更新时间：**2022/12/30**

　　你觉得这个这个字体挺好看的？后面就会教你怎么使用的啦(￣▽￣)~\*
　　如需代码支持，请在创作交流群中咨询或在这里/这里留言(๑╹◡╹)ﾉ"""

**最近更新[十条]：**

* **2022年12月30日:** *更新 rgba方法修改颜色（坐标：二、特殊文本样式）*
* **2022年12月20日:** *优化 文章部分位置的排版与内容（坐标：三、特殊功能使用）*
* **2022年12月4日:** *优化 text-decoration、text-align、cursor等处的部分内容（坐标：二、特殊文本样式）*
* **2022年11月24日:** *优化 text-shadow、font-style、font-size等处的部分内容（坐标：二、特殊文本样式）*
* **2022年11月24日:** *更新 box-shadow（背景阴影设定）（坐标：二、特殊文本样式）*
* **2022年10月20日:** *优化 color（文本颜色设定）中的部分内容（坐标：二、特殊文本样式）*
* **2022年10月16日:** *优化 部分内容在文中的位置（坐标：一、序章/二、特殊文本样式）*
* **2022年10月16日:** *优化 文章部分位置的排版与内容（坐标：一、序章/二、特殊文本样式）*
* **2022年10月7日:** *更新 倒计时（坐标：三、特殊功能使用）*
* **2022年8月30日:** *更新 样式：模糊字（坐标：三、特殊功能使用）*

**以下为本文目录：**

　另外，本文写作对象主要是后室写手，并不会太过深入地涉及Wikitext/CSS的使用，**只会涉及有助于基本写作方面的内容且尽量使用较简单、易理解的代码**，如果你想更多地了解CSS/维基网站开发，请自行百度。

### 属性盒与属性标签

`<div>/<span>/<font>`是Wikitext的基础属性盒。它们大体上作用一致，皆起着为盒内文本添加一定属性标签的作用，但个体上还有些许不同。**[?]**

* 代码
* 效果

这段话在div属性盒之外。<div style="">而这段话与上一段话<b>在代码书写过程中</b>没有空行，但处于div属性盒（“style”标签留空）之内。</div>
##### 　附注

<b>的效果是将这一属性盒内的文本加粗，完全等价于'''文本'''。在示例1-2中将向你展示使用'''的效果。

这段话在div属性盒之外。而这段话与上一段话**在代码书写过程中**没有空行，直接相连，但处于div属性盒（“style”标签留空）之内。
代码示例 1-1

* 代码
* 效果

这段话在span属性盒之外。<span style="">而这段话与上一段话'''在代码书写过程'''中没有空行，但处于span属性盒（“style”标签留空）之内。</span>

这段话在span属性盒之外。而这段话与上一段话**在代码书写过程中**没有空行，直接相连，但处于span属性盒（“style”标签留空）之内。
代码示例 1-2

通过这两个示例，我们可以很清晰地看出`<div> <span>`两标签见的主要不同：**div会自动换行，而span不会。**这是由于，div的主要作用对象为包括文本及其所在的整行背景在内的整体，而span的主要作用对象仅为文本。font标签的作用基本与span相同，也不会使文本间自动换行，故不再举例展示。

选择了合适的属性盒，接下来便需要向属性盒中填充属性标签。
属性标签有id、class、style等多种，它们可以在一个div属性盒中集中召唤。id、class属性标签不常用，故不再介绍。在示例1-1、1-2中出现的style属性标签即为写作最常用的标签。

* 代码
* 效果

<span style="color:red;font-family:Genshin55W;text-shadow: 0 0 10px red;">Hello World</span>
##### 　附注

至于style属性标签里面的那一串东西都是什么意思，请见后面的教程。

Hello World
代码示例 1-3

**请注意，属性盒的结束元素（即`</div>`/`</span>`等）可省略，但不建议省略，因为这会影响属性盒的正常表达，导致属性内容混淆。**

#### 属性标签: id

属性标签"id"的作用即为命名，你可以将它理解为它能给这个属性标签所包含的内容加一个特殊且唯一的标记。它的用法大致如此：

* 代码
* 效果

<span id="hello">你好啊</span>

你好啊
代码示例 1-4

#### 属性标签: class

属性标签"class"的作用为添加类目，它与“id”的唯一区别就是可指定多个对象，以改变文本的样式。下面是几个栗子：

* 代码
* 效果

<span class="heimu">此段内容使用了class:"heimu"（来源于萌娘百科）</span>

此段内容使用了class:"heimu"（来源于萌娘百科）
代码示例 1-5 [黑幕]

* 代码
* 效果

<span class="spoilerblur">此段内容使用了class:"spoilerblur"</span>
##### 　附注

将鼠标移到模糊块上试试？通过如此，可以产生一个防剧透（模糊）的效果。你可以将它用于一些加密文件上，**但请注意，模糊字的大量使用会严重影响观感**。

此段内容使用了class:"spoilerblur"
代码示例 1-6 [模糊字]

* 代码
* 效果

<span class="countdown" style="display:none;">还有<span class="countdowndate">January 01 2023 00:00:00</span>就到新年啦！</span>
##### 　附注

此段内容使用了class:"countdown"，来源于Fandom开发者社区。更多用法请在这里查看。

还有January 01 2024 00:00:00就到新年啦！
代码示例 1-7 [倒计时]

#### 属性标签: title

属性标签"title"可以为其中所包含的内容添加一个当鼠标悬停于其上时显示出的文字。

* 代码
* 效果

<span title="你看到我了吗？">把鼠标放在这段文字上试试！</span>

把鼠标放在这段文字上试试！
代码示例 1-9

* 代码
* 效果

 <span class="heimu" title="你知道的太多了">此段内容结合了class:heimu与title标签</span>

此段内容结合了class:heimu与title标签
代码示例 1-8

#### 属性标签: style

属性标签"style"是属性标签中最重要的一部分，也是你的创作过程中一定会用到的内容。你想要给一段文字上色也好，调整位置也好，调整大小也好，更改字体也好，都需要用到这个，每一个style标签中的具体属性都要用到“;”（英文分号）进行分割，比如<div style="color:green;font-family:黑体">这个样子。<br>'''本文第二章内容将就style中的各个可添加属性展开。'''

## 二、特殊文本样式

### color（文本颜色设定）

顾名思义，此属性可设置文本的字体颜色。下面以一个例子阐释该属性的效果：

* 代码
* 效果

<span style="color:green">这是一段</span><span style="color:red">色彩斑斓</span><span style="color:blue">的文字</span>

这是一段色彩斑斓的文字
代码示例 2-1

在示例2-1中采用了颜色对应英文的方式来更改字体的颜色。你还可以通过十六进制颜色码来表示颜色。下面一个例子集合了这两种表达方法：

* 代码
* 效果

<span style="color:PaleVioletRed">这是另一段</span><span style="color:#FF1493">色彩斑斓</span><span style="color:Thistle">的文字</span>

这是另一段色彩斑斓的文字
代码示例 2-2

同样的，你还可以通过rgba方法来表达颜色。下面的例子就使用了rgba方法来显示文字。

* 代码
* 效果

<span style="color:rgba(230,207,103,0.5)">这是一段透明的带颜色文字</span>

这是一段透明的带颜色文字
代码示例 2-3

### font-family（文本字体设定）

可以改变文字的字体样式，俗称字体。
**如果这个字体没有被本Wiki搭载**，那么只有电脑（ios设备除外）上装有这个字体的人才能看到你设置的这个字体。比如你设置字体为汉仪文黑，那么只有电脑上装有汉仪文黑这个字体的人才能看到（这段话就是这个字体哦，如果你没有装这个字体，那么你看到的应该是设备默认的字体）。**所以，不要用你的电脑上安装的字体，别人看不到变化。**

**如果本Wiki搭载了某个字体**，那么所有人（电脑端）都能看到。

以下为本Wiki搭载的中文字体列表：

**ZCOOL XiaoWei** ***注意：此字体默认大小较小，请注意字号。***

使用方法: <span style="font-family:ZCOOL XiaoWei;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Ma Shan Zheng**

使用方法: <span style="font-family:Ma Shan Zheng;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Long Cang** ***注意：此字体默认大小较小，请注意字号。***

使用方法: <span style="font-family:Long Cang;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Zhi Mang Xing** ***注意：此字体不易辨识，请慎用。***

使用方法: <span style="font-family:Zhi Mang Xing;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Noto Serif SC**
（这是本文使用的字体）
使用方法: <span style="font-family:Noto Serif SC;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Genshin75W**

使用方法: <span style="font-family:Genshin75W;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Genshin55W**

使用方法: <span style="font-family:Genshin55W;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**CangerW02**

使用方法: <span style="font-family:CangerW02;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

其实一些系统中一般自带的字体也可以使用。比如：等线、楷体、宋书等。

### font-size（文本大小设定）

font-size属性可允许你改变文字的大小。
但你可以使用Wikitext中自带的 <small> 和 <big> 两个独立的标签来调整文字大小。

* 代码
* 效果

<span style="font-size:15pt">这句话在span元素中添加了属性：font-size:15pt</span>
<big><big>这句话展示的为2个big标签叠加的效果</big></big>
<small><small>这句话展示的为2个small标签叠加的效果</small></small>

这句话在span元素中添加了属性：font-size:15pt
这句话展示的为2个big标签叠加的效果
这句话展示的为2个small标签叠加的效果
代码示例 3-1

### font-style（文本倾斜设定）

font-style标签准许你变更文本的斜/直显示。可设定项有normal、italic、oblique三种，其中，italic、oblique的效果一般一致，都能使文本倾斜显示，但oblique可以变更文本倾斜的角度（但目前仅Firefox浏览器支持该功能的显示，故不再介绍变更倾斜度的详细用法（实际上你可以使用skew函数达成相似的效果））。
在Wikitext中，你可以用'' ''来代替这个属性。

* 代码
* 效果

<span style="font-style:italic">这是一段倾斜的文字</span>

这是一段倾斜的文字
代码示例 4-1

### text-decoration（文本加线设定）

“text-decoration”属性规定了文本的修饰线样式。

**建议：**
你也可以使用 `<u> 内容 </u> 或
 内容
`来简单地召唤下划线（**U**nderlining）/ 删除线（**S**trikethrough）

使用 `<u> 内容 </u>` : 内容

使用 `
 内容
` : ~~内容~~

* 代码
* 效果

<span style="text-decoration: underline overline wavy green .5px;">这是一段上方和下方都有粗0.5px的波浪线修饰的文字</span>
##### 　附注

属性值中的各项应依次为：修饰线位置、修饰线样式、修饰线颜色、修饰线粗细值。其中，修饰线位置可有多个值。在第一个例子中，修饰线有“underline”与“overline”两个值，即上下皆有修饰线。修饰线位置的可取值有underline、overline、line-through，修饰线样式的可取值有solid、double、dotted、dashed、wavy。

这是一段上方和下方都有粗0.5px的波浪线修饰的文字
代码示例 5-1

### text-align（文本位置设定）

“text-align”属性规定文本的对齐方式。

* 代码
* 效果

<span style="text-align:justify;">这段文字采用两侧对齐。</span>
##### 　附注

常用可取属性值有：left、right、center、justify。

这段文字采用两侧对齐。
代码示例 6-1

### cursor（鼠标样式设定）

“cursor”属性规定当鼠标指针悬浮于其上时，鼠标指针所显示的样式。
使用格式为：<code><span style="cursor:样式">内容</span></code>

* 代码
* 效果

<span style="cursor:default">default</span> <span style="cursor:context-menu">context-menu</span><br><span style="cursor:help">help</span> <span style="cursor:pointer">pointer</span><br><span style="cursor:progress">progress</span> <span style="cursor:wait">wait</span><br><span style="cursor:cell">cell</span> <span style="cursor:crosshair">crosshair</span><br><span style="cursor:text">text</span> <span style="cursor:vertical-text">vertical-text</span><br><span style="cursor:alias">alias</span> <span style="cursor:copy">copy</span><br><span style="cursor:move">move</span> <span style="cursor:no-drop">no-drop</span><br><span style="cursor:not-allowed">not-allowed</span> <span style="cursor:grab">grab</span><br><span style="cursor:grabbing">grabbing</span> <span style="cursor:all-scroll">all-scroll</span><br><span style="cursor:col-resize">col-resize</span> <span style="cursor:row-resize">row-resize</span><br><span style="cursor:n-resize">n-resize（可将n替换为e/s/w/ne/nw/se/sw/ew/ns/nesw/nwse，不再展示）</span><br><span style="cursor:zoom-in">zoom-in</span> <span style="cursor:zoom-out">zoom-out</span>
##### 　附注

部分鼠标指针在一些系统中可能显示为一种或显示为默认指针。若要使用，建议选取通用性更高的指针。

default context-menu
help pointer
progress wait
cell crosshair
text vertical-text
alias copy
move no-drop
not-allowed grab
grabbing all-scroll
col-resize row-resize
n-resize（可将n替换为e/s/w/ne/nw/se/sw/ew/ns/nesw/nwse，不再展示）
zoom-in zoom-out
代码示例 7-1

### text-shadow（文本阴影设定）

text-shadow可为文字与text-decoration（文本加下划/删除/波浪线等）添加阴影。你可以在一个text-shadow标签中添加多个阴影，阴影值之间用逗号隔开。

* 代码
* 效果

<span style="text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em #0000FF; color: white;">（治愈风格）{{Ruby|The greatest test of courage on earth is to bear defeat without losing heart.|世界上对勇气的最大考验是忍受失败而不丧失信心}}</span>

<span style="text-shadow: red 0 -2px;">（崩坏风格）{{Ruby|Variety is the spice of life.|变化是生活的调味品}}</span>
##### 　附注

每个阴影值中的数值依次是：文本在**水平**和**竖直**方向的偏移量、**模糊半径**和**阴影颜色值**。

（治愈风格）Template:Ruby

（崩坏风格）Template:Ruby
代码示例 8-1

### box-shadow（背景阴影设定）

box-shadow 用于在文本背景添加阴影效果。你可以在一个box-shadow标签中添加多个阴影，阴影值之间用逗号隔开。

* 代码
* 效果

<div style="width:100%;height:140px;background-color:#ddd79a;padding:40px;"><div style="padding: 20px;box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),0 0 0 2px rgb(255,255,255),0.3em 0.3em 1em rgba(0,0,0,0.3);">沉舟侧畔千帆过，病树前头万木春。</div></div>
##### 　附注

每个阴影值中的数值依次是：文本在**水平**和**竖直**方向的偏移量、**模糊半径**、**模糊扩展半径**和**阴影颜色值**。第一个阴影中的inset的作用是使阴影向内扩散。为便于查看效果，在本示例中添加了一个宽度为100%、高度为140px的同主题色背景。

沉舟侧畔千帆过，病树前头万木春。
代码示例 9-1

### float（元素位置浮动）

使用浮动可以改变任意元素（包括图像与span标签定义的文本等）在页面中的位置，这对文章的排版起着很大的作用。

举个例子：

浮动实例1

浮动实例2

浮动实例3
```
<div style="background-color:grey;border:solid 1px black;margin:5px;width:318px;height:318px;">
<div style="background-color:red;border:solid 1px black;margin:2px;width:90px;height:90px;">
浮动实例1
</div>
<div style="background-color:green;border:solid 1px black;margin:2px;width:90px;height:90px;">
浮动实例2
</div>
<div style="background-color:blue;border:solid 1px black;margin:2px;width:90px;height:90px;">
浮动实例3
</div></div>
```
我们可以看到一个大灰框内有三个框框，这里没有设置浮动，所以他们都默认地排在了左边。

浮动实例1

浮动实例2

浮动实例3

```
<div style="background-color:grey;border:solid 1px black;margin:5px;width:318px;height:318px;">
<div style="background-color:red;border:solid 1px black;margin:2px;width:90px;height:90px;">
浮动实例1
</div>
<div style="float:right;background-color:green;border:solid 1px black;margin:2px;width:90px;height:90px;">
浮动实例2
</div>
<div style="background-color:blue;border:solid 1px black;margin:2px;width:90px;height:90px;">
浮动实例3
</div></div>
```
如果我们想让绿块排到右边，这时就应该给绿块设置右浮动，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。同理可以对红块和蓝块进行同样的操作。

那么此时就发现了一个问题：浮动区域下方有其他区域时，下方区域总是会上移补位。这个问题主要源于被浮动的区域已经脱离了文件，不再占用空间，因此在计算机看来，它们其实是不存在的，所以就用到存在的区域进行补位。

那么如何解决这个问题呢？一般来说，这个问题无法被解决。但是我们可以通过多种浮动的累加，对区域进行自定义排版：

同时对所有区域设置左浮动或右浮动，它们就会依次排序：（这里使用左浮动作为案例）

浮动实例1

浮动实例2

浮动实例3

可以看到三个区域按顺序从左到右依次排好了。

```
 <div style="background-color:grey;border:solid 1px black;margin:5px;width:318px;height:318px;">
 <div style="float:left;background-color:red;border:solid 1px black;margin:2px;width:90px;height:90px;">
 浮动实例1
 </div>
 <div style="float:left;background-color:green;border:solid 1px black;margin:2px;width:90px;height:90px;">
 浮动实例2
 </div>
 <div style="float:left;background-color:blue;border:solid 1px black;margin:2px;width:90px;height:90px;">
 浮动实例3
 </div></div>

```
如果按照上述操作设置浮动，包含框太窄，无法容纳水平排列的多个浮动元素，那么其它浮动块向下移动，直到有足够的空间：

浮动实例1

浮动实例2

浮动实例3

```
 <div style="background-color:grey;border:solid 1px black;margin:5px;width:318px;height:318px;">
 <div style="float:left;background-color:red;border:solid 1px black;margin:2px;width:130px;height:90px;">
 浮动实例1
 </div>
 <div style="float:left;background-color:green;border:solid 1px black;margin:2px;width:130px;height:90px;">
 浮动实例2
 </div>
 <div style="float:left;background-color:blue;border:solid 1px black;margin:2px;width:130px;height:90px;">
 浮动实例3
 </div></div>

```
而如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

浮动实例1

浮动实例2

浮动实例3

```
 <div style="background-color:grey;border:solid 1px black;margin:5px;width:318px;height:318px;">
 <div style="float:left;background-color:red;border:solid 1px black;margin:2px;width:130px;height:130px;">
 浮动实例1
 </div>
 <div style="float:left;background-color:green;border:solid 1px black;margin:2px;width:130px;height:90px;">
 浮动实例2
 </div>
 <div style="float:left;background-color:blue;border:solid 1px black;margin:2px;width:130px;height:90px;">
 浮动实例3
 </div></div>

```

## 三、特殊功能使用 [NEW]

### 用法：文本折叠

Fandom Wiki一般会内置一个`{{Collapse}}`模板，它能帮你简化MediaWiki原有的折叠代码。

下面是`{{Collapse}}`模板的使用格式：

* 代码
* 效果

##### 　附注

不难发现，如果你点击body中的“这是第三句话”，你是不能收起这个折叠模块的。这就是final内容与body内容的区别。num=1是用来防止与后面的折叠内容重复的，如果两个折叠内容的num都=1，那么你点开第一个折叠内容，第二个折叠内容也会开启。

这是第一句话

这是第二句话

这是第三句话

代码示例 9-1

需要注意的是，在`{{Collapse}}`模板中添加Wikitext表格代码（即`{|……|}`），其中的“|”会被误解析为Collapse模板的分隔符。
故若要在此模板中嵌入表格，请使用`<table>`标签或将“|”用`{{!}}`替代或嵌入另一模板。

### 样式：折叠密码模块

一些"传说"等隐藏内容较多的页面包括一个假的"登录"框，提示用户输入密码。但其实不需要真正的输入，因为点击该框将显示下一节内容并自动填充密码。这可以通过下面这一长串代码来实现。

`<div style="background-color:white; color:#AAAAAA; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">`

`<span class="mw-customtoggle-password mw-customtoggle-password2"><div class="mw-collapsible" id="mw-customcollapsible-password2">输入密码</div></span>`

`<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password"><div class="mw-customtoggle-password mw-customtoggle-password2"> 示例密码</div></div></div>`

`<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password"><big>已自动填充已缓存密码，欢迎 {{USERNAME}}。</big><br /><br />[示例内容]</div>`

在实践中，这段代码会产生这样的结果：

输入密码
 示例密码已自动填充已缓存密码，欢迎，无名的流浪者。

[示例内容]

当然，你也可以对这个折叠样式进行进一步的美化，如下所示：（来源：员峤）

`[[File:The MEG's Logo (Thanks to Egglord1).png|right|215x215px]]
<div style="background-color: #FAFAD2; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">
'''警告：'''<br>
<code>以下内容已被M.E.G加密，请输入有效凭证。</code>

'''原因：''' <code>你并未获取浏览这个文件的许可，它要求更高的许可等级。</code>
</div>

<div style="background-color:#FAFAD2; color:#888888; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">
<span class="mw-customtoggle-password mw-customtoggle-password2"><div class="mw-collapsible" id="mw-customcollapsible-password2">
输入密码</div></span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password">
<div class="mw-customtoggle-password mw-customtoggle-password2">
4R415T51G1Rr4</div>
</div>
</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password">
<br />
<div style="text-align: center><code>'''凭证有效。'''</code></div>
<br />
<div class="mw-customtoggle-first"><span style="color:blue;">'''<code><big><u><div style="text-align: center">> 打开文件</div></u>'''</big></code></span></div><div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-first">[示例内容]</div></div>`

效果：

File:The MEG's Logo (Thanks to Egglord1).png
**警告：**

`以下内容已被M.E.G加密，请输入有效凭证。`

**原因：** `你并未获取浏览这个文件的许可，它要求更高的许可等级。`

输入密码

4R415T51G1Rr4

`**凭证有效。**`

**`> 打开文件`**[示例内容]

### 样式：Tabbers（横向折叠/标签页）

在较长的页面中，仅仅使用标题来组织可能并不总是合适的。标签页是一个非常强大的工具，它旨在将信息很好地缩减为光滑和可读的块状。

任何东西都可以放在标签页内，包括其他标签页。然而，在使用它们时应该谨慎一些。首先，如果一个页面没有使用标签页，它可能是为了从上到下阅读。然而，标签页让读者在选项卡之间横向阅读，而这种风格可能会发生冲突。此外，选项卡从你的页面中拿走了一些内容，意味着它大大减少了页面的长度。如果你的页面非常长，从上到下都很难阅读，标签页的使用会是一个好处。但如果你的页面在6000个字符以下，你可能没有足够的文字来保证标签页内有足够的文字描述。假设你分别有1000个字符用于标签页外的介绍和结束，而你在标签页内有5个选项卡，每个选项卡内含800个字符，尽管这样你的文字符总数仍然是6000个，但这可能是非常令人沮丧的，因为有人点击一个标签，期望深入了解这个主题，却只看到一个段落。这让人觉得你的页面没有什么内容，即使它有适当的数量，总体上让人觉得半生不熟。

如果你觉得标签页的使用有利于你的页面，请记住，你的文章的标签页外内容也必须有可以吸引读者的要素；如果你的所有内容都挤在一组标签中，整个文就会感觉有点不对劲。一个页面应该有一个有凝聚力的引言、内容和某种文字来结束它。结束语可以是与最终结果相关的内容，如"入口和出口"部分，或其他一些使读者轻松进入页面结尾的内容。如果你缺乏一个明显、有凝聚力的结束语，可能导致读者无法判断你在标签页外的结尾段是否处于某个选项卡中。

下面是一个标签页的使用例子：

`<tabber>`

`|-| 基础描述=`

`[总体概况]`

`|-| 额外信息=`

`[探索日志]`

`|-| 更多信息=`

`[一些神秘事件之类的]`

`|-| 附录=`

`[c̵̨̲̀̋r̵̠̗̔͗͘͘e̴͖̔é̷̲͇p̸̫͖̪͇̂̂̚ͅy̴͚̞̎̊̋ ̴̧̼̘̚w̷̻̳̏͂̂h̵̯̀o̶̗͋̅̌͌a̷̬̘̻͒a̸̦̻̪̱̎̈́͊͋̔a̴̤͈̿͑͂̅͝ ̸̛̙̬̞̝͊̒̄ş̷̞̗̞̜̽p̷̡̹̼̰͈͒̚o̴̰͐̈o̴̯͚̮̔͐̅k̷̼̝͇̯̯͊̃̿͝y̵̧̜̻͇̌̐̈́͘͝]`

`</tabber>`

效果：

* 基础描述
* 额外信息
* 更多信息
* 附录

[总体概况]

[探索日志]

[一些神秘事件之类的]

[c̵̨̲̀̋r̵̠̗̔͗͘͘e̴͖̔é̷̲͇p̸̫͖̪͇̂̂̚ͅy̴͚̞̎̊̋ ̴̧̼̘̚w̷̻̳̏͂̂h̵̯̀o̶̗͋̅̌͌a̷̬̘̻͒a̸̦̻̪̱̎̈́͊͋̔a̴̤͈̿͑͂̅͝ ̸̛̙̬̞̝͊̒̄ş̷̞̗̞̜̽p̷̡̹̼̰͈͒̚o̴̰͐̈o̴̯͚̮̔͐̅k̷̼̝͇̯̯͊̃̿͝y̵̧̜̻͇̌̐̈́͘͝]

### 样式：扫描动画折叠

觉得普通折叠看起来太简单、用惯了？那么不如来试试这个**动画**模板吧~

**{{AnimatedCollaspe|num=xxx|content=这里放内容}}**

把你要隐藏的内容（可以有代码）放进去就可以啦~

比如
{{AnimatedCollaspe|content=<font color="0000FF"><center>可恶，这个机密内容竟然被你看到了</center></font>}}

效果（点一下试试）：

**WARNING**
**模因标记触媒检测到生命迹象。即将进行基因组核查。**
请注意，你正在进行未经允许的访问
如未拥有指定权限密钥，模因定位将即刻生效

*-- Gene Checking Loading --*
 访问者:   无名的流浪者

 基因密钥:  GENE#01-170595707021PW2022SF

 基因密钥:  *GENE#01-170595707021PW2022SF*

可恶，这个机密内容竟然被你看到了
你也可以去AnimatedCollaspe模板页面查看一下实现美化内容的代码，然后复制到你的文里，修改这个动画中的部分内容（一定不要改模板哦！）。如果你不太熟悉代码，使用这个模板即可。如果你想在文中使用多个这个模板，请更改num的值（前边基本格式里的xxx）。

什么？你说有单词拼错了？啊哈哈哈，小问题小问题，不必在意(｀・ω・´)

### 样式：Tables（表格）

表格在某些情况下是有很用的工具，比如你可以将其用于一些相似现象的汇总介绍中。它旨在将数据组织成均匀的方框。下面代码中的背景颜色（#xxxxxx）可以改成你想要的任何十六进制颜色代码。

`{| class="article-table"

! style="background-color: #ccf243" |例 1

! style="background-color: #ccf243" |例 2

! style="background-color: #ccf243" |例 3

! style="background-color: #ccf243" |例 4

结果：

 次分支 1

你也可以用表格来给一些文本增加一个简洁美观的文本背景（这与div style中设置的背景不同），如下：

`{| class="article-table"

!这里是表格标题捏

哈哈( ･ω･` )

啊∑(ﾟДﾟノ)ノ

气死我啦(•́へ•́╬)

效果：

哈哈( ･ω･` )
啊∑(ﾟДﾟノ)ノ

### 样式：作者与附注信息块

如果你想在你的文最下方注明作者（或合著人/上传人等），你可以使用Author模板。使用格式如下：
`{{Author|作者=|图像来源=|附注=}}`
下面举一个例子：`{{Author|作者=An Average Backroom Writer|图像来源=https://unsplash.com/photos/koy6FlCCy5s|附注=如果你对本文有什么建议，请留言，谢谢！}}`
效果：

<< 查看作者与附注内容>> 收起作者与附注内容

An Average Backroom Writer << **作者**
https://unsplash.com/photos/koy6FlCCy5s << **图像来源**
如果你对本文有什么建议，请留言，谢谢！ << **附注**

当然，有时为了方便，你也可以直接使用一个折叠来注明作者信息，就像这样：
效果：

**> 查看作者与关于信息**

**< 隐藏作者与关于信息**

作者: Backrooms
图像来源：https://unsplash.com/photos/xxx

### 拓展：进度条

FDBR支持一些定制的进度条

例如：

`<div class="progress"><span class="text">没有标签的基本进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

没有标签的基本进度条50%

其中“没有标签的基本进度条”是进度条的名字，可以随便改；而"width: 50%"中的50%指的是进度条的宽度；最后的“50%”指的是进度条的进度。

像这样的进度条还有很多种，可以进行自定义处理。（下面列出几个常用的）

不需要进度条名称：

`<div class="progress"><span class="text"></span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

50%

暗色进度条：

`<div class="progress dark"><span class="text">一个黑黑的进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

一个黑黑的进度条50%

冰火两重天（误）进度条：

`<div class="progress gradient"><span class="text">左边蓝右边红</span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

左边蓝右边红50%

圆角进度条：

`<div class="progress round"><span class="text">圆角进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

圆角进度条50%

动画进度条：

`<div class="progress animated"><span class="text">动画进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

动画进度条50%

一个暗色圆角动画进度条：

`<div class="progress dark round animated"><span class="text">一个暗色圆角动画进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

一个暗色圆角动画进度条50%

### 拓展：嵌入式投票

你应该看到本文页眉处的嵌入式投票了吧？类似这样询问读者满意度的嵌入式投票能够让你能获知读者对你的文的评价。
当然，只要开阔思想，你或许还能想出更多的用法捏？

嵌入投票的方式：

① 你需要去讨论区发表一个投票

② 点进投票详情页，复制页面链接末尾的那一串数字

③ 把填到下面这个模板中

基本格式：**<div class="d-poll" data-id="你复制的那串数字"> 投票没加载出时显示的内容，可留空，加载出后会被替代 </div>**

下面举一个使用嵌入式投票的例子（样式经过了优化）：

**投票正在加载~
不妨先看一下我的其他作品吧!
幻象禁域**
File:Ajax-loader.gif

这个嵌入式投票的代码：
`<center><div style="background-color:#FFF8DC; margin:auto; padding:5px 5px; border:6px solid #FFEFD5 ; border-radius: 0px; width:50% ; align:left"><font color="6E45AE">

<div class="d-poll" data-id="4400000000000044588"><br>
<center>'''投票正在加载~<br>不妨先看一下我的其他作品吧!<br>[[幻象禁域]]'''</center>
<center>[[File:Ajax-loader.gif]]</center>
<br></div>

</font></div></center>`
在没加载出投票之前，就会显示这样的内容：

**投票正在加载~
不妨先看一下我的其他作品吧!
幻象禁域**
File:Ajax-loader.gif

投票加载出之后，这个内容就会被自动替换成嵌入式投票。

## 四、页面的布局与媒体使用

### 中括号“[]”

这里一般是放置从外部引入的链接等，常用的一般分为三种：

* [[页面]]
* [[file]]
* [[语言:.....]]

#### [[页面]]

一般是将一个页面引到另外一个页面的传送门，如果要是这个页面存在于本wiki的话，那么你只需要在那个Wiki页面的专用后缀那里复制一下，然后粘贴到一对双中括号中间，那么它将会将点击这里的人引到那个wiki页面。举例：

专用后缀：https://backrooms.fandom.com/zh/wiki/Level\_1554中，Level\_1554是页面专用的后缀。你想要跳转到这个页面只需要[[Level 1554]]。

但如果不是本wiki的页面的话会相对麻烦一些，你需要用到空格来描述你要引过去的链接。比如:[https://backrooms.fandom.com/wiki/Level\_63 Level 63]，效果：Level 63。

#### [[file]]（媒体导入）

##### 添加图片 & 图片可放大化设置

一般是放置一张已经从主站导入的照片或视频或什么奇奇怪怪的文件时使用的，举个例子，如果我想把adaihappyjan.jpg这个已经上传到wiki的文件导入到我的页面中，我只需要

[[File:adaihappyjan.jpg]]

下面是效果：
File:Adaihappyjan.jpg
哇！是不是太大了，那我们压缩一下吧，对于file类导入比较有用的指令包括\*\*\*px、thumb、vertical-align、horizontal-align等，我们把它放进来。

**[[File:adaihappyjan.jpg|160x200px|thumb|描述一下这张照片]]**

 File:Adaihappyjan.jpg  *文件名|大小|样式表|文字描述*

看右边，现在是不是小很多？

这样子的话我们现在就可以向楼层里面放描述照片啦，当然如果不需要描述的话也可以不用加thumb，写出大小就可以将图片放置进文字栏。

**[[File:adaihappyjan.jpg|160x200px]]**

File:Adaihappyjan.jpg现在看左边，照片就已经放进文字栏了，而且它可以放置到我任何想要放置的位置，像这样：File:Adaihappyjan.jpg，这样你就可以无缝插入了。

对于文字的描述，效果大概如右边那个图所示： File:Adaihappyjan.jpg

**2022/06/11 更新：**

你还可以使用如下的代码来进行 **图片可放大化设置**（把鼠标移动到图片上，图片会放大）：

```
<div class="right-image">
[[File:图片.png]]
【这里写文字描述】
</div>

```

注意①：**使用图片可放大化设置时**，[[File:图片.png]] 中请**最好不要使用缩略图**（这会让图片看起来很怪、很小，但你可以使用图片大小设置），就是不要添加thumb标签，就像这样：[[File:图片.png|thumb]]或[[File:图片.png|缩略图]] （这是错的）。

注意②：**使用图片可放大化设置时**，不要在 [[File:图片.png]] 中添加对图片的描述，这没有用，不会显示。你需要用文字描述替换上面格式里的文字，这样才有效果。

**右边**是一个例子，把鼠标移动到图片上，你会发现图片放大了：

File:Level-37-7.gif
**Level 37**的另一张照片。

这个例子的代码：

```
<div class="right-image">
[[File:Level-37-7.gif]]
'''Level 37'''的另一张照片。
</div>

```

注意③：虽然这种图片嵌入方法能让你的文高级感骤增，但是它只适用于一些比较大的图片，如果你的图片比较小，使用这种嵌入方法只会适得其反。
注意④：这种图片嵌入方法所添加的图片会自动放置于页面右侧，无法调整位置。并且由于占用空间较大，这会对排版造成一定的困难。

**你可以在这个Level中欣赏一下这种图片嵌入效果：Level 37**

##### 添加音频 & 点击文字播放音频

导入音频的方式与导入图片的方式相似，你只需要把上传文件后把File后的内容改成你的音频即可，比如：
`[[File:Undertale OST - Undertale (071) Cinematic Orchestral Cover.mp3]]`
效果：
File:Undertale OST - Undertale (071) Cinematic Orchestral Cover.mp3

~~这个时候就有人说了，这音乐格式怎么这么大，丑死了丑死了~~
如果你感觉这样的格式不太美观，或者你想在你的文里埋一些彩蛋，或者点开折叠的鼠标声（？），或者jumpscare~~**但是我建议你不要这么搞，不然明天我就去刀了你**~~，你可以用下面的方法：
①首先，在音频的后方增加一个class，如下
`[[File:Undertale OST - Undertale (071) Cinematic Orchestral Cover.mp3|class=media-id-undertale]]`
效果：
File:Undertale OST - Undertale (071) Cinematic Orchestral Cover.mp3

看起来没什么变化。这个class中的“undertale”相当于一个标签，用于与后面的点击播放音频的文字相关联。你可以把这个标签中的“undertale”替换成任意内容。
②之后输入你想点击触发的文字，并且给这段文字也加入一个标签，如下：

`<span class="js-action-play" data-media-id="undertale"> 点击这串文字播放音频 </span>`

③好了，大功告成，下面来看看效果吧！点一下下面的文字试试（双击暂停）：
 点击这串文字播放音频
~~那么这个时候就有人又会说了，你这音频也没有隐藏啊，这不是照样丑吗？~~
感谢Dianliang233为Backrooms Wiki与~~嘉然~~Backrooms-Sandbox Wiki所制作的本脚本（JavaScript）
由于本页代码过多，此脚本可能不生效。建议你在使用本脚本时将其尽量置于页面较前部分。

#### [[语言:.....]]

有的时候这篇文章在别的后室fandomwiki里有别的语言存在，那么可以在wiki里插入[[语言:对应文章]]，比如[[en:Level\_60]]，它就表示着这个文章在英文站中它的专用后缀叫Level\_60，同样的，这也可以让进入英文站的汉语用户更方便的找到对应的中文版本，因为fandom会在下方推送浏览器所属语言的版本（如果有的话）。

### 总标题、段落标题

**总标题**是指在文章页眉处显示的大标题。它默认是你创建的页面名（即网页链接中**……zh/wiki/**后的部分）。你可以使用下面的代码来更改文章的总标题。
```
{{DISPLAYTITLE:标题名}}
```
**段落标题**是指在文章不同内容前的加的标题，用以区分不同的表示内容。它有着不同的级别，我们分别称之为一级标题、二级标题、三级标题、四级标题、五级标题（没有六级标题）。如你一般所见文章中的“描述”、“出口和入口”等字，即为二级标题；而在“出口和入口”内的“出口”、“入口”即为三级标题。一级标题一般不常用。段落标题可以用“=”（英文等号）来召唤，几级标题就是几个等号，例如：
```
二级标题： ==内容==
```

```
三级标题： ===内容===
```
需要注意的是，段落标题必须独占一行才能成功召唤，也就是说，在源代码编辑模式中，他前面不能有内容（<br>也不行），后面也不能有内容。

### 页面背景设置

如果你想为你的页面增加一点氛围感，设置一个与众不同的背景是一个好的选择(〃´-ω･)
你可以通过Background模板来便捷地设置背景，格式如下：
```
```
无论你的图片多大、是不是1450\*1450px，建议都不要改动图片的大小，除非有特殊需要。如果按第一个使用方法使用，默认大小为1450px。
**参见：**Background模板页
**注意:** 页面背景请勿过黑（评判标准为顶部导航栏是否几乎不可视），这违反Fandom个性化条例，详见社区中心。

### “\*”/<li>（更好的排版格式）

类似段落标题，你可以使用不同数量的“\*”来召唤不同的小叙述项，例如：

`*下面是几个我比较喜欢的楼层：`

`**Level 0`

`**Level 1`

`**Level !`

效果：

* 下面是几个我比较喜欢的楼层：
	+ Level 0
	+ Level 1
	+ Level !

与段落标题类似，这玩意也只能独占一行才能成功召唤。

你还可以使用`<li> 内容 </li>`来快速达成和使用“\*”类似的效果（并不完全一致，比如用li召唤的点前面没有空格），而且它还能加style属性标签。但请注意，`<li>` 的叠加使用不能分级，例如：`<li style="color:red;"> 这是第一段话 <li style="color:blue;"> 这是第二段话 <li style="color:grey;"> 这是第三段话 </li></li></li>`
效果：
- 这是第一段话
- 这是第二段话
- 这是第三段话

### Category（标签）

△ 如果你的文章为**原创**，请在源代码编辑模式下在文中加上（任意位置均可） `[[Category:中分原创]]` 以表示本文为Backrooms中文分部（FANDOM）写手所原创。

△ 如果你的文章为**楼层**，请在源代码编辑模式下在文中加上 `[[Category:楼层]]与[[Category:神话楼层]]` 以表明你的文章类型。

△ 如果你的文章所写楼层为**异常楼层**（楼层编号不为数字或特殊楼层名），请在源代码编辑模式下在文中除了“楼层”的两个标签以外再加上（任意位置均可） `[[Category:异常楼层]]` 以表示这是一个异常楼层。

△ 如果你的文章所写楼层为**负数楼层**，请在源代码编辑模式下在文中除了“楼层”的两个标签以外再加上（任意位置均可） `[[Category:负数楼层]]` 以表示这是一个负数楼层。

△ 如果你的文章所写楼层为**亚层（或称子层）**，请在源代码编辑模式下在文中除了“楼层”的两个标签以外再加上（任意位置均可） `[[Category:亚层]]` 以表示这是一个亚层。

△ 如果你的文章所写文为**物品/实体/理论/组织/……**，请在源代码编辑模式下在文中加上对应的标签，比如 `[[Category:物品]]` 。

### 楼层索引的使用

你可以通过在文末添加 `{{Levels}}` 来向读者展示楼层索引。效果如下：Template:Levels
此外，你还可以通过使用Redirect模板来索引临近序号的两个楼层，比如你的楼层是Level 37，那么你可以指定它索引到Level 36与Level 38。举个栗子：
 `{{Redirect|Prev=36|Next=38}}`
你可以去Level 37的页尾查看这个例子的效果。

### 目录显示开关

在文章中插入 \_\_NOTOC\_\_ 即可关闭目录显示；

在文章中任意位置输入 \_\_TOC\_\_ 即可在这里召唤目录（如果你没有关闭目录显示的话）。

### 空行与分割线

或许你也经历过被Fandom的空行判定逼疯的时候：你明明按了回车，但是预览文本发现连在一起了。

这时候，我们就要请出<br>来辅助空行了。有了它，你甚至可以不用按回车，做到一篇文的所有代码和文案都堆在一坨。

分割线有时对页面美观有着重要作用。

分割线の召唤方法：使用<hr>召唤即可。

分割线后面的内容会被自动挪到下一行。

分割线的例子（就是下面这个横线）：

本代码教程原文由 Adaihappyja 撰写，由 Apreaky 经 Adaihappyja 允许于2022/5/11进行内容补充与排版优化，并负后续更新之主责。