代码教程

**“代码教程”**是底室管理层制定的**写作指导**

**Guidance**
* 写手们在本站进行创作时应当遵守本指导。关于其它需要遵守的指导，请见“写作指导”分类。
* 对指导内容有疑问的，可以前往指导页面对应的讨论页进行讨论，或者前往论坛发帖（如果你对讨论页的用法不熟）。

注意事项：

* 阅读本文建议开亮色模式
* 本站的代码应全部使用Wikitext
* 本文内容仅为需要效果的写手提供便利，不涉及深奥的网站开发
* 代码的表达方式可能与正常逻辑不同，不理解者可以直接复制使用
* 任何希望补充的优秀代码请在本文“专项拓展”里添加，序号向后排列
* 请记住，**文章内容永远大于效果**
* 你可以在“专项拓展”中完善或添加内容，但不要删除或更改别人添加的内容，除非你是管理员

以下是正式的代码指令

* 代码
* 效果

<span style="color:red;">Hello World</span>

Hello World
代码示例 1-1

**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.

**声明：字体列表引用自F版后室，非本网站原创**

## 阴影+颜色

* 代码
* 效果

<span style="color:red;text-shadow: 0 0 10px red;">Hello World</span>

Hello World
代码示例 1-2

* 代码
* 效果

<span style="color:white;text-shadow: 0 0 10px red;">''Hello World''</span>

*Hello World*
代码示例 1-3

* 代码
* 效果

<big>Hello World</big>

Hello World
代码示例 1-4

* 代码
* 效果

Hello World

~~Hello World~~
代码示例 1-5

* 代码
* 效果

'''Hello World'''

**Hello World**
代码示例 1-6

* 代码
* 效果

''Hello World''

*Hello World*
代码示例 1-7

模板
--

两个大括号加模板名称

* 代码
* 效果

{{Author}}

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

未填写 << **作者**
未填写 << **修改完善**
未填写 << **附注**
代码示例 1-8

## 鼠标悬停

* 代码
* 效果

<span title="Hello World">将鼠标悬停于这段文字上方</span>

将鼠标悬停于这段文字上方
代码示例 1-9

更多悬停技巧如下：

* 代码
* 效果

<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
代码示例 1-10

## 更多有关阴影的用法

* 代码
* 效果

