Skip to content

Commit 02b7bd5

Browse files
cotes2020cotes2020
committed
feat: change TOC plugin to tocbot (#774)
1 parent 474b4ba commit 02b7bd5

File tree

13 files changed

+114
-71
lines changed

13 files changed

+114
-71
lines changed

‎_config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ img_cdn: "https://chirpy-img.netlify.app"
8282
# the avatar on sidebar, support local or CORS resources
8383
avatar: "/commons/avatar.jpg"
8484

85-
# boolean type, the global switch for ToC in posts.
85+
# boolean type, the global switch for TOC in posts.
8686
toc: true
8787

8888
comments:

‎_data/assets/cross_origin.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ bootstrap:
2222
css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
2323
js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
2424

25-
bootstrap-toc:
26-
css: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css
27-
js: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js
25+
toc:
26+
css: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.css
27+
js: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.js
2828

2929
fontawesome:
3030
css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css

‎_data/assets/self_host.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ bootstrap:
1111
css: /assets/lib/bootstrap-4.6.1/bootstrap.min.css
1212
js: /assets/lib/bootstrap-4.6.1/bootstrap.bundle.min.js
1313

14-
bootstrap-toc:
15-
css: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css
16-
js: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js
14+
toc:
15+
css: /assets/lib/tocbot-4.20.1/tocbot.min.css
16+
js: /assets/lib/tocbot-4.20.1/tocbot.min.js
1717

1818
fontawesome:
1919
css: /assets/lib/fontawesome-free-6.2.1/css/all.min.css

‎_includes/head.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@
9797
<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
9898

9999
{% if site.toc and page.toc %}
100-
<link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap-toc.css | relative_url }}">
100+
<link rel="stylesheet" href="{{ site.data.assets[origin].toc.css | relative_url }}">
101101
{% endif %}
102102

103103
{% if page.layout == 'page' or page.layout == 'post' %}

‎_includes/toc.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
{% endif %}
77

88
{% if enable_toc %}
9-
<!-- BS-toc.js will be loaded at medium priority -->
10-
<script src="{{ site.data.assets[origin].bootstrap-toc.js | relative_url }}"></script>
9+
<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
10+
<div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[site.lang].panel.toc -}}</div>
11+
<nav id="toc"></nav>
12+
</div>
1113

12-
<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
13-
<div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[site.lang].panel.toc -}}</div>
14-
<nav id="toc" data-toggle="toc"></nav>
15-
</div>
14+
<!-- toc.js will be loaded at medium priority -->
15+
<script src="{{ site.data.assets[origin].toc.js | relative_url }}"></script>
1616
{% endif %}

‎_javascript/modules/components/toc.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export function toc() {
2+
// see: https://github.com/tscanlin/tocbot#usage
3+
tocbot.init({
4+
tocSelector: '#toc',
5+
contentSelector: '.post-content',
6+
ignoreSelector: '[data-toc-skip]',
7+
headingSelector: 'h2, h3',
8+
orderedList: false,
9+
scrollSmooth: false
10+
});
11+
}

‎_javascript/modules/plugins.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ export { imgExtra } from './components/img-extra';
44
export { initLocaleDatetime } from './components/locale-datetime';
55
export { initPageviews } from './components/pageviews';
66
export { smoothScroll } from './components/smooth-scroll';
7+
export { toc } from './components/toc';

‎_javascript/post.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import {
44
initLocaleDatetime,
55
initClipboard,
66
smoothScroll,
7-
initPageviews
7+
initPageviews,
8+
toc
89
} from './modules/plugins';
910

1011
basic();
@@ -13,5 +14,6 @@ initTopbar();
1314
imgExtra();
1415
initLocaleDatetime();
1516
initClipboard();
16-
smoothScroll();
17+
toc();
18+
smoothScroll(); // must be called after toc is created
1719
initPageviews();

‎_layouts/default.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
{% include head.html %}
2020

21-
<body data-spy="scroll" data-target="#toc" data-topbar-visible="true">
21+
<body data-topbar-visible="true">
2222

2323
{% include sidebar.html %}
2424

‎_sass/colors/dark-typography.scss‎

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,12 @@
2727
--checkbox-color: rgb(118, 120, 121);
2828
--checkbox-checked-color: var(--link-color);
2929
--img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
30-
--shimmer-bg:
31-
linear-gradient(
32-
90deg,
33-
rgba(255, 255, 255, 0) 0%,
34-
rgba(58, 55, 55, 0.4) 50%,
35-
rgba(255, 255, 255, 0) 100%
36-
);
30+
--shimmer-bg: linear-gradient(
31+
90deg,
32+
rgba(255, 255, 255, 0) 0%,
33+
rgba(58, 55, 55, 0.4) 50%,
34+
rgba(255, 255, 255, 0) 100%
35+
);
3736

3837
/* Sidebar */
3938
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
@@ -117,16 +116,6 @@
117116
border-color: var(--main-border-color);
118117
}
119118

120-
/* posts' toc, override BS */
121-
nav[data-toggle="toc"] .nav-link.active,
122-
nav[data-toggle="toc"] .nav-link.active:focus,
123-
nav[data-toggle="toc"] .nav-link.active:hover,
124-
nav[data-toggle="toc"] .nav > li > a:focus,
125-
nav[data-toggle="toc"] .nav > li > a:hover {
126-
color: var(--toc-highlight) !important;
127-
border-left-color: var(--toc-highlight) !important;
128-
}
129-
130119
/* categories */
131120
.categories.card,
132121
.list-group-item {
@@ -151,20 +140,20 @@
151140
}
152141

153142
#archives li:nth-child(odd) {
154-
background-image:
155-
linear-gradient(
156-
to left,
157-
rgb(26, 26, 30),
158-
rgb(39, 39, 45),
159-
rgb(39, 39, 45),
160-
rgb(39, 39, 45),
161-
rgb(26, 26, 30)
162-
);
143+
background-image: linear-gradient(
144+
to left,
145+
rgb(26, 26, 30),
146+
rgb(39, 39, 45),
147+
rgb(39, 39, 45),
148+
rgb(39, 39, 45),
149+
rgb(26, 26, 30)
150+
);
163151
}
164152

165153
color-scheme: dark;
166154

167-
#disqus_thread { /* stylelint-disable-line selector-id-pattern */
155+
/* stylelint-disable-next-line selector-id-pattern */
156+
#disqus_thread {
168157
color-scheme: none;
169158
}
170159
} /* dark-scheme */

0 commit comments

Comments
 (0)