Colmod 魔法与你
评分: +69+–x

这是什么

我CroquemboucheCroquembouche用在一大堆页面上的一大堆各种各样的CSS“改进”，因为我觉得这样就能使其更容易处理。

该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点（也就是我经常干的事）。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。

我不期望用了这个组件的文章的翻译版也会用到这个组件，除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。

这个组件可能不会与其它组件或版式冲突，且即使会冲突，也可能不会有什么影响。

用法

在任意维基上：

[[include :scp-wiki:component:croqstyle]]

该组件被设计于与其它组件一同使用，所以-=-是用来隐藏该文档的。在另一个组件内使用时，请确保将该组件放在[[iftags]]块内，这样你的组件的用户就不会强制同样使用 Croq 风格。

相关组件

其它个人自定义组件（只会改变一点点东西）：

个人自定义版式（在视觉上有大的变化）：

CSS修改

大小合理的脚注

不让脚注达到一百万里那么宽，让你能确实地阅读脚注。

.hovertip { max-width: 400px; }

等宽字体编辑/代码

使编辑文本框内字体等宽，且将所有等宽字文本改为Fira Code，也是个明显很优秀的等宽字字体。

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

电传打字机背景

给<tt>元素加上亮灰色的背景（{{文本}}），使得代码片段更为突出。

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

不要大脸

禁用悬停于某人的头像的时候出现的大图片，因为这图片又蠢又真的很烦人，想看大头像版本的话直接点击一下就行了。

.avatar-hover { display: none !important; }

碎裂碎裂

任何在带有nobreak类的div中的文本可以在字母间自动换行。

.nobreak { word-break: break-all; }

代码颜色

将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题，但是现在暂时这还是我的个人主题，是从Tomorrow Night Eighties中衍生而来的。

还有，将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中，因为Wikidot嵌入了一大堆语法来使其高亮，不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

调试模式

将位于.debug-mode中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。

你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间，让注释不会与其上方或下方的东西重叠。

……就像这样！

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
▷ 显示代码 ◁

如果你看过几篇指导，那么你应该已经知道：

以及，你应该注意到了多重折叠模块（Colmod）和它在各种细节上与普通折叠块的差异。他们是怎么成功实现 wikidot 不支持的折叠块嵌套的？为什么玄武岩版式对折叠块的样式修改在多重折叠上不起作用？

这篇文章将为你解答这些问题，并展示一些基于多重折叠的代码特技。我们的目标是成为多重折叠大师Colmod Master！

—— Dr HormressDr Hormress

※本文默认读者理解 HTML/CSS 语法以及相关的专有名词，如果不了解可以百度或者干脆划到示例部分复制代码自行测试。

多重折叠模块由日分的 Boyu12Boyu12 制作。

我希望你已经注意到过这个模块，如果没有，这里是一个示例：

    • _
    + 打开- 关闭

    就像这样…

      • _
      + 打开- 关闭

      不管多少次…

        • _
        + 打开- 关闭

        都可以折叠起来。

        [[include component:coltop show=+ 打开|hide=- 关闭]]
        就像这样…
        [[include component:coltop show=+ 打开|hide=- 关闭]]
        不管多少次…
        [[include component:coltop show=+ 打开|hide=- 关闭]]
        都可以折叠起来。
        [[include component:colend]]
        [[include component:colend]]
        [[include component:colend]]

1：Colmod 的原理

要实现折叠块这样在不同状态切换的效果，一般需要先实现两个选择器之间的切换，再利用 CSS 更改内容元素的display属性。Wikidot 自带的折叠块便是使用 JavaScript 操控元素在collapsible-block-folded和collapsible-block-unfolded两个 class 之间切换，以此切换collapsible-block-content的显示状态。

另一种常见的切换方式是:target选择器，它能够轻松实现元素样式的切换，使用例如用户 Dr HormressDr Hormress 的文章 SCP-CN-2626、SCP-CN-2801 以及用户 Chris EvertworthChris Evertworth 的大部分文章。然而，:target选择器有一个非常严重的问题：它会改变页面链接，而且使用时会与同样使用:target选择器的移动端侧栏按钮、页面目录相冲突。

