TOC on Source theme

Themes
1

Hello there!

So, I really don’t know much about code but followed the tutorial for creating a TOC:

but then I noticed that it messed up with the “publication-info sidebar” in Homepage. I’m using Source Theme and need some help to configure a proper TOC in my blog posts.

Can anyone help!
Thanks in advance!

1 Like
2

Add .gh-content to the styles of the TOC in default.hbs

.gh-content .gh-sidebar {
   position: absolute; 
   top: 0;
   bottom: 0;
   margin-top: 4vmin;
   grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
}
3

Thank you!
I will try and see how it goes!

4

Hello…
It didn’t work.

Sidebar now has disappeared from homepage even with “Show publication info sidebar” on.

Any advice?

Thanks in advance

5

Share the style tag code at the default.hbs file please

Obtener Outlook para iOS

6

And your site url

Obtener Outlook para iOS

7

Oh wait!
I added .gh-content to the “@media” inside the style of the TOC and now it seems to work.

It was what you meant?

Thank you!

8

You can change “gh-sidebar” to “toc-siderbar” in all the code you added to fix this.

You can also check this guide for detailed info.

1 Like
9

Thanks, Raki. Somehow, the TOC sidebar didn’t move to the side using the code in the guide you provided. I’ll try some tweaking to see if I can fix it.

10

Thanks Raki!

I tried once again and it went ok this time!

It worked!

Thank you very much for your concern!

1 Like
11

Hi @Raki I followed your tutorial and it worked. Thank you so much!

I’m wondering if there’s a way to add a title “Table of Contents” that will stay sticky on top of the toc on page?

Many Thanks :slight_smile:

12

I updated my blog, please follow the instructions to add a title to TOC:
Add a title to TOC

1 Like
13

Hi all,

@Renato_Dias_Music Sorry in advance for disturbing this thread again

I have an alternative version of TOC and not only for Source theme. But I personally also use the Source.
Here is how it looks:

Screenshot 2024-08-04 at 01.51.17
Screenshot 2024-08-04 at 01.51.17745×472 25.3 KB

I have two articles about how I wrote a component that automatically builds the Table of Contents for your posts. You can see its functionality in almost every one of my publications.

In the first part, we will explore the problem in more detail, examine alternative solutions, and develop our own component based on the idea. I will also explain how to use it.

In the second part, we will significantly improve it and simplify its use. The second version of the component builds a multi-level Table of Contents.

By the way, the second version can be adapted not only for Ghost

1 Like