From b5bcc24ca2d190d2ffc035ef0c13cbc7ae1abfc4 Mon Sep 17 00:00:00 2001 From: Jimmy Date: Sun, 20 Jun 2021 16:30:13 +0200 Subject: [PATCH] feat: Table of Content (WIP) --- assets/scss/partials/layout/article.scss | 115 +++++++++++++++++++++++ layouts/_default/baseof.html | 6 +- layouts/post/single.html | 47 ++++++--- 3 files changed, 155 insertions(+), 13 deletions(-) diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss index 03e8ea1..f7bc766 100644 --- a/assets/scss/partials/layout/article.scss +++ b/assets/scss/partials/layout/article.scss @@ -114,6 +114,121 @@ } } +.article-page.has-toc { + scroll-behavior: smooth; + + .left-sidebar { + display: none; + } + + .right-sidebar { + width: 100%; + max-width: unset; + grid-column: span 3 / span 3; + padding: 0; + display: none; + + @include respond(xl) { + display: block; + top: var(--main-top-padding); + } + } + + #article-toolbar { + grid-column: span 12 / span 12; + display: block; + + padding: 0 15px; + + @include respond(md) { + padding: 0; + } + + @include respond(xl) { + grid-column: span 1 / span 1; + + margin-top: 0; + position: sticky; + top: var(--main-top-padding); + + a { + background: transparent; + box-shadow: none; + border: 1px solid var(--body-text-color); + width: 100%; + margin-right: 0; + svg { + flex-shrink: 0; + } + } + } + } + + .main-container { + display: grid; + grid-template-columns: repeat(12, minmax(0, 1fr)); + align-items: start; + column-gap: 20px; + } + + .main { + grid-column: span 12 / span 12; + padding-top: 0; + + @include respond(md) { + padding-left: 0; + padding-right: 0; + } + + @include respond(xl) { + grid-column: span 8 / span 8; + padding-top: var(--main-top-padding); + } + } +} + +.widget--toc { + background-color: var(--card-background); + border-radius: var(--card-border-radius); + box-shadow: var(--shadow-l1); + display: flex; + flex-direction: column; + + #TableOfContents { + ul { + list-style-type: none; + counter-reset: section; + } + + & > ul { + padding: 0; + margin: 0; + } + + li { + margin: 15px 20px; + padding: 5px; + + &::before { + counter-increment: section; + content: counters(section, ".") ". "; + font-weight: bold; + margin-right: 5px; + } + + & > ul { + margin-top: 10px; + padding-left: 10px; + margin-bottom: -5px; + + & > li:last-child { + margin-bottom: 0; + } + } + } + } +} + .related-contents--wrapper { margin-bottom: var(--section-separation); } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index ce0ddae..5413c0f 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,8 +6,10 @@ {{- partial "head/colorScheme" . -}} -
- {{ partial "sidebar/left.html" . }} +
+ {{- block "left-sidebar" . -}} + {{ partial "sidebar/left.html" . }} + {{- end -}}
{{- block "main" . }}{{- end }}
diff --git a/layouts/post/single.html b/layouts/post/single.html index be983ec..dffd479 100644 --- a/layouts/post/single.html +++ b/layouts/post/single.html @@ -1,21 +1,46 @@ -{{ define "container-class" }}article-page with-toolbar hide-sidebar-sm{{ end }} +{{ .Scratch.Set "hasTOC" (ge (len .TableOfContents) 100) }} +{{ define "body-class" }}article-page keep-sidebar{{ if .Scratch.Get "hasTOC" }} has-toc{{ end }}{{ end }} +{{ define "container-class" }}extended{{ end }} {{ define "main" }} -
- - {{ (resources.Get "icons/back.svg").Content | safeHTML }} - Back - -
- {{ partial "article/article.html" . }} {{ partial "article/components/related-contents" . }} - - {{ if or (not (isset .Params "comments")) (eq .Params.comments "true")}} + + {{ if or (not (isset .Params "comments")) (eq .Params.comments "true")}} {{ partial "comments/include" . }} {{ end }} {{ partialCached "footer/footer" . }} - {{- partialCached "article/components/photoswipe.html" . -}} + {{ partialCached "article/components/photoswipe" . }} +{{ end }} + +{{ define "left-sidebar" }} + {{ if .Scratch.Get "hasTOC" }} +
+ + {{ (resources.Get "icons/back.svg").Content | safeHTML }} + Back + +
+ {{ else }} + {{ partial "sidebar/left.html" . }} + {{ end }} +{{ end }} + +{{ define "right-sidebar" }} + {{ if .Scratch.Get "hasTOC" }} + + {{ end }} {{ end }} \ No newline at end of file