Turbo Vision 版式 
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
        pointer-events: auto;
}
 
@media not all and (max-width: 767px) {
 
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }
 
    #top-bar .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
 
        scrollbar-width: thin;
    }
 
    #side-bar:target {
        left: 0;
    }
    #side-bar:focus-within:not(:target) {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 19.75em;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }
    #side-bar:not(:target) .close-menu { display: none; }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @supports (-moz-appearance:none) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
    }
 
    /* This pseudo-element is meant to overlay the regular sidebar button
    so the fixed positioning (top, left, right and/or bottom) has to match */
 
    #side-bar .close-menu::before {
        content: "";
        position: fixed;
        z-index: 5;
        display: block;
 
        top: 0.5em;
        left: 0.5em;
 
        border: 0.2em solid transparent;
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 0.9em;
 
        pointer-events: all;
        cursor: pointer;
    }
    #side-bar:focus-within {
        left: 0;
    }
    #side-bar:focus-within .close-menu::before {
        pointer-events: none;
    }
    }
}

这是由 JakdragonXJakdragonX 和 CroquemboucheCroquembouche 制作的 Turbo Vision 版式，与任何世界观下的设定均无关联，尽管它会唤起一种非常复古的氛围。

在你的作品开头添加如下语法以应用此版式：

[[include :scp-wiki-cn:theme:turbo-vision]]

这将使 Turbo Vision 版式进入“版式模式”。

如果你只希望能够使用 Turbo 方块，而不想要版式的剩余部分，添加“blocks=-”：

[[include :scp-wiki-cn:theme:turbo-vision blocks=-]]

这将使 Turbo Vision 版式进入“组件模式”。此时可与黑色标记笔 主题版式兼容。

“版式模式”和“组件模式”会在稍后推出，所以确保你知道你的页面使用了哪一种。

jak.png

由 AethrisAethris 制作的标志

Turbo Vision 版式旨在呈现出类似 90 年代 DOS 终端的效果 — 试图让它看起来像是由许多 ASCII 字符组成。这是边缘和投影看起来笨重且不对称的原因 — 它们被设计成类似方框绘制符的外观，颜色由字体颜色和独立视窗的背景颜色组成。

尽管如此，我们并没有拘泥于这一准则，我们进行了一些创造性的修改，让使用体验稍稍不那么反人类。

此版式默认附带切换侧边栏，以便增加水平和垂直空间的容量，使你可以任意填充偏移方块。在较小的屏幕上，水平空间非常小，这些偏移方块会自动向内集中到屏幕中央 — 移动端读者不会错过任何东西。

此版式充满了块状结构、笨重、且多彩。应用了它的页面可能看起来就像拥挤的界面上的一大堆窗口一样杂乱无章，这是魅力的一部分；但也不一定如此 — 这取决于你。此页提供了如何自定义版式的说明。

以下分页包含了此版式中一些基础 Wikidot 格式的示例。

请注意，虽然引用方块和表格样式在“组件模式”下可用，但分页样式只在“版式模式”下可用。

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

粗体文本。

斜体文本。

monospaced text.（等宽字）

现在，快速演示一下 Turbo 方块…

此页的以下章节看起来似乎很可怕。但是，你不必惊慌失措 — 每个部分都可以分解为简单的步骤。

scpimage.png

你好这是文本是的

项目编号

SCP-编号

项目等级

LIGMA

特殊收容措施

johnsmith12：嗯，你知道你在做什么吗？

我：笑尿，不知道。我只是得为这个蠢版式起草一些东西。

SCP-编号目前尚未收容。这是否可以归因于它未确认的文字，或者它只是太他妈的烦人，仍然不得而知。

任何情况下对 SCP-编号的目击事件 — 当你在思考这些事情的时候，它们根本没有意义 — 受影响的对象必须回到他们的站点治疗师处接受 104321 号治疗。这种治疗可能持续数小时以上，对受影响的对象来说可能是极其痛苦的。因为介于某些他妈的原因，没人愿意去护士办公室。

我他妈的中午又该吃点什么？

描述

SCP-编号什么都不是。真真正正的什么都不是。实际上，它是一种谎言。就像你一样。你也其实是个谎言。不要感到受伤或烦恼，因为这适用于全世界所有人。我们在这里谴责基金会的歧视。

SCP-3004 是指在蒙古国境外猿猴尸体深处的 2 km2 地区。目前认为，一个个体可以从塞满死虫子和鸽子的袜子中摄取营养。在 SCP-3007 内，除了云类以外，没有发现任何 balaenoptera（鲸类，另一种胎盘哺乳动物）的标本。

从 SCP-1762 突出的是一个男性人形图，大约五个尸体高。受试者能够从其身体中施加极端量的充满球形部件的食物产品。进一步调查显示，其身体构成是一个无限特殊的假期。1当被质疑时，项目报告自己是由软化的材料构成的而不能成为共产主义者。

