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
14

Hey,
Thanks for sharing the quick and easiest way to implement TOC.
I want some customization, can you help me to do this?
=> I want to hide the contents under “Table of Contents” by default and want to add a Show/Hide Button just after the “Table of Contents”. So when visitor click on that, table of contents items will show or hide.

Is that possible?

Screenshot_47
Screenshot_471240×117 4.21 KB

Screenshot_48
Screenshot_481199×462 24.4 KB

15

Hello @elena018 ,

I never needed this for myself, but I fully understand your need. So, will do it for you.

Which colors you’d prefer for border and background? Same as on the attached screenshots?

Anyway I will make colors adjustable for you

16

Hi again @elena018 ,

I returned with updated version 2.1 of my script

You need to copy it from here: github gist
Or from my article: link

Here is example of usage:

<toc title="Table of Contents"
  collapsible="true" 
  show-text="Open" 
  hide-text="Close"
  border-color="#000"
  bg-color="ivory"
></toc>

Now it has more parameters in addition to title:

  • (optional) collapsible - adds a show/hide button, border, background and some paddings
  • (optional) show-text & hide-text - allow you to override button name in case where you need it or for other languages
  • (optional) border-color & bg-color - allow you to control the styles. Can accept either color name (like ivory) or hash (like #000 for black)

As minimum you’ll need collapsible="true". As you see all the rest parameters are optional. I use Show/Hide by default as a button name, gainsboro as border color and aliceblue as background color

As example of work I updated one of my articles: 4G LTE USB Wi-Fi Modem Review from AliExpress

So, you can start from this:

<toc title="Table of Contents" collapsible="true"></toc>

I hope this version works as you expected

1 Like
17

Hey,
Thanks for the help and I really appreciate your quick response and effort.
I’m newbie with Ghost CMS.
May I ask you for another help?

18

@elena018, sure, will try to help if I can.
I am also a newbie, but in blogging ))

1 Like
19

Hi,
I’m using source theme (v1.4.1) and ghost cms latest version 5.105.0. I want to add a sidebar on each posts of my blog where I want to Display 3 things.

1st: Latest 5 Posts from a specific Tags (for example: news) with Post Meta Data, a small size version of featured image and first 15-20 words of each posts and every post will be linked.

2nd: A List of 5 Most viewed posts.

and 3rd: All tags of my blog.

I’ve tried to do this by adding a sidebar in post.hbs and css style in assets/css/screen.css but it not works. Not showing the sidebar.

20

Hi @elena018 , your new requests don’t belong to current topic and they are overall about update of the theme file, which is theme specific configuration.

I do not have another playground where I can do such a changes. Developing this can affect UI of my blog. I afraind that I won’t be able to do this.

Let me know if you have anything related to the TOC