该版式由 
CR-Wu_Ze 制作，参考了Wikidot backrooms的版式，大部分块级元素为原创内容。
若需将本版式引入到你的页面中，请将以下文本放到任意位置：
[[include :themebackdrop]]
此版式具体增添内容如下：
更好的目录
目录效果如页面右端所示，支持手机端的目录显示。建议配合折叠块使用。
标题置中
效果如下
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
图表-柱形图
效果如下
我们通过如下代码实现上述效果（代码中内为注释内容，实际使用时可省略）
[[div class="lightblock"]]
[[div class="container"]]
[[div class="chart-container"]]
[[div class="bar-chart"]]
[[div class="origin-point"]]
[[/div]]
[!-- 设置坐标轴的箭头样式，不建议更改 --]
[[div class="origin-point-2"]]
▶
[[/div]]
[[div class="origin-point-3"]]
▲
[[/div]]
[!-- 此处请将x轴与y轴更改为统计图中横纵轴对应的实际意义 --]
[[div class="origin-text-2"]]
x轴
[[/div]]
[[div class="origin-text-3"]]
y轴
[[/div]]
[!-- 柱形图背后的分割线，可以将百分比改为分割线对应的具体的数值 --]
[!-- 不可增加四条以上的分割线 --]
[[div class="y-axis"]]
[[div class="y-tick"]]
100%
[[/div]]
[[div class="y-tick"]]
75%
[[/div]]
[[div class="y-tick"]]
50%
[[/div]]
[[div class="y-tick"]]
25%
[[/div]]
[[/div]]
[[div class="grid-line" style="top: 12.5%;"]]
[[/div]]
[[div class="grid-line" style="top: 34%;"]]
[[/div]]
[[div class="grid-line" style="top: 56%;"]]
[[/div]]
[[div class="grid-line" style="top: 78%;"]]
[[/div]]
[[div class="grid-line" style="top: 100%;"]]
[[/div]]
[!-- 以下代码中每一个单元即代表一条数据柱 --]
[!-- 请将"data-value"属性后面的数字改为数据柱对应数据的百分高度（必须为整数） --]
[!-- 将"bar-value"类内的数据改为柱形图上方的数字，如果不需要可以删去 --]
[!-- 将"x-axis-label"类内的文本改为数据柱的项目名称（不宜过长） --]
[!-- 此单元可以任意数目叠加，可自适应调整（即可以根据需求增删数据柱，不一定必须有五条） --]
[[div class="bars-container"]]
[[div class="bar-column"]]
[[div class="bar-wrapper"]]
[[div class="bar" data-value="25"]]
[[div class="bar-value"]]
25%
[[/div]]
[[/div]]
[[/div]]
[[div class="x-axis-label"]]
产品A
[[/div]]
[[div class="x-axis-tick"]]
[[/div]]
[[/div]]
[[div class="bar-column"]]
[[div class="bar-wrapper"]]
[[div class="bar" data-value="50"]]
[[div class="bar-value"]]
50%
[[/div]]
[[/div]]
[[/div]]
[[div class="x-axis-label"]]
产品B
[[/div]]
[[div class="x-axis-tick"]]
[[/div]]
[[/div]]
[[div class="bar-column"]]
[[div class="bar-wrapper"]]
[[div class="bar" data-value="75"]]
[[div class="bar-value"]]
75%
[[/div]]
[[/div]]
[[/div]]
[[div class="x-axis-label"]]
产品C
[[/div]]
[[div class="x-axis-tick"]]
[[/div]]
[[/div]]
[[div class="bar-column"]]
[[div class="bar-wrapper"]]
[[div class="bar" data-value="100"]]
[[div class="bar-value"]]
100%
[[/div]]
[[/div]]
[[/div]]
[[div class="x-axis-label"]]
产品D
[[/div]]
[[div class="x-axis-tick"]]
[[/div]]
[[/div]]
[[div class="bar-column"]]
[[div class="bar-wrapper"]]
[[div class="bar" data-value="80"]]
[[div class="bar-value"]]
80%
[[/div]]
[[/div]]
[[/div]]
[[div class="x-axis-label"]]
产品E
[[/div]]
[[div class="x-axis-tick"]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
图表-直方图
效果如下
