版式魔法与你：Wikidot版式全量开发参考手册

评分: +1+–x

这是为开发Wikidot版式所做的教程。

“通用快速修改指南”这一部分适合对HTML/CSS了解不多，或者只是想简单修改主题色/标题/LOGO的读者。

“全量开发指南”这一部分适合已经了解HTML/CSS，并希望基于某个版式大幅修改/不基于任何版式制作新版式的读者。

关于版式设置功能或更复杂的Wikidot功能，另见Wikidot模块参考手册。

Table of Contents

通用快速修改指南

前置知识

HTML/CSS入门

若您完全没有接触过HTML/CSS技术，请阅读此部分。

▼ 展开这部分

在Wikidot中插入CSS

使用[[module CSS]]CSS代码[[/module]]插入CSS。具体见此处。

版式家族

目前在SCP网站中，常用的版式家族树如图所示：

69cbf2314cb4b.png

修改页眉标题、副标题和Logo

修改主题色

组件适配

全量开发指南

前言

编写本指南用到的经验在很大程度上来自一氧化物和过氧化物的开发过程。

在开始写代码之前，明确版式的用途是很有用的。我个人倾向于把版式分成四类（当然，这之间的区分并不绝对）：

  • 基础版式 不基于任何前置版式的版式。例如基岩、至上主义、过氧化物。
  • 美学版式 由基础版式二次开发得来的、适用度比较高的版式。例如平行、玄武岩、夜琉璃。
  • 主题版式 和某个概念强相关的版式，或者专为某个设定而作的版式。例如各种设定和GoI版式。
  • 特种版式 几乎只为达成特定视觉效果而作的版式，如果用在其它内容上会显得很奇怪。例如魔法联盟和流繁星。

Wikidot页面结构参考手册

Wikidot的页面结构如下所示：

container-wrap-wrap

div#container-wrap

div#container
div#header
h1
a

span （网站名称）



h2 (if subtitle exists)

span （网站副标题）


div#top-bar （若网站存在顶栏）

div#login-status

div#header-extra-div-1
为CSS设计预留

span


div#header-extra-div-2
为CSS设计预留

span


div#header-extra-div-3
为CSS设计预留

span



div#content-wrap

div#side-bar
（若网站存在侧栏）

div#main-content

div#action-area-top

div#page-title

div#breadcrumbs

div#page-content
在编辑框中输入的所有内容都位于此div内

div#page-info

div#page-options-bottom.page-options-bottom

div#page-options-bottom-2.page-options-bottom

div#action-area



div#footer

div.options


div#license-area

div#extra-div-1
为CSS设计预留

span

div#extra-div-2
为CSS设计预留

span

div#extra-div-3
为CSS设计预留

span

div#extra-div-4
为CSS设计预留

span

div#extra-div-5
为CSS设计预留

span

div#extra-div-6
为CSS设计预留

span

在div#container之前，还有以下的嵌套结构：body#html-body > div#skrollr-body > div#container-wrap-wrap > container-wrap。

“清空”网页样式的几种方法

若您想要开发基础版式，可参考这一节。

一个问题是大部分Wikidot网站都具有默认版式，例如SCP-CN的Sigma9。而实际上，哪怕不设置默认版式，Wikidot也有一个“空白基板”，它看起来长这样，你在网站样式加载失败时很有可能见过它：

69d3deb0a5090.png

眼熟不？这样的情景在全wikidot的各处上演，你可能就是下一个……

可以通过引入我也不知道是谁搓出的这个压缩的CSS文件，针对Sigma-9和这个空白基板，清空所有的样式：

@import url('https://cdn.scpwiki.com/theme/en/basalt/normalize-min.css');

另外一种方式是使用[[module ThemePreviewer]]。这是一种类似[[module CSS]]的模块，能为页面自动引入CSS并自动覆盖网站默认样式。并且，由于Wikidot模块的性质，这种方法有可能降低版式加载失败的概率。不过，它不支持分段引入版式。

