Here is a way to do Table of Contents (ToC)

[denvergeeks]

I am happy to share it with you and anyone else in the community.

I’ll put up both the code and a proper tutorial on my Ghost-O-Matic site in the near future.

In the meantime, if you have purchased a license for the DocuHub theme (which I can recommend you do through GumRoad) then I think I could properly send you a copy of the theme as it is installed on my demo at https://docuhub.ghost-o-matic.com.

However I would mention that the developer has recently been promising a v3 update for the DocuHub theme.

I’ve been waiting for this update to make a new, clean integration, and to see if the developer might also add a TOC into the theme itself, which several of us have asked for. If he does not, then I might appreciate some chip-ins from those who want it sooner, to motivate me to package it up and make it available as a plugin.

So if you want you can wait and see what happens with that.

Otherwise, I can always be hired directly to do it.

[giacomosilli]

I could consider buying it in the future.

As long as I have the time I prefer to do things by myself, maybe with a little help when needed.

At the moment I have almost managed to create this sidebar, I just have to solve a few things.

I hope you will improve your theme more and more

[denvergeeks]

Yeah @giacomosilli, that’s the fun of Ghost, right? Technical learning challenges that are actually achievable in short order.

[counsel]

David, hi again,

Thanks your team for this detailed guide! But, I have an elementary question about it:
In what file(s) of Casper theme do I need to add code examples from the tutorial?

I speak about the code from the following sections: “Editing the post template”, “Styling the table of contents”, “Advanced styling”. If I am right, the code from “Editing the post template” I need to place in default.hbs before this piece of code (see the screenshot):

I tried to add the code from these sections in different combinations in default.hbs, /assets/css/screen.css and global.css, but couldn’t set up the same sticky ToC on my site as in your tutorial. Thank you for the details.

[DavidDarnes]

You are right about the default.hbs file, as it says in the tutorial. Which theme are you trying to customise? If it’s Casper have you tried following the readme guide on how to customise asset files? There’s more information in the GitHub readme:

GitHub - TryGhost/Casper: The default theme for Ghost

[counsel]

David, I am trying to customize the default theme, Casper. I tried to add all these code pieces in default.hbs (css code by adding via ) and add css code in screen.css. But it desn’t work (test page is Правовой статус секрета производства (ноу-хау)). My files default.hbs and screen.css may be found here: https://yadi.sk/d/CfDCncrynTE_OQ

[denvergeeks]

@counsel – you have some broken code in your .hbs:

1. a missing < style > at line 141

2. looking into the page source at your live test page, I also see 3 separate instances of both your CSS and your Javascripts for the toc.

[beagle]

I followed your whole tutorial, however, I can’t figure out why the TOC isn’t sticky.

Do you have any ideas of how I can fix it so it actually sticks to the side?

I have the Polar theme
http://polar.gbjsolution.com/style-guide/

[denvergeeks]

@beagle

To make the Table of Contents appear like on my demo page here:

https://ghost-o-matic.com/add-a-table-of-contents-to-your-posts-and-pages/

HTML - Paste this into your HTML . . .

<aside class="toc"></aside>

CSS - Paste this into your Site (or Post) Settings >> Code Injection >> Site Header . . .

<style>
.toc {
overflow-y: auto;
position: fixed;
top: 75px;
right: 10px;
width: 200px;
font-size: .8em;
font-family: sans-serif;
background: #fff;
opacity: .9;
padding-top: 10px;
}

ol.toc-list {
margin: 0;
padding-right: 20px;
}
</style>

[beagle]

@denvergeeks

.toc { overflow-y: auto; position: fixed; top: 75px; right: 10px; width: 200px; font-size: .8em; font-family: sans-serif; background: #fff; opacity: .9; padding-top: 10px; } ol.toc-list { margin: 0; padding-right: 20px; }

Yay, it worked when I put the CSS code in the post code injection - Post Footer section. Thank you!!!

[counsel]

Hi, denvergeeks. My mistake. Your eyes went over my code sharply. Thanks for the note! Hope, I fixed it right, and now it is 1 instance. But, as I see, for unknown reason my ToC doesn’t work (links in it do not redirect to the corresponding headers). Will continue my search.

[denvergeeks]

@counsel here is a clue to get you started troubleshooting why the links in your ToC are broken:

Compare the two screenshots below, careful to examine the blue highlighted lines. You will notice how the “href=” in your link is different from the “href=” in my link:

Your Site:

My Site:

This should get you started.

Please post your progress.

[beagle]

@denvergeeks

@media (max-width: 1170px) { .toc { display:none; } }

Hi @denvergeeks
Two things I’d love your help on.

1. I’d like to start the ToC be fixed below my header image (400px), but it doesn’t look right when you scroll. You can’t see everything.

2. Is there a way in the CSS to stop the ToC before the footer? It overlaps the footer and it doesn’t look right.

I basically want the ToC to be fixed in within the container between the header and the footer.

[denvergeeks]

@beagle are you saying that:

1. you don’t want the ToC to appear until the user scrolls down to the page content so you want it to be fixed below the featured image (which is taking up 400px at the top)?

2. you want the ToC not to get cut off, but remain visible above the footer at the bottom of the page?

Please post the URL of your live test page.

BTW - on my Vanilla theme demo below, I have a more subtle design on my ToC:

https://vanilla.gwarp.com/the-editor/

[beagle]

For 1 and 2 - here’s a great example how I want my ToC to look: Your guide to working remotely in Slack | Slack

Here’s my live test: Test

I can’t get it to work like it does on the slack site, where after you scroll a bit it stays at the top of the screen and then disappears when you hit the footer. Would love your thoughts!

[denvergeeks]

@beagle there are so many different ways to implement and control this behavior.

Here is but one:

jQuery Pin

And here is a brief, tutorialized example of how I integrate external scripts into my Ghost sites:

https://ghost-o-matic.com/javascript-plugin-fun/

[brightthemes]

Hi @beagle I checked your site, in your case the TOC is part of the post content and the best and easiest way to achieve what you want is to have the TOC as a sidebar, that way you could use position: sticky instead of fixed. (Slack also has it that way).

We also implemented something like that in our Auden theme, you can check it how it works here:
Post with TOC

[denvergeeks]

@brightthemes your Auden theme is fantastic!

[brightthemes]

Thank you!

[ericalli]

Hey Everyone,

I’m Eric, the developer of DocuHub. Thanks for the mention @denvergeeks!

I did indeed release a new version of DocuHub that integrates TOC. You can see it in the demo here.

Feel free to look at the source code (or better yet, pickup a copy of the theme ) to see how I did it.

Happy to help anyone if they have any questions as well!