Table of Contents Tutorial for Casper Version 4 - Simplified

@JustinCEO The reason for the # at the beginning of the tag is to designate it as an internal tag. The way you’ve got the tag set up in the code you’ve just shown (and therefore the way you’ve got the tag set up in the admin) is as a public tag, which means the post will display the TOC designation as one of its tags (supposing your theme displays the tags of each post).

1 Like

ahhh! I see! that is cool! and here I was wondering how I’d go about hiding tags like toc that I didn’t want to show up publicly, and private tags were already baked into the Ghost cake :slight_smile:

Another tiny issue you may run into is that the drop-in gallery card will automatically expand to 1200px wide, which isn’t ideal if you have the TOC running neatly down the side of your 720px wide main content. My simple fix was to inject this code:

.kg-gallery-container {
max-width: 720px;
margin: auto;
}

Yes @DonaldH I will add this (and have now added it to the code my post above) – this is from the Official Ghost TOC Tutorial (How to add a table of contents to your Ghost site) and also needs to be added to the CSS in the Site Header Code Injection for Casper:

/* Adjust content wrapper */
.post-content {
display: block;
}

/* Adjustments to wide and full width cards */
.kg-gallery-card,
.kg-width-wide,
.kg-width-full {
display: flex;
flex-direction: column;
align-items: center;
}

.kg-gallery-card > *,
.kg-width-wide > *,
.kg-width-full > *,
figure.kg-width-full img {
margin-left: -50vw;
margin-right: -50vw;
}

.post-full-content pre {
max-width: 0;
}

I’m quite a n00b so I’m not sure exactly the issue you have in mind here. Maybe if you get a chance you could screenshot it if you’re so inclined.

One issue I did notice was the fixed position version of the ToC overlapping my content a bit at the right edge. Within the @media only screen and (min-width: 1400px) css that makes it float on wider devices, I added max-width: 330px; and you can see the result - this is the closest i can get the ToC to my content before it “pops over” to the top of the page due to the width being too small

I organized the ToC-related CSS and some other CSS into a custom.css file btw … the method of dumping everything into the code injection window didn’t seem like it would scale very well :slight_smile:

having an issue with the bottom of the TOC colliding into the bottom of the page in an unexpected way:

ideas? is there some simple way to make the TOC disappear once you get close to the bottom?

link: SICP 1.1 - The Elements of Programming - Part 1

another screenshot of weird TOC behavior at bottom of page

@JustinCEO – one solution is to set a z-index on the .toc in your CSS . . . ( https://www.w3schools.com/cssref/pr_pos_z-index.asp )

.toc {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    padding: 5px;
    z-index: 1;
}
1 Like

Hi,
Thanks for the great answers. I have followed your instructions and managed to get the ToC showing perfectly. However, when fixing, is there a way to only show after a specific point on the page, e.g. after the featured image.

Try something like this…

.toc-wrapper {
    position: absolute;
    top: 0;
    right: -220px;
    height: 100%;
}

.toc {
    position: -webkit-sticky;
    position: sticky;
    margin-top: 50px;
    margin-bottom: 30px;
    top: 100px;
    width: 180px;
}
1 Like

Is there an easy way to get the TOC to be centered on the page but have the text still be left-aligned? Like I basically want the current structure but just want to “shift” the ToC over towards the center of the page (see image)

I tried playing with the text-align property but only managed to get fully centered text, which isn’t what i wanted

Try this @JustinCEO:

.toc {
    width: 400px;
    margin: 0 auto;
}
1 Like

Why are TOC+Links not not automatically built into the basic Ghost product?

Seems like a large oversight given how important TOC is for:

  • SEO
  • Vastly improves the readers experience.

Simple solution for the Ghost team: allow links to navigate to different parts of the post:

e.g. We write our own Table of Contents and then Link each TOC item to a section lower down in the post.

(currently links only go to external websites, why don’t they allow links to go to different sections of the page)

2 Likes

I return to this thread seeking one more tweak: is it easy to add a scrollbar to a floating TOC to allow you to scroll when the content is too big?

I’m having an issue with this page currently: Peikoff Logic Homework on Informal Fallacies

(Another potential solution is to just have it not float when the TOC content is too big – similar to how it already doesn’t float when the screen is too small)

Yes it is very easy with CSS:

Let me know if you need further help to make your TOC scroll-able!

My table of contents does not have a title, I would use regular bold text, but its not within toc box.I would prefer the title of the section to be inside the toc box above the links.

@denvergeeks What would you recommend to put “Table of Contents” above the links here as the title?

You’ll need to wrap it in some HTML. For example…

<aside class="gh-sidebar"><div class="gh-toc">**HERE**</div></aside>

I have an example wrapping a TOC in a Details-Summary element:

I tried your approach @denvergeeks and got a Table of Contents :slight_smile: But it appears on top of content and images, which isn’t ideal.

@Ghost should have Table of Content natively as part of their themes. It is essential for SEO these days and I wonder why this isn’t included yet :frowning:

Is there a way to make the Table of contents appear (sticky and floating on the left) after the Featured Image on posts and not scroll after the article content ends, but before it gets to the related posts and footer section? Right now, I have the ToC on top of everything :frowning:

Thank you :pray:t2: