代码教程

本篇教程以全站CSS内容为基础。
你亦可参考CSS使用指导为单个页面定制CSS。

**嗨，欢迎来到这里， 无名的流浪者 ！
　　认真阅读本篇文章，你将会在这里学到一些代码的基础与进阶用法。
　　希望这对你的创作有所帮助。**
　　在常用的语法要点处，会使用红色标题高亮，就像这样。
　　正常的标题用深青色高亮，就像这样。
　　请记住本文的最后更新时间，以便在本页更新后及时获取新代码的使用方法。
　　本文搭配个人沙盒使用更佳！你可以在那里同步测试学到的代码哦~
　　本文最后更新时间：**2022年11月23日 (三) 05:48 (UTC)**（请在更新后把前面换成~~~~~）

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

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

　另外，本文写作对象主要是奇地文章写手，并不会太过深入地涉及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"的作用为添加类目，它可以引用如社区CSS/JS等中提供的内容，以改变文本的样式，下面是一个栗子：

* 代码
* 效果

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

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

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

#### 属性标签: title

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

* 代码
* 效果

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

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

## 二、特殊文本样式

### 属性标签: style

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

下面具体阐释一些在style属性标签中常用的属性。

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

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

* 代码
* 效果

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

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

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

* 代码
* 效果

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

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

**在 代码教程/Color 中，你将学习到关于文本的字体颜色设定的更多内容。**

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

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

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

可以改变文字的大小，比如<div style="font-size:5pt">，pt指的字体的大小数值，fandomwiki的正文字体大小是10pt，可以按照这个标准去修改。fandomwiki有<small>和<big>两个独立的外框可以设置。

**注意：**
本代码的使用方式为 **<div style="font-size:5pt"> 内容 </div> 或 <font style="font-size:5pt"> 内容 </font>**。
**请不要忘记在内容后增加</div>或</font>。font能使这段文字在不换行的条件下改变格式，但div会自动换行。**。

#### font-style（文本斜/直设定）

可以让文字*斜*过来，比如<div style="font-style:italic">，一般情况下有normal和italic两种，但是在fandomwiki中可以用'' ''来代替。

**注意：**
本代码的使用方式为 **<div style="font-style:italic"> 内容 </div> 或 <font style="font-style:italic"> 内容 </font>**。
**请不要忘记在内容后增加</div>或</font>。font能使这段文字在不换行的条件下改变格式，但div会自动换行。**。

#### font-variant（英文大小写设定）

可以将word强制修改成word，比如<div style="font-variant:small-caps">，会变成小的大写字母，对中文没啥用。

**注意：**
本代码的使用方式为 **<div style="font-variant:small-caps"> 内容 </div> 或 <font style="font-variant:small-caps"> 内容 </font>**。
**请不要忘记在内容后增加</div>或</font>。font能使这段文字在不换行的条件下改变格式，但div会自动换行。**。

#### letter-spacing（字间距设定）

可以改变文字中间的间隙大小，比如<div style="letter-spacing:4pt">。正常数值为1pt。

**注意：**
本代码的使用方式为 **<div style="letter-spacing:4pt"> 内容 </div> 或 <font style="letter-spacing:4pt"> 内容 </font>**。
**请不要忘记在内容后增加</div>或</font>。font能使这段文字在不换行的条件下改变格式，但div会自动换行。**。

#### line-height（文本行高设定）

可以改变文字的行高，比如<div style="line-height:7pt">。

**注意：**
本代码的使用方式为 **<div style="line-height:7pt"> 内容 </div> 或 <font style="line-height:7pt"> 内容 </font>**。
**请不要忘记在内容后增加</div>或</font>。font能使这段文字在不换行的条件下改变格式，但div会自动换行。**。

#### font-weight（文本粗细设定）

可以改变文字的粗细，比如<div style="font-weight:bolder">，正常值为normal，可以自定义粗细大小的数值为100-900的整百数（用数字替换 bolder ）。
注意：大多文本都只有两种粗细模式，即bolder与normal。更多的粗细模式需要导入社区外观CSS中（不必理解这是什么）。

**注意：**
本代码的使用方式为 **<div style="font-weight:bolder"> 内容 </div> 或 <font style="font-weight:bolder"> 内容 </font>**。
**请不要忘记在内容后增加</div>或</font>。font能使这段文字在不换行的条件下改变格式，但div会自动换行。**。
下面列举几种目前可以设置粗细度的字体：

* Noto Serif SC（你现在看到的字体就是这个）：可设置 200 样式/500 样式/700 样式
* 没了。没错。

#### vertical-align（字位置设定）

可以改变文字的上下状态，比如<div style="vertical-align:sub">，super为上标字，sub为下标字，fandomWiki有专门的上下标快捷键。

**注意：**
本代码的使用方式为 **<div style="vertical-align:sub"> 内容 </div> 或 <font style="vertical-align:sub"> 内容 </font>**。
**请不要忘记在内容后增加</div>或</font>。font能使这段文字在不换行的条件下改变格式，但div会自动换行。**

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

可以产生划线，比如<div style="text-decoration:underline">，常见的后缀有line-through（删除线）、overline（上划线）、underline（下划线）和none（没有线）。

**注意：**
本代码的使用方式为 **<div style="text-decoration:underline"> 内容 </div> 或 <font style="text-decoration:underline"> 内容 </font>**。
**请不要忘记在内容后增加</div>或</font>。font能使这段文字在不换行的条件下改变格式，但div会自动换行。**

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

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

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

#### text-transform（没用设定）

