TOC for blog posts

[derekmichaelwright]

Feature Request

some of my blog posts are very long. Is it possible to get a TOC for blog posts?

It would be nice to have something like a floating TOC that can be done when rendering as html, or like with the "courses" page

[yewton]

FYI https://sourcethemes.com/academic/docs/writing-markdown-latex/#table-of-contents

[CharlieLeee]

@derekmichaelwright you can actually create a side toc like this: https://charlieleee.github.io/post/matlab-phase-plane/

[CarlosVecina]

@derekmichaelwright you can actually create a side toc like this: https://ckli.xyz/post/point-sem-seg/

how do you actually configure it?

Thanks in advance!

[CharlieLeee]

@CarlosVecina

Change the file <root dir>/layouts/_default/single.html as follows:

{{- define "main" -}}
{{ if .Params.toc }}
<div class="container-fluid docs">
    <div class="row flex-xl-nowrap">
      <div class="d-none d-xl-block col-xl-2 docs-toc">
        <ul class="nav toc-top">
          <li><a href="#" id="back_to_top" class="docs-toc-title">{{ i18n "on_this_page" }}</a></li>
        </ul>
        {{ .TableOfContents }}
        {{ partial "docs_toc_foot" . }}
      </div>
      <main class="col-12 col-md-0 col-xl-10 py-md-3 pl-md-5 docs-content" role="main">
{{ end }}
        <article class="article">
            {{ partial "page_header" . }}
            <div class="article-container">
              <div class="article-style">
                {{ .Content }}
              </div>
              {{ partial "page_footer" . }}
            </div>
        </article>
  {{ if .Params.toc }}
      </main>
    </div>
  </div>
  {{ end }}
{{- end -}}

and add the following line to the front matter of the posts you'd like to add side toc:
toc: true

[CarlosVecina]

@CharlieLeee Thanks sir, i almost got it.

I modified the single.html and set toc: TRUE in YALM. Also created different #Titles, but nothing appears but "Contents".

Do you know what's going on? If I set toc here the fixed toc appears but not the side one

blogdown::html_page:
  highlight: 
  toc: TRUE

Many thanks, i searched about it but nothing done fixed it.

[CharlieLeee]

@CarlosVecina From your screenshot, it seems like we're using a different version of the academic theme, so I guess it might have something to do with the table of content settings: can you find the following lines in your <root>/config/_default/config.toml file?

[markup.tableOfContents]
    startLevel = 2
    endLevel = 4

[derekmichaelwright]

I tried this and have the same problem as @CarlosVecina.

I do not have those lines in my /config/_default/params.toml file (dont have config.toml, instead have params.toml, menus.toml and languages.toml)

[CarlosVecina]

@derekmichaelwright it's on the academic version. Btw,
I just have updated the academic version to 0.48, then these lines appears but it still doesn't work.

I think is something with de Rmd and the .TableOfContents.

Can you @CharlieLeee confirm you are using rmd? It's weird cause the centered toc works fine for me.

[CharlieLeee]

@CarlosVecina Please make sure that you modify the single.html file in your root directory (not the themes directory)

layouts
├── _default
│ ├── baseof.html
│ ├── list.html
│ ├── _markup
│ │ └── render-link.html
│ ├── rss.xml
│ └── single.html

As for markdown, I use .md files. And my files looks like this:

index.md

---
# Documentation: https://sourcethemes.com/academic/docs/managing-content/

title: "Deep Learning Methods in Semantic Segmentation of Point Cloud"
subtitle: "深度学习在三维场景理解中的应用"
summary: "总结一下目前深度学习在三维场景理解中的应用"
authors: [admin]
tags: [Semantic Segmentation, Deep Learning]
categories: [Notes]
date: 2019-11-08T21:25:26+08:00
lastmod: 2020-03-10T21:25:26+08:00
featured: true
draft: false

# Featured image
# To use, add an image named `featured.jpg/png` to your page's folder.
# Focal points: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight.
image:
  caption: "Point cloud data acquired from LiDAR"
  focal_point: ""
  preview_only: false

# Projects (optional).
#   Associate this post with one or more of your projects.
#   Simply enter your project's folder or file name without extension.
#   E.g. `projects = ["internal-project"]` references `content/project/deep-learning/index.md`.
#   Otherwise, set `projects = []`.
projects: []
toc: true
---

[lenkahas]

@CharlieLeee it works perfectly, Thank you!!

[lenkahas]

UPDATE: it works for the posts created with python, but not for the ones created in R...

[YonghuiDong]

@CharlieLeee It works on .md format, not Rmd file.

[data-coder]

Please let me know if I should create a new issue, but I think my issue is closely related to this one.

I changed all my blog posts to type: docs because I need the TOC, sidebar and previous-next buttons. But now I am missing:

• Featured Images https://sourcethemes.com/academic/docs/managing-content/#featured-image or header-image
• A way to include "Doc Posts" on the front page (globally or individually)

It would be cool if we could use image and featured in docs. Or is there a better alternative already available?

[gcushen]

@data-coder feel free to open a feature request issue for the community to weigh in and feedback on possibility of making docs pages appear similarly to blog posts.

[davxiao]

@CharlieLeee it worked perfectly! Thanks!
Is there a way to change the width of TOC, and to disable the the font on TOC becoming in bold when navigating?

[jpmvferreira]

Shouldn't this issue be opened considering that this is not yet implemented without changing the html files?

[nick-zhy]

@CharlieLeee Thanks sir, i almost got it.

I modified the single.html and set toc: TRUE in YALM. Also created different #Titles, but nothing appears but "Contents".

Do you know what's going on? If I set toc here the fixed toc appears but not the side one

blogdown::html_page:
  highlight: 
  toc: TRUE

Many thanks, i searched about it but nothing done fixed it.

Have you worked out this problem with .Rmd? This method only works for .md, not for .Rmd. It is really troubling since sometimes I need to show the R command.

[CharlieLeee]

@nick-zhy Yes, I believe the current solution only works with .md as @YonghuiDong mentioned.

[nick-zhy]

@nick-zhy Yes, I believe the current solution only works with .md as @YonghuiDong mentioned.

Thanks for your method.

As for .rmd, I need to convert .rmd to .md and then change the formulas one by one....

[chenx2018]

In order to make the .Rmd work, I try to add options(blogdown.method = "markdown") in the /.Rprofile. It finally works. @CharlieLeee

[tanduc307]

Thanks. Following @chenx2018 method is helping to create TOC. Anyway, in my project theme, TOC only shows from secondary heading onwards but it looks good.

[JuuHuu]

When i click the TOC, the page directly jump to the content, Is there any way to make the rolling smoothly?
I tried to use: html{ scroll-behavior: smooth; }. It can make post page smoothly, however it will make homepage rolling behavior strange. I guess home page already have smooth rolling effect, adding another one makes it rolling very slow at the beginning