代码教程

本篇教程以全站CSS内容为基础。
本页面以后室中文代码教程的基础改编而来。
如果本页面出现问题，你可以对页面进行**合理**的修改。

## 最近更新

* 2023年8月11日:皮特补充/优化整体页面。~~重写了，属于是~~
* 2023年8月10日:由COMMANDER3570449938撰写此页面。

## 阅读提醒

* 本站的代码应使用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="写代码真的好难累">你好啊</span>

你好啊
代码示例 1-4

#### 属性标签:class

**注:此属性根据全站CSS的不同，效果可能有所变化。**属性标签"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-8

* 代码
* 效果

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

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

#### 属性标签:style

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

## 二:特殊文本样式

### color颜色

* 代码
* 效果

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

恭喜你，这行字变成红色了，如果你想更随心所欲一些，可以搜索一下十六进制颜色码用在这里，玩得开心！

Hello World
代码示例 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.

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

此外，还有一些通过外部字体库可以调用的字体，详情请见Freefonter字体库

### 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标签叠加的效果
代码示例 2-4

### font-style文本倾斜

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

* 代码
* 效果

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

这是一段倾斜的文字
代码示例 2-5

### 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的波浪线修饰的文字
代码示例 2-6

### text-align文本位置

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

* 代码
* 效果

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

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

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

### 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
代码示例 2-8

### text-shadow阴影

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

* 代码
* 效果

<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*
代码示例 2-9

刚刚介绍了恐怖系的，现在来介绍一些治愈系和崩坏系的:)

* 代码
* 效果

<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.（我在这儿等你。）
代码示例 2-10

### 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的同主题色背景。

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

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

```

下面进入更高级的装逼环节

## 三:特殊功能用法

#### 基础折叠

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

* 代码
* 效果

##### 　附注

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

这是第一句话

这是第二句话

这是第三句话

代码示例 3-1

需要注意的是，在`{{Collapse}}`模板中添加Wikitext表格代码（即`{|……|}`），其中的“|”会被误解析为Collapse模板的分隔符。
故若要在此模板中嵌入表格，请使用`<table>`标签或将“|”用`{{!}}`替代或嵌入另一模板。
看不懂？没事，老规矩，多试试就知道了。

#### 密码折叠

一些隐藏内容页面时常包括一个假的"登录"框，提示用户输入密码。但其实不需要真正的输入（当然如果你想创造一个权限不足的页面来气气读者你只要把自动填入的部分换成“Permission Error”就行了，但不建议你这么做），因为点击该框将显示下一节内容并自动填充密码。这可以通过下面这一长串代码来实现。

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

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

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

[示例内容]

#### Tabbers横向折叠标签页

如果你用惯了二级与三级标题的组合，觉得它不够新颖，那么你是时候用到下面的横向折叠标签页了：
下面是一个标签页的使用例子：

`<tabber>`

`|-| 基础描述=`

`[总体概况]`

`|-| 额外信息=`

`[探索日志]`

`|-| 更多信息=`

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

`|-| 附录=`

`Hello World`

`</tabber>`

效果：

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

[总体概况]

[探索日志]

[一些神秘事件之类的]

Hello World

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

同时，请注意横向标签页每一部分的关系，不要做的太乱。

#### 扫描动画折叠

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

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

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

比如

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

效果（点一下试试）：

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

*-- Gene Checking Loading --*
 访问者:   无名的开拓者

 基因密钥:  GENE#01-170577628419PW1820SF

 基因密钥:  *GENE#01-170577628419PW1820SF*

可恶，这个机密内容竟然被你看到了

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

什么？你说有单词拼错了？~~啊哈哈哈~~，都是小问题，不要在意。

### 表格

顾名思义，就是表格，但由于这里不是Excel，所以了解一下怎么创建表格还是很有必要的。
表格在某些情况下是有很用的工具，比如你可以将其用于一些相似现象的汇总介绍中。它旨在将数据组织成均匀的方框。下面代码中的背景颜色（#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"

!这里是表格标题

( ･ω･` )

∑(ﾟДﾟノ)ノ

(•́へ•́╬)

效果：

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

其实表格中不应该添加表情包的对叭( ･ω･` )

### 作者与附注模板

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

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

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

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

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

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

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

### 进度条

FDHR支持一些定制的进度条

例如：

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

## 四:页面布局

#### 外部链接

外部链接是指不在站内的链接。外部链接需要加上[(一对中括号)]，在里面添加链接。例如:
`[https://hyperrooms.fandom.com/zh/wiki/Hyperrooms_Wiki]`
效果是这样的:[1]。
但这实在是太难看了!我们可以用`“链接+空格+名字”`的形式来更改这个链接的名字。例如:
`[https://hyperrooms.fandom.com/zh/wiki/Hyperrooms_Wiki 极室]`
效果是这样的:极室

#### 内部链接

内部链接是指在站内的链接。内部链接需要加上[[(两对中括号)]]，在里面添加页面名。**注:页面名是指原名，不是修改过的名字。**例如:
`[[Hyperrooms Wiki]]`
效果是这样的:Hyperrooms Wiki。
不过这样也太难看了吧!我们可以用`[[页面名|名字]]`的形式更改这个链接的名字。例如:
`[[Hyperrooms Wiki|主页]]`
效果是这样的:主页。

### file媒体导入

#### 图片导入

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

**[[File:皮特新.png|160x200px]]**

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

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

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

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

```

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

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

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

**皮特**的头像。

这个例子的代码：

```
<div class="right-image">

```

```
[[File:皮特新.png]]

```

```
'''皮特'''的头像。

```

```
</div>

```

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

#### 添加音频

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

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

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

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

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

### 目录显示开关

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

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

### 换行与分割线

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

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

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

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

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

### 背景页面设置

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

### 伪造代码框

其实就是一个方框加一堆折叠，但会让文章看起来非常的富有神秘感或科技感，当然，这得看你怎么用了。

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

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

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

效果：

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

“User\_active=view pages”

“VIEW PAGES”

“正在读取数据……”

“[页面内容]”

## **文末提示**

**本文主体搬运自backrooms fandom zh 代码教程，欢迎所有写手在此添加自己认为优秀的代码！~~由皮特重写~~**

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