Add ToC to long pages

* A compact, fixed box in the right screen * Only for big screens, > 1200 px wide
gohugoio · May 11, 2015 · be4f486 · be4f486
1 parent be16e5f
commit be4f486
Show file tree

Hide file tree

Showing 17 changed files with 80 additions and 14 deletions.
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -0,0 +1 @@
+/.idea
diff --git a/docs/content/extras/crossreferences.md b/docs/content/extras/crossreferences.md
@@ -6,6 +6,7 @@ menu:
 next: /extras/livereload
 prev: /extras/comments
 title: Cross-References
+toc: true
 weight: 40
 ---
 

diff --git a/docs/content/extras/dynamiccontent.md b/docs/content/extras/dynamiccontent.md
@@ -9,6 +9,7 @@ next: /extras/highlighting
 prev: /extras/datafiles
 title: Dynamic Content
 weight: 91
+toc: true
 ---
 
 Dynamic content with a static site generator? Yes, it is possible!

diff --git a/docs/content/extras/highlighting.md b/docs/content/extras/highlighting.md
@@ -9,6 +9,7 @@ next: /extras/toc
 prev: /extras/shortcodes
 title: Syntax Highlighting
 weight: 90
+toc: true
 ---
 
 Hugo provides the ability for you to highlight source code in two different

diff --git a/docs/content/extras/menus.md b/docs/content/extras/menus.md
@@ -1,5 +1,7 @@
 ---
 date: 2014-05-14T02:36:37Z
+toc: true
+tocstyle: compact
 menu:
   main:
     parent: extras

diff --git a/docs/content/extras/shortcodes.md b/docs/content/extras/shortcodes.md
@@ -9,6 +9,8 @@ next: /extras/pagination
 prev: /extras/permalinks
 title: Shortcodes
 weight: 80
+toc: true
+tocstyle: compact
 ---
 
 Hugo uses Markdown for its simple content format. However, there are a lot

diff --git a/docs/content/templates/functions.md b/docs/content/templates/functions.md
@@ -3,6 +3,7 @@ aliases:
 - /layout/functions/
 date: 2013-07-01
 linktitle: Functions
+toc: true
 menu:
   main:
     parent: layout

diff --git a/docs/content/tutorials/automated-deployments.md b/docs/content/tutorials/automated-deployments.md
@@ -2,6 +2,7 @@
 author: "Arjen Schwarz"
 date: 2015-01-12
 linktitle: Automated deployments
+toc: true
 menu:
   main:
     parent: tutorials

diff --git a/docs/content/tutorials/creating-a-new-theme.md b/docs/content/tutorials/creating-a-new-theme.md
@@ -2,6 +2,8 @@
 author: "Michael Henderson"
 date: 2014-09-28
 linktitle: Creating a New Theme
+toc: true
+tocstyle: compact
 menu:
   main:
     parent: tutorials

diff --git a/docs/content/tutorials/github-pages-blog.md b/docs/content/tutorials/github-pages-blog.md
@@ -4,6 +4,7 @@ aliases:
 author: Spencer Lyon
 date: 2014-03-21
 linktitle: Hosting on GitHub
+toc: true
 menu:
   main:
     parent: tutorials

diff --git a/docs/content/tutorials/installing-on-mac.md b/docs/content/tutorials/installing-on-mac.md
@@ -2,6 +2,7 @@
 author: "Michael Henderson"
 date: 2015-02-22
 linktitle: Installing on Mac
+toc: true
 menu:
   main:
     parent: tutorials
@@ -56,7 +57,7 @@ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/
 
 When I did this, I had some problems with directory permissions. Searches on Google pointed me to pages that walked me through updating permissions on the `/usr/local` directory. Seemed scary, but it's worked well since.
 
-## Step 2: Run the `brew` command to install `hugo`
+### Step 2: Run the `brew` command to install `hugo`
 
 Replace `brew install hugo` with `brew install hugo --HEAD` if you
 want the absolute latest version—there might be bugs!
@@ -129,7 +130,7 @@ $ tar tvf ~/Downloads/hugo_0.13_darwin_amd64.zip
 
 The `.md` files are documentation. The other file is the executable.
 