<span style="text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em #0000FF; color: white;">（治愈风格）{{Ruby|I'm here for you.|我在这儿等你。}}</span>

<span style="text-shadow: red 0 -2px;">（崩坏风格）{{Ruby|I'm here for you.|我在这儿等你。}}</span>
##### 　附注

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

（治愈风格）I'm here for you.（我在这儿等你。）

（崩坏风格）I'm here for you.（我在这儿等你。）
代码示例 1-11

## 如何排版

此处我们只介绍电脑的排版，不涉及具体的美术设计

使用浮动可以改变任意元素（如图像和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>

```

## 文本折叠以及密码框

### 基础折叠

我们从最基础的开始，基础折叠一般使用Collapse模板

* 代码
* 效果

##### 　附注

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

这是第一句话

这是第二句话

这是第三句话

代码示例 1-12

需要注意的是，在`Template:Tl`模板中添加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>`

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

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

[示例内容]

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

`<div style="background-color: #FAFAD2; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">
'''警告：'''<br>
<code>以下内容已被加密，请输入有效凭证。</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">
1234567890</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">'''<code><big><u><div style="text-align: center">> 打开文件</div></u>'''</big></code></div><div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-first">[示例内容]</div></div>`

效果：

**警告：**

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

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

输入密码

1234567890

`**凭证有效。**`

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

其中的内容可以自行替换

## 横向折叠标签页

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

`<tabber>`

`|-| 基础描述=`

`basic information`

`|-| 额外信息=`

`[探索日志]`

`|-| 更多信息=`

`more information`

`|-| 附录=`

`Hello World`

`</tabber>`

效果：

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

[总体概况]

[探索日志]

[一些神秘事件之类的]

Hello World

但请注意，横向折叠会大大缩短你的页面长度，如果你的页面字数过少，我们不建议采用这种方法。

同时，横向折叠的每部分内容要么是同一主题的不同部分，要么是并列关系，请不要使用过于混乱的组合，这会让读者对文章产生不好的观感。

表格
--

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

`{| class="article-table"

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

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

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

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

结果：

 次分支 1

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

`{| class="article-table"

!这里是表格标题

1

2

3

效果：

1
2

## 作者信息

我们建议每篇文章后都附加作者信息，尤其是原作者有多位或者原作者与上传者不一致时。

如果你想在你的文最下方注明作者（或合著人/上传人等），你可以使用Author模板。使用格式如下：
下面举一个例子：`{{Author|作者=A|修改完善=B|附注=欢迎补充文章内容}}`
效果：

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

A << **作者**
B << **修改完善**
欢迎补充文章内容 << **附注**

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

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

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

作者: 不重要的作者
附注：暂无

## 插入文件与图片

理论上，你只能添加本wiki中的文件与图片，你可以先把文件与图片上传到本wiki（Upload New File）.

* [[图片名称]]
* [[file]]

如上是代码，注意文件名不要拼错~

后面是插入图片的专项指南

## 插入图片的专项指南

当你需要放置一张已经从主站导入的照片或视频或什么奇奇怪怪的文件时，你可以参照本指南。例如，如果我想把 重写警告.webp 这个已经上传到wiki的文件导入到我的页面中，我只需要在电脑上打出下面这行代码：

[[File:Wiki.png]]]]

下面是效果：

此时可能面临图片过大的问题，我们可以使用压缩功能进行调整，对于调整大小比较有用的指令包括\*\*\*px、thumb、vertical-align、horizontal-align等，主流的方法是px和thumb。

**[[File:Wiki.png|160x200px|thumb|示例图片]]**

   *文件名|大小|样式表|文字描述*

如果不需要描述thumb部分可以省略，写出大小就可以将图片放置进文字栏。

**[[File:Wiki.png|160x200px]]**

现在看左边，照片就已经放进文字栏了，而且它可以放置到我任何想要放置的位置，像这样：，就可以无缝插入了。（这个适用于自制的表情包等，但请确保图像清晰）

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

## 链接页面

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

专用后缀：https://wikfdchfhnuwyxuhs.fandom.com/zh/wiki/代码教程中，"代码教程"是页面专用的后缀。你想要跳转到这个页面只需要打出[[代码教程]]。

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

## 专项拓展1：目录显示开关

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

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

## 专项拓展2：换行与分割线

依据fandom的空行判定，按回车不一定可以顺利完成空行指令。

因此可以使用<br>进行辅助空行。

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

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

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

分割线的例子（下方横线）：

## 专项拓展3：背景页面设置

你可以通过Background模板来便捷地设置背景，格式如下：

```
```
无论你的图片多大、是不是1450\*1450px，建议都不要改动图片的大小，除非有特殊需要。如果按第一个使用方法使用，默认大小为1450px。
**参见：**Background模板页
**注意: 页面背景请勿过黑（评判标准为顶部导航栏是否几乎不可视），这违反Fandom个性化条例，详见社区中心。**

## 专项拓展4：分点叙述项

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

`*叙述项：`

`**A`

`**B`

`**C`

效果：

* 叙述项：
	+ A
	+ B
	+ C

与段落标题类似，此命令只有独占一行才能召唤成功。

你还可以使用`<li> 内容 </li>`来快速达成和使用“\*”类似的效果(二者有区别)，而且它还能加style属性标签。但请注意，`<li>` 的叠加使用不能分级，例如：`<li style="color:red;"> 这是第一段话 <li style="color:blue;"> 这是第二段话 <li style="color:grey;"> 这是第三段话 </li></li></li>`
效果：

- 这是第一段话
- 这是第二段话
- 这是第三段话

## 专项拓展5：伪造代码框

本质上是一个方框加一堆折叠，可以增加文章的科技感与神秘感。

使用方式如下：
`<div style="background: #000000;color: #007D00;border:2px solid #007D00;">
“您已进入程序页面，请执行指令”

<br>
“正在读取数据……”

“[页面内容]”
}}
</div>`

效果：

“您已进入程序页面，请执行指令”

“User\_active=view pages”

“VIEW PAGES”

“正在读取数据……”

“[页面内容]”

## 专项拓展6：特效下划线

* 代码
* 效果

{{Underline|FF0000}}
##### 　附注

颜色用十六进制数码表示

代码示例 1-13

## 专项拓展7：倒计时

* 代码
* 效果

<span class="countdown" style="display:none;">距离圣诞节还有<span class="countdowndate">December 25 2023 00:00:00</span></span>
##### 　附注

此段内容使用了class:"countdown"，来源于Fandom开发者社区。
另外，倒计时结束后会自动转变为正计时，请注意提醒管理员。

距离圣诞节还有December 25 2023 00:00:00
代码示例 1-14 [倒计时]

## 专项拓展8：黑幕与模糊字

* 代码
* 效果

<span class="heimu">此段内容使用了class:"heimu"</span>

此段内容使用了class:"heimu"
代码示例 1-15 [黑幕]

* 代码
* 效果

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

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

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

## 专项拓展9：定制进度条

本wiki支持一些定制的进度条

例如：

`<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%

## **文末提示**

**本文主体由COMMANDER3570449938撰写，欢迎所有写手在此添加自己认为优秀的代码！**

**本文为更多的写手添加便利而开放编辑，任何写手不得删除、篡改此页面已有的内容，误删请于两小时内恢复原样，本代码教程面向全wiki写手，请勿故意使用故障代码，被发现者将被封号处理！**

Jnbgf对本文作者表示感谢与感激。