高级格式手册

著作信息

---

原标题：Manuel de formatage avancé
原作者：Dr Lekter
发表日期：2020/07/19
图像来源：Scheme 来自 Wikipedia，根据 CC0 1.0 协议授权发布；仙人掌照片来自 Dr Lekter，根据 CC BY-SA 3.0 协议发布。

---

介绍

你正在进入一个古怪的世界。是的，古怪，因为这篇指南正在为你揭示一个更广阔、更复杂之世界的冰山一角——远比这个维基更加宏大。本文旨在帮助你理解元素的功能，并在你写文时提供一定帮助；但这并不代表着你在这里学到的 CSS 或是其他语言能够在维基之外也派上用场。如果你更需要后者，那么你或许可以在一些参考网站中寻找线上课程。

但在深潜入代码的世界之前，让我们先复习一下基础：你在这个维基里使用的常规格式被称为维基语法（Wikidot syntax），一套旨在让用户能够快捷轻松地使用主要格式（例如粗体、斜体、表格等）的规则。

然而，一旦你试图尝试一些更独特的东西，你就不得不面对“真正”的语言了——它们通常是为互联网开发者、设计师与其他编程职业准备的。它们并不来自于 Wikidot，但我们今天将探讨几种不同的使用方法。

在开始之前，你可以先阅览一下这些通过代码实现了富有创意的新奇效果的文章，来认识代码能够带来的可能性：

• SCP-3125，密码输入端
• SCP-499-FR，折叠与文本框的样式
• SCP-5999，访问远程终端
• SCP-369-FR，惊喜！
• 以及更多。

---

CSS

CSS——也就是层叠样式表——是一种用于定义一件物品外观的语言。它允许你指定一个东西的大小、形状、颜色以及一些其他元素。当你想要自定义自己的文章时，有 99% 的可能要用上 CSS；幸运的是，它很简单。我们开始吧。

想要为文本分组并为它们应用代码，主要有两种方式：div 元素与 span 元素。

这是一个 span 元素，它指定了一段文本，并且允许你改变这段文本的风格，同一行内的其他文本不会受到影响。

这是一个 div 元素，也叫 div 块。顾名思义，它会包含一整片的文本。举例来说，在 SCP 文章里，div 通常用于采访记录和探索日志。

想要一个结束 div 块，必须要使用一个换行符。也就是说，不同 div 元素不能共存于一行文本以内。

那么现在让我们来看看，它们是怎么生效的。

创造一个盒子（box）

[[div]]
文本
[[/div]]

这是一个最基础的空白 div 盒子。由于我们没有给它任何定义，因此这个 div 实际上完全没有改变什么；接下来让我们把这个盒子变成想要的样子。

[[div style=" "]]
文本
[[/div]]

在这里，我们将放上一系列的 CSS 声明，一种用于定义背景颜色、边框之类特性的小代码。比如说，我想要一个亮蓝色的背景。

[[div style="background-color: skyblue;"]]
文本
[[/div]]

---

文本

每一则 CSS 声明都有着相同的格式：一个 CSS 属性，也就是这里的 background-color，它指向了背景，告诉代码我们接下来要改变什么东西；接下来是一个冒号，以及一个值，说明了具体改变的内容。你可以在这里检查颜色名，注意是英文。颜色的值也可以是一个十六进制代码（或者 RGB，或者其他不怎么常用的用于定义颜色的代码）甚至是一张你想要在背景里展示的图像链接。声明最终以分号结束，随后可以再加上其他的声明。

这个过程里最困难的一点就在于，你要搞清楚不同属性和值的准确名字：你需要用心一遍遍练习来掌握它们，但在此之前，你可以借助参考列表来得到一些有用的信息和细节。

通过其他的值，就可以快速地优化我的 div 文字框！

[[div style="background-color: skyblue; border: 1px solid black;"]]
文本
[[/div]]

---

文本

这里，我们连续用了好几个值来定义同一个属性的不同特点：我需要一个边框，所以我首先定义了它的宽度（1px），然后是它的外观（solid 也就是实线，如果不定义的话它有可能是虚线），最后是它的颜色（black，黑色）。但你有可能会注意到，这个盒子的内外间距都不太令人满意。

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em;"]]
文本
[[/div]]

---

文本

margin 和 padding 属性分别定义了外边距与内边距，也就是这个盒子到外部内容之间上下左右的间距，以及盒子内的元素到边框的上下左右间距。如果你想让盒子看起来好看一点，那么它们几乎是必须的，尤其是内边距（padding），它能使盒子里的内容更便于阅读。

+ 布局信息

