Dentrado, read-only mode: mirroring http://backrooms-wiki-cn.wikidot.com/layout-helpersAbout Dentrado
排版工具组 2.0
95593ce48cf6e20c82c84eede53f3336166060d2deb7e2e371a53e39b0b0e3f5.image.png

[[f>toc]]

介绍

++* 这是什么？

排版工具组（Layout Helpers）是由 Eltrac 制作的 CSS 组件，意在为代码基础薄弱的写手和新人提供易于使用的排版工具，提升文档的美观度。

这个组件包含了Wikidot 上许多后室文章常用的元素，譬如便签纸、隐藏文档等等。你还可以使用该组件创建简易的单页迭代，在部分情况下可以替代繁琐的 ListPages 迭代。除此之外，还有网格布局、附加类等能够提高文章表现力的进阶工具。

这些内容对于熟悉 CSS 的人来说可能十分简单，并认为没有为此制作一个组件的必要，但请记住这是给那些没有代码基础的人提供的。

++* 如何使用？

若想要使用该组件，请在页面顶部添加以下代码：

[[include :backrooms-wiki-cn:component:layout-helpers]]

但这仅仅是引入了 CSS，若要使用这些组件，请阅读以下文档。

相关语法基础

这一节是给对维基语法中的 div 和 span 语法不熟悉的使用者准备的，如果你已经熟知如何使用 div 和 span 标签，并懂得如何为他们添加 class 类名，那么你可以跳过本节。

+ 展开本节内容

版式内置排版元素

网站的默认版式（即阈限版式）以及 Wikidot 上的大部分版式都有内置的可以用在文章里的 DIV 元素，这些元素不需要引入排版工具组就能使用，并且适用于大部分场景。在决定使用排版工具组之前，可以考虑一下它们，排版工具组在设计的时候也避免了与它们发生重复。

以下仅展示默认版式提供的 DIV，其他版式请参考对应的页面。

[[div class="blockquote"]]

[[/div]]

[[div class="lightblock"]]

[[/div]]

[[div class="darkblock"]]

[[/div]]

[[div class="styled-quote"]]

[[/div]]

[[div class="dark-styled-quote"]]

[[/div]]

常规排版工具

文字修饰（Text Decoration）

+++* 强调文字

在没有引入 排版工具组时，你可以这样对部分文字进行强调或修饰。

--这是一段删除文本--
__这是一段划线文本__
//这是一段斜体文本//
**这是一段加粗文本**
{{这是一段等宽字}}
这是^^上标^^
这是,,下标,,
+ 展开查看效果

引入排版工具组后，你有了更多强调文本的方式。

[[span class="text-highlighted"]]高亮文字[[/span]]
[[span class="text-underlined"]]划线文字[[/span]]
[[span class="text-wavy"]]波浪线文字[[/span]]
[[span class="text-circled"]]圈出来[[/span]]的文字。
[[span class="text-squared"]]框出来[[/span]]的文字。
[[span class="text-shadow"]]带有阴影的文字[[/span]]

这是一段划线更粗的划线文字，而且线距离文字更远，不会和 g、y 这样比较高的字母交缠在一起
波浪线文字，他和上一行划线文字拥有一样的粗细和间距
一段被高亮的文字，看起来像是用标记笔划过一样
被圈出来的文字，用来标记错误或者值得注意的地方
被框出来的文字，给那些不太喜欢圆圈的人
一段带有阴影的文字，很酷吧~

+++* 隐藏文字

你还可以遮掩部分文本来营造某种神秘效果。

[[span class="text-blank"]]隐藏文字[[/span]]
[[span class="text-blank text-hoverback"]]隐藏文字，但是鼠标移动上去会显示[[/span]]
[[span class="text-blank text-selectback"]]隐藏文字，但是被选择时会显示[[/span]]

[[span class="text-block"]]黑块文字[[/span]]
[[span class="text-block text-hoverback"]]黑块文字，但是鼠标移动上去会显示[[/span]]
[[span class="text-block text-selectback"]]黑块文字，但是被选择时会显示[[/span]]

[[span class="text-blur"]]模糊文字[[/span]]
[[span class="text-blur text-hoverback"]]模糊文字，但是鼠标移动上去会显示[[/span]]

