Compare commits

...

2 Commits

Author SHA1 Message Date
Yihui Xie 858eb50d85 an R Markdown example of how to show table of contents 2018-03-21 10:39:27 -05:00
Yihui Xie b2e8d8212a support table of contents for Markdown posts 2018-03-21 10:39:27 -05:00
5 changed files with 75 additions and 0 deletions

View File

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

View File

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

View File

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

View File

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

View File

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