Adding TOC

This commit is contained in:
2020-06-08 03:34:08 +01:00
parent ffb038929c
commit d369ecf296
2 changed files with 34 additions and 20 deletions

View File

@@ -1,11 +1,11 @@
{{ define "main" }} {{ define "main" }}
<main class="content-page container pt-7 pb-5"> <main class="content-page container-fluid pt-7 pb-5">
{{ $page := . }} {{ $page := . }}
<div class="row"> <div class="row">
<div class="col"> <div class="col-lg-8">
<article> <article>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-8"> <div class="col-lg-9">
<div class="meta text-muted mb-3"> <div class="meta text-muted mb-3">
<p class="created text-muted text-uppercase font-weight-bold mb-1">{{ $page.Date.Format "January 2, 2006" }}</p> <p class="created text-muted text-uppercase font-weight-bold mb-1">{{ $page.Date.Format "January 2, 2006" }}</p>
<span class="mr-2"><i class="fas fa-book-open mr-2"></i>{{ $page.WordCount }} words</span> <span class="mr-2"><i class="fas fa-book-open mr-2"></i>{{ $page.WordCount }} words</span>
@@ -20,30 +20,29 @@
{{- with .Resources.Match "images/banner.svg" -}} {{- with .Resources.Match "images/banner.svg" -}}
{{ range . }} {{ range . }}
<div class="row justify-content-center mb-3"> <div class="row justify-content-center mb-3">
<div class="col-lg-10"> <div class="col-lg-10">
<img data-src="{{ .RelPermalink }}" class="img-fluid rounded mx-auto d-block" alt="{{ $page.Title }}" data-aos="zoom-in"> <img data-src="{{ .RelPermalink }}" class="img-fluid rounded mx-auto d-block" alt="{{ $page.Title }}" data-aos="zoom-in">
</div>
</div> </div>
</div>
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
{{- with $page.Params.tags -}} {{- with $page.Params.tags -}}
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-8"> <div class="col-lg-9">
<div class="tags my-3"> <div class="tags my-3">
{{- range . -}} {{- range . -}}
<a class="badge badge-pill badge-light border mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}"> <a class="badge badge-pill badge-light border mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">
<i class="fas fa-tag mr-2"></i>{{ . }} <i class="fas fa-tag mr-2"></i>{{ . }}
</a> </a>
{{- end -}} {{- end -}}
</div> </div>
</div> </div>
</div> </div>
{{- end -}} {{- end -}}
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-8"> <div class="col-lg-9">
<div class="content"> <div class="content">
{{ $page.Content }} {{ $page.Content }}
</div> </div>
@@ -52,15 +51,9 @@
</div> </div>
</div> </div>
<div class="row justify-content-center">
<div class="col-lg-8">
{{ template "_internal/disqus.html" . }}
</div>
</div>
{{- if .Site.Params.commento.enable -}} {{- if .Site.Params.commento.enable -}}
<div class="row justify-content-center my-3"> <div class="row justify-content-center my-3">
<div class="col-lg-8"> <div class="col-lg-6">
<div id="commento"></div> <div id="commento"></div>
<script src="{{ .Site.Params.commento.url }}"></script> <script src="{{ .Site.Params.commento.url }}"></script>
</div> </div>
@@ -68,6 +61,12 @@
{{- end -}} {{- end -}}
</article> </article>
</div> </div>
<div id="" class="col-lg-2 toc-sidebar">
<aside>
<h5 class="text-center">Table of contents</h5>
{{ .TableOfContents }}
</aside>
</div>
</div> </div>
{{ partial "related.html" $page }} {{ partial "related.html" $page }}

15
src/scss/toc.scss Normal file
View File

@@ -0,0 +1,15 @@
div.toc-sidebar {
position: fixed;
right: 0;
background-color: rgb(245,245,245);
height: 100%;
margin-top: -500%;
padding-top: 500%;
padding-bottom: 500%;
margin-right: 5%;
& li {
list-style: none;
padding-bottom: 5px;
}
}