Skip to content

Commit dd054c9

Browse files
meldrameldra
committed
Add layout with custom TableOfContents in left sidebar
1 parent 0d8f4a8 commit dd054c9

File tree

4 files changed

+113
-0
lines changed

4 files changed

+113
-0
lines changed

‎themes/CodeMeta-Pyramids/layouts/_default/sidenav.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{{ define "body" }}
2+
<body class="profile-page"> <!-- other classes: index-page , landing-page -->
3+
4+
{{ partial "nav.html" . }}
5+
{{ partial "page-header.html" . }}
6+
7+
8+
<div class="main main-raised">
9+
<div class="section section-basic">
10+
<div class="container">
11+
12+
<div class="row container-fluid">
13+
14+
<div id="sidebar" class="col-md-3 flex-nowrap min-vh-md-100">
15+
{{ partial "toc" . }}
16+
</div>
17+
18+
<div class="col-md-9">
19+
{{ .Content }}
20+
</div>
21+
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
27+
{{ partial "footer" . }}
28+
29+
</body>
30+
{{ end }}

‎themes/CodeMeta-Pyramids/layouts/partials/toc.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!-- ToC code based on https://northcoder.com/post/customizing-hugo-tables-of-contents/ -->
2+
3+
<div id="toc">
4+
<h4 class="ps-2 py-3">Table of Contents</h4>
5+
{{ with .Fragments }}
6+
{{ partial "toc_level" . }}
7+
{{ end }}
8+
</div>
9+
10+
11+
12+

‎themes/CodeMeta-Pyramids/layouts/partials/toc_level.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{{ range .Headings }}
2+
{{ if gt .Level 0 }}
3+
<div class="toc-{{ .Level }} toc-level"><a class="p-2 d-inline-block w-100 h-100 toc-link-{{ .Level }}"
4+
href="#{{ .ID }}">{{ .Title | htmlUnescape }}</a></div>
5+
{{ end }}
6+
{{ partial "toc_level" . }}
7+
{{ end }}

‎themes/CodeMeta-Pyramids/static/css/codemeta.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,3 +101,67 @@ div.highlight {
101101
}
102102
}
103103

104+
/*!
105+
* ToC theming
106+
*/
107+
108+
h1,h2,h3,h4,h5,h6,h7 {
109+
scroll-margin: 70px;
110+
}
111+
112+
@media only screen and (min-width: 992px) {
113+
114+
#toc {
115+
border-right: 2px solid var(--bs-dark-border-subtle);
116+
}
117+
118+
.toc-level {
119+
border-right: 5px solid var(--bs-secondary-bg);
120+
}
121+
122+
.toc-level:hover {
123+
background-color: var(--bs-dark-bg-subtle);
124+
border-right: 5px solid var(--bs-dark-border-subtle);
125+
}
126+
127+
[data-bs-theme=dark] #toc {
128+
border-right: 2px solid var(--bs-border-color);
129+
}
130+
131+
[data-bs-theme=dark] .toc-level {
132+
border-right: 5px solid var(--bs-secondary-bg);
133+
}
134+
135+
[data-bs-theme=dark] .toc-level:hover {
136+
background-color: var(--bs-tertiary-bg);
137+
border-right: 5px solid var(--bs-border-color);
138+
}
139+
}
140+
141+
.toc-1 {
142+
padding-left: -1rem;
143+
}
144+
145+
.toc-2 {
146+
padding-left: 0rem;
147+
}
148+
149+
.toc-3 {
150+
padding-left: 1rem;
151+
}
152+
153+
.toc-4 {
154+
padding-left: 2rem;
155+
}
156+
157+
.toc-5 {
158+
padding-left: 3rem;
159+
}
160+
161+
.toc-6 {
162+
padding-left: 3.5rem;
163+
}
164+
165+
.toc-7 {
166+
padding-left: 4rem;
167+
}

0 commit comments

Comments
 (0)