CSS 程序
/* ================= 标题自动编号模块 ================= */
body { counter-reset: h1-count 0; }
h1,.h1 { counter-reset: h2-count 0; }
h2,.h2 { counter-reset: h3-count 0; }
h3,.h3 { counter-reset: h4-count 0; }
h4,.h4 { counter-reset: h5-count 0; }
h5,.h5 { counter-reset: h6-count 0; }
/* 通用计数器样式 */
.protyle-wysiwyg [data-node-id][class^="h"] div:first-child:before,
.b3-typography h1:before, .b3-typography h2:before, .b3-typography h3:before,
.b3-typography h4:before, .b3-typography h5:before, .b3-typography h6:before {
display: inline-block !important;
float: none;
margin-right: 8px;
font-size: 100%;
opacity: 1 !important; /* 强制显示防止折叠隐藏 */
}
/* 层级式编号生成规则 */
.protyle-wysiwyg [data-node-id].h1 div:first-child:before,
.b3-typography h1:before {
counter-increment: h1-count;
content: counter(h1-count) "\00A0";
}
.protyle-wysiwyg [data-node-id].h2 div:first-child:before,
.b3-typography h2:before {
counter-increment: h2-count;
content: counter(h1-count) "." counter(h2-count) "\00A0";
}
.protyle-wysiwyg [data-node-id].h3 div:first-child:before,
.b3-typography h3:before {
counter-increment: h3-count;
content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "\00A0";
}
.protyle-wysiwyg [data-node-id].h4 div:first-child:before,
.b3-typography h4:before {
counter-increment: h4-count;
content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "." counter(h4-count) "\00A0";
}
.protyle-wysiwyg [data-node-id].h5 div:first-child:before,
.b3-typography h5:before {
counter-increment: h5-count;
content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "." counter(h4-count) "." counter(h5-count) "\00A0";
font-size: 90% !important;
}
.protyle-wysiwyg [data-node-id].h6 div:first-child:before,
.b3-typography h6:before {
counter-increment: h6-count;
content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "." counter(h4-count) "." counter(h5-count) "." counter(h6-count) "\00A0";
font-size: 85% !important;
}
/* ================= 标题视觉标识模块 ================= */
/* 标题颜色分级系统 */
[data-type="NodeHeading"].h1 { color: #d40045 !important; }
[data-type="NodeHeading"].h2 { color: #ff7f00 !important; }
[data-type="NodeHeading"].h3 { color: #66b82b !important; }
[data-type="NodeHeading"].h4 { color: #093f86 !important; }
[data-type="NodeHeading"].h5 { color: #340c81 !important; }
/* ================= 折叠状态适配模块 ================= */
.protyle-wysiwyg [data-fold="1"] [data-node-id][class^="h"] {
position: relative;
padding-right: 4em !important; /* 为折叠标记留出空间 */
}
程序亮点
对比折叠前后，标题均能实现自动编号
折叠前
折叠后
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于