注意
此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。
未经组件作者或工作人员允许，请勿修改此页的内容。
这是什么
一个将你的文本显示在分页上的组件，例如书页。
由 Croquembouche 制作。
其他模仿分页的组件：
使用方法
在任何维基网站上：
[[include :scp-wiki-cn:component:pages
| medium=vintage-book
| contents=
<h1>你好，欢迎打开我的书。</h1>
希望你能<em>真正享受</em>阅读这本书，这样书写它的一切痛苦都是值得的。
]]
此组件有两个参数。
内容（contents）参数可以为任意行数。
内容不能添加以下字符：
- |（分隔符）
- `（反引号），但可以添加在反斜线之后（\`）
- ]]（两个右括号），如果添加在一行末尾，必须在之后添加空格
文本格式
内容（contents）参数不会由 Wikidot 呈现。它会输入一个我自己编写的解析器，并输出 HTML。
你所熟知的所有可爱的 Wikidot 语法全都无效，相反，你需要写内联 HTML。
举例说明：
- 对于粗体字，需要写 <b>文本</b>，而不是 **文本**。
- 对于全角破折号，需要写原本的全角破折号（—），而不是 --。
- 对于水平分割线，需要写 <hr>，而不是 -----。
不像 HTML，你不需要在每一行写 <p>…</p>。
图像
使用标准图像 HTML 添加图像：
<img src="http://scp-wiki-cn.wdfiles.com/local--files/你的页面/你的图像.png">
你可以通过添加 position="top" 或 position="bottom" 来将图像移动至页面顶端或底端。无论是什么样的页面都可以用此方法移动图像。图像必须单独处于一行，位于文本之间的图像则无效：
<img position="top" src="URL">
在图像的 style 属性中直接添加如下 CSS 以水平居中：
<img style="display: block; margin-left: auto; margin-right: auto;" src="URL">
如果一张图像太高，不能放置于一页中，那么它的底部会被截去。
分页
有时你可能会说：“好了，就到这里为止。在新的一页开始下一段。这一页的剩余部分可以留空。”
为此，你需要在单独一行上添加分页符：
<br class="page-break">
分页符之后的内容会在下一页上。如果分页符之前有一个带有 position="bottom" 的图像，它会一如预期的那样仍然显示在页面底端。
进阶功能
你可以通过样式（style）参数添加 CSS，也可以在内容（contents）参数中嵌入 Javascript。
使用 CSS
任何添加在样式参数中的 CSS 会被注入到页面中。使用它来例如调整内容、添加可以用在内容中的类（class）、以及改变字体。
举例说明：
[[include :scp-wiki-cn:component:pages
| medium=vintage-book
| style=
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter');
.page {
font-family: 'Architects Daughter', cursive;
margin: 2rem;
}
.page .red {
color: red;
}
| contents=
文本将会显示为<span class="red">手写字体</span>。
]]
你不能在文章的其他地方使用 CSS 模块来设置这个组件的样式——这是唯一的方法。
提示！你可以以任意顺序添加参数，但是最好将样式（style）参数放在内容（contents）参数之上。你的内容参数可能会非常、非常长——你会发现把所有设置和 CSS 放在顶端更加方便一些。
使用 Javascript
内容（contents）参数会被解析为 Javascript 模板字符串，这也是为什么它不能包含反引号。
因此，你可以在内容参数中使用内嵌表达式（${表达式}）添加任意 Javascript，该表达式将会执行并替换回字符串中，例如：
[[include :scp-wiki-cn:component:pages
| medium=vintage-book
| contents=
今天是 ${new Date().toLocaleString("default", { weekday: "long" })}。
]]
这本书会告诉读者当天的日期。
你应该这样做吗？或许不是。但你可以。
请注意，虽然你可以添加任意 Javascript，但“或”运算符（||）不可用，因为它们是由禁止使用的分隔符组成的。但是，你可以使用“和”与“非”自己创建“或”：非((非 x) 和 (非 y)) 等价于 (x 或 y)。在 Javascript 里就是 !((!x) && (!y))。
媒介选项
以下是可用的“媒介”（medium）参数选项。
我正在积极征求新的媒介选项需求。我的意思是，此组件的标题是“报纸、书页和便利贴”，但当下它只能制作一本古旧的书。这个组件的设计目的是尽可能地多功能化，但是现在它只能做一件事情。
如果你对分页格式有任何需求，请联系我（Croquembouche）。
每种媒介都有固定的纵横比，会根据浏览器的宽度决定高度。
| 媒介 | 背景 | 字体 | 纵横比 | 图像来源 |
|---|---|---|---|---|
| 朴素（默认） |  |
浏览器默认 | 4:7 | |
| 古书 |  |
Libre Baskerville | 10:9 | 公共领域 |