[[module ThemePreviewer noUi="true" theme_url="你的版式代码链接"]]

[[module ThemePreviewer]]还有一个小问题是，由于“打印”页面使用的是网站样式，并且不解析部分模块的内容，这就使得使用Wikidot自带的打印功能时，你的版式不会加载——只有网站默认版式。

Wikidot页面元素样式覆盖参考手册

好了，一切就绪！让我们开始吧。

页面基础元素

文本大小、间距、字体和颜色

我个人强烈建议你从这里开始修改，尤其是在使用Sigma-9或基岩作为母版的情况下。这两个版式，尤其是在中文环境下，都有一个严重的排版问题：Sigma-9字体太小，基岩页面太宽。在阅读舒适性方面，前者的严重程度远甚于后者，以至于英文站新的全站版式Sigma-10最重要的更改就是整体字号加大。

一般来说，一行有30~50个中文字符是最适合阅读的，同一行内的字符太多会让读者的视线被迫不停在页面两端之间移动。考虑到我们是一个长文本阅读情景出现的非常频繁的网站，这会导致严重的视觉疲劳。此外，在页面变窄（例如手机端）时，字体大小的问题会更明显。

Sigma-9正文字体大小是0.8em，考虑到浏览器通常的默认根字体大小为16px，实际表现出的字体大小大概是12px。这简直是正常视力人类可长时间阅读的文字大小下限了。根据WCAG（Web内容无障碍指南）标准和Wikidot实际情况，我会在此给出一份可供参考的基础排版参数：

  1. html/:root的font-size大小
    • 至少为14px，推荐16px。
  2. #page-content的每行字符数、行距和字符间距
    • 使用rem设定页面内容最大宽度。
    • 对移动端可以额外设置字符大小和页面宽度。
    • 每行字符数为35~50，行距为1.5~1.75，字符间距推荐为0，最低为0，最高不要超过0.16倍字体大小。
  3. 段落间距
    • 段落间距至少为行距的1.5倍。
  4. 背景和字体颜色
    • 常规文本：4.5:1；大号文本：3:1
    • 尽可能避免使用纯粹的“黑底白字”，这对散光人群不友好。使用#1a1a1a和#eeeeee的背景和字体颜色。

等宽字

引用块

多种引用块

wiki-note

代码块

表格

分页（Tabview）

Wikidot的分页使用了上古时代（原谅我一直在用这个词，但真的很古老）的Yahoo UI Library。

列表

链接

图片

数学公式

脚注

报错提示

模块

评分模块结构和样式

ListPages模块结构和样式

siteChanges模块结构和样式

files模块结构和样式

其它一些模块

页眉元素参考

页眉结构

在页眉使用Grid布局

顶栏

覆写顶栏呼出和收起效果

二级和多级顶栏

个人信息

侧栏元素参考（以SCP中分侧栏为例）

呼出侧栏的方式

Interwiki

页面内其它元素参考

底部按钮区域

版权信息和页脚

动作区域（action-area）开发参考

动作区域指的是div#action-area，这是版式开发中最复杂的部分之一。

编辑框

编辑按钮

评分

标签

历史记录

附件

网站工具

编辑元信息

关注者

反向链接

页面源代码

父页面、锁定页面、重新命名

删除

讨论区样式开发参考

帖子的HTML结构

讨论区的帖子编辑框

Wikidot通用按钮类

选择器

Wikidot的按钮类可以说是乱七八糟，a与input齐飞，.btn共.button一色，还有时不时出现的.danger之类的鬼东西。没有任何类是描述按钮用途或者它出现在哪儿的。当你觉得这已经够恶心的时候，有些看起来像按钮、用起来像按钮、出现的位置也像按钮的东西甚至压根就没有.btn类或者类似的东西。你就不要指望任何现代的CSS做法在这儿能起效果。

