rstudio / blogdown

Create Blogs and Websites with R Markdown
https://pkgs.rstudio.com/blogdown/
1.74k stars 331 forks source link

show toc in a rmarkdown file? #58

Closed likanzhan closed 7 years ago

likanzhan commented 7 years ago

When the document is a .md file, the table of contents from the file can be extracted via .TableOfContents. But if the file extension is .rmd, the toc cannot be extracted. Any suggestions? Thanks.

yihui commented 7 years ago

Yes. You can add this to the YAML metadata of your Rmd document:

output:
  blogdown::html_page:
    toc: true

Full documentation at https://bookdown.org/yihui/blogdown/templates.html#how-to

raybuhr commented 7 years ago

EDIT: This is totally working, just I made some poor assumptions. For anyone who finds this in the future, don't render the .Rmd using knitr just use the blogdown::serve_site() and blogdown will do the rendering of the Rmd for you.

---- Previous

This ins't working for me.

Here is my YAML metadata:

---
title: "Using Hugo and Blogdown"
keywords: tech
date: '2017-05-04'
disqusIdentifier: 2c5a0040
tags:
- tech
- blog
- rmd
- blogdown
- hugo
output:
  blogdown::html_page:
    toc: true

---

I also tried substituting blogdown::html_page: with html_document, which does generate the toc in the knitted html but doesn't render correctly once hugo builds the site. Both options end up looking like this on my website:

January 1, 1
Using Hugo and Blogdown code{white-space: pre;} pre:not([class]) { background-color: white; } if (window.hljs && document.readyState && document.readyState === “complete”) { window.setTimeout(function() { hljs.initHighlighting(); }, 0); } h1 { font-size: 34px; } h1.title { font-size: 38px; } h2 { font-size: 30px; } h3 { font-size: 24px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 12px; } . 

I am using hugo version 0.20.7 on ubuntu, Rmarkdown version 1.5 and blogdown version 0.0.6 fwiw.

hezhaobin commented 6 years ago

Is it possible to add a checkbox in the "new post" addins to add the toc automatically? I find myself google the grammar of this all the time. Besides, will the floating TOC function be added to blogdown any time soon? Thanks Yihui for the nice work.

yihui commented 6 years ago

@hezhaobin The problem for a checkbox in the New Post addin is that it is hard to tell what it should do in the case of plain Markdown posts (the implementation of TOC is theme-dependent).

For the floating TOC, it is also up to the specific Hugo theme. If you are familiar with HTML/CSS/JS, you could implement it by yourself.

DataStrategist commented 5 years ago

Hi Yihui.

I just got my toc to work in a Rmd in blogdown. I wanted to implement something like:

output: 
  blogdown::html_page:
    toc: true
    toc_float: true
    smart: false

or

output:
  html_document:
    toc: true
    toc_float:
      collapsed: false
      smooth_scroll: false

but then I saw section 5.3 of https://bookdown.org/yihui/blogdown/rmd-website.html and I guess the folding and following etc stuff is not implemented in blogdown? I guess it's hard because it would have to be done for each theme, no?

So I should just go with the standard toc and be damn happy that it works? :)

Just in case it's useful, there IS a really nasty hack... not sure if you'll like it or not, you COULD instead of blogdown::build_site(), if you DO just knit the document instead, the resultant html file will bypass all the Hugo stuff and will create the file w/ the floating TOC, but it will break everything else. So it'll work as a freestanding file. But you have to use html_document for that.

output: 
  html_document:
    toc: true
    toc_float: true
    smart: false
yihui commented 5 years ago

I guess it's hard because it would have to be done for each theme

That is correct. It is easy to do the floating TOC well under the Bootstrap framework. It would be hard to do it for arbitrary CSS frameworks.