通过在编辑中添加这串代码来添加版式:
[[include :backrooms-wiki-cn:theme:iceberg]]
[[module css]]
:root {
--header-title: "G P A 数 据 库";
--header-subtitle: "守护,生存,延续,秩序,美德,常态";
--logo-image: url("http://science-first.wikidot.com/local--files/organization-1/Image_1753286859703.png");
}
#header h1, #header h1 a {
font-size: 2.5rem;
top: 1.3rem;
}
[[/module]]
当然,我们还有另外一种浅色版本:
[[include :backrooms-wiki:theme:frost]]
[[module css]]
:root {
--header-title: "G P A 数 据 库";
--header-subtitle: "守护,生存,延续,秩序,美德,常态";
--logo-image: url("http://science-first.wikidot.com/local--files/organization-1/Image_1753286859703.png");
}
#header h1, #header h1 a {
font-size: 2.5rem;
top: 1.3rem;
}
[[/module]]
还有一种深蓝搭配黑色的科技版本:
[[include :backrooms-wiki:theme:deep-space]]
[[module css]]
:root {
--header-title: "G P A 数 据 库";
--header-subtitle: "守护,生存,延续,秩序,美德,常态";
--logo-image: url("http://science-first.wikidot.com/local--files/organization-1/Image_1753286859703.png");
}
#header h1, #header h1 a {
font-size: 2.5rem;
top: 1.3rem;
}
[[/module]]
复制粘贴以下代码来获得一个下面展示的块:
[[div class="lightblock"]]
[[div class="darkblock"]]
[[div class="footer-wikiwalk-nav" style="text-align:center;"]]
+ **全球异常管理局-GPA数据库**
[[/div]]
[[image http://science-first.wikidot.com/local--files/start/GPA%E8%BD%AC%E8%B7%B3]]
[[div class="footer-wikiwalk-nav" style="text-align:center;"]]
「守护,生存,延续,秩序,美德,常态」
[[/div]]
[[/div]]
[[/div]]
这个块放在人事档案的开头。
人事档案的格式:
代码复制:
[[tabview]]
[[tab 人事档案]]
姓名:
代号:
常用称呼:
性别:
年龄:
身份:
种类:
入职时间:
简介:
[[/tab]]
[[tab 相关故事]]
待编辑
[[/tab]]
[[tab 相关图片]]
待上传
[[/tab]]
[[/tabview]]
------
[[div class="footer-wikiwalk-nav" style="text-align:right;"]]
**联合国全球异常管理局(UNGPA)**
「守护,生存,延续,秩序,美德,常态」
There's no turning back.
[[/div]]
[[div class="lightblock"]]
这是一个亮色块。链接预览。
[[/div]]
[[div class="darkblock"]]
这是一个暗色块。链接预览。
[[/div]]
[[div class="styled-quote"]]
这是一个特殊引用块。链接预览。
[[/div]]
[[div class="dark-styled-quote"]]
这是一个暗色特殊引用块。链接预览。
[[/div]]
自定义 DIV
通过以下代码建立一个自定义 DIV 块:
[[div class="custom bd1 bg1 tx1 a1"]]
[[/div]]其中,bg 代表背景色,bd 代表边框色,tx 代表文字色与分割线色,a 代表链接色。其后的文字代表具体颜色,1-4 逐渐加深。1 为最浅的白色,4 为最深的蓝色。特别的是,tx0 表示黑色文字。
插入图像或媒体文件
媒体文件是可选的加分项,只要它们合乎主题,不破坏真实感,而且符合网站规则即可。
如出现以下情况,请不要使用该图片:
- 包含水印或版权声明(将之去除也不行,这是不合法的。)
- 非法或色情内容(这些图片会被立即移除。)
你需要先将图像上传才能插入文中。原创页面请不要直接链接到其他网站上的图片。首先将图像转换为如jpg、jpeg、png等常见格式,并缩小到合适的大小(请不要上传数MB大小的图像),然后依照以下步骤上传:
- 滚动至页底,点击“附件”(Files)。[[/footnote]]
- 点击“从您的电脑上传一个文件”(Upload a File from Your Computer)。
- 选中你要用的图像,然后点击“打开”(Open)。
- 最后点击“上传”(Upload)。
此时,图像已经上传到你的页面里。欲使用附带说明的插图样式,你需要在适当的地方插入以下代码。
[[include component:image-block
| name=图片地址.后缀名1
| caption=图片下方的说明文字
]]
请将等号(“=”)与分隔符(“|”)或右括号(“]]”)之间的文字修改为你自己的内容。
默认情况下,插图方块的宽度为300px。如果需要调整大小(例如图像的原始宽度小于300px),你可以通过以下代码设置宽度属性:
[[include component:image-block
| name=图片名称.后缀名
| caption=图片下方的说明文字
| width=300px
]]
图片的高度会随宽度自动调整。宽度请勿设置超过300px,以免图片过大影响阅读。如果你对在文章中使用图片有所疑问,不妨在讨论区求助。
要为文章添加媒体文件,如同上传图像一样,你必须先依照前文所述完全相同的方式将其上传至页面。之后使用如下代码插入HTML5播放器:
[[include :snippets:html5player
| type=audio
| url=文件地址
]]
如果要插入视频,将‘type’后的‘audio’(音频)改为‘video’(视频)即可。
文本样式
行内样式
| 语法 | 示例 |
|---|---|
| //斜体文本// | 斜体文本 |
| **粗体文本** | 粗体文本 |
| //**斜体与粗体**// | 斜体与粗体 |
| __下划线文本__ | 下划线文本 |
| --删除线文本-- | 删除线文本 |
| {{打字机(等宽字)文本}} | 打字机(等宽字)文本 |
| 普通^^上标^^ | 普通上标 |
| 普通,,下标,, | 普通下标 |
| [[span style="color: red;"]]自定义 //span// 元素[[/span]] | 自定义 span 元素 |
| ##blue|预定义## 或 ##44FF88|自定义代码## 颜色 | 预定义 或 自定义代码 颜色 |
文本大小
| 格式 | 示例 |
|---|---|
| [[size smaller]]更小的文本[[/size]] | 更小的文本 |
| [[size larger]]更大的文本[[/size]] | 更大的文本 |
| [[size 80%]]现大小的 80%[[/size]] | 现大小的 80% |
| [[size 100%]]现大小的 100%[[/size]] | 现大小的 100% |
| [[size 150%]]现大小的 150%[[/size]] | 现大小的 150% |
| [[size 0.8em]]现大小的 80%[[/size]] | 现大小的 80% |
| [[size 1em]]现大小的 100%[[/size]] | 现大小的 100% |
| [[size 1.5em]]现大小的 150%[[/size]] | 现大小的 150% |
| [[size xx-small]]超超小文本[[/size]] | 超超小文本 |
| [[size x-small]]超小文本[[/size]] | 超小文本 |
| [[size small]]小文本[[/size]] | 小文本 |
| [[size large]]大文本[[/size]] | 大文本 |
| [[size x-large]]超大文本[[/size]] | 超大文本 |
| [[size xx-large]]超超大文本[[/size]] | 超超大文本 |
| [[size 7px]]文本大小 7 像素[[/size]] | 文本大小 7 像素 |
| [[size 18.75px]]文本大小 18.75 像素[[/size]] | 文本大小 18.75 像素 |
此组件用于创建一段位于一个密码输入模块之后的隐藏内容。
使用此组件时请添加以下代码:
[[include :scp-wiki-cn:component:passcode
|passcode=密码123
]]
[[div class="pass-content"]]
被隐藏的内容
[[/div]]
[[/div]]
若需改变模块的样式,可添加|css=参数以引入定制CSS。
此组件仅可作为表现用途,并没有任何实际上的安全功能——从其作用和目的来看,这只是个非常花哨的折叠块。
如何工作
密码模块是一个[[html]]块,它利用了Wikidot写入内联高度样式以调整iframe大小的内建功能。
此组件可重设内容内容高度至一个任意的px值(此例中为1600px),并在外部通过[style^="height: 1600"]选择器检测该值,从而有效地创建动态的多状态切换。
这是什么
一个图像轮播组件,它能循环显示多张图像,而不只是单独一张。
使用方法
在你需要图像轮播框的地方,插入如下代码而不是标准插图方块。
确保你要使用的图像已经上传到了你的页面里。如果你选择无视这条睿智的忠告并在设置好轮播组件之后才上传图像,那么你的图像会无法显示,除非彻底刷新(Ctrl+Shift+R)页面。
[[include :scp-wiki-cn:component:carousel
| images=photograph.png,old-map.png,jumpscare.gif
| caption=一系列图片。
| interval=5
| wiki=scp-wiki-cn
| page=SCP-173
| width=300px
| height=240px
| position=right
| no-caption=false
| background=white
| options=yes
]]
使用图像轮播框会带来一些可访问性问题 - 对某些用户来说,连续的移动会非常分散注意力。强迫读者等待阅读文章的图片也不是一个很好的主意。这个组件也会因为在非交互的文本中强行添加交互性而惹恼你的读者。如有可能,我建议不要使用此组件。使用一系列标准插图方块作为代替。
每个选项都是什么
以斜体字标注的均为可选项。其他则是必须要添加的。
如果你省略了可选项,则它将设置为其默认值。如果你省略了必选项,则轮播框无法正常工作。
| images: | 一系列图像,由半角逗号“,”分割。确保每张图像都上传到了页面里。你亦可以通过链接指定图像 这些图像会以你列举的顺序出现在轮播里。 |
| links: (可选) |
一系列链接至每个图像的链接,由半角逗号“,”分割。若填写本参数,确保链接数量与图像数量一致。 |
| caption: (可选) |
可选。出现在轮播框下方的说明文字。 如果没有说明文字,请确保将 no-caption 设置为 true。 默认值:“{$caption}” |
| interval: (可选) |
可选。如果你将它设置为非零的数字,那么轮播框会在相应秒数之后自动转至下一张图像。 如果用户点击箭头来手动换图,或者如果他们的鼠标正悬停在轮播框上,图像就不会轮换。 默认值:“0” |
| wiki: | 你使用轮播框的页面所在维基的名称,举例而言,scp-wiki、scp-wiki-cn 或 scpsandboxcn。 |
| page: | 你使用轮播框的页面名称。如果有页面分类的话,请将之包括在内。(“名称”指你在链接里看到的末端名称 - 比如,scp-botnik-j 的页面名称为 scp-botnik-j。) |
| width: (可选) |
轮播框里最宽的图像宽度。 默认值:“300px” |
| height: (可选) |
轮播框里最高的图像高度。 默认值取决于浏览器 |
| position: (可选) |
轮播框在页面中的水平位置。“left”为左,“right”为右,“center”为中。 默认值:“right” |
| no-caption: (可选) |
如果你不想要说明文字,将之设置为“true”。不然,则留空,或者设置为“false”,或把这行整个去掉。 默认值:“false” |
| background: (可选) |
图像的背景颜色。 默认值:“transparent”(透明) |
| options: | 你是否需要显示详细选项(播放/暂停键和一排小圆点)?如果不需要,设置为除了“yes”以外的任何东西。 默认值:“yes” |
我想让轮播框横跨整个页面!
将 width 设置为“100%”,position 设置为“center”。
我将宽度/高度设置为最大图像的尺寸了,但这东西实在太大了!
用小一点的数字,或者把图像改小一点。
自定义折叠
你是否需要改变折叠的形状、颜色或者大小!那你来对地方了!不用担心,这个组件只会改变折叠链接的样式,折叠里的文字不受影响!
[[include :backrooms-wiki-cn:component:custom-collapsible
show=自定义折叠
|hide=隐藏
|font=var(--header-font)
|size=200%
|color=14, 110, 181
|weight=900
|style=italic
]]
其中的文字可以被折叠!
[[/collapsible]]
如何使用
只需要将这个组件作为折叠的开头,其他的都和平常没两样!
- {$show}:折叠关闭时的链接文字。
- {$hide}:折叠展开时的链接文字。
- {$font}:折叠链接的字体。
- {$size}:折叠链接的文字尺寸。
- {$color}:折叠链接的颜色。
- {$weight}:折叠链接的字重(粗体)。
- {$style}:可选“italic”(斜体)或“normal”(正常)。
