hideToc param added, now enableToc logically same with toc

README.ko.md

@@ -246,6 +246,7 @@ enableSidebarTags = true # if you want to use tags.
 enableSidebarSeries = true
 enableSidebarCategories = true
 enableToc = true # single page table of contents
+hideToc = false # Hide or Show toc
 enableTocSwitch = true # single page table of contents visibility switch
 itemsPerCategory = 5 # maximum number of posts shown in the sidebar.
 

README.md

@@ -241,6 +241,7 @@ enableSidebarTags = true # if you want to use tags.
 enableSidebarSeries = true
 enableSidebarCategories = true
 enableToc = true # single page table of contents
+hideToc = false # Hide or Show toc
 enableTocSwitch = true # single page table of contents visibility switch
 itemsPerCategory = 5 # maximum number of posts shown in the sidebar.
 

assets/sass/components/_box.scss

@@ -1,13 +1,13 @@
-.box {
-  font-size: 0.925rem;
-  font-family: $title-font;
-  word-break: keep-all;
-  padding: 0.5rem;
-  margin-bottom: 0.5rem;
-  border-radius: 0.5rem;
-
-  @include themify($themes) {
-    border: 1px solid themed('content-box-border-color');
-    background-color: themed('content-box-background-color');
-  }
+.box {
+  font-size: 0.925rem;
+  font-family: $title-font;
+  word-break: keep-all;
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0.5rem;
+
+  @include themify($themes) {
+    border: 1px solid themed('content-box-border-color');
+    background-color: themed('content-box-background-color');
+  }
 }

layouts/_default/single.html

@@ -3,7 +3,7 @@
 {{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
 <script src="{{ $enquire.RelPermalink }}"></script>
 
-<main class="{{ if $.Param "enableToc" }}main-main{{ else }}main{{ end }}">
+<main class="{{ if or ($.Param "enableToc") ($.Param "toc") }}{{ if $.Param "hideToc" }}main{{ else }}main-main{{ end }}{{ else }}main{{ end }}">
   {{ if eq .Site.Params.enableBreadcrumb true }}
   {{ partial "body/breadcrumb" . }}
   {{ end }}
@@ -30,7 +30,7 @@
 </main>
 
 {{ if $.Param "enableSidebar" }}
-<aside class="{{ if $.Param "enableToc" }}main-side{{ end }}">
+<aside class="{{ if or ($.Param "enableToc") ($.Param "toc") }}main-side{{ end }}">
   {{ partial "sidebar/sidebar-single" . }}
 </aside>
 {{ end }}

layouts/partials/script/single-script.html

@@ -23,7 +23,7 @@
   <link rel="stylesheet" href="{{ $photoSwipeSkin.RelPermalink }}">
 {{ end }}
 
-{{ if $.Param "enableToc" }}
+{{ if or ($.Param "enableToc") ($.Param "toc") }}
   {{ $toc := resources.Get "js/jquery.toc.min.js" | resources.Fingerprint }}
   <script defer src="{{ $toc.RelPermalink }}"></script>
 {{ end }}
@@ -131,9 +131,13 @@
 
     // toc
     {{ $enableToc := ($.Param "enableToc") }}
+    {{ $toc := ($.Param "toc") }}
+    {{ $hideToc := ($.Param "hideToc") }}
     var enableToc = JSON.parse({{ $enableToc | jsonify }});
+    var toc = JSON.parse({{ $toc | jsonify }});
+    var hideToc = JSON.parse({{ $hideToc | jsonify }});
     
-    if (enableToc) {
+    if (enableToc || toc) {
       $("#toc").toc({ content: ".single__contents", headings: "h1,h2,h3,h4" });
       $('#toc > li').each(function () {
         $(this).find('ul').css('display', 'none');

layouts/partials/sidebar/sidebar-single.html

@@ -1,17 +1,17 @@
 {{ if $.Param "enableSidebar" }}
-{{ if $.Param "enableToc" }}
+{{ if or ($.Param "enableToc") ($.Param "toc") }}
 
 <section class="sidebar">
-  <div class="toc__flexbox" data-position="fixed">
+  <div class="toc__flexbox" data-position="{{ if $.Param "hideToc" }}absolute{{ else }}fixed{{ end }}">
     <h6 class="toc__title">{{ i18n "toc-label" }}</h6>
     {{ if $.Param "enableTocSwitch" }}
       <label class="switch">
-        <input id="toggle-toc" aria-label="Toggle TOC" type="checkbox" checked>
+        <input id="toggle-toc" aria-label="Toggle TOC" type="checkbox" {{ if $.Param "hideToc" }}{{ else }}checked{{ end }}>
         <span class="slider round"></span>
       </label>
     {{ end }}
   </div>
-  <div class="toc">
+  <div class="toc {{ if $.Param "hideToc" }}hide{{ end }}">
     <ul id="toc"></ul>
   </div>
 </section>