通过在属性后添加 -top、-bottom、-right、-left，你可以轻易改变它对应的上下左右边距。例如：

[[div style="background-color: gold; margin: 1em; padding: 0.5em; padding-bottom: 1.5em;"]]
文本
[[/div]]

---

文本

这里使用的长度单位“em”能够调整尺寸适应其他文字。如果你的盒子里有很大号的文本，那么边距也会对应地调整为更合适的大小。不过，你也可以用像素（px）或者其他固定的单位来定义。

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; font-size: 300%;"]]
文本
[[/div]]

---

文本

接下来让我们打磨一下这个盒子，让它更有特色。

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; font-size: 300%; border-radius: 0.5em; box-shadow: 5px 5px;"]]
文本
[[/div]]

---

文本

我把盒子变成了圆角，并加上了一个阴影，但是阴影有点太伤眼了，而且我们希望把它放到盒子上面。对于阴影属性（box-shadow），前两个 px 值分别代表了水平和垂直的阴影（x 轴和 y 轴）。因此让我们把垂直阴影变负，并加上第三个值来给阴影添加一个模糊，使它更为柔和。

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; border-radius: 0.5em; box-shadow: 5px -5px 6px;"]]
文本
[[/div]]

---

文本

既然我们已经有阴影了，为什么不给它加个颜色呢。

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; border-radius: 0.5em; box-shadow: 5px -5px 6px #0404b4;"]]
文本
[[/div]]

---

文本

就是这样，你已经创造了一个 div 盒子！这个过程看起来可能稍微有点复杂，毕竟我们用到了很多你可能闻所未闻的属性，但它就是这么工作的；你只需要了解这些代码的用处与功能。而对此，只有一个方法：尝试。如果你想用最常用的属性练练手，可以使用类似这个的在线工具，你很快就能靠自己完成它！

Span 元素

Span 元素作用的方式与 div 盒子完全相同，属性也基本一样，只是有部分特性无法应用到一小段文字上。

[[span style="background-color: gold; border: 0.9px solid grey; border-radius: 0.2em; padding: 0.2em"]] span 元素里的一段文本示例 [[/span]]后面跟着的是一段 span 外的文字，不受前者的影响。

---

span 元素里的一段文本示例 后面跟着的是一段 span 外的文字，不受前者的影响。

CSS 模块

在正文里“直接”定义 span 和 div（也就是在正文代码里直接使用 style=" "）是一种简单的将 CSS 应用于文章的方法。然而，如果你使用一个 CSS 模块来这么做¹，它会变得更方便。

CSS 模块是一个文本框，里面的内容不会在你的页面中直接展示出来，包含了一组直接应用于这个页面的 CSS 声明。这个维基的版式基本上不外乎就是超大的 CSS 模块，重定义了全局的美学元素——而就是从这里开始，一切变得有趣了起来。CSS 模块不仅能让你从零开始创造一个新的自定义元素，还可以设计修改那些已经默认设置的元素，你不能用 style=" " 来修改的那种。举例来说，以下的代码能让你修改 Wikidot 表格的设计：

[[module CSS]]
table.wiki-content-table {
    background-color: #CEF6CE !important;
    color: black !important;
}
table.wiki-content-table th {
    background-color: #3B0B17 !important;
    color: #F6CED8 !important;
}
[[/module]]

在你设置了这个代码之后，再使用：

||~ 标题 1 ||~ 标题 2 ||~ 标题 3 ||
|| 内容 1 || 内容 2 || 内容 3 ||

就会变成这样：

标题 1	标题 2	标题 3
内容 1	内容 2	内容 3

“table.wiki-content-table”是表格内容的 CSS 名字，而“th”则更精准地指向了标题格。在指定了新的背景和文本颜色后，我们加上了“!important”指令，来告诉浏览器这个属性应该覆写掉所有其他对颜色的定义。这一步不一定是必需的，但如果你尝试自定义一个 WIkidot 的默认属性却发现没生效，那么它就会显得很有用。注意：如果你的代码不需要“!important”也能生效，那就不要加上它。如果使用不当，这可能会毁掉你的代码。

也许你已经注意到了，我们使用的格式有所不同。的确，我们在这些模块里使用的标准 CSS 格式需要 1）更具可读性 2）明确每个 CSS 声明所应用于的元素，毕竟我们的模组并不仅仅作用于一个元素，而是整个页面。在 CSS 模组中推荐你使用以下格式：

元素名 {
    属性: 值;
    属性: 值;
    属性: 值;
}

注意，这里的空格和换行仅仅为可读性而添加：下面的模块同样可以生效，但毫无疑问读起来更费劲。

元素名{属性:值;属性:值;属性:值;}

