Table of Contents Solo Theme

Developer help
1

I’m using Ghost Pro and the Solo Theme. I followed the tutorial on the developer site to add table of contents to my site I just started. However, the table of contents is doing two things wrong:

  1. Its using my name as the table of contents header. How do I avoid this?
  2. The table of contents is displaying behind the author meta data on the left. Is there a way to move it below or to the right of the article?

www.goodaspace.com
Using Safari and DuckDuckGo on MacOS, same results.

2

Because Solo has a different setup than Casper, you’ll need to do some modifications to get the table of contents working.

  1. The author metadata section is included in gh-content, and the author name is an h4, which explains why it’s included in your TOC. Tocbot includes an ignore selector option that you could use to exclude author name.
  2. This is again because of Solo’s layout, which includes the author metadata in the content section. You’ll need to customize the CSS for the TOC or change where it’s rendered.
3

Thanks for getting back to me. Being new to this, do you have any suggestions on how to accomplish those things?

UPDATE: Figured out how to exclude headings H4. Still have not figured out how to make it display underneath the author metadata.

4

It looks like you’re trying out a new library. Let us know if that works better for you.

The first thing I would do if you want to use tocbot is to add some content to your site with headings, so it’s easier to see how things are working (or not). That way, we can test some things out and see what works and what doesn’t.

5

I was playing around with this tutorial:

But I went back to the Ghost.org tutorial and implemented that. I’m glad I figured out the H4 thing which is below for anyone else who is having that issue.

<script>
    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.gh-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.gh-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h2, h3',
        // Ensure correct positioning
        hasInnerContainers: true,
    });
</script>

Now I just need it pushed below the author metadata somehow, or shown to the right of the article (preferred).

6

I figured it all out. For others who wish to do this:

@media (min-width: 1300px) {
     .gh-sidebar {
        position: absolute; 
        right: 0;
        top: 0;
        bottom: 0;
        margin-top: 4vmin;
        grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
    }
   
    .gh-toc {
        position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
        top: 7vmin;
    }
}

Now I just need to figure out how to make the vertical list lines go to the right of the wording and add a table of contents header text above the list…

7

Nice! Glad you figured it out.

Tocbot also has an ignore selector:

ignoreSeletor: ".gh-author-name"

You could add that to the tocbot configuration, which would make it ignore the author name but let you keep h4s in the mix.

1 Like
8

Hi @dano9258

Have you figured out how to put the TOC on the right. I firstly thought the trick is on the grid-column of the below block. It turns out that modifying this is not enough. I am not very familiar with the Ghost template languages. Hopefully you can advise if you or anyone else figure it out. THX.

@media (min-width: 1300px) {
            .gh-sidebar {
                position: absolute; 
                top: 0;
                bottom: 0;
                margin-top: 4vmin;
                grid-column: main-end / wide-end; /* Place the TOC to the left of the content */
            }