左侧大纲视图中的 HTML 格式不正确,无法正确进行章节自动嵌套编号

各位朋友大家好,最近开始使用思源笔记,非常喜欢思源笔记的各种功能。

最近想设置笔记中的章节进行自动编号,查了一些资料,发现修改 CSS 文件就可以实现。

尝试之后发现在正文和 Table of Content 中都可以正确显示编号,但是在左侧的大纲视图中没法正确进行编号。最终发现问题是左侧大纲视图的 HTML 格式并不是标准的嵌套格式,所以无法正确进行章节的自动嵌套编号。

如何才能向开发者反馈这个问题呢?

实现章节自动嵌套编号的效果和 CSS 代码分别如下:

1.png

/*正文编号*/
.vditor-ir {
    counter-reset: h1
}

h1 {
    counter-reset: h2
}

h2 {
    counter-reset: h3
}

h3 {
    counter-reset: h4
}

h4 {
    counter-reset: h5
}

h5 {
    counter-reset: h6
}

.vditor-ir h1:before {
counter-increment: h1;
content: counter(h1) " "
}
.vditor-ir h2:before {
counter-increment: h2;
content: counter(h1) "." counter(h2) " "
}
.vditor-ir h3:before{
counter-increment: h3;
content: counter(h1) "." counter(h2) "." counter(h3) " "
}
.vditor-ir h4:before{
counter-increment: h4;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " "
}
.vditor-ir h5:before {
counter-increment: h5;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " "
}
.vditor-ir h6:before {
counter-increment: h6;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " "
}


/*TOC编号*/
.vditor-toc ul {
  counter-reset: counter;
}
.vditor-toc li::before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}
/*左侧大纲编号*/
.vditor-reset.fn__flex-1 ul {
  counter-reset: counter;
}
.vditor-reset.fn__flex-1 li::before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}

广告 我要投放

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Vanessa 1
    订阅者

    大纲需要折叠展开,因此 html 结构有点不同,你可能需要研究一下

    1 回复
  • Shawn-Pan 1
    作者

    嗯,好的我再试试,为了添加编号最近才看了一点 HTML 的内容,还以为这里有 Bug 呢。感谢 V 姐和各位开发者提供了这么优秀的笔记软件!