How to Add a Table of Contents (TOC) to Your Posts

Articles
, ,
1

Table of contents :star2:

This feature adds a “table of contents” to the right side of the first post in a thread which will hopefully be helpful to article writing and navigating.

How to add it

Menu button

In the post editor, hit the cog button and you should be able to see the table of contents option. It will add the following line to you post:

<div data-theme-toc="true"> </div>

It will appear like this while you are editing the post

image
image726×204 80.2 KB

Example

I have applied the feature to this thread as a proof of concept

How it actually works

All you have to to is structure your post using headers and subheaders and it will automatically render the table of contents.

This is how you add headers and subheaders:

# Header
## Sub header
Some content here
### Sub sub header
Maybe more content here?
## Another sub header
# Another header
wow this is great content!

Mind the space!

And here’s how it looks when it gets rendered:

Header

Sub header

Some content here

Sub sub header

Maybe more content here?

Another sub header

Another header

wow this is great content!

I have also applied the table of contents to this post so you can see a live example!

11 Likes
2

i’ve been wanting to try and figure this out. i’ll give it a go on the next poll.

3

Is there any way to make it so that it stays in sight (as in for collection threads)?

Or is there a better of potentially instituting that in the future?

4

You mean across multiple posts?

5

If the table of contents stays in sight across entire thread so someone can click on any post you have set out linkable in TOC

A collection thread say has 20 posts you want to link in that table and it says there all the way thru the thread, thru the last post

6

I don’t think that is feasible without writing an entirely new plugin.

One thing I will mention is that you can create your own “table of contents” and link to any header in any thread.

For example, this link: https://www.elitefourum.com/t/how-to-add-a-table-of-contents-toc-to-your-posts/46093/6#section-1-1 goes to the header below.

You can get the link by hovering next to the section

image




























Section 1

You can use this to link to the middle of any post. So if you want to break down the major posts from the OP you can.






























Or alternatively, you can even use this html anchor:

<a name="anchor-name"></a>

If you place something like that in a post, it won’t be visible but you can link to that spot.

:arrow_down:
:rabbit2: I put the anchor named bunny right here
:arrow_up:

ex. https://www.elitefourum.com/t/how-to-add-a-table-of-contents-toc-to-your-posts/46093/6#bunny

You can use this to link to the middle of any post. So if you want to break down the major posts from the OP you can.






























Yes I added all this blank space to help demonstrate my point :slight_smile:

1 Like
7

Thanks for this feature! I’ve always felt bad making people scroll all over my collection thread so looking forward to making the next update with this :raised_hands:

1 Like
8

I gotcha, if it isn’t feasible there’s not much I can do. I already have a table of contents in my thread for example with links to every post but that’s just cause im like that. Most people wouldn’t do that manually for one, and additionally I think of it as something that would encourage people to look around update posts on others’ collections if they knew where to go with a click on the ride side bar.

It’s one of the downsides to the scroll… it makes it so that most people look at the latest post where it leaves off and discourages looking at anything else because it would mean looking through all the other stuff and taking up too much time.

1 Like
9

thank you pfm. feels good to have the polls all organized and in one place to look back on

1 Like