代码教程

**嗨，欢迎来到这里，无名的流浪者！
认真阅读本篇文章，你将会在这里学到一些代码的基础与进阶用法。
希望这对你的创作有所帮助。**
在常用的语法要点处，会使用红色标题高亮，就像这样。
正常的标题用深青色高亮，就像这样。
请记住本文的最后更新时间，以便在Wiki更新后及时获取新代码的使用方法。
本文最后更新时间：**2022/5/11**

你觉得这个这个字体挺好看的？后面就会教你怎么使用的啦(￣▽￣)~\*

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

　那么有人就会问了，为什么有一些CSS代码复制过来用不了捏？因为你能在普通页面使用的其实是一种简化后的CSS——MediaWiki语法（不做过多展开叙述，下文仍用CSS指代本站所用语言）。
JavaScript脚本也能够在这里运行，但较为特殊，详情请见后文。
（当然，如果你不是代码佬，你只需要学会CSS部分就可以了。）

### 本文写作思想

　出于便于使初学者理解的思想，本文会使用比较简单的“比喻”，它们难免有一些纰漏。如果你无法理解这些内容，不必过于深究。
　另外，本文并不会太过深入地涉及CSS代码的使用，只会涉及对写作有关的方面，如果你想更多地了解CSS与网站开发，请出门右转（

### <div> 的理解

CSS中最重要的一个代码就是div，在这里你们可以把它理解为括号，举个例子：
（（这东西我要加粗；这东西我要黑色的；这东西我要圈起来）我要表达这件事情）
就可以翻译为：

<div 这东西我要加粗；这东西我要黑色的；这东西我要圈起来(前面我回来再讲）>
我要表达这件事情
</div>

如果你不及时增加</div>的话，就像你的补充内容右边不加括号一样，大家根本分不清你后面说的到底是不是补充内容（举个例子，就像现在一样，我不加右括号的话会不会很难受？而且你不知道我这段话说的是不是正文。程序也一样，它根本不知道你是不是结束了在这段特殊格式下的内容，所以它就从你输入这段代码的下方文字一直延续到本页面结束！所以，记得增加</div>。

<div>也可以叠加的，比如说，我上面的部分是居中格式，我下面不想要居中了，但是我还想让其他的格式保持，能做到吗？是可以的，很简单的一个例子就是：
（（这东西我要圈起来）【（这东西我想在中间排着）我要表达这件事情】【（好了下面的全给我在右边排着）你想要表达什么】）
这个样子的话div会将**“我要表达这件事情”**放到居中，**“你想要表达什么”**放到右边，而由于**（这东西我要圈起来）**的大括号中间没有断掉，所以它依旧修饰着两句话，直到文本结束。上面转化为代码格式就是:

<div 这东西我要圈起来>

<div 这东西我想在中间排着>

我要表达这件事情

</div>

<div 好了下面的全给我在右边排着>

你想要表达什么

</div>

</div>

刚刚卖了个关子，在div后边的描述内容（属性）给它汉化了一下，那么下面就是关于描述内容（属性）的部分。

## 二、特殊文本样式

### 属性

属性是用来修饰被div圈起来的文字的属性的，这也是wiki的重中之重。每个属性用" "分隔开。常用的一般有Class、Style、title和ID四大属性。

### 属性ID

ID属性相当于给被圈起来的文字加了个在本页面独一无二的名称，一般写作时不常用，但是也描述一下它的用法

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

相当于把“你好啊”加了一个全文独一无二的属性名称“hello”。

### 属性Class

和上面一样，但是这个是用来描述这段话所在的集群的。

<div class="smile">我大笑起来</div>

<div class="smile">我狂笑起来</div>

这样的话“我大笑起来”和“我狂笑起来”都被放到了"smile"的集群里面。

### 属性title

这个有点意思，它可以用来放隐藏字，比如说你现在把鼠标光标放到这行文字上面。

是不是很有意思？它的表达格式是这样的：

<div title="认真你就输了！">我说得对吗</div>

这样你就可以在wiki里埋一些彩蛋，甚至可以做到
███████

你竟然点进来了

行吧

### 属性style

这个是在写wiki中最重要的一部分，你想要给wiki文字上色也好，排位也好，弄大小也好，字体也好，都需要用到这个，每一个style标签都要用到“ ; ”进行分割，比如<div style="color:green;font-family:黑体">这个样子。

下面列出来一些常用的style标签。

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

顾名思义，颜色。它会给文字带来一些颜色效果，比如<div style="color:green">和<div style="FF0000">，它会给整个圈起来的字体上色。
“FF0000”是RGB（Red Green Blue）制颜色代号的16进制表达，你可以在网上搜索“16进制颜色”来查看16进制颜色代码合集。

#### font-family

可以改变文字的字体样式，俗称字体。
**如果这个字体没有被本Wiki（Backrooms）搭载**，那么只有电脑上装有这个字体的人才能看到你设置的这个字体。比如你设置字体为方正姚体，那么只有电脑上装有方正姚体这个字体的人才能看到（这段话就是这个字体哦，如果你没有装这个字体，那么你看到的应该仍然是默认的微软雅黑）。
**如果本Wiki搭载了某个字体**，那么所有人（电脑端）都能看到。

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

* 第1种字体预览，使用方法：<span style="font-family:ZCOOL XiaoWei;"> 内容 </span>
* 第2种字体预览，使用方法：<span style="font-family:Ma Shan Zheng;"> 内容 </span>
* 第3种字体预览，使用方法：<span style="font-family:Long Cang;"> 内容 </span>
* 第4种字体预览，使用方法：<span style="font-family:Zhi Mang Xing;"> 内容 </span>
* 第5种字体预览，使用方法：<span style="font-family:Noto Serif SC;"> 内容 </span>
* 其实一些系统中一般自带的字体也可以使用。比如：等线、楷体、宋书等。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

### 文本折叠

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

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

initial: 点开折叠之前显示的内容
final: 点开折叠之后，initial的内容会变成final中你写的内容
body: 被折叠的内容

这三个部分都当成正常格式写就可以，比如
{{Collapse|num=1
这是一句话
这是第二句话
你打开了折叠内容!!
好耶，你看到了第三句话!
}}
效果：

这是一句话

这是第二句话

你打开了折叠内容!!

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

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

### 拓展：嵌入式投票

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

嵌入投票的方式：

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

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

③ 用那一串数字替换下面这个例子中data-id的那一串数字

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

**投票正在加载~
不妨先看一下我的其他作品吧!
幻象禁域**
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，这样你就可以无缝插入了。

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

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

### 目录显示开关

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

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

### 空行与分割线

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

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

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

分割线の召唤方法：使用【----】四个短横杠召唤即可。

召唤前提：----必须处于这一行的开头（也不能在<br>后面）！也就是说，它前面不能有内容。他后面的内容会被自动挪到下一行。

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

本代码教程原文由 Adaihappyja 撰写，由 Apreaky 经 Adaihappyja 允许于2022/5/11进行内容补充与排版优化。