另外，也不推荐给类似.btn-small的类设置符合类名的样式，因为大部分情况下这些按钮都是完全并列展示的，若是让其中一个变小，视觉平衡会被破坏。这是没办法的事，Wikidot开发的年代实在太早了，那时没人在正经设计网页UI，现在我们只能凑合着来。

我个人推荐的做法是为以下选择器设置相同的样式（没人知道有些组合是否存在，但我尽可能保证覆盖到所有按钮的同时保留最基本的分类特征）：

:where(a, input, button).button,
:where(a, input, button).btn,
:where(a, input, button).button.default,
:where(a, input, button).btn.default,
:where(a, input, button).button.btn-default,
:where(a, input, button).btn.btn-default, {}

并为以下选择器设置危险色和主题色：

:is(a, input, button).danger,
:is(a, input, button).btn-danger {}
 
:is(a, input, button).primary,
:is(a, input, button).btn-primary {}

若你需要为某个按钮设置特有的样式，我个人会推荐你直接用类似:where(a, input, button)[onclick="<content>"]的选择器，这是唯一能区分按钮用途的办法了。

但正如上文所言，部分“按钮”没有Wikidot的按钮类，几个已知的实例如下：

  • 页面底部选项 - 网站工具，有3个id以-button结尾的a元素，用于展示工具界面。
  • 页面底部选项 - 评分，1个没有任何特征的a元素，用于显示评分用户列表。

Wikidot弹窗

当弹窗被生成时，将会出现与div#skrollr-body同级的div#odialog-container、div#odialog-shader.odialog-shader、iframe#odialog-shader-iframe三个全屏大小的元素。

以下是其默认样式：

#odialog-container {
    /* background-color: red; */
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 50;
    width: 100%;
}
 
.odialog-shader-iframe {
    filter: alpha(opacity=0);
    opacity: 0;
}
 
.odialog-shader {
    background-color: #222;
    filter: alpha(opacity=80);
    opacity: 0.8;
}

filter: alpha(opacity=0)是2000年代IE浏览器的老资历写法。在这里我们可以看到，背景变暗的效果是由div#odialog-shader.odialog-shader负责的。

div#odialog-container是弹窗元素div#owindow的父容器。Wikidot会在打开弹窗时通过当时的页面宽高计算弹窗的位置和大小，实现垂直居中。在现代浏览器中我们当然推荐使用flex布局来实现这个效果，这需要使用!important强行覆盖Wikidot的内联样式。以下是代码示例：

#odialog-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}
 
.owindow {
    position: relative;
    max-width: min(40rem, 90vw);
    max-height: 90vh;
    left: 0 !important;
    top: 0 !important;
    width: unset !important;
}

通常来说，弹窗div#owindow内的结构包括div.title.modal-header、div.content.modal-body、div.button-bar.modal-footer三个同级元素，分别是弹窗标题、内容主体和底部按钮栏。

但是，在部分弹窗中，div.button-bar.modal-footer是div.content.modal-body的子元素……除了刻意折磨人外，实在想不明白Wikidot为什么要这么设计。

弹窗默认是可以拖动的（虽然显然没什么用），如果你已经用flex布局覆盖了原来的样式，请为div.title.modal-header设置cursor: default。此外，如果希望实现通用的“点击其他区域退出”，可以为如下选择器设置样式：

.owindow .button-bar .btn[onclick*="cleanAll"], 
a.btn.btn-default.button.button-close {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    padding: 0;
    border: none;
    background: transparent;
    z-index: -1;
    cursor: pointer;
}

在此情况下，你或许会希望让底部按钮栏在没有按钮的情况下高度变低。这可以使用有恒定内边距、height: auto的flex布局实现。

需要注意的是，不是所有弹窗都有“关闭弹窗”的按钮，例如关于是否保留草稿的弹窗会强制用户在两个选项中选择一个。

个人信息弹窗

