From 40ed21035436ce6b2058500b6fc5a512ea941f21 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Thu, 16 Mar 2023 02:56:54 +0800 Subject: [PATCH] feat: change TOC plugin to `tocbot` (#774) --- _config.yml | 2 +- _data/assets/cross_origin.yml | 6 +-- _data/assets/self_host.yml | 6 +-- _includes/head.html | 2 +- _includes/toc.html | 12 ++--- _javascript/modules/components/toc.js | 11 +++++ _javascript/modules/plugins.js | 1 + _javascript/post.js | 6 ++- _layouts/default.html | 2 +- _sass/colors/dark-typography.scss | 43 ++++++---------- _sass/colors/light-typography.scss | 22 +++++---- _sass/layout/post.scss | 70 ++++++++++++++++++++------- assets/lib | 2 +- 13 files changed, 114 insertions(+), 71 deletions(-) create mode 100644 _javascript/modules/components/toc.js diff --git a/_config.yml b/_config.yml index 6e4d9838164..5e7440e00fd 100644 --- a/_config.yml +++ b/_config.yml @@ -85,7 +85,7 @@ img_cdn: # avatar: '/gudtldn.png' avatar: '/assets/img/avatar.png' -# boolean type, the global switch for ToC in posts. +# boolean type, the global switch for TOC in posts. toc: true comments: diff --git a/_data/assets/cross_origin.yml b/_data/assets/cross_origin.yml index a3a8dfb2378..01d558f727d 100644 --- a/_data/assets/cross_origin.yml +++ b/_data/assets/cross_origin.yml @@ -22,9 +22,9 @@ bootstrap: css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js -bootstrap-toc: - css: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css - js: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js +toc: + css: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.css + js: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.js fontawesome: css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css diff --git a/_data/assets/self_host.yml b/_data/assets/self_host.yml index 817c78ee43e..cba1d8118e5 100644 --- a/_data/assets/self_host.yml +++ b/_data/assets/self_host.yml @@ -11,9 +11,9 @@ bootstrap: css: /assets/lib/bootstrap-4.6.1/bootstrap.min.css js: /assets/lib/bootstrap-4.6.1/bootstrap.bundle.min.js -bootstrap-toc: - css: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css - js: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js +toc: + css: /assets/lib/tocbot-4.20.1/tocbot.min.css + js: /assets/lib/tocbot-4.20.1/tocbot.min.js fontawesome: css: /assets/lib/fontawesome-free-6.2.1/css/all.min.css diff --git a/_includes/head.html b/_includes/head.html index 62f060b676b..a1fc8353350 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -98,7 +98,7 @@ {% if site.toc and page.toc %} - + {% endif %} {% if page.layout == 'page' or page.layout == 'post' %} diff --git a/_includes/toc.html b/_includes/toc.html index 6d88167a8b8..0d1967c4c6d 100644 --- a/_includes/toc.html +++ b/_includes/toc.html @@ -6,11 +6,11 @@ {% endif %} {% if enable_toc %} - - +
+
{{- site.data.locales[site.lang].panel.toc -}}
+ +
-
-
{{- site.data.locales[site.lang].panel.toc -}}
- -
+ + {% endif %} diff --git a/_javascript/modules/components/toc.js b/_javascript/modules/components/toc.js new file mode 100644 index 00000000000..ba0415d3ff8 --- /dev/null +++ b/_javascript/modules/components/toc.js @@ -0,0 +1,11 @@ +export function toc() { + // see: https://github.com/tscanlin/tocbot#usage + tocbot.init({ + tocSelector: '#toc', + contentSelector: '.post-content', + ignoreSelector: '[data-toc-skip]', + headingSelector: 'h2, h3', + orderedList: false, + scrollSmooth: false + }); +} diff --git a/_javascript/modules/plugins.js b/_javascript/modules/plugins.js index 48ada6f321d..8d654359e56 100644 --- a/_javascript/modules/plugins.js +++ b/_javascript/modules/plugins.js @@ -4,3 +4,4 @@ export { imgExtra } from './components/img-extra'; export { initLocaleDatetime } from './components/locale-datetime'; export { initPageviews } from './components/pageviews'; export { smoothScroll } from './components/smooth-scroll'; +export { toc } from './components/toc'; diff --git a/_javascript/post.js b/_javascript/post.js index 2f8cc5c6d9f..4b472bce38f 100644 --- a/_javascript/post.js +++ b/_javascript/post.js @@ -4,7 +4,8 @@ import { initLocaleDatetime, initClipboard, smoothScroll, - initPageviews + initPageviews, + toc } from './modules/plugins'; basic(); @@ -13,5 +14,6 @@ initTopbar(); imgExtra(); initLocaleDatetime(); initClipboard(); -smoothScroll(); +toc(); +smoothScroll(); // must be called after toc is created initPageviews(); diff --git a/_layouts/default.html b/_layouts/default.html index 6d1b0a52798..a98c2306191 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -18,7 +18,7 @@ {% include head.html %} - + {% include sidebar.html %} diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 761a9036684..13ad156b2cf 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -27,13 +27,12 @@ --checkbox-color: rgb(118, 120, 121); --checkbox-checked-color: var(--link-color); --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%); - --shimmer-bg: - linear-gradient( - 90deg, - rgba(255, 255, 255, 0) 0%, - rgba(58, 55, 55, 0.4) 50%, - rgba(255, 255, 255, 0) 100% - ); + --shimmer-bg: linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(58, 55, 55, 0.4) 50%, + rgba(255, 255, 255, 0) 100% + ); /* Sidebar */ --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); @@ -117,16 +116,6 @@ border-color: var(--main-border-color); } - /* posts' toc, override BS */ - nav[data-toggle="toc"] .nav-link.active, - nav[data-toggle="toc"] .nav-link.active:focus, - nav[data-toggle="toc"] .nav-link.active:hover, - nav[data-toggle="toc"] .nav > li > a:focus, - nav[data-toggle="toc"] .nav > li > a:hover { - color: var(--toc-highlight) !important; - border-left-color: var(--toc-highlight) !important; - } - /* categories */ .categories.card, .list-group-item { @@ -151,20 +140,20 @@ } #archives li:nth-child(odd) { - background-image: - linear-gradient( - to left, - rgb(26, 26, 30), - rgb(39, 39, 45), - rgb(39, 39, 45), - rgb(39, 39, 45), - rgb(26, 26, 30) - ); + background-image: linear-gradient( + to left, + rgb(26, 26, 30), + rgb(39, 39, 45), + rgb(39, 39, 45), + rgb(39, 39, 45), + rgb(26, 26, 30) + ); } color-scheme: dark; - #disqus_thread { /* stylelint-disable-line selector-id-pattern */ + /* stylelint-disable-next-line selector-id-pattern */ + #disqus_thread { color-scheme: none; } } /* dark-scheme */ diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index 7bfb514834f..59516096849 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -24,14 +24,17 @@ --btn-box-shadow: #eaeaea; --checkbox-color: #c5c5c5; --checkbox-checked-color: #07a8f7; - --img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%); - --shimmer-bg: - linear-gradient( - 90deg, - rgba(250, 250, 250, 0) 0%, - rgba(232, 230, 230, 1) 50%, - rgba(250, 250, 250, 0) 100% - ); + --img-bg: radial-gradient( + circle, + rgb(255, 255, 255) 0%, + rgb(249, 249, 249) 100% + ); + --shimmer-bg: linear-gradient( + 90deg, + rgba(250, 250, 250, 0) 0%, + rgba(232, 230, 230, 1) 50%, + rgba(250, 250, 250, 0) 100% + ); /* Sidebar */ --sidebar-bg: #eeeeee; @@ -59,6 +62,7 @@ --pin-color: #999fa4; /* Posts */ + --toc-highlight: #563d7c; --btn-share-hover-color: var(--link-color); --card-border-color: #f1f1f1; --card-box-shadow: rgba(234, 234, 234, 0.76); @@ -85,7 +89,7 @@ --prompt-danger-bg: rgb(248, 215, 218, 0.56); --prompt-danger-icon-color: #df3c30; - [class^="prompt-"] { + [class^='prompt-'] { --link-underline-color: rgb(219, 216, 216); } diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index c79331b2add..2690cf4a0d7 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -17,7 +17,7 @@ } @mixin dot($pl: 0.25rem, $pr: 0.25rem) { - content: "\2022"; + content: '\2022'; padding-left: $pl; padding-right: $pr; } @@ -91,6 +91,7 @@ h1 + .post-meta { vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; + -ms-user-select: none; user-select: none; .share-icons { @@ -115,7 +116,7 @@ h1 + .post-meta { &:hover { text-decoration: none; - >i { + > i { @extend %btn-share-hovor; } } @@ -250,24 +251,58 @@ h1 + .post-meta { transition: top 0.2s ease-in-out; -webkit-animation: fade-up 0.8s; animation: fade-up 0.8s; -} -#toc { - ul.nav.navbar-nav { - margin: 0.5rem 0; - padding: 0; + ul { + list-style: none; + font-size: 0.85rem; + line-height: 1.25; + padding-left: 0; li { - padding-top: 2px; - padding-bottom: 2px; + &:not(:last-child) { + margin: 0.4rem 0; + } + + a { + padding: 0.2rem 0 0.2rem 1.25rem; + } } - } -} -nav[data-toggle="toc"] { - .nav { - .nav > li > a.active { - font-weight: 600 !important; + /* Overwrite TOC plugin style */ + + .toc-link { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + color: var(--toc-highlight); + text-decoration: none; + } + + &::before { + display: none; + } + } + + .is-active-link { + color: var(--toc-highlight) !important; + font-weight: 600; + + &::before { + display: inline-block; + width: 1px; + left: -1px; + height: 1.25rem; + background-color: var(--toc-highlight) !important; + } + } + + ul { + a { + padding-left: 2rem; + } } } } @@ -324,7 +359,8 @@ nav[data-toggle="toc"] { margin-bottom: 2rem; } - #disqus_thread { /* stylelint-disable-line selector-id-pattern */ + /* stylelint-disable-next-line selector-id-pattern */ + #disqus_thread { min-height: 8.5rem; } } @@ -337,7 +373,7 @@ nav[data-toggle="toc"] { @include label(inherit, 400, inherit); &::after { - content: ":"; + content: ':'; } } diff --git a/assets/lib b/assets/lib index e372141074f..ba49daf38b3 160000 --- a/assets/lib +++ b/assets/lib @@ -1 +1 @@ -Subproject commit e372141074f370c6f03b68b5264e7663f2b7477c +Subproject commit ba49daf38b3abd1bfcec2a70b2ecc26ffcc4ce71