那么，既与 wikidot 原版折叠块不同，又不会改变链接的多重折叠模块应用了什么技术？前面提到的一篇指导实际上已经给出了答案：

其中一个我被问的最多的组件是关于如何实现双重折叠块的。

它们做起来没有那么难。需要注意的是，每一级的星号前都比前一级多一个空格。

代码：
[[div class="foldable-list-container"]]
* Lol 折叠
* 第二个
* 更多
* 甚至更多
* 测试
[[/div]]
结果：

  • Lol 折叠
    • 第二个
  • 耕垛
    • 甚至耕垛
      • 测试

你也可以改变可折叠列表容器div，但编辑css模块来将元素包含在div中。要理解如何实现，请见第三和第四节。

~ 你与高级格式

这种折叠列表也是通过 wikidot 的内置 JavaScript 实现的，它会使列表项目在被点击时切换两个类folded和unfolded从而改变子元素的显示状态，使用例如 Site-CN-19 站点页。而实际上，我们的多重折叠模块正是经过完全整容的折叠列表。

就像那篇指导的示例那样，折叠列表支持多重嵌套，如果我们隐藏左边的圆点、去除缩进，我们就得到了一个几乎与经典折叠块一模一样的模块。

2：样式化 Colmod

现在你已经知道（或者可能还没搞清楚？:( ）多重折叠的工作原理了，让我们进入正题：用多重折叠制作一些特技。比方说，至少让多重折叠能在样式化了普通折叠链接的版式里和普通折叠链接同样显示。

2.1：Colmod 的结构

多重折叠模块由三个页面构成，其中一个用来存放样式，另外两个会在使用时被[[include]]。

让我们看看多重折叠的源代码：（省略了用于传递默认参数的中间页面）

/component:colstyle

+ 这玩意实在太长了

/component:coltop

[[div_ class="colmod-block"]]
[[ul]][[li class="[[#if {$folded} | folded | unfolded ]] [[#if {$ifprot} | colmod-collapsiblealt ]]"]][[ul]]_[[/ul]][[div class="colmod-link-top"]]
[[div_ class="foldable-list-container"]]
[# {$show}][[#if {$nohide} |  | [# {$hide}] ]][[/div]][[/div]][[div class="colmod-content"]]

/component:colend

[[/div]][[div [[#if {$nohide} |  | class="colmod-link-end" ]] ]]
[[div_ class="foldable-list-container"]]
[[#if {$nohide} |  | [# {$hide}] ]][[/div]][[/div]][[/li]][[/ul]][[/div]]

我们可以看到，作者利用了foldable-list-container会使所处列表的li元素在两个类间切换的特性，创建了一个与li元素平级的div元素，然后使用兄弟元素选择器（~、+）使这个div在特定链接被点击、前方的li类改变时随之显示/隐藏。

以下列出一些制作样式时经常用得上的选择器：

  • div.colmod-block：整个 Colmod 区块。
  • div.colmod-block div.foldable-list-container a：折叠链接，点击后会使内容显示/隐藏。
  • div.colmod-block div.colmod-content：内容区块。

2.2：改变 Colmod 的折叠链接

基础样式修改

以玄武岩版式为例，这个版式对折叠链接作出了修改，代码如下：

/* CONTENT > COLLAPSIBLES */
 
/* ======================= */
 
a.collapsible-block-link {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    color: white;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 7px;
    padding-right: 9px;
    background: rgb(20, 20, 20);
    border-radius: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
}
 
/* ======================= */

配合上玄武岩版式对普通链接的样式修改，它会把折叠链接变成这样：

+ 这是一个示例

但是，它并不能作用于多重折叠模块的折叠链接。要把多重折叠模块的折叠链接也调整成这种样式，我们只需要复制 CSS 代码，然后修改成对应的选择器：

[[module CSS]]
div.colmod-block div.foldable-list-container a {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    color: white;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 7px;
    padding-right: 9px;
    background: rgb(20, 20, 20);
    border-radius: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
}
[[/module]]

我们得到的结果：

相似地，在使用半影版式、半影黑标版、DJK 等修改了折叠链接样式的版式时，只需要找到相应的代码，复制后将选择器改成div.colmod-block div.foldable-list-container a（及其伪元素，如果需要）即可。

按钮样式修改

多重折叠模块有一个参数ifprot，将其设置为True（或者既非False又非0的任何值）可以启用按钮模式，即折叠链接样式为一个默认居中的按钮：

使这一样式生效的是多重折叠模块样式代码的最后三段：

.colmod-collapsiblealt > [class|="colmod-link"],
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] {
    margin: 0.5em 0;
    text-align: center;
}
.colmod-collapsiblealt > [class|="colmod-link"] a,
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a {
    padding: 0.1em 0.5em;
    text-decoration: none;
    background-color: #F4F4F4;
    border: 1px solid #AAA;
    color: #000;
}
.colmod-collapsiblealt > [class|="colmod-link"] a:hover,
.colmod-collapsiblealt > [class|="colmod-link"] a:active,
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a:hover,
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a:active {
    background: #DDD;
    text-decoration: none;
}

这里使用属性选择器一次性选择到colmod-link-top和colmod-link-end两个类。我们本着忠于原作的精神，修改按钮样式时直接复制这几段代码覆盖修改即可。

我们甚至可以把按钮调整成黑色标记笔样式：

    • _
    + 打开- 关闭

    就像这样。

      • _
      + 展开代码- 折叠代码

      （这个代码只能在黑色标记笔版式下使用，而且按钮的颜色会根据版式主题颜色改变。不要问我是怎么放在这个页面上的。）

      [[div class="bhlCollapse"]]
      [[include :scp-wiki-cn:component:coltop show=+ 打开|hide=- 关闭|ifprot=1]]
      就像这样。
      [[include :scp-wiki-cn:component:colend]]
      [[/div]]
      [[module CSS]]
div.bhlCollapse .colmod-collapsiblealt > [class|="colmod-link"],
div.bhlCollapse .collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] {
    margin: 0.5em 0;
    text-align: center;
}
 
div.bhlCollapse .colmod-collapsiblealt > [class|="colmod-link"] a,
div.bhlCollapse .collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a {
    display: inline-flex;
    --wght: var(--ui-wght);
    z-index: 2;
    position: relative;
    align-items: center;
    justify-content: center;
    min-width: 5em;
    margin: 0;
    padding: .25em;
    overflow: hidden;
    border: .0625rem solid rgb(var(--swatch-primary),.05);
    outline: 0 solid rgb(var(--swatch-primary));
    background-color: rgb(var(--ui-button-bg));
    box-shadow: 0 0 0 0 rgb(var(--ui-button-bg));
    color: rgb(var(--ui-button-txt));
    font-weight: var(--wght);
    font-family: var(--UI-font);
    transition: border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1),font-weight .2s cubic-bezier(.4,0,.2,1),font-variation-settings .2s cubic-bezier(.4,0,.2,1);
    will-change: border-color,box-shadow,color,background-color,font-weight,font-variation-settings;
}
 
div.bhlCollapse .colmod-block > ul > li > ul,
div.bhlCollapse li.folded > .colmod-link-top a + a,
div.bhlCollapse li.folded > .colmod-content,
div.bhlCollapse li.folded > .colmod-link-end a,
div.bhlCollapse li.unfolded > .colmod-link-top a:first-child {
    display: none;
}
 
div.bhlCollapse .colmod-collapsiblealt > [class|="colmod-link"] a:hover,
div.bhlCollapse .colmod-collapsiblealt > [class|="colmod-link"] a:active,
div.bhlCollapse .collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a:hover,
div.bhlCollapse .collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a:active {
    --wght: var(--ui-hvr-wght);
    border-color: transparent;
    outline: 0 solid rgb(var(--swatch-primary));
    background-color: rgb(var(--ui-button-hover-bg));
    box-shadow: 0 0 0 .125rem rgb(var(--ui-button-hover-outline));
    color: rgb(var(--ui-button-hover-txt));
    font-weight: var(--wght);
    text-decoration: none;
    cursor: pointer;
}
[[/module]]

如果你想，也可以把黑标风折叠模块在多重折叠上复现。

2.3：行内 Colmod

yuuki410yuuki410 做过了，见此。

2.4：切换 Colmod

  • 此项目部分灵感来源于 C-takeC-take 的工作。

有时候，我们会需要点击按钮在两个不同内容之间切换的效果。如同前述，这种情况下常见的解决方案是使用:target选择器（有时候也有人会用[[tabview]]，但那太蠢了），我们来看 Chris EvertworthChris Evertworth 文章中的一个实例。

%E4%B8%8A%E4%B8%80%E9%A1%B5.png

可变化 · 站外收容措施 - 仅供站外人员阅览

基于SCP-CN-2635已在常态中引起广泛注意，直接性收容所有项目个体较易引发不必要的小范围帷幕破碎情景。回收小队应注意在回收项目个体的同时，驱散并散播或杜撰谣言，防止个别平民发现项目的异常性质。回收行动进行时，应严格采取《异常生物对应手册》中第2条所示内容“当一类异常生物数量过多，判断采取收容易造成帷幕破碎时，应采取循序收容法，该方法详细的内容已编撰入《收容措施典范》中。”

确认SCP-CN-2635的存在时，行动人员应按照下述程序收容项目：

  1. 排查附近平民是否受到影响，并声称准备施工。
    • 收容遭受影响的平民，遣散未受影响的平民。
  2. 审查项目的总共占地面积。
  3. 穿戴一次性防护服进入封锁区内部，谨慎采集SCP-CN-2635及其子代；处理人类尸骸。
  4. 搜寻并判断封锁区内是否仍留有其它SCP-CN-2635或其子代。若判断已完全收容，拆除临时封锁区。

因项目的异常性质，回收行动中若发现动物尸骸，各人员不必惊慌，请冷静处理此类尸体。

固定化 · 站内收容措施 - 仅供站内人员阅览

目前被判断为典型个体的SCP-CN-2635被收容于Site-CN-82-β左翼植物扇区的地下四层5号区位中的，中型自循环半透明收容舱中。与项目相关的任何实验均应以获得项目负责人Romuta的许可为前提；申请审批通常需要1~3天。

驻站人员应注意以下优先事项：

  • 禁止在未获得许可的情况下，将SCP-CN-2635带离站点。
  • 禁止在未获得许可的情况下，进入SCP-CN-2635群落中。
  • 在对项目实验时，应至少有4名人员陪同进行。
  • 确认被影响时，应及时向上级通报并迅速前往医务室等待处理。

该收容舱及相关的收容措施应满足下述条件：

  • 收容舱中的土壤、水源及空气的pH值均应控制在7。
  • 收容舱应模拟正常的昼夜交替、自然降雨、四季交替等，舱内温度应保持在24℃。
  • 收容舱在非实验情形时，应处于完全封闭态，防止SCP-CN-2635脱离收容。
  • 工作人员在出入收容舱时，均应在所处收容室处于完全封闭时进行。离开收容室时应严格排查身上是否仍有SCP-CN-2635-B个体。

上述条件将在确认站点内出现收容失效时立即锁死，直至站点主管Rechal Sirius使用主管密钥解开闭合安全锁。

 %E4%B8%8B%E4%B8%80%E9%A1%B5.png
+ 查看代码

~ SCP-CN-2635

点击这个我不知道叫啥的灰色箭头可以在两个收容措施之间切换，还有高级的淡入/淡出动画。这看起来已经近乎完美地实现这一效果了，但等等——看看页面链接，你就知道它还存在什么问题了。还记得我说过什么吗？

然而，:target选择器有一个非常严重的问题：它会改变页面链接，而且使用时会与同样使用:target选择器的移动端侧栏按钮、页面目录相冲突。

我们需要一种不改变链接实现切换的方法，我们的多重折叠再次派上了用场。多重折叠本身就是让一个[[div]]在两种状态（显示/隐藏）下切换，只要我们增加一个[[div]]，与前面那个保持相反的显示状态，就可以实现内容的切换了。实例如下：

+ 查看代码

这个模块非常简单，它只是引用了多重折叠模块本身，然后增加了colmod-content-anti这个元素，并为其增加了colmod-content带有的动画效果。其实这也并非最简单的解决方案，你还可以使用同时带有colmod-content和另一个类的元素，再让另一个类与原先保持相反的显示状态，这样甚至无需重新设置动画效果。接着，想实现上面 SCP-CN-2635 的效果，我们只需要修改链接的样式：

    • _
    显示内容2显示内容1

    可变化 · 站外收容措施 - 仅供站外人员阅览

    基于SCP-CN-2635已在常态中引起广泛注意，直接性收容所有项目个体较易引发不必要的小范围帷幕破碎情景。回收小队应注意在回收项目个体的同时，驱散并散播或杜撰谣言，防止个别平民发现项目的异常性质。回收行动进行时，应严格采取《异常生物对应手册》中第2条所示内容“当一类异常生物数量过多，判断采取收容易造成帷幕破碎时，应采取循序收容法，该方法详细的内容已编撰入《收容措施典范》中。”

    确认SCP-CN-2635的存在时，行动人员应按照下述程序收容项目：

    1. 排查附近平民是否受到影响，并声称准备施工。
      • 收容遭受影响的平民，遣散未受影响的平民。
    2. 审查项目的总共占地面积。
    3. 穿戴一次性防护服进入封锁区内部，谨慎采集SCP-CN-2635及其子代；处理人类尸骸。
    4. 搜寻并判断封锁区内是否仍留有其它SCP-CN-2635或其子代。若判断已完全收容，拆除临时封锁区。

    因项目的异常性质，回收行动中若发现动物尸骸，各人员不必惊慌，请冷静处理此类尸体。

    固定化 · 站内收容措施 - 仅供站内人员阅览

    目前被判断为典型个体的SCP-CN-2635被收容于Site-CN-82-β左翼植物扇区的地下四层5号区位中的，中型自循环半透明收容舱中。与项目相关的任何实验均应以获得项目负责人Romuta的许可为前提；申请审批通常需要1~3天。

    驻站人员应注意以下优先事项：

    • 禁止在未获得许可的情况下，将SCP-CN-2635带离站点。
    • 禁止在未获得许可的情况下，进入SCP-CN-2635群落中。
    • 在对项目实验时，应至少有4名人员陪同进行。
    • 确认被影响时，应及时向上级通报并迅速前往医务室等待处理。

    该收容舱及相关的收容措施应满足下述条件：

    • 收容舱中的土壤、水源及空气的pH值均应控制在7。
    • 收容舱应模拟正常的昼夜交替、自然降雨、四季交替等，舱内温度应保持在24℃。
    • 收容舱在非实验情形时，应处于完全封闭态，防止SCP-CN-2635脱离收容。
    • 工作人员在出入收容舱时，均应在所处收容室处于完全封闭时进行。离开收容室时应严格排查身上是否仍有SCP-CN-2635-B个体。

    上述条件将在确认站点内出现收容失效时立即锁死，直至站点主管Rechal Sirius使用主管密钥解开闭合安全锁。

+ 查看代码

不仅不会改变页面链接，动画也比原先更流畅。

2.5：远程 Colmod

  • 此项目部分灵感来源于 C-takeC-take 的工作。

远程 Colmod 是啥？

    • _
    + 就是有一个折叠链接- 打开之后……

    这里有一段文字

    居然在后面出现了内容！

    这实际上是把 Colmod 模块拆开了，然后在折叠链接和折叠内容中间塞上一段东西。这个甚至能嵌套使用！

    [[include :ah-sandbox:component:remote-coltop show = + 就是有一个折叠链接| hide= - 打开之后……]]

    这里有一段文字

    [[include :ah-sandbox:component:remote-colmiddle]]

    居然在后面出现了内容！

    [[include :ah-sandbox:component:remote-colend]]

更多内容敬请期待！

Transparent.gif

{$previous-title}

Colmod 魔法与你

Transparent.gif

CSS 魔法与你（即将到来）

原创文章
页面版本: 3, 最后编辑于: 22 Jul 2022 16:06
编辑 评分 (+69) 标签 讨论 (20) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License