Footnotes

事实上，我们把什么才能称作为真实？也许感知是个谎言。人与人之间撒下的谎言，也许是？的确，现实对你和我来说不可能都是一样的。我们都有不同的真实和谎言。我们，当然，是三维生物。我们期望理解。我们渴望知识，并将倾其所有地追求知识。

也许你认为我只是在胡言乱语，只想为了增加一个额外的彩色方块而凑字数？也许吧，但除了这个微不足道的理由之外，我只想让你反思片刻。你是真实的吗？不，我已经说过了，你只是个假象。你现在生活的世界的一个假象。仅此而已。

使用方法

创建一个拥有以下类（class）的 div 元素来添加这段文本所在的块状阴影 Turbo 方块：

  • “turbo-block”
  • 一个设置背景颜色的类
  • 一个设置边框颜色的类
  • 一个设置文本颜色的类

此版式提供所有这些类。

方块

“turbo-block”类创建了 Turbo 方块本身。你可以在不添加任何其他类的情况下单独使用它，但它可能看起来很奇怪（例如，它没有背景）。

[[div class="turbo-block"]]
文本
[[/div]]

背景颜色

此版式提供了一系列背景颜色的多功能类，格式为“bg-[颜色]”。如下所示：

[[div class="turbo-block bg-red"]]

[[div class="turbo-block bg-grey"]]

[[div class="turbo-block bg-green"]]

[[div class="turbo-block bg-cyan"]]

[[div class="turbo-block bg-orange"]]

[[div class="turbo-block bg-yellow"]]

[[div class="turbo-block bg-purple"]]

[[div class="turbo-block bg-black"]]

[[div class="turbo-block bg-white"]]

边框颜色

有两种边框颜色类：“border-black”和“border-white”。默认情况下，Turbo 方块没有边框，因此你必须为每个“turbo-block”挑选一种边框。

注意，使用“turbo-block”类创建的所有 div 元素拥有双线边框。引用方块、表格和分页有拥有单线边框。

文本颜色

有两种文本颜色类：“text-black”和“text-white”。分别能使“turbo-block”中的默认文本颜色为黑色和白色。

每个 Turbo 方块可以拥有一个题目（title）和一组标题（heading）。题目是出现在顶部的文本 — 此方块的题目是“标题”。通过向 div 方块添加“data-title”属性来实现：

[[div class="turbo-block ..." data-title="题目"]]

为了与原 Turbo Vision 程序保持一致，方块题目中的拉丁字母应该大写，但这并非强制 — 你可以添加任何文本。

但是，请尽可能保持简短，因为如果它们溢出，看起来会很奇怪：

懂我的意思了吗？

源代码：

[[div class="turbo-block bg-grey border-black text-black" data-title="哎呀，快看我！我是一个非常长的题目！"]]
懂我的意思了吗？
[[/div]]

想想那些可怜的移动端读者吧 — 请保持题目简短。

标题

在 Turbo 方块内部，你可以用“heading”类创建一个小节标题 — 代码如下：

[[div class="heading"]]
标题
[[/div]]

如果你想添加类似标题但没有任何文本的横线，只需通过 4 个或 5 个连字符添加水平分割线：

↑ 就像这样。

你可以在 Turbo 方块内部添加任何东西，包括图像。要添加图像，最好的方法是创建一个 Turbo 方块 div 元素并将标准图像方块组件置入其中。

以下是本页上文示例中所使用的图像 turbo-block 元素：

[[div class="turbo-block bg-orange border-white text-white" data-title="图像"]]
[[include component:image-block
| name=scpimage.png
| caption=你好这是文本是的
]]
[[/div]]

目前为止，使用说明已经介绍了如何创建 Turbo 方块。你可以把一个 Turbo 方块放在另一个 Turbo 方块里，但这样无法营造出一种杂乱无章的感觉，就像缺乏条理的研究员办公桌上一堆乱七八糟的笔记一样 — 要做到这一点，有些方块需要左右移动。

这可以通过使用偏移类（class）来实现。Turbo Vision 版式提供了将元素向左移动的类：

  • “offset-left”
  • “left-1”
  • “left-2”
  • “left-3”
  • “left-4”
  • “left-5”

…以及向右移动

  • “offset-right”
  • “right-1”
  • “right-2”
  • “right-3”
  • “right-4”
  • “right-5”

将元素置于包含两个类的 div 元素中以将其向左移动：“offset left”，及“left-1”到“left-5”中的一个，具体取决于你希望将其向左移动的距离。“left-1”只会移动它一点点，而“left-5”会移动它很多 — 一直移动到屏幕的左侧边缘。

将元素向右移动的方法完全相同，只需将“left”替换为“right”。

移动端偏移