-## Step 4: Install into your bin directory
+### Step 4: Install into your bin directory
 
 ```
 $ # create the directory if needed

diff --git a/docs/content/tutorials/installing-on-windows.md b/docs/content/tutorials/installing-on-windows.md
@@ -2,6 +2,7 @@
 author: "Michael Henderson"
 date: 2015-03-30
 linktitle: Installing on Windows
+toc: true
 menu:
   main:
     parent: tutorials

diff --git a/docs/content/tutorials/migrate-from-jekyll.md b/docs/content/tutorials/migrate-from-jekyll.md
@@ -1,6 +1,8 @@
 ---
 date: 2014-03-10
 linktitle: Migrating from Jekyll
+toc: true
+tocstyle: compact
 menu:
   main:
     parent: tutorials

diff --git a/docs/layouts/_default/single.html b/docs/layouts/_default/single.html
@@ -1,3 +1,12 @@
 {{ 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 {{ with .Params.tocstyle }}{{ . }}{{ end }}">
+{{ .TableOfContents }}
+</div>
+{{ else }}
+{{ .Content }}
+{{ end }}
 {{ partial "footer.html" . }}
diff --git a/docs/layouts/partials/footer.html b/docs/layouts/partials/footer.html
@@ -1,8 +1,10 @@
-                      <hr style="margin: 2em auto 0.25em;">
-                      <div style="font-size: medium; font-style: italic; text-align: right;">Hugo v{{ .Hugo.Version }} documentation</div>
+
                     </div>
                     </section>
-                </div>
+                    <div style="font-size: medium; font-style: italic; text-align: right;">Hugo v{{ .Hugo.Version }} documentation</div>
+
+                    </div>
+
                 <div class="col-md-1">
                     {{ if .IsPage }}
                     {{ with .GetParam "next" }}

diff --git a/docs/layouts/partials/header.html b/docs/layouts/partials/header.html
@@ -81,4 +81,8 @@ <h1 class="nav top-menu">{{.Title}}</h1>
                               <!--<h3>{{.Title}}</h3>-->
                           <!--</header>-->
                     <div class="panel-body">
-{{ partial "google-cse.html" . }}
+                        <div class="row">
+                            <div class="col-lg-12 cse">
+                                {{ partial "google-cse.html" . }}
+                            </div>
+                        </div>
diff --git a/docs/static/css/style.css b/docs/static/css/style.css
@@ -101,7 +101,7 @@ body {
     font-family: 'Lato', sans-serif;
     padding: 0px !important;
     margin: 0px !important;
-    font-size:16px !important;    
+    font-size:16px !important;
     font-weight: 300;
 }
 
@@ -266,13 +266,13 @@ ul.sidebar-menu li.active a, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:fo
     -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
     -ms-transition: all 0.3s ease;
-    transition: all 0.3s ease;        
+    transition: all 0.3s ease;
 }
 ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus {
     border-bottom: 1px solid #ff4088;
 }
 /*ul.sidebar-menu li.active a,*/ ul.sidebar-menu .sub-menu li.active a{
-    border-bottom: 1px solid #ff4088;   
+    border-bottom: 1px solid #ff4088;
 }
 
 ul.sidebar-menu li a i {
@@ -290,10 +290,10 @@ ul.sidebar-menu li.active a i {
 }
 
 
-#sidebar ul > li > a .menu-arrow { 
-    float: right;    
+#sidebar ul > li > a .menu-arrow {
+    float: right;
     margin-right: 8px;
-    margin-top: 6px;    
+    margin-top: 6px;
 }
 
 #main-content {
@@ -541,13 +541,47 @@ i.freebsd-19px:before {
     overflow: hidden;
     margin: 20px 0;
 }
- 
+
 .video-container iframe,
 .video-container object,
 .video-container embed {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
-    height: 100%;    
+    height: 100%;
 }
+
+/* Google custom search */
+.cse {
+    margin-top: 20px;
+    padding-right: 20px;
+}
+
+
+/* Table of contents */
+
+.toc ul { list-style: none; margin: 0; padding: 0 5px;  }
+.toc ul li { display: inline; }
+#TableOfContents > ul > li > ul > li > ul li { margin-right: 8px; }
+#TableOfContents > ul > li > ul > li > a, #TableOfContents > ul > li > a   { font-weight: bold; background-color: #eeeeee; padding: 0 10px; margin: 0 2px; }
+#TableOfContents > ul > li > ul > li > a { font-style: italic; }
+.toc.compact ul > li > ul > li > ul  { display: none; }
+
+#toc {
+    position:fixed;
+    background-color: rgba(0, 0, 0, 0.1);
+    padding: 10px 50px 10px 20px;
+}
+
+
+@media(max-width:1200px) {
+    .toc {
+        display: none;
+    }
+}
+
+
+
+
+