an R Markdown example of how to show table of contents

README.md

@@ -16,11 +16,11 @@ find . -not -path '*/exampleSite/*' \( -name '*.html' -o -name '*.css' \) | xarg
       16 ./layouts/_default/terms.html
        0 ./layouts/partials/foot_custom.html
        0 ./layouts/partials/head_custom.html
-      20 ./layouts/partials/footer.html
+       9 ./layouts/partials/footer.html
       20 ./layouts/partials/header.html
       51 ./static/css/style.css
        7 ./static/css/fonts.css
-     149 total
+     138 total
 ```
 
 I can certainly further reduce the code, for example, by eliminating the CSS, but I believe a tiny bit CSS can greatly improve readability. You cannot really find many CSS frameworks that only contain 50 lines of code.

exampleSite/config.toml

@@ -34,5 +34,4 @@ footnotereturnlinkcontents = "↩"
 
 [params]
     description = "A website built through Hugo and blogdown."
-    GithubEdit = "https://github.com/yihui/hugo-xmin/edit/feature/github-edit/exampleSite/content/"
     footer = "© [Yihui Xie](https://yihui.name) 2017 -- 2018 | [Github](https://github.com/yihui) | [Twitter](https://twitter.com/xieyihui)"

exampleSite/content/_index.markdown

@@ -22,11 +22,11 @@ find . -not -path '*/exampleSite/*' \( -name '*.html' -o -name '*.css' \) | xarg
       16 ./layouts/_default/terms.html
        0 ./layouts/partials/foot_custom.html
        0 ./layouts/partials/head_custom.html
-      20 ./layouts/partials/footer.html
+       9 ./layouts/partials/footer.html
       20 ./layouts/partials/header.html
       51 ./static/css/style.css
        7 ./static/css/fonts.css
-     149 total
+     138 total
 ```
 
 I can certainly further reduce the code, for example, by eliminating the CSS, but I believe a tiny bit CSS can greatly improve readability. You cannot really find many CSS frameworks that only contain 50 lines of code.

exampleSite/content/about.md

@@ -1,6 +1,7 @@
 ---
 title: About Hugo XMin
 author: Yihui Xie
