Backrooms Wiki

请务必阅读顶端导航指南下面的所有文章。 提问,投诉和意见反馈请发送至管理层邮箱backrooms_cn@outlook.com

了解更多

Backrooms Wiki
Advertisement

嗨嗨!这里是阿达!

我知道你们有很多想法,想要给一个层级加代码其实非常的容易!

熟读这篇教程,你就可以进行一些基本的代码操作啦!

fandom wiki使用的是css代码(当然json也是可以的,不过你要向管理员和fandom官方提出申请,这个以后再说),所以你在网上搜到的一部分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">,它会给整个圈起来的字体上色.

font-family

可以改变文字的字形,比如<div style="font-family:微软雅黑">,尽量使用所有浏览器都适配的中文/英文字体,比如宋体、黑体、温软雅黑等,你弄的太奇怪的字体只能在有这个字体库的设备上有效。

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的整百数。

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

<span>

这个的用法和<div>类似,也可以当括号使用,div能干的span大部分都能干。<span>的好处是它可以不用换行的切换文字的属性,值得注意的一点是,<div>里可以包含<span>,但是<span>是不可以包含<div>的。<span>也要用</span>来作为格式内容的终结。

中括号“[]”

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

  • [[页面]]
  • [[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]]

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

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

描述一下这张照片

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


看右边,现在是不是小很多?

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

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

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

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

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

Advertisement