Show TOC automatically

[sheldonhull]

Can't figure out the right css for this. On desktop I want the TOC to show by default. Got this working by adjusting the style.scss contents I believe that contained that.

However, if it's mobile, I'd like to have it shift to the top of the post instead of disappearing, allowing the mobile user to use it to navigate , but not taking horizontal space.

Is this possible? Thanks for the fantastic work on this theme. I've gotten 90% of what I want done in my site so far, and your clean minimalist approach gave me the perfect starting point. I really appreciate the unique approach to tags as well, as it's not just a giant count of tags, but still shows in a chronological grouping, which I find very useful.

[Track3]

I have to admit, CSS in this theme is not well organized, I didn't planned that much at the beginning. To make toc visible by default, you can simply add class="show-toc" in layouts/posts/single.html#L46 https://github.com/Track3/hermit/blob/028dc62e3b02a636e47f8c2b8484b3926f1a9cfb/layouts/posts/single.html#L46

---

However, to make toc show on mobile is much more complicated. First, to make it not disappear on mobile, remove display: none; for #toc at style.scss#L634

Then you need to move toc to somewhere above the content in the layouts/posts/single.html. After that, you will have to restyle it, to make it stay in the normal document flow by default, but when the page width go beyond 1300px, make it position fixed (floating).

To conclude:

in posts/single.html move

{{- if .Params.toc }}
<aside id="toc">
  <div class="toc-title">{{ i18n "tableOfContents" }}</div>
  {{ .TableOfContents }}
</aside>
{{- end }}

right above <div class="content">.

In style.scss remove all of these https://github.com/Track3/hermit/blob/028dc62e3b02a636e47f8c2b8484b3926f1a9cfb/assets/scss/style.scss#L631-L634

then add position: fixed; left: 50%; to this block: https://github.com/Track3/hermit/blob/028dc62e3b02a636e47f8c2b8484b3926f1a9cfb/assets/scss/style.scss#L744-L748

More style adjustments may still be needed.

[sheldonhull]

Nice! I'll give this a shot

[sheldonhull]

Haven't forgotten. I will test this out as soon as I can, and if I can modify sufficiently to allow based on config setting, then submit as a pull request to enhance this theme.

[marcosci]

Did that work in the end for you? Tried the fix here, but couldn't convince the TOC to popup.

[sheldonhull]

I think so. Take a peek at the latest build on sheldonhull.com and tell me if that is working for you and showing up like you'd want. I think it's working right for mobile and for desktop now.

[marcosci]

That looks perfect :-) Can you summarize the steps to get the same toc you have? I had a look on the source of your site and apparently you took a different route.

[sheldonhull]

@marcosci sorry. Just saw this. Hmm. I used the media and css references that were provided. Did that not work?

[Sieboldianus]

Just gave this a shot, and it worked flawlessly (desktop only).

1. Find <aside id="toc"> in hermit/layouts/posts/single.html
2. Change to: <aside id="toc" class="show-toc">

Many thanks! Would be nice to make this option available in config.toml

[dbakit]

1. run command: cp themes/hermit/layouts/posts/single.html layouts/posts/single.html
2. edit layouts/posts/single.html

     51         {{- if (or .Params.toc .Site.Params.toc) }}
     52         <aside id="toc" class="show-toc">
     53             <div class="toc-title">{{ i18n "tableOfContents" }}</div>
     54             {{ .TableOfContents }}
     55         </aside>
     56         {{- end }}
   

PS: I change condition .Params.toc to (or .Params.toc .Site.Params.toc), to use global params toc. By default, you must add toc: true at every posts blog