+toc: true
 ---
 
 **XMin** is the first Hugo theme I have designed. The original reason that I wrote it was I needed a minimal example of Hugo themes when I was writing the  [**blogdown**](https://github.com/rstudio/blogdown) book. Basically I wanted a simple theme that supports a navigation menu, a home page, other single pages, lists of pages, blog posts, categories, tags, and RSS. That is all. Nothing fancy. In terms of CSS and JavaScript, I really want to keep them minimal. In fact, this theme does not contain any JavaScript code at all, although on this example website I did introduce some JavaScript code (still relatively simple anyway). The theme does not contain any images, either, and is pretty much a plain-text theme.

exampleSite/content/post/2017-06-21-an-r-markdown-example.Rmarkdown

@@ -1,19 +0,0 @@
----
-title: An R Markdown Example
-author: Yihui Xie
-date: '2017-06-21'
-categories:
-  - Example
-  - R
-tags:
-  - blogdown
-slug: an-r-markdown-example
----
-
-This is a simple R Markdown example, with a single R code chunk below.
-
-```{r}
-knitr::kable(head(mtcars))
-```
-
-The table shows the first 6 rows of the `mtcars` dataset in base R.

exampleSite/content/post/2017-06-21-an-r-markdown-example.markdown

@@ -1,31 +0,0 @@
----
-title: An R Markdown Example
-author: Yihui Xie
-date: '2017-06-21'
-categories:
-  - Example
-  - R
-tags:
-  - blogdown
-slug: an-r-markdown-example
----
-
-This is a simple R Markdown example, with a single R code chunk below.
-
-
-```r
-knitr::kable(head(mtcars))
-```
-
-
-
-|                  |  mpg| cyl| disp|  hp| drat|    wt|  qsec| vs| am| gear| carb|
-|:-----------------|----:|---:|----:|---:|----:|-----:|-----:|--:|--:|----:|----:|
-|Mazda RX4         | 21.0|   6|  160| 110| 3.90| 2.620| 16.46|  0|  1|    4|    4|
-|Mazda RX4 Wag     | 21.0|   6|  160| 110| 3.90| 2.875| 17.02|  0|  1|    4|    4|
-|Datsun 710        | 22.8|   4|  108|  93| 3.85| 2.320| 18.61|  1|  1|    4|    1|
-|Hornet 4 Drive    | 21.4|   6|  258| 110| 3.08| 3.215| 19.44|  1|  0|    3|    1|
-|Hornet Sportabout | 18.7|   8|  360| 175| 3.15| 3.440| 17.02|  0|  0|    3|    2|
-|Valiant           | 18.1|   6|  225| 105| 2.76| 3.460| 20.22|  1|  0|    3|    1|
-
-The table shows the first 6 rows of the `mtcars` dataset in base R.

exampleSite/content/post/2017-06-22-rmd-toc.Rmd

@@ -0,0 +1,26 @@
+---
+title: Show Table of Contents for R Markdown Posts
+date: '2017-06-22'
+slug: rmd-toc
+output:
+  blogdown::html_page:
+    toc: true
+---
+
+# One Section
+
+A quick fox jumped over the lazy dog.
+
+![quick fox](https://slides.yihui.name/gif/quick-fox.gif)
+
+# Another Section
+
+A quick fox jumped over the lazy dog.
+
+## A subsection
+
+A quick fox jumped over the lazy dog.
+
+## Another subsection
+
+A quick fox jumped over the lazy dog.

exampleSite/content/post/2017-06-22-rmd-toc.html

@@ -0,0 +1,40 @@
+---
+title: Show Table of Contents for R Markdown Posts
+date: '2017-06-22'
+slug: rmd-toc
+output:
+  blogdown::html_page:
+    toc: true
+---
+
+
+<div id="TOC">
+<ul>
+<li><a href="#one-section">One Section</a></li>
+<li><a href="#another-section">Another Section</a><ul>
+<li><a href="#a-subsection">A subsection</a></li>
+<li><a href="#another-subsection">Another subsection</a></li>
+</ul></li>
+</ul>
+</div>
+
+<div id="one-section" class="section level1">
+<h1>One Section</h1>
+<p>A quick fox jumped over the lazy dog.</p>
+<div class="figure">
+<img src="https://slides.yihui.name/gif/quick-fox.gif" alt="quick fox" />
+<p class="caption">quick fox</p>
+</div>
+</div>
+<div id="another-section" class="section level1">
+<h1>Another Section</h1>
+<p>A quick fox jumped over the lazy dog.</p>
+<div id="a-subsection" class="section level2">
+<h2>A subsection</h2>
+<p>A quick fox jumped over the lazy dog.</p>
+</div>
+<div id="another-subsection" class="section level2">
+<h2>Another subsection</h2>
+<p>A quick fox jumped over the lazy dog.</p>
+</div>
+</div>

layouts/_default/single.html

@@ -5,6 +5,10 @@
 {{ if (gt .Params.date 0) }}<h2 class="date">{{ .Date.Format "2006/01/02" }}</h2>{{ end }}
 </div>
 
+{{ if .Params.toc }}
+{{ .TableOfContents }}
+{{ end }}
+
 <main>
 {{ .Content }}
 </main>

layouts/partials/footer.html

@@ -4,22 +4,6 @@
   <hr/>
   {{ . | markdownify }}
   {{ end }}
-  {{ if .File.Path }}
-    {{ $.Scratch.Set "FilePath" .File.Path }}
-    {{ $RmdFile := (print .File.BaseFileName ".Rmd") }}
-    {{ $Files := readDir (print "content/" .File.Dir) }}
-    {{ if (where $Files "Name" $RmdFile) }}
-      {{ $.Scratch.Set "FilePath" (print .File.Dir $RmdFile) }}
-    {{ else }}
-      {{ $RmdFile := (print .File.BaseFileName ".Rmarkdown") }}
-      {{ if (where $Files "Name" $RmdFile) }}
-        {{ $.Scratch.Set "FilePath" (print .File.Dir $RmdFile) }}
-      {{ end }}
-    {{ end }}
-    {{ with .Site.Params.GithubEdit}}
-    | <a href="{{ . }}{{ $.Scratch.Get "FilePath" }}">Edit this page</a>
-    {{ end }}
-  {{ end }}
   </footer>
   </body>
 </html>

static/css/style.css

@@ -21,6 +21,10 @@ hr {
   border-style: dashed;
   color: #ddd;
 }
+#TableOfContents, #TOC {
+  border: 1px solid #eee;
+  border-radius: 5px;
+}
 
 /* code */
 pre {