如果你以前使用过 CSS，你可能会认为占用太多水平屏幕空间是一项非常危险的游戏 — 这些偏移 div 元素在移动端上会很难看。

不必害怕！在小尺寸屏幕上，偏移 div 元素将被置于更靠近页面中央的位置。在尺寸非常小的屏幕上，偏移将完全禁用。

对于作者来说，这意味着尽管移动端用户总是能够看到你在偏移 div 元素中所写的全部内容，但它看起来可能不像你预期的那样杂乱无章。在发布之前，一定要在移动端上测试你的设计，以确保每个人的阅读体验都是完整的。

创建偏移方块

组合上述两个类来创建偏移方块，以确定偏移方向和程度：

[[div class="offset-left left-3"]]

[[/div]]

如要偏移 Turbo 方块，请将其置入偏移方块中（不要直接把偏移类添加到 Turbo 方块）：

[[div class="offset-left left-3"]]
[[div class="turbo-block bg-white border-black text-black"]]
你好！
[[/div]]
[[/div]]

你好！

如果你使用的是宽屏浏览器（例如桌面端），则上述示例位于左侧。如果你使用的是窄屏浏览器（例如移动端），则上述示例位于这段文本的上方。

因为偏移方块与 Turbo 方块是不同的元素，这意味着你实际上可以偏移任何内容，只需将其置入带有偏移类的 div 元素中即可。尝试偏移图像 turbo-block 元素！

清除浮动

偏移方块使用了 CSS“float”属性。当一个 HTML 元素浮动时，下方的内容会被向上拉，以填补它留下的空间。

这并不总是可取的。也许你想要一个浮动的偏移方块，但你也希望下方的文本显示在偏移块未浮动时的位置。如果你愿意，这会给你留下一块很大的空白，让你把其他东西放在那里。

你可以使用 CSS“clear”属性来实现 — 一种通常称为“claerfix”的操作。Wikidot 允许你使用4 个波浪符（~~~~）来实现：

[[div class="offset-left left-3"]]
[[div class="turbo-block bg-white border-black text-black"]]
你好！
[[/div]]
[[/div]]

~~~~

你好！

这段文本没有被向上拉以填充空间，导致在桌面端上出现很大的空白。当然，在移动端上没有变化。

示例

下面是所有不同偏移组合的示例。

你的浏览器为宽屏（或者至少 CSS 这么说），所以请查看下面的示例，并调整你的窗口大小，看看偏移 div 元素的反应。

你的浏览器为窄屏（或者至少 CSS 这么说），这意味着你可能在移动端上。下面的偏移示例将显示为一组无聊的、居中对齐的 div 元素。稍后尝试在更宽的浏览器中查看此页以显示偏移。

[[div class="offset-left left-5"]]

[[div class="offset-left left-4"]]

[[div class="offset-left left-3"]]

[[div class="offset-left left-2]]

[[div class="offset-left left-1"]]

[[div class="offset-right right-1"]]

[[div class="offset-right right-2"]]

[[div class="offset-right right-3"]]

[[div class="offset-right right-4"]]

[[div class="offset-right right-5"]]

在一些特定情况下你不应该使用某些偏移类（class）。当然，你仍然可以，但这会对你的页面产生不利影响。

哪些类对你可用取决于侧边栏的位置，以及页面内容是否相对于浏览器视窗居中对齐。这还取决于你是在“版式模式”还是“组件模式”下使用此版式 — 请查看页面顶部的使用说明，以提醒你哪个是哪个。

版式模式

如果使用的是“版式模式”的 Turbo Vision 版式，则会附带切换侧边栏，这会居中对齐页面内容并空出尽可能多的水平空间。你可以自由使用所有的偏移类。

组件模式

如果使用的是“组件模式”的 Turbo Vision 版式，则默认不会附带切换侧边栏。这限制了水平空间。

如果使用了切换侧边栏，则页面正文将居中对齐。你可以自由使用所有的偏移类。

如果不使用切换侧边栏，则页面正文位于页面的右侧。你应该避免使用任何右侧偏移类，因为它们可能会离开屏幕边缘。你还应该避免在页面开头附近使用任何左侧偏移类，因为它们可能会与侧边栏重叠。

如果使用了黑色标记笔 主题版式，页面正文居中，因此你可以自由使用右侧偏移类。但是，侧边栏贯穿整个文档，因此你应该避免使用任何左侧偏移类。

如果使用了黑标和黑标切换侧边栏，这会空出左侧的空间，因此你也可以自由使用左侧偏移类。

太长不看

简而言之：如果有侧边栏，请避免向左偏移；如果页面内容不居中，请避免向右偏移。

版式写完了。

源代码

+ 显示 turbo 方块源代码
+ 显示常规版式源代码
版式
页面版本: 4, 最后编辑于: 27 May 2022 16:24
编辑 评分 (+12) 标签 讨论 (6) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License