可以转换英文单词的大小写，比如<div style="text-transform:capitalize">，对中文无效。常见的后缀有capitalize（每个单词第一个字母大写）、uppercase（全部大写）、lowercase（全部小写）和none（不做改动），没啥大用。

**注意：**
本代码的使用方式为 **<div style="text-transform:capitalize"> 内容 </div> 或 <font style="text-transform:capitalize"> 内容 </font>**。
**请不要忘记在内容后增加</div>或</font>。font能使这段文字在不换行的条件下改变格式，但div会自动换行。**

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

特别常用，让字体靠左/居中/靠右。
比如<div style="text-align:center">。
常见的后缀有left（左靠）、center（居中）和right（右靠）。

**注意：**
本代码的使用方式为 **<div style="text-align:center"> 内容 </div> 或 <font style="text-align:center"> 内容 </font>**。
**请不要忘记在内容后增加</div>或</font>。font能使这段文字在不换行的条件下改变格式，但div会自动换行。**

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

改变鼠标放置在文本上的状态用的，例如<div style="cursor:auto">。

**自动auto**

**添加crosshair**

**正常默认default**

**点击状态pointer**

**移动move**

**左右e-resize**

**左下右上ne-resize**

**左上右下nw-resize**

**上下n-resize**

**同左下右上，代码不同se-resize**

**同左上右下，代码不同sw-resize**

**同上下，代码不同s-resize**

**同左右，代码不同w-resize**

**打字text**

**请稍后wait**

**问号help**

**注意：**
本代码的使用方式为 **<div style="cursor:default/pointer/…"> 内容 </div> 或 <font style="cursor:default/pointer/…"> 内容 </font>**。
**请不要忘记在内容后增加</div>或</font>。font能使这段文字在不换行的条件下改变格式，但div会自动换行。**

#### text/box-shadow（阴影设定）

可以使你的文本带上阴影而出现。举个例子，使用这串代码：
<font color="006B6B"><span style="text-shadow: #006B6B 1px 1.5px 6px"> 听我说谢谢你，一路有你，温暖了四季 ♪(･ω･)ﾉ</span></font>
效果如下：
 听我说谢谢你，一路有你，温暖了四季 ♪(･ω･)ﾉ

006B6B 即RGB转16进制颜色，它决定了所召唤字体的文本颜色，注意其前面要带#；
第一个1px的效果是在原文字的水平方向召唤一个同样的文字（即水平偏移量），比如在其他项都为0px的时候，这一项如果设置成0px，就是 这样
；如果设置成10px，就是 这样。
第二个1.5px的效果是在原文字的竖直方向召唤一个同样的文字，效果和上面的差不多，就不做演示了。
第三个6px的作用就是模糊化召唤的文字，从而形成阴影。数值越大，模糊地越明显。

**box-shadow**与text-shadow用法类似，但可以额外加上inset标记来使阴影向内凹陷。例如：

`<span style="box-shadow: inset grey 10px 10px 10px">A quick brown fox jumps over a lazy grey dog.</span>`

效果:
　　A quick brown fox jumps over a lazy grey dog.
对比去掉inset标记：
　　A quick brown fox jumps over a lazy grey dog.
我们来整点特别的：
`<span style="box-shadow: inset grey 0 0 10px;text-shadow: grey 1px 1.5px 6px">A quick brown fox jumps over a lazy grey dog.</span>`
效果：
　　A quick brown fox jumps over a lazy grey dog.

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

### 用法：文本折叠

本Wiki中文本折叠有一个模板，所以你可以不必使用CSS中复杂文本折叠代码，使用这个模板即可。

下面是文本折叠使用的通用格式：

num：用于标注折叠的分类（后面详细讲）

initial: 点开折叠之前显示的内容

final: 点开折叠之后，initial的内容会变成final中你写的内容

body: 被折叠的内容

这第个部分都当成正常格式写就可以，比如
{{Collapse|num=1

这是一句话

这是第二句话

你打开了折叠内容!!

好耶，你看到了第三句话!

}}

效果：

Template:Collapse

**不难发现，如果你点击body中的“好耶，你看到了第三句话!”，你是不能收起这个折叠模块的。这就是final内容与body内容的区别。**

**num=1是用来防止与后面的折叠内容重复的，如果两个折叠内容的num都=1，那么你点开第一个折叠内容，第二个折叠内容也会开启。**

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

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

`<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>以下内容已被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">

内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT

</div></div>`

效果：

**警告：**

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

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

输入密码

4R415T51G1Rr4

`**凭证有效。**`

**`> 打开文件`**
内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT内容CONTENT

### 样式：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̵̧̜̻͇̌̐̈́͘͝]

### 样式：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|附注=如果你对本文有什么建议，请留言，谢谢！}}`
效果：

Template:Author

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

### 拓展：进度条

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

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

**投票正在加载~
不妨先看一下我的其他作品吧!
Room 1**
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>[[Room 1]]'''</center>
<center>[[File:Ajax-loader.gif]]</center>
<br></div>

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

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

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

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

### 中括号“[]”

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

* [[页面]]
* [[file]]

#### [[页面]]

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

专用后缀：https://abnormal-place.fandom.com/zh/wiki/Room\_1中，Room\_1是页面专用的后缀。你想要跳转到这个页面只需要[[Room 1]]。

但如果不是本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>

```

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

### 总标题、段落标题

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

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

### 页面背景设置

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

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

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

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

`**Level 0`

`**Level 1`

`**Level !`

效果：

* 下面是几个我比较喜欢的楼层：
	+ Room 789
	+ Room 1
	+ Room 2

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

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

### Category（标签）

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

### 目录显示开关

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

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

### 空行与分割线

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

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

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

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

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

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