现在你可能会开始思考怎么找到元素的名字，以便修改它：对此，你的电脑有一个专用工具，你或许已经使用过它了，元素检查器。我们稍后会继续介绍这个工具的用处，但现在你只需要记住，想要修改一个元素，只需要在它上面右键点击一下，选择“检查”，就可以在新打开的页面里找到它的名字。

这张图片中可以看到，我使用的 div 框名为“div.code”，或者更简单点，在 CSS 里就叫“.code”。

在你打开这个窗口之后，可以在它的左上角找到“选择一个元素检查”工具，就不用每次都去右键了。进阶提示：使用快捷键 Ctrl + Shift + C 可以快速开启这个。

现在让我们看看 CSS 模块的不同实际应用吧。

案例 1：你在文章中重复几次用到同样的 div 块，希望能简化你的代码，避免每次都复制一遍。那么接下来你需要定义一个 class——换句话说，定义一组将被同时应用于多个元素的规则。要这么做，在元素部分先点一个点，后面跟上你 class 的名字。

.yourclassname {
    padding: 1em;
    margin: 1em;
    background-color: gold;
    color: darkred;
    border: 1px dashed black;
}

想要将你的 class 应用在一个 div、span 或其他元素，只需要给它加上一个 class="yourclassname"。

[[div class="yourclassname"]]
你 div 盒子里的文本
[[/div]]

---

你 div 盒子里的文本

案例 2：你在文章中重复几次用到同样的 div 块，但有时候想要修改一些细节。要这么做，你可以 1）使用不同的 class 2）给要修改的那个加上 style=" "。让我们来看看第一种办法。

.box {
    padding: 1em;
    margin: 1em;
    color: darkred;
    border: 1px dashed black;
}
.yellow {
    background-color: gold;
}
.blue {
    background-color: lightblue;
}

所有具有“box”class 的元素都将拥有它的属性，而你可以用第二个更具体的 class 来调整它的外观，在示例中是背景颜色。Class 的顺序并不重要。

[[div class="yellow box"]]
黄色盒子里的文本
[[/div]]

[[div class="box blue"]]
蓝色盒子里的文本
[[/div]]

---

黄色盒子里的文本

蓝色盒子里的文本

但你也可以通过同时使用 class 和 style 来达到相同的效果，就像这样：

[[div class="box" style="background-color: gold;"]]
黄色盒子里的文本
[[/div]]

[[div class="box" style="background-color: lightblue;"]]
蓝色盒子里的文本
[[/div]]

这两种方法没有高下之分，在具体情况中你可以选择自认为更直观、更方便的那种。

---

实践是最好的学习

想要成为高级格式专家，最有效的方法就是：尝试。最棒的工具是页面检查器，你可以通过右键或 Ctrl + Shift + I 或 Ctrl + Shift + C 来进入（取决于你的浏览器）。

通过这个工具，你可以看到所有选定元素的属性，并且随意修改它们，查看实时结果。这些改动仅对你可见，不会影响到其他用户，刷新后就会重置，所以放手去尝试吧！这里是一个用于训练的随机盒子：

示例文本

如果你喜欢这个，那么可以进一步地学习其他现有的格式，对比它们的代码来理解它们是怎么运作的。建议你在网站的任何页面都尝试一下这种方法，不过这里有一些带注释的有趣的例子供你尝试。P.S.：如果你对组件的使用好奇，你可能会对第二个分页的内容感兴趣。

⁰

1

格式

SCiPNet 6.1 控制器

终端中的链接在有鼠标悬浮时前面会出现一个“>”。
就像这样

就是这样！

硬编码

[[div class="terminal"]]

[[div class="scanline"]]
[[/div]]

[[div class="text"]]
=²[[size 150%]] __SCiPNet 6.1 控制器__[[/size]]

[[module ListUsers users="."]]³
~~~
= 欢迎，用户 #%%number%%⁴
~~~
[[/module]]

>⁵ 终端中的链接在有鼠标悬浮时前面会出现一个“>”。

> [[[main|就像这样]]]

就是这样！

[[/div]]
[[/div]]

CSS 代码

div.terminal {
border: 1px solid black;
border: solid 3px #BBBBBB;
border-radius: 16px;
background-color: #131;
background-image: radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #121);⁶
background-position: center;
display: block;
box-shadow: inset⁷ 0 0 10em 1em rgba(0,0,0,0.5);
overflow: hidden;
}

div.terminal blockquote⁸ {
background-color: black;
border: double 3px #80FF80;
}

