Wowchemy-hugo-modules: 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://ckli.xyz/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?