玄武岩 版式





BASALTLOGO.png

玄武岩 版式


玄武岩 版式

1.5 版本

这是什么?

玄武岩是一个美学版式,不与任何设定、系列或GoI绑定,由 AzamoAzamoPlaceholder McDPlaceholder McD 作为 EstrellaYoshteEstrellaYoshte纸堆 版式的扩展开发。

黑色标记笔相似,玄武岩全面修改了大量的网站布局设计,并改动了大量通常被大多数版式所忽视的界面元素,以提高工作效率以及用户的可及性。而且它看着也很帅。

若需使用玄武岩版式,仅需将以下代码复制到你的文章中:

[[include :scp-wiki-cn:theme:basalt]]

版式设置

版式设置,有时候也被叫作变量,是一些用户可以添加到玄武岩版式的引用模块中的额外文本字符串,以选择加入或删除某种特性。

若需应用某种设定,在主引用且在末尾的两个括号插入以下示例中的一种,如下所示:

[[include :scp-wiki-cn:theme:basalt 版式设置=a]]

版式设置可以很容易地结合到一起。若需同时使用多个版式设置,请使用以下格式:

[[include :scp-wiki-cn:theme:basalt 第一个版式设置=a|第二个版式设置=a|第三个版式设置=a]]

版式设置列表(截至 1.0 版本)

hidetitle=a

移除页面标题。

acsanimation=a

禁用 ACS 动画组件,该组件默认启用。

darkmode=a

启用暗色模式。 (参见:缟玛瑙(暗色模式))

redmode=a

启用红色模式。需要暗色模式才能使该功能正常运行。 (参见:石榴石(红色模式))

darksidebar=a

给亮色模式的文章应用暗色模式侧边栏。


自定义

修改标题/副标题/标志

若你想要修改显示在页眉的标题、副标题与/或标志,使用以下代码:

:root {
--logo: url(<此处为图片链接>);
--title: "<此处为标题文本>";
--subtitle: "<此处为副标题文本>";
}

推荐保持--title属性与默认文本长度相同(或更短),以避免在移动端设备上遭遇显示问题。

默认情况下,显示在侧边栏的标志与文本会与页眉的相对应。若需要修改这一部分,可使用以下代码:

:root {
--sidelogo: url(<此处为图片链接>);
--sidesubtitle: "<此处为文本>";
}

缟玛瑙(暗色模式)

BASALT_DARKMODE.png

缟玛瑙

若需启用暗色模式,可如前述般使用以下的版式设置:

[[include :scp-wiki-cn:theme:basalt darkmode=a]]

石榴石(红色模式)

BASALT_REDMODE.png

石榴石

若需启用红色模式,可如前述般使用以下的版式设置:

[[include :scp-wiki-cn:theme:basalt darkmode=a|redmode=a]]

与玄武岩共同引入

组件

玄武岩预装有数个社区制作的组件:

……并对这些组件作出了视觉修改,如果你要将其引入的话:

版式

玄武岩从以下版式中借取了一些元素:

示例


basalt_logotype_black.png

插图方块

可通过四个连字符“----”创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。

一个你可能已经访问过的链接


标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。

这是大号文本Big Text span 标签。使用 [[span class="bigtext"]] 来做出该效果。

这是特殊文本Special Text span 标签。使用 [[span class="st"]] 来做出该效果。
特殊文本会在放置于彩色表格 div 内时改变颜色,如下所示。 这是给你用的,占位符。

为什么这把铲子这么特别?

因为它是一项突破性的发明。


这是一个引用块,在一行字的起始处加上“> ”来创建。

更多文字


一条分割线

嵌套引用块

这是一个常规表格
这里是文本

表格可以通过被包裹在特定 div 元素中而着色。被包裹在这些 div 元素内的插图方块以及特殊文本 span 标签也会相应地改变颜色。

[[div class="table1"]]

这是一个绿色的表格
这里是文本

[[div class="table2"]]

这是一个蓝色的表格
这里是文本

[[div class="table3"]]

这是一个黄色的表格
这里是文本

[[div class="table4"]]

这是一个橙色的表格
这里是文本

[[div class="table5"]]

这是一个红色的表格
这里是文本

[[div class="table6"]]

这是一个紫色的表格
这里是文本

你还可以使用以下 div 元素来创建一个破碎的表格。

[[div class="tableb"]]

这是一个破碎的表格
这里是文本

这是一个文档 div 元素。使用[[div class="document"]]来做出该效果。不推荐将该元素放置在其它 div 元素内。

这是一个暗色文档 div 元素。使用[[div class="darkdocument"]]来做出该效果。不推荐将该元素放置在其它 div 元素内。

这是一个 RAISA 备忘 div 元素。使用[[div class="raisa_memo"]]来做出该效果。

这是一个装饰性 div 元素。使用[[div class="notation"]]来做出该效果。

这是更窄一点的 modal div 元素!使用[[div class="smallmodal"]]来做出该效果。

这是第三种装饰性 div 元素!使用[[div class="jotting"]]来做出该效果。

这是第四种装饰性 div 元素!使用[[div class="transcript"]]来做出该效果。

这是第五种装饰性 div 元素!使用[[div class="papernote"]]来做出该效果。

正文字体为 Noto Sans SC
页眉与标题字体为 Work Sans
等宽字体为 仿宋。


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License