Add ToC to long pages

* A compact, fixed box in the right screen
* Only for big screens, > 1200 px wide
This commit is contained in:
bep 2015-05-11 18:39:40 +02:00
parent be16e5ffb9
commit be4f48652d
17 changed files with 80 additions and 14 deletions

1
docs/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
/.idea

View file

@ -6,6 +6,7 @@ menu:
next: /extras/livereload
prev: /extras/comments
title: Cross-References
toc: true
weight: 40
---

View file

@ -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!

View file

@ -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

View file

@ -1,5 +1,7 @@
---
date: 2014-05-14T02:36:37Z
toc: true
tocstyle: compact
menu:
main:
parent: extras

View file

@ -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

View file

@ -3,6 +3,7 @@ aliases:
- /layout/functions/
date: 2013-07-01
linktitle: Functions
toc: true
menu:
main:
parent: layout

View file

@ -2,6 +2,7 @@
author: "Arjen Schwarz"
date: 2015-01-12
linktitle: Automated deployments
toc: true
menu:
main:
parent: tutorials

View file

@ -2,6 +2,8 @@
author: "Michael Henderson"
date: 2014-09-28
linktitle: Creating a New Theme
toc: true
tocstyle: compact
menu:
main:
parent: tutorials

View file

@ -4,6 +4,7 @@ aliases:
author: Spencer Lyon
date: 2014-03-21
linktitle: Hosting on GitHub
toc: true
menu:
main:
parent: tutorials

View file

@ -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

View file

@ -2,6 +2,7 @@
author: "Michael Henderson"
date: 2015-03-30
linktitle: Installing on Windows
toc: true
menu:
main:
parent: tutorials

View file

@ -1,6 +1,8 @@
---
date: 2014-03-10
linktitle: Migrating from Jekyll
toc: true
tocstyle: compact
menu:
main:
parent: tutorials

View file

@ -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" . }}

View file

@ -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" }}

View file

@ -81,4 +81,8 @@
<!--<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>

View file

@ -551,3 +551,37 @@ i.freebsd-19px:before {
width: 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;
}
}