Dentrado, read-only mode: mirroring http://backrooms-wiki-cn.wikidot.com/theme:untitled2026About Dentrado
无题2026 版式
Untitled
.
2026

无题20261是一个由KatsuK制作的美学基础版式，部分借鉴自EstrellaYoshte、Liryn和Placeholder McD制作的基岩版式与LemonCat233和Liurd制作的至上主义版式，编辑区域的按钮图标由Woedenaz制作。要在任意页面中引用该版式，请在其中加入如下代码：

[[include :backrooms-wiki-cn:theme:untitled2026]]

以下为本版式的部分元素示例。

[[toc]]

示例

通过四个连字符“----”来在你的页面中创建水平分割线。如非置于引用块等元素中，分割线将横跨整个页面。

a3e69a2f016e4769a3024eefcba315d564cf15f236a510853fa0578bd17780ac.image.jpeg

《建筑分析》（Theo van Doesburg，1923）

可通过 1 至 6 个加号（“+”）来创建不同级的标题。

折叠 - 点击以展开

Theo van Doesburg是荷兰艺术家、作家与建筑师，以创建并领导荷兰风格派艺术运动闻名。他早期受阿姆斯特丹印象派影响，1913年转向抽象艺术，1915年与Piet Cornelies Mondrian合作推动风格派，创办《风格派》杂志。后因主张斜线动态的要素主义与Piet Cornelies Mondrian决裂，其艺术实践涵盖绘画、建筑与理论著述，对现代艺术发展产生深远影响。1

此为分页（tab view）。

这是 表格
说实话 不写做法不太好。
但是解释起来很麻烦，你还是自己查一下吧。

这是一个引用块，在一行字的起始处加上“> ”来创建。

更多文字

一条分割线

嵌套引用块

更多标题

标题A 居左

标题A 居中

标题A 居右

[[span class="title A"]]标题内容[[/span]]

A样式的标题，在原先的标题下方添加了水平线，默认居左，可通过在“class”中添加“center”或是“right”来让标题居中或居右，用空格隔开，例如：

[[span class="title A right"]]标题内容[[/span]]

标题B 居左

标题B 居中

标题B 居右

[[span class="title B"]]标题内容[[/span]]

B样式的标题，在原先的标题侧边添加了水平线，默认居左，可通过在“class”中添加“center”或是“right”来让标题居中或居右，用空格隔开。

正标题
此处添加副标题文字

正标题
此处添加副标题文字

正标题
此处添加副标题文字

[[div class="title C"]]
正标题内容
[[span]]此处添加副标题文字[[/span]]
[[/div]]

C样式的标题，拥有正标题和副标题，默认居左，可通过在“class”中添加“center”或是“right”来让标题居中或居右，用空格隔开。

更多水平线

[[div class="hr double"]]
[[/div]]

双线水平线，就是由两条线组成的水平线，你直接放两行水平线应该效果和这个差不多。

[[div class="hr dashed"]]
[[/div]]

虚线水平线，就是它的线是虚线，比一般的水平线粗一点，因为太细就不太看得清虚线了。

