Table of Contents for Solo Theme?

Themes
1

Hello everyone :slight_smile:

I am using the fabulous Solo Theme but only thing is missing : a table of contents.

I am wondering if it is possible to implement a table of contents easily (without coding) without upgrading my Starter pack subscription ?

If not, is there another solution → again, without coding :smile: ?

2

The approach here can be used in a mix of code injection and an html card in the post editor,

You’ll likely have to tweak some css selectors.

1 Like
3

You can try the table of contents widget, you can add TOC by simply copying code into “Code injection”.
Here is the guide on how to use it.

4

I already checked this method before asking the question, but they don’t really say you can insert it before your OG post.

5

Thanks :+1:
I’ll have a look at it.
But how does it display eventually?

6

You can check this link for eventual display

7

Ha okay :sweat_smile:

It is not a floating TOC on desktop apparently.

On the phone, it does seem not sticking to the top of the screen where we can go to any section of the blog post.

Is it correct?

The problem is that I wrote 3000 words articles as an average. So, it’s more convenient to make it more UX friendly.

Do you think we can make it another way ?

If nor, I should buy a theme accordingly.

8

This is a good resource. But it does not work with most themes. I have checked Headline, Source, Journal, etc. It would have been great if Ghost team provided theme specific ToC :)

10

On desktop, it is sticky alongside the content, while on mobile, it appears at the position it’s inserted.

Screenshot 2024-08-10 at 11.39.51
Screenshot 2024-08-10 at 11.39.512384×968 288 KB

Do you think we can make it another way ?

Of course, I can add more display options for the widget. Can you provide me with a display example?

11

The TOC in my link is generated using my TOC widget. It is compatible with most themes as it automatically detects the content container and adapts accordingly.

12

Yeah sure :smiley:

1000015282
10000152821080×2400 241 KB

Sound perfect for the desktop version.

1 Like
14

I added a new style option: " Always Sticky", and you can view its display effects at “Always Sticky” Demo

15

Thank you for the modification :slight_smile:

I tried on both plateforms (desktop and smartphone).
Here are the screenshots of how it looks.

image
image1236×640 77.7 KB

On the phone, sometimes, it goes that way.

Screenshot_2024-08-12-11-19-56-911_com.android.chrome
Screenshot_2024-08-12-11-19-56-911_com.android.chrome1080×2400 167 KB

A link to a video about how it behaves on the phone :

Quick improvements (according to me) :

  • While scrolling down, try to make it sticky right away. Now, it goes sticky after once scrolling down AND scrolling back up.
  • Put grey border 1px (or 2) solid without shadows, depending on the background of the page.
  • Make the TOC take the whole screen.
  • Don’t cut off the headings, start a new line instead.
  • Make the font size of the whole TOC smaller. One size for the top title ‘Table of contents’ and one size for all the headings (a bit smaller).

Here is the link of another video about how a TOC should behave (but it is my perspective :smile:) :

I hope it helps you to improve your TOC :slight_smile:

17

Thank you for your feedback. I will consider your suggestions.

Regarding the screenshots:

  1. You can adjust TOC to appear at the right side, so it won’t overlap with author info.
  2. I will fix the overlay problem on phone screen.
18

Hi Jeremy, I have fixed the bugs, updated the styles and added more config options.
You can view the new style at: Always Sticky TOC

To make the TOC work for your site, please go to Rakihub TOC and select:

  • “Always sticky” style
  • “Right” for “position on desktop”
  • Your prefered font size for TOC heading and title
19

Hello @Raki,

I tried to set it up on one of my pages.
Here’s how it looks like :

image
image1291×862 140 KB

The title of TOC appears twice as you link-logo.
Personnally, I’d rather make the headings fonts smaller, like 10px (as I saw on another Ghost theme) to make it more readable.

Example :

image
image319×804 31.7 KB

There is another issue, but I don’t know if it is linked to my Solo theme.

image
image1482×627 83.4 KB

It crosses the main pic.
How to make the TOC sticky under the image ?

Here’s how it looks on the phone :

image
image474×885 59.7 KB

FYI, here’s the code I used :

<script src="https://cdn.jsdelivr.net/gh/rakihub/ghost-code-injection@toc-v1.4/toc/free/built/free.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rakihub/ghost-code-injection@toc-v1.4/toc/free/built/free.css">
<aside class="raki-toc-container"data-toc="h6,2" data-style="style-sd,side-l" data-container="trun-n,font-sm" data-title="t-TABLE OF CONTENTS,bold-y,font-base" data-link="bold-y" ></aside>

Thanks for the reply.
Hope it’s helping :slight_smile: .

20

The title of TOC appears twice as you link-logo

Seems like you injected the code twice, please check your “Code injection => site header” if there is any duplicate code related with “rakihub/ghost-code-injection”

How to make the TOC sticky under the image ?

Seem strange, I can’t reproduce this with Solo theme, is it possible to give me a link and let me check?

21

Here’s the link of my blog :

Go on any blog post and you’ll see by yourself.

I just removed the TOC because of visitors coming.

You can add it manually in the code I suppose.