kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix long toc issue

This commit is contained in:
zzossig 2020-12-09 05:12:03 +09:00
parent 69e72bd144
commit 621c83a392
4 changed files with 113 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
archetypes/default.md
View File

@ -6,6 +6,7 @@ draft: false
hideToc: false
enableToc: true
enableTocContent: false
tocFolding: false
tocPosition: inner
tocLevels: ["h2", "h3", "h4"]
tags:

12
assets/js/helper/throttle.js Normal file
View File

@ -0,0 +1,12 @@
function throttle(callback, limit) {
var waiting = false;
return function () {
if (!waiting) {
callback.apply(this, arguments);
waiting = true;
setTimeout(function () {
waiting = false;
}, limit);
}
};
}

116
assets/sass/components/_toc.scss
View File

@ -2,13 +2,28 @@
width: 100%;
max-width: $sidebar-width;
position: fixed;
overflow-y: auto;
top: 7rem;
font-size: 0.85rem;
padding-left: 0.5rem;
z-index: z('toc');
z-index: z("toc");
@include themify($themes) {
@include webkit-scrollbars(
themed("custom-scrollbar-foreground-color"),
themed("custom-scrollbar-background-color")
);
@include moz-scrollbars(themed("custom-scrollbar-foreground-color"), themed("custom-scrollbar-background-color"));
}
&[data-dir="rtl"] {
padding-right: 0.5rem;
}
&[data-dir="ltr"] {
padding-left: 0.5rem;
}
&[data-ani="true"] {
@include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
@include animation("slide-in-down-little .2s .3s 1 ease-in backwards");
}
@include no-select;
@ -46,7 +61,7 @@
}
&[data-ani="true"] {
@include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
@include animation("slide-in-down-little .2s .3s 1 ease-in backwards");
}
}
@ -70,11 +85,11 @@
margin-top: 0.5rem;
&[data-ani="true"] {
@include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
@include animation("slide-in-down-little .2s .3s 1 ease-in backwards");
}
@include themify($themes) {
color: themed('toc-label-color');
color: themed("toc-label-color");
}
&--outer {
@ -85,20 +100,20 @@
}
&[data-dir="ltr"] {
&[data-folding=true] {
&[data-folding="true"] {
@include themify($themes) {
a {
color: themed('toc-vertical-line');
color: themed("toc-vertical-line");
position: relative;
padding-left: 0.25rem;
&::before {
content: '';
content: "";
height: 100%;
left: -1rem;
margin-top: -1px;
left: -0.5rem;
position: absolute;
width: 2px;
background-color: themed('toc-vertical-line');
background-color: themed("toc-vertical-line");
&:last-child {
background-color: transparent;
}
@ -106,28 +121,28 @@
}
.active {
color: themed('toc-vertical-line-active');
color: themed("toc-vertical-line-active");
font-weight: 700;
&::before {
background-color: themed('toc-vertical-line-active');
background-color: themed("toc-vertical-line-active");
}
}
}
}
&[data-folding=false] {
&[data-folding="false"] {
@include themify($themes) {
a {
color: themed('toc-vertical-line');
color: themed("toc-vertical-line");
&.active {
color: themed('toc-vertical-line-active');
color: themed("toc-vertical-line-active");
&::before {
background-color: themed('toc-vertical-line-active');
content: '';
background-color: themed("toc-vertical-line-active");
content: "";
height: 0.95rem;
left: -1rem;
left: -0.5rem;
margin-top: 2px;
position: absolute;
width: 2px;
@ -145,7 +160,7 @@
li {
li {
margin-left: 1rem;
color: themed('sidebar-li-color');
color: themed("sidebar-li-color");
}
}
}
@ -153,50 +168,49 @@
}
&[data-dir="rtl"] {
&[data-folding=true] {
a {
color: inherit;
position: relative;
&::before {
@include themify($themes) {
background-color: themed('toc-vertical-line');
}
content: '';
height: 100%;
right: -1rem;
margin-top: -1px;
position: absolute;
width: 2px;
&:last-child {
background-color: transparent;
&[data-folding="true"] {
@include themify($themes) {
a {
color: themed("toc-vertical-line");
position: relative;
padding-right: 0.25rem;
&::before {
content: "";
height: 100%;
right: -0.5rem;
position: absolute;
width: 2px;
background-color: themed("toc-vertical-line");
&:last-child {
background-color: transparent;
}
}
}
}
.active {
@include themify($themes) {
color: themed('link-hover');
.active {
color: themed("toc-vertical-line-active");
font-weight: 700;
&::before {
background-color: themed('toc-vertical-line-active');
background-color: themed("toc-vertical-line-active");
}
}
}
}
&[data-folding=false] {
&[data-folding="false"] {
@include themify($themes) {
a {
color: themed('toc-vertical-line');
color: themed("toc-vertical-line");
&.active {
color: themed('toc-vertical-line-active');
color: themed("toc-vertical-line-active");
&::before {
background-color: themed('toc-vertical-line-active');
content: '';
background-color: themed("toc-vertical-line-active");
content: "";
height: 0.95rem;
right: -1rem;
right: -0.5rem;
margin-top: 2px;
position: absolute;
width: 2px;
@ -214,7 +228,7 @@
li {
li {
margin-right: 1rem;
color: themed('sidebar-li-color');
color: themed("sidebar-li-color");
}
}
}
@ -224,9 +238,9 @@
ul {
@include themify($themes) {
a {
color: themed('toc-title-color');
color: themed("toc-title-color");
&.active {
color: themed('toc-vertical-line-active');
color: themed("toc-vertical-line-active");
}
}
}

19
layouts/partials/script/single-script.html
View File

@ -12,6 +12,8 @@
<script defer src="{{ $prop.RelPermalink }}"></script>
{{ $fadeinout := resources.Get "js/helper/fadeinout.js" | resources.Minify }}
<script defer src="{{ $fadeinout.RelPermalink }}"></script>
{{ $throttle := resources.Get "js/helper/throttle.js" | resources.Minify }}
<script defer src="{{ $throttle.RelPermalink }}"></script>
{{ if in .Params.Libraries "d3" }}
<script defer src="{{ $d3.d3.url }}" integrity="{{ $d3.d3.sri }}" crossorigin="anonymous"></script>
@ -339,6 +341,23 @@
// ======================== TOC height calc ========================
var topOffset = 120;
var botOffset = 70;
var handleWindowResize = function () {
if (tocElem) {
tocElem.style.maxHeight = (window.innerHeight - topOffset - botOffset) + 'px';
}
}
var throttledWindowResize = throttle(handleWindowResize, 300);
throttledWindowResize()
window.addEventListener('resize', throttledWindowResize);
// =================================================================
// ==================== add links in all titles ====================
var text, clip = new ClipboardJS('.anchor');
var headers = singleContentsElem.querySelectorAll("h1, h2, h3, h4");