asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

feat: change TOC plugin to tocbot (#774)

Browse source
This commit is contained in:
Cotes Chung 2023-03-16 02:56:54 +08:00
parent 474b4ba681
commit 02b7bd5095
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
13 changed files with 115 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_config.yml
View file

@ -82,7 +82,7 @@ img_cdn: "https://chirpy-img.netlify.app"
# the avatar on sidebar, support local or CORS resources
avatar: "/commons/avatar.jpg"
# boolean type, the global switch for ToC in posts.
# boolean type, the global switch for TOC in posts.
toc: true
comments:

6
_data/assets/cross_origin.yml
View file

@ -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

6
_data/assets/self_host.yml
View file

@ -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

2
_includes/head.html
View file

@ -97,7 +97,7 @@
<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
{% if site.toc and page.toc %}
<link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap-toc.css | relative_url }}">
<link rel="stylesheet" href="{{ site.data.assets[origin].toc.css | relative_url }}">
{% endif %}
{% if page.layout == 'page' or page.layout == 'post' %}

12
_includes/toc.html
View file

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

11
_javascript/modules/components/toc.js Normal file
View file

@ -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
});
}

1
_javascript/modules/plugins.js
View file

@ -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';

6
_javascript/post.js
View file

@ -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();

2
_layouts/default.html
View file

@ -18,7 +18,7 @@ layout: compress
{% include head.html %}
<body data-spy="scroll" data-target="#toc" data-topbar-visible="true">
<body data-topbar-visible="true">
{% include sidebar.html %}

43
_sass/colors/dark-typography.scss
View file

@ -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 */

22
_sass/colors/light-typography.scss
View file

@ -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);
}

72
_sass/layout/post.scss
View file

@ -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;
}
nav[data-toggle="toc"] {
.nav {
.nav > li > a.active {
font-weight: 600 !important;
a {
padding: 0.2rem 0 0.2rem 1.25rem;
}
}
/* 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: ':';
}
}

2
assets/lib

@ -1 +1 @@
Subproject commit e372141074f370c6f03b68b5264e7663f2b7477c
Subproject commit ba49daf38b3abd1bfcec2a70b2ecc26ffcc4ce71