隐藏文字
隐藏文字，但是鼠标移动上去会显示
隐藏文字，但是被选择时会显示

黑块文字
黑块文字，但是鼠标移动上去会显示
黑块文字，但是被选择时会显示

模糊文字
模糊文字，但是鼠标移动上去会显示

提示框（Info Block）

[[note]]
这个提示框原本由 hoah2333 制作，Eltrac 将其移植到了排版工具组里。
[[/note]]

这个提示框用于提示世界观外的读者有关文章的一些可能敏感的内容。

[[span class="infoblock"]]本文带有敏感内容，请谨慎阅读。[[/span]]

本文带有敏感内容，请谨慎阅读。

对于更重要的提示，可以用附加类将提示框的背景改为显眼的红色。

[[span class="infoblock with-bg-red"]]本文带有非常敏感的内容，请谨慎阅读。[[/span]]

本文带有非常敏感的内容，请谨慎阅读。

便签纸（Note）

带有横线和边框的 div，类似笔记本的纸页，可以用来制作流浪者的日记本或者留下的纸条。

+++* 常规便签

[[div class="notepaper"]]
这是一个普通的便签
可以在上面写普通的文字
带来一种普通的观感
[[/div]]

+++* 更窄的便签

[[div class="notepaper narrow"]]
这是一个窄窄的便签
可以在上面写窄窄的文字
带来一种窄窄的观感
给便签加上 narrow 类！
[[/div]]

+++* 没那么窄的便签

[[div class="notepaper wide"]]
这是一个窄窄的便签
可以在上面写窄窄的文字
带来一种窄窄的观感
给便签加上 wide 类！
[[/div]]

+++* 文字更紧密的便签

[[div class="notepaper narrow tight"]]
这是一个文字排列更紧密的便签
可以在页面里贴上一段紧密的文字
带来一种紧密的观感
给便签加上 tight 类！
[[/div]]

+++* 带有胶带的便签

[[div class="notepaper narrow with-tape"]]
这是一个带有胶带的便签
可以在页面里贴上一段普通的文字
带来一种特别的观感
给便签加上 with-tape 类！
[[/div]]

+++* 带有隔离绳的便签

[[div class="notepaper narrow with-string"]]
这是一个带有隔离绳的便签
可以在上面写不太一样又没有什么区别的文字
带来一种特别的观感
给便签加上 with-string 类！
[[/div]]

+++* 纸页式便签

这是一个纸页式的便签
可以在上面写不太一样又没有什么区别的文字
它有着固定的高度和页码
带来一种整齐的观感
纸页式便签需要两个 div！

[[div class="notepaper page with-string"]]
[[div class="notepaper-content"]]
文字
[[/div]]
[[/div]]

这是纸页式便签的第二页
你可以在这一页的最下面看到它的页码
并且它是自动计数的
你只需要造 div 就好啦

通常情况下，纸页式便签会计算这一页所有的纸页并显示页数
如果你需要在一页中添加多组纸页，你可以把一组纸页放在一个 div 里：

[[div class="notepaper-group book-pattern"]]
你的纸页们
[[/div]]

+++* 书页式便签

这是一个书页式便签
用来写日记或许是个不错的选择
一行可以显示两页
但是在小屏幕上看的话，就和纸页式便签没有区别

要做出这样的效果，你只需要把你的纸页式便签都放在一个 div 里

[[div class="notepaper-group book-pattern"]]
你的纸页式便签们
[[/div]]

+++* 书衣

你可以给你的书页式便签套上书衣

[[div class="notepaper-group book-pattern book-wrapper"]]
你的纸页式便签们
[[/div]]

要注意的是，notepaper-group 类会重置页面计数器，，如果你需要制作多个带有书衣的书页组，但并不希望他们的页数重新开始计数，可以这样做。

[[div class="notepaper-group"]]
[[div class="book-pattern book-wrapper"]]
第一页和第二页
[[/div]]
[[div class="book-pattern book-wrapper"]]
第三页和第四页
[[/div]]
[[/div]]
关于如何修改书衣颜色

—
—

—

—

维基笔记（Wiki Note）

—
这是 Wikidot 的一个原生元素，写法十分简易，用起来很方便，但它貌似被大多数版式作者和写手忘记了，很少被用到，于是我重写编写了它的样式，现在它可以当做一个方便的文档批注来使用。

