眼尖的小伙伴可能会发现博主博客目录样式变了,这其实是博主最近封装的一个hexo-helper插件,帮助没有目录的主题快速插入目录,不保证兼容所有主题,且行且珍惜。

介绍


hexo-helper-tocbot 是一款hexo辅助函数插件,是基于tocbot(Tocbot可以 根据HTML文档中的标题构建目录(TOC))实现的。其实就是使用tocbot实现,我只是把它打包起来,借助hexo辅助函数快速引用使用它。

安装

使用npm安装:

1
npm i hexo-helper-tocbot --save

使用教程

配置

在博客根目录或主题下的_config.yml中配置如下:

1
2
3
4
5
6
tocbot:
contentSelector: .post-content
scrollSmooth: true
headingSelector: h1, h2, h3, h4, h5
headingsOffset: 45
scrollSmoothOffset: -45

其中headingsOffset和scrollSmoothOffset要和你主题的头部高度相对应。
含义详见API

最关键的在.post-content这个class,指你文章容器的class类。如果你的文章容器是

,那么配置就改为contentSelector: .box

使用

在主题模板文件合适位置插入:(要放在上面容器类的下面或footer底部最合适)

1
<%- tocbot(top, right) %>

因为默认样式是固定定位,例子如下

1
<%- tocbot(['60px', 'calc((100% - 950px - 250px) / 2)']) %>

上图参数的意思就是离顶部60px,右边calc((100% - 950px - 250px) / 2)距离。具体情况根据主题样式调整。

API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// Where to render the table of contents.
tocSelector: '.js-toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.js-toc-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2, h3',
// Headings that match the ignoreSelector will be skipped.
ignoreSelector: '.js-toc-ignore',
// Main class to add to links.
linkClass: 'toc-link',
// Extra classes to add to links.
extraLinkClasses: '',
// Class to add to active links,
// the link corresponding to the top most heading on the page.
activeLinkClass: 'is-active-link',
// Main class to add to lists.
listClass: 'toc-list',
// Extra classes to add to lists.
extraListClasses: '',
// Class that gets added when a list should be collapsed.
isCollapsedClass: 'is-collapsed',
// Class that gets added when a list should be able
// to be collapsed but isn't necessarily collpased.
collapsibleClass: 'is-collapsible',
// Class to add to list items.
listItemClass: 'toc-list-item',
// Class to add to active list items.
activeListItemClass: 'is-active-li',
// How many heading levels should not be collpased.
// For example, number 6 will show everything since
// there are only 6 heading levels and number 0 will collpase them all.
// The sections that are hidden will open
// and close as you scroll to headings within them.
collapseDepth: 0,
// Smooth scrolling enabled.
scrollSmooth: true,
// Smooth scroll duration.
scrollSmoothDuration: 420,
// Smooth scroll offset.
scrollSmoothOffset: 0,
// Callback for scroll end.
scrollEndCallback: function (e) {},
// Headings offset between the headings and the top of the document (this is meant for minor adjustments).
headingsOffset: 1,
// Timeout between events firing to make sure it's
// not too rapid (for performance reasons).
throttleTimeout: 50,
// Element to add the positionFixedClass to.
positionFixedSelector: null,
// Fixed position class to add to make sidebar fixed after scrolling
// down past the fixedSidebarOffset.
positionFixedClass: 'is-position-fixed',
// fixedSidebarOffset can be any number but by default is set
// to auto which sets the fixedSidebarOffset to the sidebar
// element's offsetTop from the top of the document on init.
fixedSidebarOffset: 'auto',
// includeHtml can be set to true to include the HTML markup from the
// heading node instead of just including the textContent.
includeHtml: false,
// onclick function to apply to all links in toc. will be called with
// the event as the first parameter, and this can be used to stop,
// propagation, prevent default or perform action
onClick: false,
// orderedList can be set to false to generate unordered lists (ul)
// instead of ordered lists (ol)
orderedList: true,
// If there is a fixed article scroll container, set to calculate titles' offset
scrollContainer: null

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦

您的喜欢是作者写作最大的动力

打赏支持

QQ群和公众号