←帮助:代码教程因为以下原因，您没有权限编辑该页面： 您请求的操作仅限属于这些用户组的用户执行：用户、管理员、行政员、editor 您可以查看和复制此页面的源代码。 __NOTOC__ <!-- 本页由 Fandom 后室中文维基《Help:代码教程》搬运而来。已适配：模板内联化、图片外链（GitHub图床）、脚注改括注。 --> == 目录 == {{toc}} == 写在前面 == 本代码教程由[[User:Meta.net|META]]进行新部分的编写以及旧有部分的校对与增补，其中旧部分内容根据初版代码教程改进而来（通过*进行标注），在此感谢[[User:Apreaky|Apreaky]]与[[User:Adaihappyjan|Adaihappyjan]]对代码教程作出的贡献。 === 代码教程都有什么？ === 顾名思义，代码教程是一篇对写手们所称呼为代码的这些功能性语言进行基础教学的指导文章。在本篇文章中，代码组将带你学习有关模板、CSS、HTML语言等在之前可能对你晦涩难懂的模块如何运用于文章中，又怎样为写手们的文章效果服务。 下面就跟着我们一起走进代码的世界吧！ == ChapterⅠ：模板的使用 == 模板在Fandom平台是一种封装了代码，文字，图像等信息的集合，其用处在于让重复使用该类模板的写手能够快速调用，或是让写手更加方便快捷的使用某些功能。 === 我该怎么使用模板？ === 如欲使用模板，我们首先需要在Wikitext编写界面输入<code>{{}}</code>，然后在其中添加我们所需要调用的模板名称。通常情况下，大部分模板都需要我们添加参数。 === 参数是什么？模板为什么需要参数？ === 参数是我们使用模板时可以选择性填入的内容。一般来说，参数让我们能够定制一个模板，使模板满足我们想要的个性化需求。比如在"Blurimage"模板中，通过更改<code>file</code>参数，我们可以选择自己想要展示的图片，并通过与其他参数配合来优化本页面中该模板的效果。 '''代码示例 1-1''' <div style="border:1px solid #ccc;background:#f8f9fa;padding:8px;margin:4px 0;font-family:Consolas,monospace;">{{Blurquote|image=https://cdn.jsdelivr.net/gh/silencieuxzero/fbc_mirror_picture@main/pic/%E5%B8%AE%E5%8A%A9%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%95%99%E7%A8%8B/Thebackrooms.jpg|person=META.|quote-text=It's META!}}</div> <small>实例：</small> <br> {{Blurquote|image=https://cdn.jsdelivr.net/gh/silencieuxzero/fbc_mirror_picture@main/pic/%E5%B8%AE%E5%8A%A9%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%95%99%E7%A8%8B/Thebackrooms.jpg|person=META.|quote-text=It's META!}} === 我该如何制作一个模板？ === 通常情况下，我们只需要将对应模板的代码上传至Template命名空间，并作出些许改动。 * 使用<code><nowiki>{{{该参数的名称|该参数无外部填写时默认的内容}}}}</nowiki></code>来对想要定制化的部分进行修改。 * 使用<code><nowiki><noinclude></noinclude></nowiki></code>来标注仅在模板页面展示的内容（通常是指导文档，说明一类）。 * 使用<code><nowiki><includeonly></includeonly></nowiki></code>来标注仅在调用模板时展示的内容。 == ChapterⅡ：版式 == 版式负责修改页面的整体效果，通过调整<code>.page__main</code>在内的多个类元素（有关类元素的说明在后文会给出）的样式来对页面的整体内容进行更改。 普通写手一般无需了解如此复杂的内容，因而在此只介绍如何使用版式。 === 版式怎么使用？我该在哪里找到版式？ === 大多数版式为封装好的模板。少部分模板直接给出了CSS代码，在后文的CSS篇中会详细讲到。 想要使用版式，我们可以在站点内发布征集文章所需要的版式风格，也可以在现有的[版式库](Backrooms_Wiki:版式 "Backrooms Wiki:版式")中挑选我们想用的版式。 == ChapterⅢ：页面组成 == === 总标题 === '''总标题'''是指在文章页眉处显示的大标题。它默认是你创建的页面名（即网页链接中'''……zh/wiki/'''后的部分）。你可以使用下面的wikitext来更改文章的总标题： <pre>{{DISPLAYTITLE:标题名}}</pre> === 段落标题 === 段落标题是页面中导引具体文字的特殊信息。要想使用一个基础标题，我们可以在wikitext编辑器中输入<code>== xx ==</code>，并在最中间加入标题内容。需要注意的是，段落标题必须独占一行才能成功召唤，也就是说，在源代码编辑模式中，他前面不能有内容（<code><br></code>也不行），后面也不能有内容。 如果我们想要给段落标题分级，只需要在四个"="的前后加入更多的"="，便可以让段落标题降级。最低级的段落标题为五级标题。 '''代码示例 3-1''' <pre> == 这是二级标题 == === 这是三级标题 === ==== 这是四级标题 ==== ===== 这是五级标题 ===== </pre> <small>实例：</small> <br> == 这是二级标题 == === 这是三级标题 === ==== 这是四级标题 ==== ===== 这是五级标题 ===== 可以看到，五级标题就几乎与四级标题一样了——因此大部分时候，用到三级或四级标题就足够了。一级标题是与总标题一样大的标题，文章中通常不使用。 我们也可以用<code><h2></h2></code>、<code><h3></h3></code>等标签替代等号，效果是类似的，但使用这些标签召唤的标题不会显示右侧的编辑按钮。 === 文字效果 === ==== 粗体/斜体 ==== 粗体文字一般用于标示文章的重要部分，通常是楼层的标题与编号。斜体文字则一般用于表明该部分的文字为对话或标示文章的特殊部分。 我们可以用<code>'''文字'''</code>以召唤粗体文字，用<code>''文字''</code>以召唤斜体文字。 '''代码示例 3-2''' <code>'''这个字体格外的粗'''</code><br> <code>''这个字体格外的斜''</code> <small>实例：</small> <br> '''这个字体格外的粗''' <br> ''这个字体格外的斜'' ==== 大号字体 ==== 有时，我们需要让页面中的文字参差不齐，大小不同，但统一用标题语法则会使目录混乱。大号文字的作用在于将其选择器中的文字字号放大，以达到更加醒目的视觉效果。 要召唤一个大号文字，我们只需要使用<code><big>大号文字</big></code>，将<code><big></big></big></code>选择器放置在文字两边。 值得注意的是，该选择器可以叠加。我们在文字左右放置的<code><big></big></code>越多，文字就越大。 '''代码示例 3-3''' <code><big>大</big></code><br> <code><big><big>大大</big></big></code><br> <code><big><big><big>大大大</big></big></big></code><br> <code><big><big><big><big>大大大大</big></big></big></big></code> <small>实例：</small> <br> <big>大</big> <br> <big><big>大大</big></big> <br> <big><big><big>大大大</big></big></big> <br> <big><big><big><big>大大大大</big></big></big></big> ==== 下划线/删除线 ==== 在文章中，下划线通常表示该段文字具有值得注意的部分，或者表示该部分是一个超链接；而删除线主要运用于那些具有虚假，错误信息的文章中，以形成一种谜团重重的悖论感。 要召唤下划线，我们可以使用<code><u>下划线文字</u></code>；而通过使用<code><s>删除线文字</s></code>，我们可以召唤一段删除线文字。 '''代码示例 3-4''' <code><u>这里有段下划线</u></code><br> <code><s>这里有段删除线</s></code> <small>实例：</small> <br> <u>这里有段下划线</u> <br> <s>这里有段删除线</s> === 涉及到CSS的文字效果 === ==== 属性盒与属性标签* ==== <code><div>/<span>/<font></code>是Wikitext的基础属性盒。它们大体上作用一致，皆起着为盒内文本添加一定属性标签的作用，但个体上还有些许不同。<font title="为便于理解，在此对HTML要素的命名方式稍有改动" style="cursor:help"><b><sup>[?]</sup></b></font> '''代码示例 3-5''' <code>这段话在div属性盒之外。<div style="">而这段话与上一段话'''在代码书写过程中'''没有空行，但处于div属性盒（"style"标签留空）之内。</div></code> <small>实例：</small> <br> 这段话在div属性盒之外。<div style="">而这段话与上一段话'''在代码书写过程中'''没有空行，直接相连，但处于div属性盒（"style"标签留空）之内。</div> '''代码示例 3-6''' <code>这段话在span属性盒之外。<span style="">而这段话与上一段话'''在代码书写过程'''中没有空行，但处于span属性盒（"style"标签留空）之内。</span></code> <small>实例：</small> <br> 这段话在span属性盒之外。<span style="">而这段话与上一段话'''在代码书写过程中'''没有空行，直接相连，但处于span属性盒（"style"标签留空）之内。</span> <span>通过这两个示例，我们可以很清晰地看出<code><div> <span></code>两标签间的主要不同：<font color="seablue">'''div会自动换行，而span不会。'''</font>这是由于，div的主要作用对象为包括文本及其所在的整行背景在内的整体，而span的主要作用对象仅为文本。font标签的作用基本与span相同，也不会使文本间自动换行，故不再举例展示。<br><br>选择了合适的属性盒，接下来便需要向属性盒中填充属性标签。在示例3-5与3-6中出现的style属性标签即为写作最常用的标签。</span> '''代码示例 3-6 (续)''' <code><span style="color:red;font-family:Genshin55W;text-shadow: 0 0 10px red;">Hello World</span></code> <small>实例：</small> <br> <span style="color:red;font-family:Genshin55W,text-shadow: 0 0 10px red;">Hello World</span> 有关style的介绍详见后文。 常用的属性标签有id，class与style。下面我们将一起学习这几种标签的用法。 ===== id ===== 属性标签"id"的作用即为命名，你可以将它理解为它能给这个属性标签所包含的内容加一个特殊且唯一的标记。在CSS中它可以用作特定选择器来执行样式。此处不多赘述其用法。 ===== class ===== 属性标签"class"的作用为添加类目，它与"id"的唯一区别就是可指定多个对象，以改变文本的样式。下面是在Common.css里搭载的常用class，可以不经过CSS添加直接在文章里使用： {| class="wikitable" style="width:100%;text-align:center;" |- ! 常用class ! class名称 !! class效果 !! class用法 !! class效果 |- | heimu || 创建一个黑幕块，鼠标移动在块上时显现出其内部被遮盖的文字 || <code><span class="heimu">此段内容使用了class:"heimu"（来源于萌娘百科）</span></code> || <span class="heimu">此段内容使用了class:"heimu"（来源于萌娘百科）</span> |- | spoilerblur || 将鼠标移到模糊块上试试？通过如此，可以产生一个防剧透（模糊）的效果。你可以将它用于一些加密文件上，但请注意，模糊字的大量使用会严重影响观感。 || <code><span class="spoilerblur">此段内容使用了class:"spoilerblur"</span></code> || <span class="spoilerblur">此段内容使用了class:"spoilerblur"</span> |- | countdown || 创建一个倒计时。本class的代码来源于Fandom开发者社区。更多用法请在[这里](https://dev.fandom.com/wiki/Countdown)查看。 || <code><span class="countdown" style="display:none;">还有<span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span>就到新年啦！</span></code> || <span class="countdown" style="display:none;">还有<span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span>就到新年啦！</span> |- | onlylight || 其中的内容仅在浅色主题（日间模式）显示。 || <code><span class="onlylight">这行字只有浅色主题能看到哦！</span></code> || <span class="onlylight">这行字只有浅色主题能看到哦！</span> |- | onlydark || 其中的内容仅在深色主题（夜间模式）显示。 || <code><span class="onlydark">这行字只有深色主题能看到哦！</span></code> || <span class="onlydark">这行字只有深色主题能看到哦！</span> |} 我们还在[全站CSS代码](MediaWiki:Common.css#L-37 "MediaWiki:Common.css")中添加了很多预设的class类名，诸如用于div元素的<code>lightblock</code>、<code>darkblock</code>、<code>light-borderblock</code>、<code>borderblock</code>、<code>light-logoblock</code>、<code>light-border-logoblock</code>、<code>styled-quote</code>、<code>dark-styled-quote</code>等，用于span元素的<code>rainbow_text</code>、<code>wavy-text</code>等，写手可以根据自己的喜好选择。 ===== title ===== 属性标签"title"可以为其中所包含的内容添加一个当鼠标悬停于其上时显示出的文字。 '''代码示例 3-7''' <code><span title="你看到我了吗？">把鼠标放在这段文字上试试！</span></code> <small>实例：</small> <br> <span title="你看到我了吗？">把鼠标放在这段文字上试试！</span> '''代码示例 3-8''' <code><span class="heimu" title="你知道的太多了">此段内容结合了class:heimu与title标签</span></code> <small>实例：</small> <br> <span class="heimu" title="你知道的太多了">此段内容结合了class:heimu与title标签</span> ===== style ===== style是我们在使用属性标签时最重要的一个。通常，我们在一个属性盒中添加style的属性标签，然后再在<code>style="填入内容处"</code>中填入对应的样式。由于style的样式过于繁多，在此我们推荐查询[CSS样式教程](https://www.w3school.com.cn/css/index.asp)来获取众多的样式教学。当然，下文会介绍几个比较简单的style。 ==== 附：常用样式表 ==== {| class="wikitable" style="width:100%;text-align:center;" |- ! styles |- ! 名称 !! 介绍 !! 可填入参数 !! 代码示例 !! 效果 |- | color || 顾名思义，此属性可设置文本的字体颜色。 || 单词颜色：<code>red</code>、<code>blue</code>、<code>white</code>……<br>[十六进制颜色码](https://baike.baidu.com/item/%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6%E9%A2%9C%E8%89%B2%E7%A0%81/10894232)：#FF1493<br>rgba方法（a表示透明度，范围为0~1） || <code><span style="color:PaleVioletRed">这是一段</span><span style="color:#D8BFD8">色彩斑斓</span><span style="color:rgba(255, 20, 147, 0.6)">的文字</span></code> || <span style="color:PaleVioletRed">这是一段</span><span style="color:#D8BFD8">色彩斑斓</span><span style="color:rgba(255, 20, 147, 0.6)">的文字</span> |- | font-family || 可以改变文字的字体样式，俗称字体。 [[提示]]如果本Wiki搭载了某个字体，那么所有人（电脑端）都能看到。<ref>如果这个字体没有被本Wiki搭载，那么只有电脑（ios设备除外）上装有这个字体的人才能看到你设置的这个字体。比如你设置字体为汉仪文黑，那么只有电脑上装有汉仪文黑这个字体的人才能看到（前面的这段话就是这个字体哦，如果你没有装这个字体，那么你看到的应该是设备默认的字体）。所以，不要用你的电脑上安装的字体，别人看不到变化。</ref> || 见 >>>[字体库](Template:Freefonter "Template:Freefonter")<<< || <code><span style="font-family:Zhi Mang Xing;"> 啊啊啊我掉下去了我靠 </span></code> || <span style="font-family:Zhi Mang Xing;"> 啊啊啊我掉下去了我靠 </span> |- | font-size || font-size属性可允许我们改变文字的大小。但你可以使用Wikitext中自带的<code><small></small></code>和<code><big></big></code>两个独立的标签来调整文字大小。 || <code>15px</code>、<code>15pt</code>、<code>15cm</code> || <code><span style="font-size:15pt">这句话在span元素中添加了属性：font-size:15pt</span></code> || <span style="font-size:15pt">这句话在span元素中添加了属性：font-size:15pt</span> |- | text-decoration || "text-decoration"属性规定了文本的修饰线样式。 || 属性值中的各项应依次为：修饰线位置、修饰线样式、修饰线颜色、修饰线粗细值。其中，修饰线位置可有多个值。在第一个例子中，修饰线有"<code>underline</code>"与"<code>overline</code>"两个值，即上下皆有修饰线。修饰线位置的可取值有<code>underline</code>、<code>overline</code>、<code>line-through</code>，修饰线样式的可取值有<code>solid</code>、<code>double</code>、<code>dotted</code>、<code>dashed</code>、<code>wavy</code>。 || <code><span style="text-decoration: underline overline wavy green .5px;">这是一段上方和下方都有粗0.5px的波浪线修饰的文字</span></code> || <span style="text-decoration: underline overline wavy green .5px;">这是一段上方和下方都有粗0.5px的波浪线修饰的文字</span> |- | text-align || "text-align"属性规定文本的对齐方式。值得注意的是，由于span属性盒是"包裹"在文字外的，在span属性盒中使用此style意义不大。 || <code>left</code>、<code>right</code>、<code>center</code>、<code>justify</code> || <code><span style="text-align:justify;">这段文字采用两侧对齐。</span></code> || <span style="text-align:justify;">这段文字采用两侧对齐。</span> |- | cursor || "cursor"属性规定当鼠标指针悬浮于其上时，鼠标指针所显示的样式。<br>使用格式为：<code><span style="cursor:样式">内容</span></code> || 过多，见下文 || 过多，见下文 || 过多，见下文 |- | text-shadow || text-shadow可为文字与text-decoration（文本加下划/删除/波浪线等）添加阴影。你可以在一个text-shadow标签中添加多个阴影，阴影值之间用逗号隔开。 || 每个阴影值中的数值依次是：文本在水平和竖直方向的偏移量、模糊半径和阴影颜色值。 || <code><span style="text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em #0000FF; color: white;">（治愈风格）The greatest test of courage on earth is to bear defeat without losing heart.</span><br><span style="text-shadow: red 0 -2px;">（崩坏风格）Variety is the spice of life.</span></code> || <span style="text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em #0000FF; color: white;">（治愈风格）The greatest test of courage on earth is to bear defeat without losing heart.</span><br><span style="text-shadow: red 0 -2px;">（崩坏风格）Variety is the spice of life.</span> |- | box-shadow || box-shadow 用于在文本背景添加阴影效果。你可以在一个box-shadow标签中添加多个阴影，阴影值之间用逗号隔开。 || 每个阴影值中的数值依次是：文本在水平和竖直方向的偏移量、模糊半径、模糊扩展半径和阴影颜色值。第一个阴影中的inset的作用是使阴影向内扩散。（更多精美的box-shadow详见[BOX-SHADOW样式](https://getcssscan.com/css-box-shadow-examples?ref=producthunt)） || <code><span style="box-shadow: inset 0 -3em 3em rgba(255,255,255,0.1),0 0 0 2px rgb(0,0,0),0.3em 0.3em 1em rgba(255,255,255,0.3);">阴影</span></code> || <span style="box-shadow: inset 0 -3em 3em rgba(255,255,255,0.1),0 0 0 2px rgb(0,0,0),0.3em 0.3em 1em rgba(255,255,255,0.3);">阴影</span> |} '''代码示例 3-9''' <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></code> <small>实例：</small> <br> <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> === 特殊功能 === ==== 折叠* ==== ===== 普通折叠 ===== Fandom Wiki一般会内置一个 Collapse 模板，它能帮你简化MediaWiki原有的折叠代码。<br> 下面是 Collapse 模板的使用格式： '''代码示例 3-10''' <code>{{Collapse|num=1|initial=<font color="red">这是第一句话</font>|final=<font color="blue">这是第二句话</font>|body=<font color="lime">这是第三句话</font>}}</code> <small>实例：</small> <br> {{Collapse|num=sample1|initial=<font color="red">这是第一句话</font>|final=<font color="blue">这是第二句话</font>|body=<font color="lime">这是第三句话</font>}} 不难发现，如果你点击body中的"这是第三句话"，你是不能收起这个折叠模块的。这就是final内容与body内容的区别。num=1是用来防止与后面的折叠内容重复的，如果两个折叠内容的num都=1，那么你点开第一个折叠内容，第二个折叠内容也会开启。 需要注意的是，在 Collapse 模板中添加Wikitext表格代码（即<code>{|……|}</code>），其中的"|"会被误解析为Collapse模板的分隔符。<br>故若要在此模板中嵌入表格，请使用<code><table></code>标签或将"|"用<code>{{!}}</code>替代或嵌入另一模板。 ===== 密码折叠 ===== 将 Collapse 模板与 style 属性标签相结合，就可以制作出许多更炫酷的折叠效果。以下的假登录框就是一个示例：<br><br> '''代码示例 3-11''' <pre> {{Collapse |num=password1 |initial=<div style="background-color:white; color:#AAAAAA; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">输入密码</div> |final=<div style="background-color:white; color:#AAAAAA; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">示例 password</div> |body=<big>已自动填充已缓存密码，欢迎，流浪者。</big><br><br>示例文本。 }} </pre> <small>实例：</small> <br> {{Collapse |num=password1 |initial=<div style="background-color:white; color:#AAAAAA; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">输入密码</div> |final=<div style="background-color:white; color:#AAAAAA; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">示例 password</div> |body=<big>已自动填充已缓存密码，欢迎，流浪者。</big><br><br>示例文本。 }} 当然，你也可以综合其他内容，根据页面风格设计其他自定义折叠，例如下面这个（来源：Level ZH 100）：<br><br> '''代码示例 3-12''' <small><small><pre> <div style="background-color: #FAFAD2; color: black; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px"> <img src="https://cdn.jsdelivr.net/gh/silencieuxzero/fbc_mirror_picture@main/pic/%E5%B8%AE%E5%8A%A9%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%95%99%E7%A8%8B/The%20MEG%27s%20Logo%20%28Thanks%20to%20Egglord1%29.png" width="215px" height="215px" alt="MEG Logo" href="" newtab="false" /> '''警告：''' <code>以下内容已被M.E.G.加密，请输入有效凭证。</code> '''原因：''' <code>你并未获取浏览这个文件的许可，它要求更高的许可等级。</code> </div> {{Collapse |num=password2 |initial=<div style="background-color:#FAFAD2; color:#888888; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">输入密码</div> |final=<div style="background-color:#FAFAD2; color:#888888; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">示例 password</div> |body=<center><code><big>凭证有效。</big></code></center><br> {{Collapse |num=password3 |initial=<div style="color:blue;"><big><center><b><u>> 打开文件</u></b></center></big></div> |final=<div style="color:blue;"><big><center><b><u>> 打开文件</u></b></center></big></div> |body=示例内容。 }} }} </pre></small></small> <small>实例：</small> <br> <div style="background-color: #FAFAD2; color: black; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px"> <img src="https://cdn.jsdelivr.net/gh/silencieuxzero/fbc_mirror_picture@main/pic/%E5%B8%AE%E5%8A%A9%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%95%99%E7%A8%8B/The%20MEG%27s%20Logo%20%28Thanks%20to%20Egglord1%29.png" width="215px" height="215px" alt="MEG Logo" href="" newtab="false" /> '''警告：''' <code>以下内容已被M.E.G.加密，请输入有效凭证。</code> '''原因：''' <code>你并未获取浏览这个文件的许可，它要求更高的许可等级。</code> </div> {{Collapse |num=password2 |initial=<div style="background-color:#FAFAD2; color:#888888; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">输入密码</div> |final=<div style="background-color:#FAFAD2; color:#888888; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">示例 password</div> |body=<center><code><big>凭证有效。</big></code></center><br> {{Collapse |num=password3 |initial=<div style="color:blue;"><big><center><b><u>> 打开文件</u></b></center></big></div> |final=<div style="color:blue;"><big><center><b><u>> 打开文件</u></b></center></big></div> |body=示例内容。 }} }} ===== 动画密码折叠 ===== 觉得普通折叠看起来太简单、用惯了？那么不如来试试 AnimatedCollapse 模板吧。下面是其使用格式： '''代码示例 3-13''' <code>{{AnimatedCollapse|num=6|content=<font color="00BBFF"><center>可恶，这个机密内容竟然被你看到了</center></font>}}</code> <small>实例：</small> <br> <div style="color:black"> {{Collapse|num=sample2|initial=<div style="color:black"><font color="00BBFF"><center>点我展开</center></font></div>|final=<div style="color:black"><font color="00BBFF"><center>点我收起</center></font></div>|body=<font color="00BBFF"><center>可恶，这个机密内容竟然被你看到了</center></font>}} </div> 可以发现，AnimatedCollapse 模板与 Collapse 模板相似，都具有 num 参数，但 AnimatedCollapse 模板不需要 initial 与 final 参数，而是直接使用 content 参数指定内容。另外，num 参数相同的两个折叠模板不会一起展开或收起，这一点还请注意。 如果你对Wikitext较为熟悉，你也可以前往 AnimatedCollapse 模板的模板页面查看该模板的实现方式，以此实现更美观的折叠效果！ ===== 作者折叠 ===== 如果你想在你的文最下方注明作者（或合著人/上传人等），可以使用 Author 模板。使用格式如下： '''代码示例 3-14''' <code>{{Author|作者=1|图像来源=2|附注=3}}</code> <small>实例：</small> <br> {{Collapse|num=author1|initial=<span style="color:green">'''> 查看作者与附注信息'''</span>|final=<span style="color:green">'''< 隐藏作者与附注信息'''</span>|body=<br>**作者**: 1<br>**图像来源**: 2<br>**附注**: 3}} 当然，有时为了方便，你也可以直接使用一个折叠来注明作者信息，就像这样： '''代码示例 3-15''' <code>{{Collapse|num=666|initial=<span style="color:green">'''> 查看作者与关于信息'''</span>|final=<span style="color:green">'''< 隐藏作者与关于信息'''</span>|body=作者: Backrooms <br>图像来源：https://unsplash.com/photos/xxx}}</code> <small>实例：</small> <br> {{Collapse|num=example_author|initial=<span style="color:green">'''> 查看作者与关于信息'''</span>|final=<span style="color:green">'''< 隐藏作者与关于信息'''</span>|body=作者: Backrooms <br>图像来源：https://unsplash.com/photos/xxx}} ===== Tabbers（横向折叠/标签页） ===== 在较长的页面中，仅仅使用标题来组织可能并不总是合适的。标签页是一个非常强大的工具，它旨在将信息很好地缩减为光滑和可读的块状。 任何东西都可以放在标签页内，包括其他标签页。然而，在使用它们时应该谨慎一些。首先，如果一个页面没有使用标签页，它可能是为了从上到下阅读。然而，标签页让读者在选项卡之间横向阅读，而这种风格可能会发生冲突。此外，选项卡从你的页面中拿走了一些内容，意味着它大大减少了页面的长度。如果你的页面非常长，从上到下都很难阅读，标签页的使用会是一个好处。但如果你的页面在6000个字符以下，你可能没有足够的文字来保证标签页内有足够的文字描述。假设你分别有1000个字符用于标签页外的介绍和结束，而你在标签页内有5个选项卡，每个选项卡内含800个字符，尽管这样你的文字符总数仍然是6000个，但这可能是非常令人沮丧的，因为有人点击一个标签，期望深入了解这个主题，却只看到一个段落。这让人觉得你的页面没有什么内容，即使它有适当的数量，总体上让人觉得半生不熟。 如果你觉得标签页的使用有利于你的页面，请记住，你的文章的标签页外内容也必须有可以吸引读者的要素；如果你的所有内容都挤在一组标签中，整个文就会感觉有点不对劲。一个页面应该有一个有凝聚力的引言、内容和某种文字来结束它。结束语可以是与最终结果相关的内容，如"入口和出口"部分，或其他一些使读者轻松进入页面结尾的内容。如果你缺乏一个明显、有凝聚力的结束语，可能导致读者无法判断你在标签页外的结尾段是否处于某个选项卡中。 下面是一个标签页的使用例子： '''代码示例 3-16''' <pre> <tabber> |-| 基础描述= [总体概况] |-| 额外信息= [探索日志] |-| 更多信息= [一些神秘事件之类的] |-| 附录= something </tabber> </pre> <small>实例：</small> <br> <tabber> |-| 基础描述= [总体概况] |-| 额外信息= [探索日志] |-| 更多信息= [一些神秘事件之类的] |-| 附录= something </tabber> ===== Tables（表格） ===== 在Wikitext代码编辑页面中点击表格图标即可可视化的创造一个表格。但为了创作的复杂需要，我们在此学习一下代码表格用法。 '''代码示例 3-17''' <pre> {| class="article-table" ! style="background-color: #ccf243" |例 1 ! style="background-color: #ccf243" |例 2 ! style="background-color: #ccf243" |例 3 ! style="background-color: #ccf243" |例 4 |- | style="background-color: #cfffa8" |分支 1 | style="background-color: #cfffa8" |分支 2 | style="background-color: #cfffa8" |分支 3 | style="background-color: #cfffa8" |分支 4 |- | style="background-color: #cfffa8" |次分支 1 | style="background-color: #cfffa8" |次分支 2 | style="background-color: #cfffa8" |次分支 3 | style="background-color: #cfffa8" |次分支 4 |} </pre> <small>实例：</small> <br> <div style="color:black"> <table> <tr> <th style="background-color: #ccf243">例 1</th> <th style="background-color: #ccf243">例 2</th> <th style="background-color: #ccf243">例 3</th> <th style="background-color: #ccf243">例 4</th> </tr> <tr> <td style="background-color: #cfffa8">分支 1</td> <td style="background-color: #cfffa8">分支 2</td> <td style="background-color: #cfffa8">分支 3</td> <td style="background-color: #cfffa8">分支 4</td> </tr> <tr> <td style="background-color: #cfffa8">次分支 1</td> <td style="background-color: #cfffa8">次分支 2</td> <td style="background-color: #cfffa8">次分支 3</td> <td style="background-color: #cfffa8">次分支 4</td> </tr> </table> </div> ==== 投票模板 ==== 投票模板是一种将讨论版投票功能嵌入文章的动态模块，一般用于站点内官方组织的竞赛评分或写手对文章意见的调研。以下是一个投票模板的示例： '''代码示例 3-18''' <code>{{Vote|4400000000000044588}}</code> <small>实例：</small> （本站暂未配置投票插件，请前往讨论板发起投票） 其中，`4400000000000044588`是投票的编号，要发起一个投票，我们可以在讨论版的"投票区"板块创建一个投票贴。投票贴界面的指引如下： <br><br> <img src="https://cdn.jsdelivr.net/gh/silencieuxzero/fbc_mirror_picture@main/pic/%E5%B8%AE%E5%8A%A9%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%95%99%E7%A8%8B/Daima1.png" width="400px" height="auto" alt="投票贴界面截图" href="" newtab="false" /> <br><small>投票贴界面示意图</small> 发起投票后，我们可以通过查看网站上方链接最后的数字后缀，将其拷贝下来，这就是这个投票的编号。 == Chapter Ⅴ：媒介的插入 == === 综述 === Fandom的页面中可以插入不同的媒体文件，包括但不限于图片，视频，音频，还有一些其他的媒体种类。 大多数情况下，Fandom给出了如何使用并展示这些媒介的一般方法，因而此处本文将侧重于系统性介绍插入不同媒体的多种方法。 === 文件的上传 === <img src="https://cdn.jsdelivr.net/gh/silencieuxzero/fbc_mirror_picture@main/pic/%E5%B8%AE%E5%8A%A9%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%95%99%E7%A8%8B/Dmjc-4.png" width="400px" height="auto" alt="文件上传页面截图" href="" newtab="false" /> <br><small>文件上传页面示意图</small> 由图所示的页面即为上传文件页面，通过拖拽电脑上的文件至上传栏，并经过等待后，我们可以选择上传文件的名称并完成文件的上传。上传的文件见 https://backrooms.fandom.com/zh/wiki/File:文件名.文件后缀 === 图片的插入 === ==== 一般图片的插入 ==== 在源代码编辑器中，我们可以通过点击编辑器框架左上部分的图片图标按钮进行可视化的图片插入。 <img src="https://cdn.jsdelivr.net/gh/silencieuxzero/fbc_mirror_picture@main/pic/%E5%B8%AE%E5%8A%A9%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%95%99%E7%A8%8B/Dmjc-3.png" width="400px" height="auto" alt="编辑器图片按钮截图" href="" newtab="false" /> <br><small>编辑器图片按钮示意图</small> 通过上传文件，我们可以将对应图片插入页面。文件名处为上传时填写的文件名，标题为该图片在插入时下方会显示的文本，而可替代文本通常无页面内可见的明显作用。 尺寸处填写的数字即为图片的大小，单位px。 对齐处选择的none、center、left、right分别对应无对齐，居中对齐，左对齐，右对齐。 格式处的thumb、frame、frameless分别对应缩略图，有框图片，无框图片。 不同读者的设备屏宽不尽相同，为了得到在所有设备上都合适的图片大小，我们还可以为`[[File:xxxxxxx]]`外围嵌套一个`<div class="fit-image">xxxxxxx</div>`，这样图片会以其外层容器的大小为参考，在不溢出容器的情况下占据最大空间。你也可以调节这层`div`元素的`width`属性以限定图片宽度与容器宽度的比值。 与之相近地，为`[[File:xxxxxxx]]`外围嵌套一个`<div class="cover-image">xxxxxxx</div>`会使图片覆盖整个容器，即便溢出。 ==== 模板美化插入 ==== 使用以下的代码以插入一个更加美观的图片框： '''代码示例 4-1''' <code><div class="right-image">`[[File:Level-37-7.gif]]`</code> <code>`'''Level 37'''的另一张照片。`</code> <code></div></code> <small>实例：</small> <br> <div class="right-image"> <img src="https://cdn.jsdelivr.net/gh/silencieuxzero/fbc_mirror_picture@main/pic/%E5%B8%AE%E5%8A%A9%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%95%99%E7%A8%8B/Level-37-7.gif" width="300px" height="auto" alt="Level 37" href="" newtab="false" /> '''Level 37'''的另一张照片。 </div> 注意：虽然这种图片嵌入方法能让你的文高级感骤增，但是它只适用于一些比较大的图片，如果你的图片比较小，使用这种嵌入方法只会适得其反。而且，这种图片嵌入方法所添加的图片会自动放置于页面右侧。想要使其交换位置也有`<div class="left-image"></div>`可供替换。但其可定制性较差。并且由于占用空间较大，这会对排版造成一定的困难。 ==== Blurimage图片框插入 ==== Blurimage是英文站点制作的一种现代风格图片框模板，目前站点内写手广泛使用。 '''代码示例 4-2''' <code>{{Blurimage|file=文件名（不带File:）|width=宽度|alt=（默认为空，为高级配置，一般情况下无需填写）|caption=图片介绍|bg-size=图片大小}}</code> <small>实例：</small> <br> {{Blurimage|file=https://cdn.jsdelivr.net/gh/silencieuxzero/fbc_mirror_picture@main/pic/%E5%B8%AE%E5%8A%A9%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%95%99%E7%A8%8B/Lvl10.jpg|caption=这个小玩意比原来的那个图像块漂亮多了。为什么不用用呢？}} <br><br> {{Blurimage|file=https://cdn.jsdelivr.net/gh/silencieuxzero/fbc_mirror_picture@main/pic/%E5%B8%AE%E5%8A%A9%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%95%99%E7%A8%8B/Lvl10.jpg|caption=Lvl10示例图片}} === 音乐的插入 === ==== 默认插入 ==== 通过使用 Audio 模板可以方便的插入音乐。 详见 Template:Audio。 === 点击文字播放/暂停音频 === 在音频文件`[[File:xxxxxxx]]`的后方加上形如"`media-id-xxxx...`"的class类名，得到`[[File:xxxxxxx|media-id-xxxx...]]`。此时的"xxxx..."相当于一个标识，如果你再添加一段文本，并为这段文本加上形如`class="js-action-play"data-media-id="xxxx..."`的类名与属性，然后点击这段文本，你会发现音频开始播放，再次点击则会暂停。 === BMP插入（Better Music Player） === BMP模板是一个使用了JS与CSS的简洁播放器。 详见 Template:BMP。 == Chapter Ⅵ：杂项* === === 页面背景设置 === <span style="font-family:Noto Serif SC;">如果你想为你的页面增加一点氛围感，设置一个与众不同的背景是一个好的选择(〃´-ω･) <br>你可以通过 Background 模板来便捷地设置背景，格式如下：<pre>{{Background|file=xxx.png}}</pre>无论你的图片多大，它都将适配你的屏幕大小<br>**参见：** Background模板页<br><font color="red">**注意:** 页面背景请勿过黑（评判标准为顶部导航栏是否几乎不可视），这违反Fandom个性化条例，详见社区中心。</font> <br> === "*" / <li>（更好的排版格式） === <span style="font-family:Noto Serif SC;">类似段落标题，你可以使用不同数量的"*"来召唤不同的小叙述项，例如： <br><code>*下面是几个我比较喜欢的楼层：</code> <br><code>**Level 0</code> <br><code>**Level 1</code> <br><code>**Level !</code> <br>效果： *下面是几个我比较喜欢的楼层： **Level 0 **Level 1 **Level ! 与段落标题类似，这玩意也只能独占一行才能成功召唤。<br><br>你还可以使用`<li> 内容 </li>`来快速达成和使用"*"类似的效果（并不完全一致，比如用li召唤的点前面没有空格），而且它还能加style属性标签。但请注意，`<li>` 的叠加使用不能分级，例如：`<li style="color:red;"> 这是第一段话 <li style="color:blue;"> 这是第二段话 <li style="color:grey;"> 这是第三段话 </li></li></li>` <br>效果：<br> <li style="color:red;"> 这是第一段话 <li style="color:blue;"> 这是第二段话 <li style="color:grey;"> 这是第三段话 </li></li></li> <br> === Category（标签） === <span style="font-family:Noto Serif SC;">△ 如果你的文章为**原创**，请在源代码编辑模式下在文中加上（任意位置均可） `[[Category:中分原创]]` 以表示本文为Backrooms中文分部（FANDOM）写手所原创。<br><br>△ 如果你的文章为**楼层**，请在源代码编辑模式下在文中加上 `[[Category:楼层]]`或`[[Category:神话楼层]]` 以表明你的文章类型。<br><br>△ 如果你的文章所写楼层为**异常楼层**（楼层编号不为数字或特殊楼层名），请在源代码编辑模式下在文中除了"楼层"的两个标签以外再加上（任意位置均可） `[[Category:异常楼层]]` 以表示这是一个异常楼层。<br><br>△ 如果你的文章所写楼层为**负数楼层**，请在源代码编辑模式下在文中除了"楼层"的两个标签以外再加上（任意位置均可） `[[Category:负数楼层]]` 以表示这是一个负数楼层。<br><br>△ 如果你的文章所写楼层为**亚层（或称子层）**，请在源代码编辑模式下在文中除了"楼层"的两个标签以外再加上（任意位置均可） `[[Category:亚层]]` 以表示这是一个亚层。<br><br>△ 如果你的文章所写文为**物品/实体/理论/组织/……**，请在源代码编辑模式下在文中加上对应的标签，比如 `[[Category:物品]]` 。 <br> === 楼层索引的使用 === <span style="font-family:Noto Serif SC;">你可以使用 Redirect 模板来索引临近序号的两个楼层，比如你的楼层是Level 37，那么你可以指定它索引到Level 36与Level 38。举个例子：<br><code> {{Redirect|Prev=36|Next=38}}</code><br>你可以去 Level 37 的页尾查看这个例子的效果。 <br> === 目录显示开关 === <span style="font-family:Noto Serif SC;">在文章中插入 __NOTOC__ 即可关闭目录显示；<br> 在文章中任意位置输入 __TOC__ 即可在这里召唤目录（如果你没有关闭目录显示的话）。 <br> === 空行与分割线 === <span style="font-family:Noto Serif SC;">或许你也经历过被Fandom的空行判定逼疯的时候：你明明按了回车，但是预览文本发现连在一起了。<br> 这时候，我们就要请出`<br>`来辅助空行了。有了它，你甚至可以不用按回车，做到一篇文的所有代码和文案都堆在一坨。 分割线有时对页面美观有着重要作用。<br> 分割线の召唤方法：使用`<hr>`召唤即可。<br> 分割线后面的内容会被自动挪到下一行。<br> 分割线的例子（就是下面这个横线）： <hr> ---- <small>最近更新时间：2026/7/20</small> <img src="https://cdn.jsdelivr.net/gh/silencieuxzero/fbc_mirror_picture@main/pic/%E5%B8%AE%E5%8A%A9%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%95%99%E7%A8%8B/Y2k-2.jpg" width="400px" height="auto" alt="Y2k-2 装饰图" href="" newtab="false" /> ---- <small>本页面搬运自 [https://backrooms.fandom.com/zh/wiki/Help:代码教程 Fandom后室中文维基·Help:代码教程]，遵循 CC-BY-SA 许可协议。图片托管于 [https://github.com/silencieuxzero/fbc_mirror_picture GitHub图床]。</small> [[分类:集群ZH]] [[分类:中分原创]] [[分类:指导]] [[分类:指南]] 此页面嵌入的页面： 模板:AnimatedCollapse（查看源代码）模板:Author（查看源代码）模板:Blurimage（查看源代码）模板:Blurimage/styles.css（查看源代码）模板:Blurimage/图片（查看源代码）模板:Blurimage/背景（查看源代码）模板:Blurquote（查看源代码）模板:Clear（查看源代码）模板:Collapse（查看源代码）模板:Redirect（查看源代码）模板:Toc（查看源代码）模板:Vote（查看源代码）返回帮助:代码教程。
