Scrollable Table of Content

Using Ghost
1

I am building a knowledgeable using Ghost platform and would like to integrate “scrollable table of content” that is tied to H1, H2 and H3 headings. I didn’t see any Ghost theme or website built on ghost that has this feature.

Here is an example of “scrollable t.o.c” → https://docs.gitbook.com/getting-started/quick-start

Is it possible to achieve something like this using Ghost? If yes, how? Thanks in advance.

2

I haven’t seen a theme like that; you’d likely need something with heavy customisation to get similar functionality. Have you had a look at some of the documentation themes available? They might provide a more straightforward path forward out of the box.

3

@Taha there are numerous ways to build this feature into any theme… look through my posts on the topic – if you want I could build it into your theme…

https://forum.ghost.org/search?q=toc

1 Like
4

Thanks for pointing to relevant posts in the forum; and for offering help to integrate.

  1. I found the implementation of toc, by you, at this page Is docuhub theme developed by you? Is the toc feature built-in the theme? If not, how to integrate (and customize) it?

  2. Other discussion on the forum related to toc implementation is those related to static one and not the one i am looking to implement i.e, floating on page with use scrolling.

Looking forward to your reply :handshake:

– update –

I was browsing this link on mobile, and it seems out of line. First, the sidebar (Getting started) covers almost the entire screen. Second, the toc, is non collapsable which covers the last section of the page content, when we are at bottom of the page. Can it be fixed at theme level? To make it something like gitbook did?

5

Thanks for offering help, I believe @denvergeeks cracked this out.

6

@Taha - answers to your questions:

  1. I am not the developer of the DocuHub theme. I purchased it and then integrated the TocBot script into the DocuHub theme.

  2. Here is another Ghost theme (I call it Vanilla) where I have also integrated the TOC (and on that theme, for mobile, as you can see, it is simply hidden):

https://vanilla.ghost-o-matic.com/the-editor/

  1. So Yes! Once the script is installed and configured into the theme, the placement of the TOC and all other aspects can be changed and customized via CSS (including to look just like on GitBook)!

  2. I highly recommend purchasing DocuHub from the developer’s Gumroad online shop and NOT through Envato/ThemeForest.net because of this issue:

Below is a link to the t2themes shop on Gumroad…

https://gumroad.com/t2themes#LPhck

7

Thanks again for taking time out to address this.

The script that you are using;

  • can be installed on any ghost theme (need to figure this out)
  • it’s look and feel can be adjusted through CSS (though I don’t know how)
  • on mobile, it behaves abnormal – either completely hidden or covering the content underneath it

My next (logical) question is:

  • How to implement the script into ghost theme?
  • How to make the modifications?
  • Will you charge for this or share the process with public (for free)

Thanks and looking forward to :ear: back from you

8

@Taha the tocbot script itself and the instructions/process I used are free and available here:

You might want to hire someone to do it for you, if reading the instructions on that page is not enough. Also, if you don’t know how to make changes using CSS, you can hire someone to do that too. (On mobile, the “abnormal behavior” you describe can be easily corrected in the CSS. That is just one of my personal test sites.)

As you can see on the tocbot demo page, by default, it already looks and behaves a lot like the TOC you see on GitBook.

But it sounds like you might enjoy learning how to add javascripts in your Ghost site, and maybe also learn how to make changes to a theme using CSS. If so, this tocbot script would be a good starting point for learning, as it is well documented by the developer.

It is a very fun and useful skill, and after you do it once, it can become addicting to keep adding features and tweaking the look and feel of your site - I encourage it!

There are sooooo many free tutorials, forums and other learning resources on the internet if you search them out.

Also, as with anything, you can hire a human to teach and tutor you through your learning process!

9

Thanks a lot, i will dive into the toc bot to see if I can figure this out.

Besides, I found that Ghost official website has also implemented the same running toc style as you can see on this page → How to install & setup Ghost on Ubuntu 16.04, 18.04, 20.04 or 22.04