Flop 风格:暗色
Flop 风格:暗色
作者 Lt FlopsLt Flops
发布于 2022 年 04 月 05 日

这是 authorbox 的一个使用例。请查阅侧框栏子节段以获取更多信息。



alt_logo_tyrian.png

.


Flop 风格:暗色

Sigma 版式中心 » Flop 风格:暗色

alt_logo_tyrian.png

评分模块

评分: +24+x

评分模块 + 信息模块

评分: +24+x

独立的信息模块

这是什么?


这是由 Lt FlopsLt Flops 制作的版式。其被制作于广泛运用在任何偏好使用暗色模式或夜晚模式的文章。

仅在知道你在做什么的情况下使用该版式。

该版式不兼容于黑色标记笔玄武岩Sigma+

使用方法

基本信息


请在你页面中设定 Flop 风格:暗色之前阅读此介绍节段。

      第一步,引用版式 复制此代码并将其黏贴至你页面的顶部:

[[include :scp-wiki-cn:theme:flopstyle-dark]]

      [可选] 第二步,添加署名 复制此代码并将其黏贴至评分模块的正下方——如下所示:

[[module Rate]]

[[div class="byline"]]
[[span]]作者:作者链接[[/span]](A)
[[span]]#[[/span]](B)
[[/div]]

      2.(A)用作者/合著者的名字替换作者链接,并且链接至相应的作者页。

      2.(B)用预计读者阅读你的文章所用时间(以分钟为单位)替换 #。若需预计你文章的阅读时间,你可以复制文章文本并将其黏贴至 Read-o-Meter.译注:仅适用于英语文章。中文阅读时间预测推荐使用此工具工具中,然后四舍五入至最近的分钟数。.声明 Read-o-Meter 并不会记录或储存你的数据。

      ‼️ 请确保在包含这些 span 的行之间没有空行,否则其将不会如预期般运作!

hCGnFsp.png

第二步实装时的一个示例。

      第三步,设置页面标题 复制此代码并将其黏贴至你想要标记文章开始的地方:

[[div class="meta-title"]]
这里是你的标题
[[/div]]

由于无障碍的原因,你必须在每个使用 Flop 风格:暗色的页面中都设置一遍页面标题。

      第四步,设置面包屑导航 复制此代码并将其黏贴至页面标题正下方:

[[div class="pseudocrumbs"]]
[[[parent-page-url1|第一个父页面标题]]] » 子页面标题
[[[parent-page-url2|第二个父页面标题]]] » 子页面标题
[[/div]]

      ‼️ 如果你在创建一个需要使用 ListPages 的文章,别担心——你依然可以如常设置段落页的父页面,但是你必须要以通常的方式设置。在这种情况下,功能比形式重要得多。

uKmDCe1.png

第三步与第四步实装时的示例。

现在……如果你在 Flop 风格:暗色里所想要的只有基础美学设计的话,那你就可以随意收下代码然后溜之大吉了!但如果你想继续往下翻动的话,我就能给你看看,这兔洞到底有多深。



Flop 风格:暗色在设计的时候考虑到了以下组件……



1. 预加载组件


