登录 注册

[css] 可折叠的标题自动编号

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; /* 为折叠标记留出空间 */
}

​

程序亮点

对比折叠前后，标题均能实现自动编号

折叠前

image.png

折叠后

image.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    26870 引用 • 112058 回帖 • 1 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    230 引用 • 1653 回帖 • 1 关注
北京 位置
3 感谢
4 收藏
5 回帖
366 154 7 43 1 161

相关帖子

5 回帖
[css] 可折叠的标题自动编号

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • LZY2note •
    付费者

    牛的，效果不错！！

    1 回复
  • ABin666 •
    订阅者 作者

    多谢朋友支持~

  • sa--sa •
    订阅者 捐赠者

    太牛了

  • liuyz0112 • • 1
    付费者

    感谢佬的代码，不过代码在我的电脑上没有正确生效，所有的一级标题的编号都是 1，所以使用 ai 修改了一下代码，代码如下：

    /* ================= 标题自动编号模块 ================= */
body {
    counter-reset: h1-count;
}

h1,
.h1 {
    counter-increment: h1-count;
    counter-reset: h2-count;
}

h2,
.h2 {
    counter-increment: h2-count;
    counter-reset: h3-count;
}

h3,
.h3 {
    counter-increment: h3-count;
    counter-reset: h4-count;
}

h4,
.h4 {
    counter-increment: h4-count;
    counter-reset: h5-count;
}

h5,
.h5 {
    counter-increment: h5-count;
    counter-reset: h6-count;
}

/* 通用计数器样式 */
.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 {
    content: counter(h1-count) "\00A0";
}

.protyle-wysiwyg [data-node-id].h2 div:first-child:before,
.b3-typography h2:before {
    content: counter(h1-count) "." counter(h2-count) "\00A0";
}

.protyle-wysiwyg [data-node-id].h3 div:first-child:before,
.b3-typography h3:before {
    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 {
    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 {
    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 {
    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;
    /* 为折叠标记留出空间 */
}
​
    1 回复
  • shaoxia •
    订阅者 捐赠者

    好用

    1 引用
ABin666
北京
回帖
11
 帖子
6
 积分
504