div.scanline {
margin-top: -40%;
width: 100%;
height: 60px;
position: relative;
pointer-events: none;
-webkit-animation: scan 12s linear 0s infinite;
animation: scan 12s linear 0s infinite;⁹
background: linear-gradient(to bottom, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;¹⁰
}
@keyframes scan {
from { transform: translateY(-10%); }¹¹
to { transform: translateY(5000%); }¹²
}
@-webkit-keyframes scan {¹³
from { transform: translateY(-10%); }
to { transform: translateY(5000%); }
}

div.text {
color: rgba(128,255,128,0.8);
padding-left: 2em;
padding-top: 40%;
font-family: monospace;
font-size: 1.2em;
}
div.text a¹⁴ {
color: #90EE90;
text-decoration: none;
background: transparent;
}
div.text a.newpage {
color: #90EE90;
text-decoration: none;
background: transparent;
}

div.text a:hover¹⁵ {
color: #131;
text-decoration: underline;
background-color: #80FF80;
padding: 1px;
}
div.text a:hover::before {
content: "> ";¹⁶
}

2

格式

把鼠标放在我上面！

硬编码

[[include :scp-int-sandbox:component:image-zoom name=http://scp-int.wdfiles.com/local--files/manuel-de-formatage-avance/ExampleImage.jpg |caption=把鼠标放在我上面！ |width=300px |align=right]]

CSS 代码

等等，你说什么，没有？但这么一点小代码怎么就能实现缩放图片的功能呢？或许有什么被隐藏起来了……

“include”代码会把其他页面（通常被称为组件）的内容全部抓取，并把它们全部复制到这个页面里。当有长篇的代码需要被重复使用，且每次都只需要一些小改动（例如这里的图像链接和描述）时，组件就该出场了。它们有点像 CSS 的 class，但可以包括所有种类的代码。你在许多文章里都能看到著作信息模块，或者上面这种带描述的图片，它们就都是通过 include 来实现的。但这到底是怎么运作的呢？

“include”后面往往会按顺序接上 Wikidot 站点和页面名来指定抓取源代码的页面，以及用于填充预先留空内容的文本，例如描述部分。

站点名实际上就是它的 URL 去除“.wikidot.com”后的部分，左右各加一个冒号；举例来说，scpsandboxcn.wikidot.com 的站点名就是 :scpsandboxcn:。接下来是页面名，也就是链接中“scpsandboxcn.wikidot.com/”后面的那部分。这个页面名也被称为 unix name¹⁷。需要注意的是，如果你要引用的页面和你正在编写的页面在同一个站点里，那么你可以省略站点名部分。

想要找到代码的全貌，我们就必须要前往这个组件页！在以考古级的精确性还原了它的原链接后，我们得到了：http://scp-int-sandbox.wikidot.com/component:image-zoom。让我们看看它的源代码。

[[include :sandboxscpfr:component:image-zoom-base name={$name} |caption={$caption} |width={$width} |width=300px |link={$link} |link=# |align={$align} |align=right]]

不是吧，又来？好吧，这只是一个中间组件，避免在直接引用原始界面时被迫设置某些会报错的值（例如 {$link}）¹⁸。不过我们只要再来一遍就行了：http://sandboxscpfr.wikidot.com/component:image-zoom-base。出发！

[[module CSS]]
.enlarge {
transition: .25s;
}
.enlarge:hover {
transform: scale(1.6);¹⁹
transition: .25s;
transition-delay: .4s;
z-index: 1000;
}
[[/module]]

[[div class="scp-image-block block-{$align}²⁰" style="width: {$width};"]]
[[image {$name} class="enlarge"²¹ style="width: {$width};" link={$link}]]
[[div class="scp-image-caption" style="width: {$width};"]]
{$caption}²²
[[/div]]
[[/div]]

3

格式

不会消失的页面内容

会消失的页面内容

不会消失的页面内容

会消失的页面内容

点击我让它们消失

不会消失的页面内容

硬编码

不会消失的页面内容

[[div_ class="fadeout-wrapper"]]²³

会消失的页面内容

[[span class="escape"]]不会消失的页面内容[[/span]]²⁴

会消失的页面内容

[[collapsible show="点击我让它们消失" hide=" "]]²⁵

[[div class="cover"]]²⁶
@@@@
[[/div]]

[[/collapsible]]

[[/div]]

不会消失的页面内容

CSS 代码

@import url('http://smlt.wdfiles.com/local--code/ukwhatn%3Afadeout/1');²⁷

:root {²⁸
--fadeout-background: white;
--fadeout-time: 1s;
--cropped-header: url(http://smlt.wdfiles.com/local--files/ukwhatn:fadeout/header-crop.png);²⁹
}

div#container-wrap {³⁰
background-image: var(--cropped-header);
}

.fadeout-wrapper {
position: relative;
overflow: hidden;
}

.fadeout-wrapper .cover {
width: 100%;
height: 200%;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
background: var(--fadeout-background);
color: transparent;
animation: cover-anim var(--fadeout-time) linear 0s 1 forwards;
}

@keyframes cover-anim {³¹
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.fadeout-wrapper .escape {
position: relative;
display: inline-block;
z-index: 3;
}

.fadeout-wrapper .fadein-txt {
position: relative;
z-index: 3;
opacity: 0;³²
animation: cover-anim³³ var(--txt-fadein-time) linear var(--txt-fadein-delay) 1 forwards;
}

---

总结

如果你已经阅读并理解了上面的所有内容，就可以着手练习，准备在高级语法的领域中成为一名大师了。如果你关于修改代码有任何疑问，都可以来联系我（Wikidot 上是 Dr Lekter，Discord 上是 Lekter#1551）或者你所在分部的技术职员。

祝你好运，也希望你能将上面的技巧灵活运用，让文章更加精彩！

实用链接回顾

更进一步

» CSS 属性列表 «
» Div 盒子制作工具 «
» 完整文档 «
» HTML 颜色代码 «
» 格式资源³⁴ «

笔记

1. 理想情况下，这也是你将同一规则应用于多个元素的方法，但我们先不讲这一点。

2. 将它后面的东西置中。

3. 这会选中一个用户，在这里就是正在阅读的用户，并展示关于他们的许多信息，例如用户名，创建的页面或者他们的数据。如果用户没有登陆维基账号，这个模组的内容就不会显示。更多信息见此。

4. 展示用户的 ID——用数字表示的其用户名。

5. 在这组格式中，引用块的样式被自定义了，详见下方的 CSS。

6. 设置了一个圆形的渐变颜色，从中间开始向周围渐变。

7. 将阴影显示在元素内部，而非外部。

8. 选择了引用块，也就是在一行前放置 > 会出现的那种。

9. 使用了一段预设的动画，也就是一个“扫描线效果”，接下来指定了动画的长度和平滑度。

10. 在扫描线周围加上一个模糊的阴影效果，让它看起来不仅仅是一条简单的线。

11. 扫描线开始的位置。

12. 扫描线停止的位置。

13. Webkits 是为那些不支持常规代码的浏览器专门制作的代码位，例如 Safari。

14. 单独一个“a”永远代表着链接。你可以单独使用它，选择页面里所有的链接，也可以把它加在另一个元素名之后，从而选中所有这个元素内部的链接。

15. “hover”属性就是你把鼠标指针移到一个元素上方的时候。

16. 在一个元素被 hover 的时候在前面添加字符。

17. 这也是最推荐的站内链接方式，也就是 [[[pagename|页面名]]] 格式。

18. 大部分组件都不需要这些默认值，因为它们是不可选的。

19. 将选中的元素放大 60%。

20. {$example} 差不多就是空的地方，等待用户引用组件时填充。他们只需要写上“|example=示例内容”就可以了。在这里，通过使用“left”、“right”或“center”，他们可以把这个 div 盒子定义为网站默认版式已经定义好的 CSS class，从而把它放置在合适的地方。

21. 这张图片被指定为先前提到的 CSS class，也就是会在有鼠标悬浮时放大的那个。就这么简单！

22. 图片描述。

23. 这些内容会因我们的代码消失……

24. ……但“escape”class 的 div 和 span 不受影响。

25. 点击这个折叠块将会显示“cover”div，从而触发效果。

26. 一旦折叠展开，这个 div 里的内容就会正常显示。

27. @import 是一种 CSS 里面的“组件”：从其他页面抓取代码，然后在这里生效。另外，如果你想找到引用页对应的 Wikidot 页面，只需要去除“/local-files/”和后面的数字，“/1”、“/2”之类的。在下面看完整代码。

28. :root，根元素定义变量，换句话说，就是那些有意被设置为空白、以供后续导入代码时填入的内容，等同于 include 里面的 |example=Content。

29. 重新定义了一个不同的版头（也就是这个东西，它不断重复，作为我们添加“SCP 基金会”标题和顶栏等内容的背景），它没有下面的黑色部分；消失的文字有一个白色背景，如果在页面顶部使用就会有点难看，因此这是预防措施。

30. 代表了版头的背景图像。

31. 设置了一个动画，应用在你代码里所有其他的 CSS 上。

32. opactiy 取 1 就等于正常的文本，取 0 则会隐形。

33. 应用了上面的动画。

34. 同时也是很好的研究实验工具资源。