2.0.0
[[include :scp-wiki-cn:theme:parallel]]
信息
平行是为 SCP-CN 维基制作的 CSS 主题,是玄武岩项目基础版式基岩的深度修改版本,便于 Dr Hormress 二次开发使用,提供一个具有工作感的视觉外观和多个预制配色方案。平行的最初目的并不是直接被引入,不过的确任何用户可以这么做。
平行从基岩引用了大量代码,不过为确保稳定性,维护者现已取消此主题早期版本的“外部依附式”设计方案,转而将其与基岩相互嵌入以便独立开发。你可以在这里看到它在 Github 上的小小占位符——当然还有平行的 Github 仓库。
版式插件
平行组件是专为改变平行版式的方方面面而制作的组件,一般情况下无法脱离平行使用。
经典版头
[[include :scp-wiki-cn:component:parallel-classic-header]]
版式预设
与玄武岩相类似,可在你的 [[include]] 语法中添加预设来小规模修改平行的配色方案。
这些配色预设主要用于二次设计时提供一个方便的风格化基板,也可用于单独引用。点击以下预设图标可以切换此页面的预览状态,并切换所展示的 [[include]] 语法示例。
[[include :scp-wiki-cn:theme:parallel]]
[[include :scp-wiki-cn:theme:parallel bedrock=*]]
[[include :scp-wiki-cn:theme:parallel redstone=*]]
[[include :scp-wiki-cn:theme:parallel deepslate=*]]
[[include :scp-wiki-cn:theme:parallel deep-diamond=*]]
[[include :scp-wiki-cn:theme:parallel deep-gold=*]]
基本元素示例
这是引用块
嵌套引用
可通过至少四个连字符“----”
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
1 级标题
2 级标题
3 级标题
4 级标题
5 级标题
6 级标题
这是分页(Tab View)。
嘿看,这里有更多的文本。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个有脚注的 tab
1. 许多教程会选择六个连字符,那其实是多余的2. 这是另一个脚注。
| 这是 | 表格 |
|---|---|
| 它的使用方法 | 一句话讲不完 |
| 而且单元格不能跨行,这很可恶 | |
工具类
与 Tailwind CSS 的设计理念相类似,平行提供的基本排版元素包含一系列工具类;不过它们并不像 Tailwind CSS 那样基本完全独立,我们也没有一个脚本用于生成几乎可以代替任何内联样式的各种工具类。平行的大部分工具类针对 blockquote 类设计,需要提前引入,而主要排版元素都是 div.blockquote 元素的变体。平行 2.0 版本基本完全重新设计了这些类的使用,不过旧版类名仍然予以支持。以下只给出现版本的标准参考。
示例
你可以使用和 HTML 语法类似的 [[div class="类名"]] 语法来创建具有类的 div 元素,不要忘了用 [[/div]] 包裹住 div 的内容。
[[div class="blockquote 工具类1 工具类2"]]
[[div class="blockquote round-l bwidth-base bcolor-undertone shadow-thick"]]
[[div class="blockquote bg-pri b-l bwidth-base bcolor-overtone w-625"]]
通用
少部分处理块级样式和大部分仅处理文本样式的工具类是通用的。以下是一个列表。
| 文本对齐 | |
|---|---|
| 用于调整元素内文本的对齐方式 | |
t-left | 文本左对齐 |
t-center | 文本中间对齐 |
t-right | 文本右对齐 |
t-justify | 文本两端对齐 |
| 溢出处理 | |
| 用于元素内存在溢出时进行处理 | |
scroll-x | 元素内超宽时添加滚动条 |
引用块
| 宽度控制 | |
|---|---|
用于调整引用块的宽度,宽度使用公式 页面内容总宽度 * 相对系数 计算 | |
w-125 | 相对系数 = 0.125 |
w-25 | 相对系数 = 0.25 |
w-375 | 相对系数 = 0.375 |
w-50 | 相对系数 = 0.50 |
w-625 | 相对系数 = 0.625 |
w-75 | 相对系数 = 0.75 |
w-875 | 相对系数 = 0.875 |
w-full | 相对系数 = 1 |
| 边框 | |
用于调整引用块的边框。引用块默认有与背景颜色相同的边框,工具类 b 仅供特殊情况使用 | |
b-n | 引用块不存在边框 |
b | 引用块存在边框 |
b-l | 左边框 |
b-r | 右边框 |
b-lr | 左右边框 |
b-t | 上边框 |
b-b | 下边框 |
b-tb | 上下边框 |
| 边框宽度 | |
| 用于调整引用块边框的宽度 | |
bwidth-base | 边框宽度为 --base-border-width |
bwidth-thin | 边框宽度为 --thin-border-width |
| 边框颜色 | |
| 用于调整引用块边框的颜色 | |
bcolor-pri | 边框颜色为 --basalt-primary-color |
bcolor-sec | 边框颜色为 --basalt-secondary-color |
bcolor-ter | 边框颜色为 --basalt-tertiary-color |
bcolor-overtone | 边框颜色为 --basalt-overtone |
bcolor-undertone | 边框颜色为 --basalt-undertone |
bcolor-dark | 边框颜色为 --basalt-dark-element-color |
bcolor-darker | 边框颜色为 --basalt-darker-element-color |
| 圆角 | |
| 用于调整引用块的边缘圆角,四角将同时变化,暂时无法分别应用到特定的角 | |
round | 圆角尺寸为 --base-border-radius |
round-s | 较小的圆角 |
round-m | 中等的圆角 |
round-l | 较大的圆角 |
| 阴影 | |
| 用于调整引用块的阴影,若为暗色主题,阴影会变为发光 | |
shadow | 一般的阴影 |
shadow-thin | 较轻的阴影 |
shadow-thick | 较重的阴影 |
| 背景颜色 | |
| 用于调整引用块的背景颜色 | |
bg-pri | 背景颜色为 --basalt-primary-color |
bg-sec | 背景颜色为 --basalt-secondary-color |
bg-ter | 背景颜色为 --basalt-tertiary-color |
bg-overtone | 背景颜色为 --basalt-overtone |
bg-undertone | 背景颜色为 --basalt-undertone |
bg-dark | 背景颜色为 --basalt-dark-element-color |
bg-darker | 背景颜色为 --basalt-darker-element-color |
bg-alter | 背景颜色为 --basalt-alternate-color,透明度 0.075 |
| 文本颜色 | |
color-light | 亮色文本 |
笔记块
div.wiki-note 元素与 note 元素并不包含任何特别的工具类。之所以在本节中特别提出,是因为 div.wiki-note 元素视觉上等价于一个经过样式化的 div.blockquote 元素,用户完全可以用样式化的 div.blockquote 元素取代 div.wiki-note 元素。
[[note]][[note]]
[[/note]]
[[div class="wiki-note"]]
[[div class="blockquote w-50 b-n bg-alter t-justify"]]
维基内容表格
与先前的例子不同,一般情况下用于 div.table 的工具类并不作用在这个 div 元素上,而是影响其中放置的维基内容表格即 table.wiki-content-table 元素。特别地,用于改变宽度的工具类会作用在 div 元素上,并使其中的表格占满该 div 的宽度。
要使以下属性生效,请提前加入 table 类来声明这是用于处理表格的 div 元素。以下是可用于表格的工具类列表。
| 溢出处理 | |
|---|---|
| 用于元素内存在溢出时进行处理 | |
scroll-x | 元素内超宽时添加滚动条 |
| 宽度控制 | |
用于调整宽度,宽度使用公式 页面内容总宽度 * 相对系数 计算 | |
w-125 | 相对系数 = 0.125 |
w-25 | 相对系数 = 0.25 |
w-375 | 相对系数 = 0.375 |
w-50 | 相对系数 = 0.50 |
w-625 | 相对系数 = 0.625 |
w-75 | 相对系数 = 0.75 |
w-875 | 相对系数 = 0.875 |
w-full | 相对系数 = 1 |
| 特殊样式 | |
| 用于为表格赋予特殊样式 | |
b-d | 使表格线与表头颜色一致强调 |
b-3 | 修改为三线表 |
杂项
平行过去曾加入的杂项修改和组件适配仍然有效,不过部分特性暂时没有继续开发和维护的计划,一些特性未来也可能发生变动。以下列出了这些修改和自定义元素。
目前暂时无法被工具类替代的自定义引用块
[[div class="blockquote title" data-title="示例标题"]]
部分代码移植自流明冲击。
[[div class="blockquote title"]]
其实不写标题也可以用。
[[div class="blockquote warning-panel" data-title="来自异常宗教表现部信息系统的通知" style="—warning-logo: url("https://ah-sandbox.wikidot.com/local--files/hormress-s-logos/ARED_2.svg");"]]
[[div class="blockquote warning-panel" data-title="通知标题" style="--warning-logo: url("背景图标链接");"]]
你可以替换代码里的链接和标题创建一个警告或通知。
[[/div]]
替代标题格式支持(AIM 与 ACS)
将这两个组件的 [[include]] 语法分别放在 [[div class="Parallel-AIM"]] 和 [[div class="Parallel-ACS"]] 中,即可启用支持模式。分别提供了特色着色方案和视觉风格修改。
Earthworm 导航
Earthworm 导航在此版式下被修改为更简洁的样式。
致谢
此版式基本是 EstrellaYoshte、
Liryn 和
Placeholder-mcd 所制作的 基岩版式的再创作。此版式的风格也受到
woedenaz 的黑色标记笔版式的相当影响,平行目前所使用的 SCP 标志也是基于其版式徽标。
中文分部的 hoah2333 在最早期开发思路的起点新贵族提供了不少建设性意见。
以上这些人的贡献对于平行的开发直接影响相当大,当然还有更多为我汇报问题的使用者、各群聊中遇到的朋友。平行版式没有你们不可能走到今天!