不过在此之前，因为部分主题仍然修改了维基笔记的样式，与排版工具组可能存在冲突，故没有默认引入样式。如果要使用，只需要将引入排版工具组的语句稍作修改，变成这样：

—

—[[include :backrooms-wiki-cn:component:layout-helpers |wiki-note=true]]
—

—
然后在你需要插入批注的地方写上：

—

[[note]]
添加笔记内容
[[/note]]

—

[[note]]
就像这样，是不是很方便？
[[/note]]

你也可以修改这个笔记上的「批注」二字，但只能全局修改，加入这段代码即可。

—

[[module CSS]]
:root {
   --lh-note-title: "笔记，或者其他文字";
}
[[/module]]

—

—

告示（Sign）

—
在世界观里，有些组织可能会在文档里加入诸如通告、警告之类不属于正文的提示性文本，这通常需要突出显示，就像这样：

—

—
+* 须知
经监督者议会商定，所有决定长期居住于旅馆房间的人员，无论其在社交网络上活跃程度如何，都会被标记为MIA，其将不再享有探险者总署的各项权利和福利。此决议长期有效。
—

—

8471c8db30484ea7951561f4d74fdbf73ff251262170fcfadc10d4561bbae0aa.image.png

—

—
M.E.G. - 监督者
—

—

这段文字来自SUPER HOT编写的旅馆房间。

—

