Backrooms后室:代码教程
本篇教程以全站CSS内容为基础。
你亦可参考CSS使用指导为单个页面定制CSS。
该版本教程基于FBRCN代码教程2023/8/10版本进行修改,遵循CC BY-SA3.0协议授权使用,目前正在根据本站的本地代码修缮中,欢迎您前来补充!
若您在查找更基础的wikitext教程,请参考旧版代码教程。
嗨,欢迎来到这里,无名的流浪者!
认真阅读本篇文章,你将会在这里学到一些代码的基础与进阶用法。
希望这对你的创作有所帮助。
在常用的语法要点处,会使用红色标题高亮,就像这样。
正常的标题用深青色高亮,就像这样。
请记住本文的最后更新时间,以便在本页更新后及时获取新代码的使用方法。
本文搭配个人沙盒使用更佳!你可以在那里同步测试学到的代码哦~
你觉得这个这个字体挺好看的?后面就会教你怎么使用的啦( ̄▽ ̄)~*
如需代码支持,请在创作交流群中咨询或在这里留言(๑╹◡╹)ノ"""
以下为本文目录:
目录
1 一、序章
1.1 你应知道的事
1.2 本文写作思想
2 二、基本Wikitext与页面布局
2.1 中括号“[]”
2.1.1 [[页面]] & [链接 页面]
2.1.2 [[file]](媒体导入)
2.2 总标题、段落标题
2.3 “*”/
2.4 Category(标签)
2.5 楼层索引的使用
2.6 目录显示开关
2.7 空行与分割线
3 三、模板的使用
3.1 {{Background}}(页面背景设置)
3.2 {{Blurimage}}(高级图片描述)
3.3 用法:文本折叠
3.4 样式:折叠密码模块
4 四:基础HTML的使用
4.1 属性盒与属性标签
4.1.1 属性标签: class
4.1.2 属性标签: title
4.1.3 属性标签: style
5 二、特殊文本样式
5.1 color(文本颜色设定)
5.2 font-family(文本字体设定)
5.3 font-size(文本大小设定)
5.4 font-style(文本倾斜设定)
5.5 text-decoration(文本加线设定)
5.6 text-align(文本位置设定)
5.7 cursor(鼠标样式设定)
5.8 text-shadow(文本阴影设定)
5.9 box-shadow(背景阴影设定)
5.10 float(元素位置浮动)
6 三、特殊功能使用 [NEW]
6.1 样式:Tabbers(横向折叠/标签页)
6.2 样式:扫描动画折叠
6.3 样式:Tables(表格)
6.4 样式:作者与附注信息块
7 五、动画[NEW]
7.1 一、组成
7.2 二、示例
一、序章
你应知道的事
本站使用Wikitext,一种简化后的HTML。
JavaScript脚本也能够在这里运行,但较为特殊,在此不多做介绍。
本文写作思想
出于易于使初学者理解的思想,本文会使用比较简单的“比喻”或例子,它们难免有一些纰漏。如果你无法理解这些内容,不必过于深究。
另外,本文写作对象主要是后室写手,并不会太过深入地涉及Wikitext/CSS的使用,只会涉及有助于基本写作方面的内容且尽量使用较简单、易理解的代码,如果你想更多地了解CSS/wiki网站开发,请自行百度。
二、基本Wikitext与页面布局
中括号“[]”
中括号里一般放置链接,常用的有以下两种:
[[页面]] & [链接 页面]
[[file]]
[[页面]] & [链接 页面]
这种使用方式是将一个页面引到另外一个页面的传送门。
如果引用页面存在于本Wiki,那么你只需要复制那个Wiki页面的专用后缀那里,然后粘贴到一对双英文中括号中间,它就会将点击链接的人引到那个Wiki页面。举例:
[[Level 0]]
Level 0
代码示例 1-1
专用后缀:https://wiki.biligame.com/backrooms/Level_0中,Level_0是页面专用的后缀。你想要跳转到这个页面只需要[[Level 0]]。
(网页中,专用后缀中包含下划线“_”,但实际引用时下划线可以替换为空格。)
但如果不是本Wiki的页面的话就相对麻烦一些:你需要用空格把要引过去的链接与显示文本分隔开,若无显示文本则会显示为“[1]”这样的形式。举例:
[https://backrooms.fandom.com/wiki/Level_63 Level 63] [https://backrooms.fandom.com/wiki/Level_63]
Level 63 [1]
代码示例 1-2
[[file]](媒体导入)
一般是放置一张已经从主站导入的照片或视频或什么奇奇怪怪的文件时使用的,举个例子,如果我想把Media:Site-logo.png这个已经上传到wiki的文件导入到我的页面中,我只需要这样:
[[File:Site-logo.png]]
代码示例 1-3
嗯……是不是有点丑。对于图片导入,我们可以通过尺寸指令、样式表指令、对齐指令等来调整它,直接将指令插在中括号里面,用“|”分隔就可以了。
尺寸指令即“**x**px”,其中两个**分别指图片的宽度和高度。
样式表指令可以调整图片的展示格式,包括thumb(缩略图)、border(加入边框)等。
对齐指令可以调整图片的展示格式,包括right(居右)、left(居左)、center(居中)等。
另外,如果单独加入一段文本,这段文本会作为图片的描述文本,会在鼠标悬停在图片上时(非缩略图)或图片下方(缩略图状态)显示。
下面是一些例子:
[[File:Site-logo.png|400x400px|这是一段描述]]
代码示例 1-4-1
[[File:Site-logo.png|thumb|这是一段描述]]
这是一段描述
代码示例 1-4-2
[[File:Site-logo.png|border|left|300x300px|这是一段描述]]
代码示例 1-4-3
这样子的话我们现在就可以向楼层里面放描述照片啦!通常楼层的描述图片都是缩略图~
另外,当对齐指令为left、right或没有时,图片可以与文字共存,就像下面这样:
现在看左边,照片就已经放进文字栏了,而且它可以放置到我任何想要放置的位置,像这样:,这样你就可以无缝插入了。
有些文档中还会包含更高级的图片插入方法,具体可以参见#Blurimage章节!
总标题、段落标题
总标题是指在文章页眉处显示的大标题。它默认是你创建的页面名(即网页链接中……zh/wiki/后的部分)。你可以使用下面的代码来更改文章的总标题:
{{DISPLAYTITLE:标题名}}
段落标题是指在文章不同内容前的加的标题,用以区分不同的表示内容。它有着不同的级别,我们分别称之为一级标题、二级标题、三级标题、四级标题、五级标题(没有六级标题)。如你一般所见文章中的“描述”、“出口和入口”等字,即为二级标题;而在“出口和入口”内的“出口”、“入口”即为三级标题。一级标题是与总标题一样大的标题,一般不使用。
段落标题可以用“=”(英文等号)来召唤,几级标题就是几个等号,例如:
二级标题: == 内容 ==
三级标题: === 内容 ===
需要注意的是,段落标题必须独占一行才能成功召唤,也就是说,在源代码编辑模式中,他前面不能有内容(
也不行),后面也不能有内容。
“*”/
类似段落标题,你可以使用不同数量的“*”来召唤不同的小叙述项,例如:
* 下面是几个我比较喜欢的楼层:
** Level 0
** Level 1
** Level !
下面是几个我比较喜欢的楼层:
Level 0
Level 1
Level !
代码示例 1-5-1
与段落标题类似,这玩意也只能独占一行才能成功召唤。
你还可以使用
这是第一段话 这是第二段话 这是第三段话
代码示例 1-5-2
Category(标签)
△ 如果你的文章为楼层,请在源代码编辑模式下在文中加上 [[Category:楼层]]与[[Category:神话楼层]] 以表明你的文章类型。
△ 如果你的文章所写楼层为异常楼层(楼层编号不为数字或特殊楼层名),请在源代码编辑模式下在文中除了“楼层”的两个标签以外再加上(任意位置均可) [[Category:异常楼层]] 以表示这是一个异常楼层。
△ 如果你的文章所写楼层为负数楼层,请在源代码编辑模式下在文中除了“楼层”的两个标签以外再加上(任意位置均可) [[Category:负数楼层]] 以表示这是一个负数楼层。
△ 如果你的文章所写楼层为亚层(或称子层),请在源代码编辑模式下在文中除了“楼层”的两个标签以外再加上(任意位置均可) [[Category:亚层]] 以表示这是一个亚层。
△ 如果你的文章所写文为物品/实体/理论/组织/……,请在源代码编辑模式下在文中加上对应的标签,比如 [[Category:物品]] 。
楼层索引的使用
你可以通过使用Redirect模板来索引临近序号的两个楼层,比如你的楼层是Level 37,那么你可以指定它索引到Level 36与Level 38。举个栗子:
{{Redirect|Prev=36|Next=38}}你可以去Level 37的页尾查看这个例子的效果。
目录显示开关
在文章中插入 __NOTOC__ 即可关闭目录显示;
在文章中任意位置输入 __TOC__ 即可在这里召唤目录(如果你没有关闭目录显示的话)。
空行与分割线
或许你也经历过被Fandom的空行判定逼疯的时候:你明明按了回车,但是预览文本发现连在一起了。
这时候,我们就要请出
来辅助空行了。有了它,你甚至可以不用按回车,做到一篇文的所有代码和文案都堆在一坨。
分割线有时对页面美观有着重要作用。
分割线の召唤方法:使用----(需要独占一行)或
召唤即可。
分割线后面的内容会被自动挪到下一行。
分割线的例子(就是下面这个横线):
三、模板的使用
{{Background}}(页面背景设置)
如果你想为你的页面增加一点氛围感,设置一个与众不同的背景是一个好的选择(〃´-ω・)
你可以通过Background模板来便捷地设置背景,格式如下:
{{Background|{{filepath:xxx.png}}}}
无论你的图片多大,它都将自动适配你的屏幕大小。
{{Blurimage}}(高级图片描述)
如果你有注意Level 0等楼层的图片,你会发现它们的图片与直接使用[[File]]插入的不一样,这是因为这些图片使用了Blurimage模板。以下是一个示例:
{{Blurimage|file=OGLevel0.jpg|caption=图片描述。|link=Level 0}}
图片描述。
代码示例 2-1
有了Blurimage,在页面中展示的图片就变得更加美观了!
用法:文本折叠
本Wiki内置了{{Collapse}}模板,它能帮你简化MediaWiki原有的折叠代码。
下面是{{Collapse}}模板的使用格式:
{{Collapse|num=1|initial=这是第一句话|final=这是第二句话|body=这是第三句话}}
附注不难发现,如果你点击body中的“这是第三句话”,你是不能收起这个折叠模块的。这就是final内容与body内容的区别。num=1是用来防止与后面的折叠内容重复的,如果两个折叠内容的num都=1,那么你点开第一个折叠内容,第二个折叠内容也会开启。
这是第一句话
这是第二句话
这是第三句话
代码示例 9-1
需要注意的是,在{{Collapse}}模板中添加Wikitext表格代码(即{|……|}),其中的“|”会被误解析为Collapse模板的分隔符。故若要在此模板中嵌入表格,请使用