5935ab88a200a51c49eb4e592e559e66006f60e4dd10dbe5ced51d34ef054fc5.image.svg+xml
[[div class="hr image"]]
[[image https://github.backroomswiki.cn/New_BHL/image/logo.svg]]
[[/div]]

带图片的水平线，就是你可以在中间放个logo或者什么别的东西。

自定义块

[[div class="block"]]

一个基础的块，你可以看到几乎什么都没有，需要你同其他类配合，并在块的末端另起一行加上[[/div]]进行使用，和别的div一样，例如：

[[div class="block"]]
池流的整体环境是，该岛屿总是处于结业中，一轮月在空中停留。海中漂浮着舟及，自是的中流淌，指导流入枢纽。
[[/div]]

[[div class="block primary"]]

主颜色块，使用了类“block”和“primary”，与其他如“deepen-primary”、“invert”、“red”等颜色类冲突。

[[div class="block deepen-primary"]]

更浓的主颜色块，使用了类“deepen-primary”。

[[div class="block invert"]]

与主色相反色系的块。

[[div class="block shadow"]]

通过类“shadow”给块添加了一个阴影效果，与任何类都不冲突。

[[div class="block border"]]

通过类“border”给块添加了一个边框，与任何类都不冲突，更是所有边框拓展的基础，如果需要使用边框务必要加。

[[div class="block border custom"]]

类“custom”让所有边框消失了，说明此时你的块进入了自定义模式，你需要配合四个方向类“left”、“top”、“bottom”和“right”来使用。

[[div class="block menu-text"]]

通过类“menu-text”使块里的字体变成了菜单字体，与任何类都不冲突。我其实感觉这个很没用，但是我总觉得需要做进来。

[[div class="block border dashed"]]

通过类“border”和“dashed”给块添加了一个虚线边框，“dashed”需要配合“border”进行使用。

[[div class="block primary border wide"]]

通过类“primary”给块加了一个主颜色的背景，并通过类“border”和“wide”给块添加了一个粗边框，同理，“wide”需要配合“border”进行使用。

[[div class="block invert border wide custom left"]]

这个有点复杂了，前面的我有点懒得解释，后面的“left”类是让块只显示左边框，“left”可以配合“top”、“bottom”和“right”使用。注意，在使用这四个类前必须要添加“custom”类。

[[div class="block red border"]]

一个红色的块加上了边框，不多解释。

[[div class="block dark-red border custom bottom"]]

一个深红色的块加上了一个下边框。

[[div class="block orange border wide custom top bottom"]]

一个橘色的块加上了上下的粗边框。

[[div class="block yellow border dashed wide custom top menu-text"]]

这个好复杂你自己看吧。

[[div class="block green shadow"]]

爱是一道光，如此美妙。

[[div class="block blue border shadow"]]

蓝色有阴影有边框的块。

[[div class="block purple"]]

紫色。

block组件所有class检索：

类名 作用
block 基础块，必须使用，创建基本容器样式。
primary 主颜色背景。
deepen-primary 更浓的主颜色背景。
invert 反色（与主色相反）背景。
red 红色背景。
dark-red 深红色背景。
orange 橘色背景。
yellow 黄色背景。
green 绿色背景。
blue 蓝色背景。
purple 紫色背景。
border 添加基础边框。
dashed 边框改为虚线，需与border一起使用。
wide 加粗边框，需与border一起使用。
custom 清除所有边框，进入自定义边框模式，需与border一起使用。
left 仅显示左边框，需先使用border和custom。
top 仅显示上边框，需先使用border和custom。
bottom 仅显示下边框，需先使用border和custom。
right 仅显示右边框，需先使用border和custom。
shadow 添加阴影效果，可与任何类组合。
menu-text 将块内字体切换为菜单字体，可与任何类组合。

菜单字体为 Roboto Condensed / 思源黑体。

+++++* 标题字体为 Lexend / 思源黑体。

正文字体为 Unna / 思源宋体。

等宽字体为 JetBrains Mono / 思源黑体。

兼容组件

由于目前站内绝大多数组件都是基于阈限版式设计，故对一些组件进行了关于该版式的适配调整，经过调整和测试，以下组件被认证可于该版式正常使用：

注意，以上组件仅是适配，并未内置于该版式，仍需引入以使用。如有更多组件需要适配，或是在使用途中遇到bug，可联系katsuk。

预设

为了缓解版式太过无聊带来的枯燥，无题2026版式内置了一些预设，使用方式为在基础版式引入代码中插入下面提供的代码，例如：

[[include :backrooms-wiki-cn:theme:untitled2026
|big-header = 1
|foldable-side-bar = 1
]]

eff0d233f3feb711db10e1f36e0285a4d505a949368136939fab99c42e4478a2.image.png

|big-header = 1/2

获得一个超大占满整个屏幕的版头，数值1的效果如图所示，若希望版头图片更清晰可以使用数值2。

5b8cdde771f0d518048bf8dfae171b7bbc8e9d7a7d5db86227eba66d34698464.image.png

|foldable-side-bar = 1

将侧栏折叠并通过按钮开启。

00fe68f9937dd2f6b87ad78dc736afa70ac43d2ec33b4faba37630758643a9d3.image.png

|foldable-side-bar = 2

将侧栏折叠并像初始的阈限版式那样将鼠标挪过去以使用。

888a775840b08ae4e0d0ae4d2ac26c839e2eb96c7389b15253e0d4718e05da7b.image.png

|fullscreen = 1

全屏模式，页面内容会变得非　　　　常　　　　宽。可以结合折叠侧栏使用，效果更佳。

580208dcf5e216ba8c8be2b0e3a62fd667b990e901a82b5ba639692ec68001e7.image.png

|wide-top-bar = 1

更宽的顶栏，让顶栏占满一整行。

5701c13e4f6170e2eafb13109847f0ab4093a63b0ffde6386892d6c5977b4e13.image.png

|title-align = 1/2

调整版头标题位置，1为居中，2为居右。若将版头居中我推荐搭配更宽的顶栏与折叠侧栏使用。

663122e7e410146f2f5f3b9470a75f0a503e13df0e958d21d0a6873a32f9d5a9.image.png

|dark-style = 1

黑。

此外，也内置了其他小预设：

|hide-title = 1

将页面标题隐藏。

|hide-topbar = 1

将顶栏隐藏。

变量

无题2026对大量内容设置了一系列CSS变量，以便于使用者可以直接通过修改变量以改变样式从而省略掉撰写大量冗杂代码。

此分页展示的是关于该版式的基础变量，通常是一些基础的版式修改内容或是受到大量引用。

版头文字与图片修改：

:root {
    --header-title-content: "The Backrooms";
    --header-subtitle-content: "你曾经来过这里";
    
    --header-title-size: 4rem;
    --header-subtitle-size: 2.5rem;

    --image-background: url("https://brsandbox-pro.wikidot.com/local--files/open:gp-theme-1/Header.jpg");
    --header-bg-image-opacity: .25;
}

字体修改：

:root {
    --body-font: "Unna", "Noto Serif SC", "Noto Serif TC", serif;
    --menu-font: "Roboto Condensed", "Noto Sans SC", "Noto Sans TC", sans-serif;
    --title-font: "Lexend", "Noto Sans SC", "Noto Sans TC", sans-serif;
    --code-font: "JetBrains Mono", "Noto Sans SC", "Noto Sans TC", sans-serif;
}

基础或是全局数值设定：

:root {
    --scrollbar-width: .5rem;
    --global-border-width: 1px;

    --horizon-line-width: var(--global-border-width);
    --table-border-width: var(--global-border-width);

    --basis-font-size: 1rem;
    --basis-small-font-size: .75rem;

    --initial-line-height: 1.5;
    --initial-sub-line-height: 1.2;
    --initial-font-size: var(--basis-font-size);
    --initial-small-font-size: var(--basis-small-font-size);

    --sub-and-sup-size: 80%;

    --h1-size: 2.5rem;
    --h2-size: 2.25rem;
    --h3-size: 2rem;
    --h4-size: 1.75rem;
    --h5-size: 1.5rem;
    --h6-size: 1.25rem;

    --menu-title-weight: 700;
    --menu-text-weight: 300;
    --menu-text-hover-weight: var(--menu-text-weight);
    --body-title-weight: 500;

    --main-content-width: 50rem;

    --main-page-title-size: var(--h1-size);
    --main-page-title-weight: var(--body-title-weight);
    --main-page-title-line-width: 2px;

    --input-radio-and-checkbox-size: 1rem;
    --input-radio-and-checkbox-border-width: var(--global-border-width);
    --input-radio-checked-border: .2rem;

    --error-block-border-width: var(--global-border-width);
    --button-border-width: var(--global-border-width);

    --select-border-width: var(--global-border-width);
    --select-text-weight: var(--menu-text-weight);

    --hr-icon-max-size: 3rem;
    --hr-icon-brightness: 0;
    --block-opacity: .1;
    --block-border-width: var(--global-border-width);
    --block-wider-border-width: 5px;
}

版式自带的颜色变量：

:root {
    --color-black: 0, 0, 0;
    --color-jet-black: 18, 18, 18;
    --color-midnight-gray: 24, 24, 26;
    --color-dark-gray: 42, 42, 46;
    --color-gray: 118, 118, 118;
    --color-light-gray: 225, 225, 225;
    --color-ghost-white: 250, 250, 250;
    --color-white: 255, 255, 255;

    --color-red: 232, 17, 35;
    --color-dark-red: 150, 25, 45;
    --color-orange: 220, 105, 15;
    --color-blue: 0, 120, 215;
    --color-green: 15, 200, 70;
    --color-yellow: 255, 196, 0;
    --color-purple: 107, 33, 168; 
}

基础颜色变量：

:root {
    --color-body-text: var(--color-black);
    --color-menu-text: var(--color-black);
    --color-invert-bg-text: var(--color-white);
    --color-red-bg-text: var(--color-invert-bg-text);

    --color-header-title: var(--color-black);
    --color-page-title: var(--color-black);
    --color-little-title: var(--color-gray);

    --color-invert-hover: var(--color-gray);

    --color-link: var(--color-red);
    --color-link-visited: var(--color-dark-red);
    --color-link-newpage: var(--color-orange);
    
    --color-global-border: var(--color-light-gray);
    --color-global-deepen-border: var(--color-gray);
    --color-global-invert-border: var(--color-dark-gray);
    --color-global-bg: var(--color-ghost-white);
    --color-global-deepen-bg: var(--color-light-gray);
    --color-global-invert-bg: var(--color-dark-gray);
    --color-global-hover-bg: var(--color-global-deepen-bg);
    --color-global-body-bg: var(--color-white);
    --color-global-warn-bg: var(--color-red);
    --color-global-shadow: var(--color-dark-gray);

    --color-error-block-text: var(--color-red);
    --color-error-block-border: var(--color-red);
}

无题2026 版式由KatsuK制作，版式代码基于MIT License进行授权。
Dependencies