mirror of
https://github.com/CaiJimmy/hugo-theme-stack.git
synced 2025-04-29 03:53:30 +08:00
feat: Table of Content (WIP)
This commit is contained in:
Jimmy
parent
dda55f87e2
commit
b5bcc24ca2
@ -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);
|
||||
}
|
||||
|
||||
@ -6,8 +6,10 @@
|
||||
</head>
|
||||
<body class="{{ block `body-class` . }}{{ end }}">
|
||||
{{- partial "head/colorScheme" . -}}
|
||||
<div class="container main-container flex on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}">
|
||||
{{ partial "sidebar/left.html" . }}
|
||||
<div class="container main-container flex on-phone--column {{ block `container-class` . }}{{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}{{ end }}">
|
||||
{{- block "left-sidebar" . -}}
|
||||
{{ partial "sidebar/left.html" . }}
|
||||
{{- end -}}
|
||||
<main class="main full-width">
|
||||
{{- block "main" . }}{{- end }}
|
||||
</main>
|
||||
|
||||
@ -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" }}
|
||||
<div id="article-toolbar">
|
||||
<a href="{{ .Site.BaseURL }}" class="back-home">
|
||||
{{ (resources.Get "icons/back.svg").Content | safeHTML }}
|
||||
<span>Back</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{ 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" }}
|
||||
<div id="article-toolbar">
|
||||
<a href="{{ .Site.BaseURL }}" class="back-home">
|
||||
{{ (resources.Get "icons/back.svg").Content | safeHTML }}
|
||||
<span>Back</span>
|
||||
</a>
|
||||
</div>
|
||||
{{ else }}
|
||||
{{ partial "sidebar/left.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "right-sidebar" }}
|
||||
{{ if .Scratch.Get "hasTOC" }}
|
||||
<aside class="sidebar right-sidebar sticky">
|
||||
<section class="widget archives">
|
||||
<div class="widget-icon">
|
||||
{{ partial "helper/icon" "hash" }}
|
||||
</div>
|
||||
<h2 class="widget-title section-title">Table of contents</h2>
|
||||
|
||||
<div class="widget--toc">
|
||||
{{ .TableOfContents }}
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
Loading…
Reference in New Issue
Block a user