div.content.modal-body包含以下结构：

<div class="content modal-body">
    <img style="float:left; padding: 2px 8px; background-color: #FFF;" src="https://www.wikidot.com/avatar.php?userid=6227689&amp;timestamp=1775025131" alt="">
    <h1>OxygenNine</h1>
    <table class="table">
        <tbody>
            <tr>
                <td class="active col-md-3 col-sm-3 col-xs-3 span3">
                    <b>真实姓名</b>
                </td>
                <td> OxOOOOOOOO </td>
            </tr>
            <tr>
                <td class="active">
                    <b>网站</b>
                </td>
                <td>
                    <a href="https://scp-wiki-cn.wikidot.com/o9">https://scp-wiki-cn.wikidot.com/o9</a>
                </td>
            </tr>
            <tr>
                <td class="active">
                    <b>Wikidot.com 用户始于：</b>
                </td>
                <td>
                    <span class="odate time_1584230285 format_%25e%20%25b%20%25Y%2C%20%25H%3A%25M%20%28%25O%20%E5%89%8D%29" style="display: inline;">15 Mar 2020, 07:58 (2208 days 前)</span>
                </td>
            </tr>
            <tr>
                <td class="active">
                    <b>关于</b>
                </td>
                <td>
                    <em>我喜欢你</em>
                </td>
            </tr>
            <tr>
                <td class="active">
                    <b>账户类型</b>
                </td>
                <td> free </td>
            </tr>
            <tr>
                <td class="active">
                    <b>活跃等级（Karma）</b>
                </td>
                <td> 上师 <img src="//www.wikidot.com/userkarma.php?u=6227689&amp;onlyKarma=true"> (<a href="https://www.wikidot.com/doc:karma" target="_blank">这是什么？</a>)<br>
                </td>
            </tr>
            <tr>
                <td class="active">
                    <b>本站成员始于</b>
                </td>
                <td>
                    <span class="odate time_1662276531 format_%25e%20%25b%20%25Y%2C%20%25H%3A%25M%20%28%25O%20%E5%89%8D%29" style="display: inline;">4 Sep 2022, 15:28 (1304 days 前)</span>
                </td>
            </tr>
            <tr>
                <td class="active">
                    <b>在该站点的角色</b>
                </td>
                <td> 网站主要管理员 </td>
            </tr>
        </tbody>
    </table>
    <div style="margin-top: 10px">
        <div style="float:right">
            <a href="javascript:;" class="btn btn-danger btn-small btn-sm" onclick="WIKIDOT.modules.UserInfoWinModule.listeners.flagUser(event, 6227689)">标记为不当行为用户</a>
            <!--<span id="user-abuse-report-button">?</span>-->
        </div>
        <a href="http://www.wikidot.com/user:info/oxygennine" class="btn btn-primary">个人信息页面</a>
        <a href="http://www.wikidot.com/account/messages#/new/6227689" class="btn btn-primary">撰写私人讯息</a>
        <a href="javascript:;" onclick="WIKIDOT.modules.UserInfoWinModule.listeners.addContact(event,6227689)" class="btn btn-primary">添加至通讯录</a>
    </div>
</div>

编辑框弹窗

警告和提示

来把Saving Pages干掉吧！

适配SCP维基常用元素类

等效类

隐藏标签

适配和预装SCP维基的常用组件

标准插图块

版权信息

Wikiwalk

多重折叠模块

著作信息模块

著作信息模块的设计问题

独立著作信息组件

ACS

Sigma-9提供的额外排版元素

可访问性和无障碍

配色方案

对比度检查

响应式布局

引用源的速度和可访问性

推荐的CDN

发布前最后测试

压力测试和灰度测试

热更新

长期支持

引用

引用方式和版式展示页

设置引用参数

让更多人使用！

写在最后

附录：各基础版式变量手册

Sigma+

黑色标记笔

基岩

一氧化物/过氧化物

至上主义

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