Merge pull request #18 from Track3/feature-toc

Add support for Table of Contents
This commit is contained in:
Track3 2018-12-28 23:24:34 +08:00 committed by GitHub
commit c7ebd82a83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 99 additions and 8 deletions

View file

@ -2,6 +2,7 @@
title: "{{ replace .Name "-" " " | title }}" title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }} date: {{ .Date }}
draft: true draft: true
toc: false
featuredImg: "" featuredImg: ""
tags: tags:
- tag - tag

View file

@ -65,6 +65,12 @@ const showContent = () => {
document.getElementById('bg-img').classList.remove('show-bg-img'); document.getElementById('bg-img').classList.remove('show-bg-img');
} }
// Toggle TOC
//
const toggleToc = () => {
document.getElementById('toc').classList.toggle('show-toc');
}
if (haveHeader == true) { if (haveHeader == true) {
document.getElementById('menu-btn').addEventListener('click', mobileMenuToggle); document.getElementById('menu-btn').addEventListener('click', mobileMenuToggle);

View file

@ -145,6 +145,10 @@ table {
height: 1em; height: 1em;
} }
.desktop-only, .desktop-only-ib {
display: none;
}
// Accessibility // Accessibility
// //
.screen-reader-text { .screen-reader-text {
@ -234,6 +238,7 @@ table {
border: none; border: none;
background: none; background: none;
padding: 0; padding: 0;
margin-left: .4em;
cursor: pointer; cursor: pointer;
} }
@ -587,6 +592,43 @@ hr.post-end {
} }
} }
#toc {
position: fixed;
left: 50%;
top: 0;
display: none;
}
.toc-title {
margin-left: 1em;
margin-bottom: .5em;
font-size: .8em;
font-weight: bold;
}
#TableOfContents {
font-size: .8em;
@include dimmed;
ul {
padding-left: 1em;
margin: 0;
}
&>ul {
list-style-type: none;
ul ul {
font-size: .9em;
}
}
a:hover {
border-bottom: $theme 1px solid;
}
}
.post-nav { .post-nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -619,6 +661,9 @@ hr.post-end {
text-align: center; text-align: center;
} }
// Media Queries
//
@media (min-width: 800px) { @media (min-width: 800px) {
.site-main { .site-main {
margin-top: 3em; margin-top: 3em;
@ -640,6 +685,15 @@ hr.post-end {
margin-top: 8em; margin-top: 8em;
} }
.desktop-only,
#toc.show-toc {
display: block;
}
.desktop-only-ib {
display: inline-block;
}
figure.left { figure.left {
margin-left: -240px; margin-left: -240px;
p { p {
@ -662,6 +716,12 @@ hr.post-end {
hr.post-end { hr.post-end {
width: 30%; width: 30%;
} }
#toc {
top: 13em;
margin-left: 370px;
max-width: 220px;
}
} }
@media (min-width: 1800px) { @media (min-width: 1800px) {
@ -695,6 +755,12 @@ hr.post-end {
hr.post-end { hr.post-end {
width: 30%; width: 30%;
} }
#toc {
top: 15em;
margin-left: 490px;
max-width: 300px;
}
} }
@media (max-width: 760px) { @media (max-width: 760px) {
@ -704,8 +770,7 @@ hr.post-end {
display: none; display: none;
} }
#menu-btn, #menu-btn {
#search-btn {
display: inline-block; display: inline-block;
} }

View file

@ -8,6 +8,7 @@ tags = [
"development", "development",
] ]
date = "2014-04-02" date = "2014-04-02"
toc = true
+++ +++
Hugo uses the excellent [Go][] [html/template][gohtmltemplate] library for Hugo uses the excellent [Go][] [html/template][gohtmltemplate] library for

View file

@ -7,6 +7,7 @@ tags = [
"development", "development",
] ]
date = "2014-04-02" date = "2014-04-02"
toc = true
+++ +++
## Step 1. Install Hugo ## Step 1. Install Hugo

View file

@ -1,6 +1,7 @@
--- ---
date: 2014-03-10 date: 2014-03-10
title: Migrate to Hugo from Jekyll title: Migrate to Hugo from Jekyll
toc: true
--- ---
## Move static content to `static` ## Move static content to `static`

View file

@ -17,6 +17,9 @@ other = "Archives"
[wordCount] [wordCount]
other = "{{ .WordCount }} Words" other = "{{ .WordCount }} Words"
[tableOfContents]
other = "Table of Contents"
[newer] [newer]
other = "Newer" other = "Newer"

View file

@ -17,6 +17,9 @@ other = "归档"
[wordCount] [wordCount]
other = "{{ .WordCount }} 字" other = "{{ .WordCount }} 字"
[tableOfContents]
other = "目录"
[newer] [newer]
other = "新" other = "新"

View file

@ -14,6 +14,9 @@
{{ with .Params.featuredImg -}} {{ with .Params.featuredImg -}}
<button class="hdr-btn" onclick="showFeaturedImg()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button> <button class="hdr-btn" onclick="showFeaturedImg()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
{{- end }} {{- end }}
{{- with .Params.toc -}}
<button class="hdr-btn desktop-only-ib" onclick="toggleToc()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button>
{{- end }}
{{- with .Site.Params.social -}} {{- with .Site.Params.social -}}
<span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span> <span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span>
{{- end -}} {{- end -}}

View file

@ -32,6 +32,12 @@
{{- end }} {{- end }}
</footer> </footer>
</article> </article>
{{- if .Params.toc }}
<aside id="toc">
<div class="toc-title">{{ i18n "tableOfContents" }}</div>
{{ .TableOfContents }}
</aside>
{{- end }}
<div class="post-nav thin"> <div class="post-nav thin">
{{- with .NextInSection }} {{- with .NextInSection }}
<a class="next-post" href="{{ .Permalink }}"> <a class="next-post" href="{{ .Permalink }}">

View file

@ -4,4 +4,5 @@ let mobileMenu=document.getElementById('mobile-menu');let mobileMenuVisible=fals
mobileMenuVisible=false;}} mobileMenuVisible=false;}}
const showFeaturedImg=()=>{document.getElementById('bg-img').classList.add('show-bg-img');} const showFeaturedImg=()=>{document.getElementById('bg-img').classList.add('show-bg-img');}
const showContent=()=>{document.getElementById('bg-img').classList.remove('show-bg-img');} const showContent=()=>{document.getElementById('bg-img').classList.remove('show-bg-img');}
const toggleToc=()=>{document.getElementById('toc').classList.toggle('show-toc');}
if(haveHeader==true){document.getElementById('menu-btn').addEventListener('click',mobileMenuToggle);window.addEventListener('scroll',throttle(()=>{autoHideHeader();if(mobileMenuVisible==true){mobileMenuToggle();}},250));} if(haveHeader==true){document.getElementById('menu-btn').addEventListener('click',mobileMenuToggle);window.addEventListener('scroll',throttle(()=>{autoHideHeader();if(mobileMenuVisible==true){mobileMenuToggle();}},250));}

View file

@ -1 +1 @@
{"Target":"js/main.min.00689ba18bbf9422fda222b02b555f01d54bfbb9b6d02f9bcffad67bdb2ff2cd.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-AGiboYu/lCL9oiKwK1VfAdVL+7m20C+bz/rWe9sv8s0="}} {"Target":"js/main.min.7fb60d49ca60edf9439e867daffe2481a9722cacdbe91e2a8b3c84c36d540bab.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-f7YNScpg7flDnoZ9r/4kgalyLKzb6R4qizyEw21UC6s="}}

File diff suppressed because one or more lines are too long

View file

@ -1 +1 @@
{"Target":"css/style.min.857f4a4adceba73f2fc8a745f8ca8b08437800bdf1c3275e2c7360f4994644ba.css","MediaType":"text/css","Data":{"Integrity":"sha256-hX9KStzrpz8vyKdF+MqLCEN4AL3xwydeLHNg9JlGRLo="}} {"Target":"css/style.min.e8eb45143fbe384978af8c624bc9641cf39138512edefb3d2a494b743ed28a95.css","MediaType":"text/css","Data":{"Integrity":"sha256-6OtFFD++OEl4r4xiS8lkHPOROFEu3vs9KklLdD7SipU="}}