feat: added Table of contents

layouts/_default/single.html

@@ -1,12 +1,3 @@
 {{ partial "header.html" . }}
-{{ if .Params.toc }}
-<div class="col-lg-8 col-md-12">
 {{ .Content }}
-</div>
-<div id="toc" class="col-lg-offset-6 toc {{ if gt (len .TableOfContents) 2500 }}compact{{ end }}">
-    {{ .TableOfContents }}
-</div>
-{{ else }}
-{{ .Content }}
-{{ end }}
 {{ partial "footer.html" . }}

layouts/partials/header.html

@@ -14,6 +14,7 @@
     <link href="/css/hybrid.css" rel="stylesheet">
     <link href="/css/featherlight.min.css" rel="stylesheet">
     <link href="/css/theme.css" rel="stylesheet">
+    <link href="/css/hugo-theme.css" rel="stylesheet">
     <style type="text/css">:root #header + #content > #left > #rlblock_left
 {display:none !important;}</style>
   </head>
@@ -29,6 +30,7 @@
               <i class="fa fa-2x fa-bars"></i>
             </a>
             <div id="top-bar">
+
               {{ if and .IsPage .Site.Params.editURL }}
                 {{ $File := .File }}
                 {{ $Site := .Site }}
@@ -41,8 +43,10 @@
               </div>
                 {{ end }}
               {{ end }}
-
               <div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
+                {{ if and (not .Params.chapter) (.Params.toc) }}
+                <span id="toc-menu"><a href=""><i class="fa fa-ellipsis-v"></i></a></span>
+                {{ end }}
                 {{ $type := .Type }}
                 {{ $relLink := .RelPermalink }}
                 {{ range $name , $value := .Site.Sections }}
@@ -55,6 +59,9 @@
                 {{ end }}
                 {{ with .Title }}<span itemprop="title"> {{ . }}</span>{{ end }}
               </div>
+              {{ if .Params.toc }}
+                  {{ partial "toc.html" . }}
+              {{ end }}
 
             </div>
             {{ if .Params.chapter }}

layouts/partials/toc.html

@@ -0,0 +1,5 @@
+<div class="progress">
+    <div class="wrapper">
+{{ .TableOfContents }}
+    </div>
+</div>

static/css/hugo-theme.css

@@ -0,0 +1,55 @@
+/* Insert here special css for hugo theme, on top of any other imported css */
+
+/*
+.progress {
+  position: relative;
+  float: top;
+  text-align: left;
+  width: 330px;
+  padding: 45px 0 0 2%;
+}
+.progress .wrapper {
+  position: absolute;
+  width: inherit;
+}
+.progress .wrapper.affix {
+  position: fixed;
+  top: 10px;
+
+}*/
+
+/* Table of contents */
+
+.progress ul {
+  list-style: none;
+  margin: 0;
+  padding: 0 5px;
+}
+
+#TableOfContents > ul > li > ul > li > ul li {
+  margin-right: 8px;
+}
+#TableOfContents > ul > li > a   {
+  font-weight: bold; background-color: #eeeeee; padding: 0 10px; margin: 0 2px;
+}
+
+#TableOfContents > ul > li > ul > li > a {
+  font-weight: bold; background-color: #eeeeee;
+}
+
+#TableOfContents > ul > li > ul > li > ul > li > ul > li > ul > li  { display: none; }
+
+.progress {
+    position:absolute;
+    background-color: rgba(246, 246, 246, 0.97);
+    width: auto;
+    border: thin solid #ECECEC;
+    display:none;
+      z-index:200;
+}
+
+#toc-menu {
+  border-right: thin solid #DAD8D8 !important;
+  padding-right: 1rem !important;
+  margin-right: 0.5rem !important;
+}

static/js/hugo-learn.js

@@ -54,3 +54,45 @@ images.each(function(index){
     }
   }
 });
+
+
+$('#toc-menu').hover(function() {
+	$('.progress').stop(true, false, true).fadeToggle(300);
+});
+$('.progress').hover(function() {
+	$('.progress').stop(true, false, true).fadeToggle(300);
+});
+
+// Calculate each progress section
+/*
+$(window).scroll(function (){
+  $("#body-inner h2").each(function(i){
+      //console.log($(this));
+      var this_top = $(this).offset().top;
+      var height = $(this).height();
+      var this_bottom = this_top + height;
+      var percent = 0;
+
+      // Scrolled within current section
+      if (top >= this_top && top <= this_bottom) {
+          percent = ((top - this_top) / (height - wrapper_height)) * 100;
+          if (percent >= 100) {
+              percent = 100;
+          //$(".progress .wrapper .bar:eq("+i+") i").css("color", "#fff");
+          console.log("aaa");
+          }
+          else {
+              //$(".progress .wrapper .bar:eq("+i+") i").css("color", "#36a7f3");
+              console.log("bb");
+          }
+      }
+      else if (top > this_bottom) {
+          percent = 100;
+          //$(".progress .wrapper .bar:eq("+i+") i").css("color", "#fff");
+          console.log("ccc");
+      }
+      //console.log(i);
+      //$(".progress .wrapper .bar:eq("+i+") span").css("width", percent + "%");
+      //console.log("ddd");
+  });
+});*/