前言

又到了月末了，工作太忙，随便鸽一篇文章吧，一个简单 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;
}