[[div class="signblock"]]
+* 标题
告示内容
[[div class="signblock-img"]]
[[image http://natedagreat563.wdfiles.com/local--files/storage-unit/Meglogo]]
[[/div]]
[[span class="signblock-footer"]]署名[[/span]]
[[/div]]

—

+++* 深色告示

给 div 加上 signblock-dark 即可获得以下效果。

—

—
+* 须知
经监督者议会商定，所有决定长期居住于旅馆房间的人员，无论其在社交网络上活跃程度如何，都会被标记为MIA，其将不再享有探险者总署的各项权利和福利。此决议长期有效。
—

—

8471c8db30484ea7951561f4d74fdbf73ff251262170fcfadc10d4561bbae0aa.image.png

—

—
M.E.G. - 监督者
—

—

—

[[div class="signblock signblock-dark"]]
+* 标题
内容
[[div class="signblock-img" style="filter: invert(100%)"]]
[[image http://natedagreat563.wdfiles.com/local--files/storage-unit/Meglogo]]
[[/div]]
[[span class="signblock-footer"]]署名[[/span]]
[[/div]]

—

+++* 警示

给 div 加上 signblock-warn 即可获得以下效果。

—

—
+* 警告
经监督者议会商定，所有决定长期居住于旅馆房间的人员，无论其在社交网络上活跃程度如何，都会被标记为MIA，其将不再享有探险者总署的各项权利和福利。此决议长期有效。
—

—

8471c8db30484ea7951561f4d74fdbf73ff251262170fcfadc10d4561bbae0aa.image.png

—

—
M.E.G. - 监督者
—

—

—

[[div class="signblock-warn"]]
+* 标题
内容
[[div class="signblock-img" style="filter: invert(100%)"]]
[[image http://natedagreat563.wdfiles.com/local--files/storage-unit/Meglogo]]
[[/div]]
[[span class="signblock-footer"]]署名[[/span]]
[[/div]]

—

—

报告（Report）

—
在世界观里，数据库文档可能会插入一些实验报告或是行动报告，就像这样：

—

[[div class="reportblock"]]
+* 标题
**研究人员：**XXX
**报告时间：**XXX
------
正文内容
------
结尾内容
[[/div]]

—

—

—
+* 不知道什么 实验报告
研究人员：不知道是谁
报告时间：2020/12/1

记录开始。

阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴……

记录结束。

总结：……
—

—

+++* 深色报告

给 reportblock 加上 reportblock-dark 类，即可获得以下效果

—

[[div class="reportblock-dark"]]
+* 标题
**研究人员：**XXX
**报告时间：**XXX
------
正文内容
------
结尾内容
[[/div]]

—

—

—
+* 不知道什么 实验报告
研究人员：不知道是谁
报告时间：2020/12/1

记录开始。

阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴……

记录结束。

总结：……
—

—

—

更好的折叠框（Better Collapsible）

—
你可以这样让单调的折叠框变得好看一些。

—

[[div class="bettercollap"]]
[[collapsible show="展开内容" hide="收起内容"]]
被折叠的内容
[[/collapsible]]
[[/div]]

—

—

—

展开内容

—

—

这样写可以让多个折叠框紧凑地排列在一起。

—

[[div class="bettercollap"]]

[[collapsible show="展开内容" hide="收起内容"]]
被折叠的内容
[[/collapsible]]

[[collapsible show="展开内容" hide="收起内容"]]
被折叠的内容
[[/collapsible]]

[[collapsible show="展开内容" hide="收起内容"]]
被折叠的内容
[[/collapsible]]

[[/div]]

—

—

—

展开内容
展开内容
展开内容

—

—

为 bettercollap 元素添加 styledcollap 类可以让折叠框变得更美观。

—

[[div class="bettercollap styledcollap"]]
[[collapsible show="展开内容" hide="收起内容"]]
被折叠的内容
[[/collapsible]]
[[/div]]

—

—

—

展开内容

—

—

—

进阶排版工具

—
以下这些内容操作起来可能有较高的门槛，但使用合理可以为你的文章增色不少。

—

CSS 单页迭代（CSS Offset）

—
CSS 迭代与常规的 Listpages 迭代以及这个教程里的单页迭代不同，它更小巧，很容易上手，任何人都能用它来制作迭代。

—

—

附录：什么是迭代？

—

—

要创建 CSS 迭代，你需要把每个页面的内容都用一个 DIV 装起来，为它们分别加上独一无二的 ID，并设置一个默认页面。注意要把默认的第一页放在最后，并且默认页不写 offset-page 类，只设置 ID 为 default-page，就像这样：

—

[[div class="offset-page" id="page-2"]]
我是页面 2
[[/div]]

[[div class="offset-page" id="page-3"]]
我是页面 3
[[/div]]

[[div id="default-page"]]
我是页面 1
[[/div]]

......

—

然后，通过这样的超链接跳转到各个页面（注意在你设置的 id 前加上

  1. u-
）。

—

[#u-default-page 跳转到页面 1]
[#u-page-2 跳转到页面 2]
[#u-page-3 跳转到页面 3]

—

最后的效果如下（边框是特地加上的，正常使用时不会有边框）：

—

—
—

—
我是页面 2
跳转到页面 3
—

—

—

—
我是页面 3
跳转到页面 1
—

—

—

—
我是页面 1
跳转到页面 2
—

—
—

—

—

网格布局（Gridder）

—
[[note]]
部分非现代浏览器（尤其是手机自带的浏览器）可能不支持这个功能。
[[/note]]

网格布局允许你在一行内展示多个块，就像这样，我加上了不同的背景色以区分不同列的内容：

—

—
—

—
我是第一个块
—

—
—

—
我是第二个块
—

—
—

—

—

[[div class="gridder"]]

[[div]]
我是第一个块
[[/div]]

[[div]]
我是第二个块
[[/div]]

[[/div]]

—

在类名为 gridder 的容器下，所有的 DIV 都会按照预设好的方式排列。默认的是每行两个，当然也可以设置成其他的，比如每行三个。

—

—
—

—
我是第一个块
—

—
—

—
我是第二个块
—

—
—

—
我是第三个块
—

—
—

—

—

[[div class="gridder gridder-col-3"]]

[[div]]
我是第一个块
[[/div]]

[[div]]
我是第二个块
[[/div]]

[[div]]
我是第三个块
[[/div]]

[[/div]]

—

将 gridder-col-3 中的 3 改为 4 就能一行显示四个，目前每行仅支持显示 2~4 个块。

[[note]]
注意是 gridder 不是 grider，其中的 d 要双写。
[[/note]]

如果一行显示的块超过两个，在小屏幕下就会显得很挤，在类名前加上 pc- 前缀可以让 Gridder 仅在大屏幕（≥768px）上起作用，比如 pc-gridder-col-3。同时，你还可以同时使用两种类名，比如下面的代码就实现了在大屏幕下一行四个，小屏幕下一行两个的效果。

—

[[div class="gridder pc-gridder-col-4"]]
......
[[/div]]

—

你还可以让 Gridder 里的格子进行”跨越“，也就是让某个格子比其他的宽。

—

—

—

—
我跨越了两个格子
—

—

—

—
我是一个普通格子
—

—

—

—
我是一个普通格子
—

—

—

—
我是一个普通格子
—

—

—

—
我是一个普通格子
—

—

—

—

—

[[div class="gridder-col-4"]]

[[div class="spanner" style="background:red"]]
我跨越了两个格子
[[/div]]

[[div style="background:orange"]]
我是一个普通格子
[[/div]]

[[div style="background:yellow"]]
我是一个普通格子
[[/div]]

[[div style="background:green"]]
我是一个普通格子
[[/div]]

[[div class="spanner-3" style="background:blue"]]
我是一个普通格子
[[/div]]

[[/div]]

—

其中，给 DIV 加上 spanner 或 spanner-2 类可以让它跨越两个格子，而 spanner-3 可以跨越三个。

—

附加类（With Patterns）

—
这里列出了一些可以给 div 或者 span 附加样式的类名，以 with- 开头，通常是添加边框和文字颜色的小改动，就不赘述，只列出可用的类名。

+++* 添加边框

—

— 类名 —— 适用于 —— 效果 —
— with-border —— div —— 为元素添加宽度为 1px，颜色跟随 —bright-accent 的边框
with-border-dark div 与 with-border 效果相同，但颜色为更深的 —black-monochrome —
— with-border-light —— div —— 与 with-border 效果相同，但颜色为更浅的 —white-monochrome
with-border-thick div 将边框宽度改为 2px，需与以上三个类中的任意一个同时使用

+++* 调整边距

类名 适用于 效果
with-padding div 为元素添加内边距，宽度为 1em，即一个字宽
with-margin div 为元素添加竖直方向的外边距，宽度为 1em
with-p-sm div 元素内边距设置为 0.5em
with-p-lg div 元素内边距设置为 2em
with-m-sm div 元素外边距设置为 0.5em
with-m-lg div 元素外边距设置为 2em

+++* 添加阴影

类名 适用于 效果
with-shadow div 为元素添加阴影
with-shadow-sm div 为元素添加较小的阴影
with-shadow-lg div 为元素添加较大的阴影
with-shadow-xl div 为元素添加更大的阴影
with-shadow-xxl div 为元素添加最大的阴影

+++* 其他

类名 适用于 效果
with-box-style div with-border、with-padding、with-margin 的组合简写法
with-narrow-width div 将 div 块的宽度变为页面宽度的 75%，小屏幕为 90%，对文中诸如报告这样的 div 也有效，类似于便签的 narrow 类
with-bg-* div, span… 为元素添加背景色，同时将文字颜色改为白色，将 * 替换成 red/blue/green/darkgreen/yellow/orange/purple 任意一个即可生效

删除类（Offwith Patterns）

类名 适用于 效果
offwith-shadow div 删除阴影
offwith-border div 删除边框
offwith-padding div 删除内边距
offwith-margin div 删除外边距
offwith-pam div offwith-padding 和 offwith-margin 的组合写法，pam 意为 padding and margin
offwith-width-limit div 删除宽度限制，可以让 blockquote 展开至最大，与 with-narrow-width 冲突
offwith-grid-gap .gridder 等 删除网格布局中各个块之间的间隙

自定义变量

:root {
    --lh-paper-bg: 255, 251, 240; /* 便签纸的背景色 */
    --lh-string-color: 192, 57, 43; /* 便签纸隔离绳的颜色 */
    --lh-book-color: var(--gray-monochrome); /* 书衣的颜色 */
    --lh-tape-color: 90,90,90,0.3; /* 便签纸胶带的颜色 */
    --lh-white-bg: 249,249,249; /* 部分元素的白色背景 */
    --lh-dark-bg: 50, 50, 50; /* 部分元素的黑色背景 */
    --lh-highlighter: var(--bright-accent); /* 高亮文字的装饰线颜色 */
    --lh-border-color: var(--gray-monochrome); /* 部分元素的边框颜色 */
    --lh-wiki-note-color: var(--bright-accent); /* 维基笔记的颜色 */
    --lh-note-title: "批注"; /* 维基笔记的标题 */
}
Dependencies