该版式预先打包了以下六个组件:

      1.1. ACS 动画 作者:EstrellaYoshte
      1.2. 更好的脚注 作者:EstrellaYoshte
      1.3. Croq 风格 CSS 作者:Croquembouche
      1.4. 渐显(设置了 speed=1作者:Croquembouche
      1.5. 短信样式 作者:JaonHax
      1.6. 切换侧边栏 作者:EstrellaYoshte

2. 自定义变量

(仅在知道你自己在做什么的时候修改这些变量)

所有的变量修改都必须被包裹在 CSS 模块,[[module CSS]] 内。所有列于下方的变量亦必须被包裹在 :root 选择器内。

      2.1. 颜色 你可以根据需要改变各种版式颜色。只要复制以下任何一条变量(但也只需复制你需要的变量)然后按照需求编辑该变量:

[[module CSS]]
:root{

   /* -- 颜色 -- */
     --accentColor: 强调色;
     --accentColorLite: 较亮强调色;
     --hue: 色度;

/* 默认值(请勿复制):
*   accentColor:
Bright Tyrian pink hsl(325, 80%, 60%).
*   accentColorLite:
Soft Tyrian pink hsla(325, 80%, 70%, .5).
*   hue: 325deg.
**/

accentColor(强调色)是最广泛被使用的页面变量。对比起所有的其它变量,修改 accentColor 通常是该版式的用户最倾向于做出的唯一改动。

如果你修改了 accentColor,那么你也必须修改另外两条变量:

      2.1. (A) accentColorLite 这一变量必须比你的 accentColor 有着更高的亮度以及更低的透明度值。我推荐亮度值比你所选择的 accentColor 高出至少 10%,然后透明度值调为 0.5
      2.1. (B) hue 这一变量必须合乎你所选择的 accentColor 的色度值。

若需选择你的颜色,我推荐使用 HSL 颜色选择器HSL 是一种人类友好型颜色系统,三个字母分别代表色度Hue饱和度Saturation亮度Lightness。这一系统可以被扩展成 HSLA,包含了 Alpha 值(透明度)。

若需确认你所选择的 accentColor 是否符合网络内容可及性参考标准(Web Content Accessibility Guidelines,WCAG),那么就看看它的对比度比率。在 “Background”(背景)栏中填入
hsl(222, 12%, 21%),并在 “Text color”(文本颜色)栏中填入你所选择的 accentColor。WCAG 需求标题文本的对比度比率大于等于 3

      2.2. 标志与字体 你可以修改标志、字体等:

   /* -- 标志 -- */
     --lgurl: url(此处填写链接);

   /* -- 字体 -- */
     --header-font: "你的字体", sans-serif;
     --body-font: "你的字体", sans-serif;

/* 默认值(请勿复制):
*   header-font: Montserrat, sans-serif
*   body-font: Inter, sans-serif
**/

      2.3. 页眉标题 你亦可以修改标题、副标题、标题颜色以及副标题颜色:

   /* -- 标题 -- */
     --header-title: "标题";
     --header-subtitle: "副标题";
     --titleColor: 标题颜色;
     --subtitleColor: 副标题颜色;

/* 默认值(请勿复制):
*   titleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
*   subtitleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
**/

}
[[/module]]

3. Flops 版头


Flop 风格:暗色提供了一个暗色模式友好版本的 Flops 版头:

[[include :scp-wiki-cn:component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]

cGbnRpP.png

Flops 版头实装时的示例。

4. 侧框栏


侧框栏Sideboxes构建为以下两种形式的组件:

  • A 型 authorboxsidebox
  • B 型 sidecontainer

用法根据类型的不同而有所区别。

  • authorboxsidebox 不会在 width=1280px 及以下的屏幕上显示,包括了移动端的屏幕。这两个侧框栏可以设定为显示页面与作者信息。
  • sidecontainer 会在 width=1280px 及以下的屏幕上收合到页面边缘处。在这些屏幕上,你可以通过用手指点击它或将光标悬停到其上来查看其内容。它可以被设定为显示额外的叙事性信息。

在设定这些内容前先考虑这种情况——一大部分的 SCP 维基用户都是通过移动端设备浏览的。

A 型 Authorbox 与 Sidebox

(见左上角与右上角)

调整自 EstrellaYoshte 所作的半影版式

默认情况下,authorbox强制使用的。它会在所有引用了 Flop 风格:暗色的页面上预加载。如果你想移除这一框体,请将这个:

[[include :scp-wiki-cn:theme:flopstyle-dark]]

替换成这个:

[[div style="display: none;"]]
[[include :scp-wiki-cn:theme:flopstyle-dark]]
[[/div]]

      替代选项 1 在移除了 authorbox 之后,你可以将其替换成一个自定义的版本,可以显示任何你希望显示的信息。这一功能在合著、重写或翻译页面之中格外有用。为供参考,这里是创建 authorbox 的代码:

[[div class="anchor"]]设定 authorbox 的粘附位置。
[[div class="authorbox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]]作者[[/span]] %%created_by_linked%% ||
||~ 发布于 %%created_at|%Y 年 %m 月 %d 日%% ||
[[/module]]

[[div class="flavorbox"]]创建 authorbox 的 flavorbox。
这里是所需的调味flavor文本。
[[/div]]

[[/div]]
[[/div]]设定限制锚点的结束位置。

默认情况下,authorbox 会使用 ListPages 来自动显示归属资料。理论上你可以复制 authorbox 内部的 ListPages 模块并将其黏贴至任何维基页面中,这些字段将以该页面独特的样式填充。当然了,你也可以随你所需修改这里任何的字段。

你也可以编辑你自己的 authorbox 来显示你页面专属的调味文本,比如给读者的一条提示。

记住flavorbox 的使用是可选的。但这是你在 authorbox 内应该使用的唯一一个 div 块。

      替代选项 2 如果你想的话,你可以通过将 authorbox 替换成 sidebox 的方式将其移动到页面的右手边。若需创建 sidebox,复制以下代码并将其黏贴至你页面顶部的 CSS 模块之中:

[[div class="anchor"]]设定 sidebox 的粘附位置
[[div class="sidebox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]]作者[[/span]] %%created_by_linked%% ||
||~ 发布于 %%created_at|%Y 年 %m 月 %d 日%% ||
[[/module]]

[[div class="flavorbox"]]创建 sidebox 的 flavorbox。
这里是所需的 调味flavor 文本。
[[/div]]

[[/div]]
[[/div]]设定限制锚点的结束位置。

如果你想要在你的页面内插入 sidecontainers,那么我强烈建议使用 authorbox 而不是 sidebox。原因是,当 sideboxsidecontainer 并列出现时,它们会相互重叠起来,造成视觉上的混乱。这可能会给读者造成困惑,所以,最好还是稳妥一点。

你可以配置 sidebox 来传递与 authorbox 相同的信息。或者——就像我在此展示的例子一样——你可以加一句精炼的文章标语以及一个独特的标志。

与其它的表格类似,你也可以给它应用一个独特的底色——比如说现在的绿色,是用 table1 来实现的。请参考示例格式(通用)节段内的表格格式折叠以获取更多信息。

B 型 Sidecontainer

(见下文)

Woedenaz 提供

sidecontainer 是一个可选项。它可由此代码设置:

[[div class="limit"]]设定限制锚点的开始位置。
[[div class="anchor"]]设定 sidecontainer 的粘附位置。
[[div class="sidecontainer"]]
此处为所需的 sidecontainer 文本。
[[/div]]
[[/div]]
sidecontainer 有关联的文本。
[[/div]]设定限制锚点的结束位置。

我推荐在与 sidecontainer 有关联的文本后方插入一个常规的换行符。你可以通过用两组 @@ 将一个空格包起来(两边各一组)的形式来换行。sidecontainer 将在你滚过此文本的时候显示在其侧边。

记住——没有了 limit div 块,anchor 就会在你滚过其起始点之后始终停留在页面内。

5. 各种各样的可修改部分


如果有需要的话,你同样可以修改这里的任何 CSS 属性以更好地适应你的页面。

修改标志透明度

#extra-div-1{
     filter: opacity(百分数);
}

默认透明度 = 33%

6. 版式变体


如果你在版式引用块中插入不同的变量,你就可以给你的页面应用一个预先构建好的版式变体。

示例格式 [常规]


示例格式 [高级]


源代码


标题字体为 Montserrat / 思源黑体简中

正文字体为 Inter / 思源黑体简中

打字机体为 Fira Code / 幼圆 / 思源宋体简中

草稿体为 Comic Neue / 马善政毛笔楷体

🡹

回到页面顶端

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License