前言

又到了月末了,工作太忙,随便鸽一篇文章吧,一个简单 JS 实现的魔改,给文章增加段落序号,弃用原本 butterfly 自带的文章段落前缀符号,使用 JS 生成文章段落序号(与目录的段落序号保持一致)。

需开启目录段落序号的配置项,如果想不显示目录的段落序号,可以使用 CSS 隐藏。

1
2
3
4
5
6
7
8
9
10
# Post
# --------------------------------------

# toc (目錄)
toc:
post: true
page: false
number: true
expand: false
style_simple: false # for post

添加自定义 JS

1
2
3
4
5
6
7
8
9
10
11
12
function postAddToc () {
let postContent = document.querySelector('#post>#article-container.post-content')
let cardToc = document.getElementById('card-toc')
if (postContent && cardToc) {
let tocNumber = cardToc.getElementsByClassName('toc-number')
let tocLink = cardToc.getElementsByClassName('toc-link')
for (let i = 0; i < tocLink.length; i++) {
document.getElementById(decodeURIComponent(tocLink[i].attributes.href.value).slice(1)).dataset.toc = tocNumber[i].innerText
}
}
}
postAddToc ()

添加自定义 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#post #article-container.post-content h1,
#post #article-container.post-content h2,
#post #article-container.post-content h3,
#post #article-container.post-content h4,
#post #article-container.post-content h5,
#post #article-container.post-content h6 {
padding-left: 0 !important;
}

#post #article-container.post-content h1::before,
#post #article-container.post-content h2::before,
#post #article-container.post-content h3::before,
#post #article-container.post-content h4::before,
#post #article-container.post-content h5::before,
#post #article-container.post-content h6::before {
position: relative;
content: attr(data-toc) ' ';
display: inline;
font-family: inherit;
font-size: inherit;
line-height: inherit;
margin-left: 0;
}