diff options
| -rw-r--r-- | assets/css/index.css | 24 | ||||
| -rw-r--r-- | hugo.toml | 2 | ||||
| -rw-r--r-- | layouts/_default/single.html | 1 | ||||
| -rw-r--r-- | layouts/partials/scripts.html | 15 |
4 files changed, 39 insertions, 3 deletions
diff --git a/assets/css/index.css b/assets/css/index.css index 45e6ed79..0eede4a1 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -20,6 +20,8 @@ --waline-font-size: 20px; --waline-border-color: var(--border-color); --waline-bg-color: var(--background-color); + + --page-width: 700px; } .dark { @@ -48,6 +50,7 @@ body { margin: 0 20px; background-color: var(--background-color); color: var(--text-color); + position: relative } body::before { @@ -63,9 +66,8 @@ body::before { } article { - max-width: 700px; - margin-left: auto; - margin-right: auto; + width: var(--page-width); + margin: 0 auto } a { @@ -626,6 +628,22 @@ a.blog-link img { display: block; } +/* toc */ + +#toc-container { + position: absolute; + bottom: 0; + right: calc(50% + var(--page-width) / 2); + left: auto; + height: 100%; + top: 10rem; +} + +#toc { + position: sticky; + top: 3rem +} + /* transition swup */ html.is-changing .transition-fade { @@ -21,10 +21,12 @@ favicon = "/favicon.png" extraCSSFiles = [ 'https://unpkg.com/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.css', + 'https://unpkg.com/tocbot@4.32.2/dist/tocbot.css', 'https://unpkg.com/@waline/client@v3/dist/waline.css' ] externalJSFIles = [ 'https://unpkg.com/swup@4', + 'https://unpkg.com/tocbot@4.32.2/dist/tocbot.min.js', 'https://unpkg.com/vanilla-lazyload@19.1.3/dist/lazyload.min.js', 'https://unpkg.com/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.umd.js' ] diff --git a/layouts/_default/single.html b/layouts/_default/single.html index f212dd36..51d9cacd 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -32,6 +32,7 @@ <!-- Post Content --> <div id="post-content" class="post-content markdown-body"> + <div id="toc-container"><div id="toc"></div></div> {{ .Site.Params.postHeaderContent | safeHTML }} {{ .Content }} </div> diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 60ef902c..89be5e8d 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -33,11 +33,26 @@ lazyLoadInstance.update(); /* === Fancybox === */ Fancybox.bind("[data-fancybox]"); +/* === tocbot === */ +function loadToc() { + tocbot.init({ + tocSelector: '#toc', + // Where to grab the headings to build the table of contents. + contentSelector: '#post-content', + // Which headings to grab inside of the contentSelector element. + headingSelector: 'h2, h3', + // For headings inside relative or absolute positioned containers within content. + hasInnerContainers: true, + }); +} +loadToc(); + /* === swup === */ const swup = new Swup(); swup.hooks.on('page:view', () => { loadWalineComment(); lazyLoadInstance.update(); Fancybox.bind("[data-fancybox]"); + loadToc(); }); </script> |