diff --git a/archetypes/posts.md b/archetypes/posts.md index aaa57c6..099f5bb 100644 --- a/archetypes/posts.md +++ b/archetypes/posts.md @@ -2,6 +2,7 @@ title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} draft: true +toc: false featuredImg: "" tags: - tag diff --git a/assets/js/main.js b/assets/js/main.js index ed98d94..9ba2939 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -65,12 +65,18 @@ const showContent = () => { document.getElementById('bg-img').classList.remove('show-bg-img'); } +// Toggle TOC +// +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(); } diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 49a1dc1..6606273 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -145,6 +145,10 @@ table { height: 1em; } +.desktop-only, .desktop-only-ib { + display: none; +} + // Accessibility // .screen-reader-text { @@ -234,6 +238,7 @@ table { border: none; background: none; padding: 0; + margin-left: .4em; 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 { display: flex; justify-content: space-between; @@ -619,6 +661,9 @@ hr.post-end { text-align: center; } +// Media Queries +// + @media (min-width: 800px) { .site-main { margin-top: 3em; @@ -640,6 +685,15 @@ hr.post-end { margin-top: 8em; } + .desktop-only, + #toc.show-toc { + display: block; + } + + .desktop-only-ib { + display: inline-block; + } + figure.left { margin-left: -240px; p { @@ -662,6 +716,12 @@ hr.post-end { hr.post-end { width: 30%; } + + #toc { + top: 13em; + margin-left: 370px; + max-width: 220px; + } } @media (min-width: 1800px) { @@ -695,6 +755,12 @@ hr.post-end { hr.post-end { width: 30%; } + + #toc { + top: 15em; + margin-left: 490px; + max-width: 300px; + } } @media (max-width: 760px) { @@ -704,8 +770,7 @@ hr.post-end { display: none; } - #menu-btn, - #search-btn { + #menu-btn { display: inline-block; } diff --git a/exampleSite/content/posts/goisforlovers.md b/exampleSite/content/posts/goisforlovers.md index 3381ac0..41079d5 100644 --- a/exampleSite/content/posts/goisforlovers.md +++ b/exampleSite/content/posts/goisforlovers.md @@ -8,6 +8,7 @@ tags = [ "development", ] date = "2014-04-02" +toc = true +++ Hugo uses the excellent [Go][] [html/template][gohtmltemplate] library for diff --git a/exampleSite/content/posts/hugoisforlovers.md b/exampleSite/content/posts/hugoisforlovers.md index 3f76e82..747ab41 100644 --- a/exampleSite/content/posts/hugoisforlovers.md +++ b/exampleSite/content/posts/hugoisforlovers.md @@ -7,6 +7,7 @@ tags = [ "development", ] date = "2014-04-02" +toc = true +++ ## Step 1. Install Hugo diff --git a/exampleSite/content/posts/migrate-from-jekyll.md b/exampleSite/content/posts/migrate-from-jekyll.md index 78cf3b4..d5b2f54 100644 --- a/exampleSite/content/posts/migrate-from-jekyll.md +++ b/exampleSite/content/posts/migrate-from-jekyll.md @@ -1,6 +1,7 @@ --- date: 2014-03-10 title: Migrate to Hugo from Jekyll +toc: true --- ## Move static content to `static` diff --git a/i18n/en.toml b/i18n/en.toml index b3316f3..de033a9 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -17,6 +17,9 @@ other = "Archives" [wordCount] other = "{{ .WordCount }} Words" +[tableOfContents] +other = "Table of Contents" + [newer] other = "Newer" diff --git a/i18n/zh-hans.toml b/i18n/zh-hans.toml index 605cd6b..eddd8ba 100644 --- a/i18n/zh-hans.toml +++ b/i18n/zh-hans.toml @@ -17,6 +17,9 @@ other = "归档" [wordCount] other = "{{ .WordCount }} 字" +[tableOfContents] +other = "目录" + [newer] other = "新" diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 7b04dd9..d89b018 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -14,6 +14,9 @@ {{ with .Params.featuredImg -}} {{- end }} + {{- with .Params.toc -}} + + {{- end }} {{- with .Site.Params.social -}} {{ partialCached "social-icons.html" . }} {{- end -}} diff --git a/layouts/posts/single.html b/layouts/posts/single.html index e8b37a8..c84c50c 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -32,6 +32,12 @@ {{- end }} + {{- if .Params.toc }} + + {{- end }}
{{- with .NextInSection }}