Organize Your Articles With Our New Table of Contents Feature
Your Hashnode-powered blog can now auto-generate a table of contents for your articles to help readers find exactly what they need.
As developers, I think it's safe to say that most of us favor clarity over brevity.
To put it another way:
Engineers can be a wordy bunch! π
Really, though, it's not a coincidence that many of the best articles I've ever read on Hashnode also happen to be some of the most comprehensive.
But as we authors go deeper, we create new challenges for our readers:
Namely, how can they quickly and efficiently find what they need within our dense screeds?
That's where our new Table of Contents feature comes in.
Introducing the Table of Contents Feature
With this new feature, you can tell your Hashnode blog to automatically generate a table of contents based on your article's <h2> and <h3> tags (which correspond to ## and ### when writing in Markdown).
This table will be one of the first things a reader sees when they land on your article, and it will stick around as a collapsible menu at the top of the screen when they scroll down. This makes it easy to use no matter where the reader happens to be within the post itself.
Why Include a Table of Contents?
If you ask me, a table of contents is a must for anything technical that involves multiple steps. I plan to go back and update all of my past tutorials to enable this feature. Here's a breakdown of why I think you should start using ToCs immediately:
π Improves the readability of your blog
When a reader visits your article they can immediately see what's included within, without the need to scroll through and skim the headlines.
π€ Makes it easier to reference your article
Your readers will thank you for the ability to click through directly to the section where they last left off, or to refer back to an earlier section for review.
βοΈ Encourages good SEO practices
Search engines like Google love to see a clean hierarchy of header tags, the majority of which should be <h2> and <h3>. If your article includes a table of contents, you will naturally want to optimize your headers to suit the flow of the piece.
π§βπ« Looks professional
Maybe this is just my own personal opinion, but when I see a table of contents at the top of a tutorial, my first thought is wow, this author really went above and beyond for me. I guarantee that your readers will be impressed!
How to Create a Table of Contents
If you wanted to build a comparable table of contents feature on your own bespoke self-hosted blog, you would need to implement some pretty complex JavaScript logic to pull it off.
Thankfully for you, our developers have already done all of the hard work here, and abstracted away the tough stuff so that all we have to do as writers is check the appropriate box on our draft's Settings modal (See the screen shot below).
And that's all there is to it. When you click Publish, the table of contents will automatically appear at the top of the post.
We're Just Getting Warmed Up
You might have noticed that we're even busier than usual here at Hashnode HQ. Last week saw the release of our new magazine layout, and we've got several more exciting new features to ship in the very near future!
We want to build the tools that you need to be successful. And we're listening to what you have to say. In fact, the table of contents is just one of many user-requested features that have become a reality since Hashnode's launch.
With that in mind: What other new features would you like to see? Let us know in the comments below! π
Comments
Join the discussionNeed more examples of creating the table in 2023. I cant locate the sidebar mention in this article.
awesome <3
Really helpful
I like it and helps me to learn the subject.
Awesome feature.
Great but currently does not support special character like &. Moreover it would be great to be able to collapse it and maybe collapse it by default.
This feature currently doesn't work well for me, as I tend to write long-form posts with a larger amount of headings. The generated table of contents would take up the entire screen in that case, unfortunately.
I'd fix it with CSS, but the one person I got to sign up here didn't use my referral link, so unfortunately it's not an option for me π
It would be really cool if you could make it (optionally) collapsed by default as plain sticky element (like how it appears when you scroll down), or better yet could instead display it off to the side while the page is wide enough.
A few notes about the current implementation:
There's currently a styling bug where some of the clickable header styling still applies even while the list is always-visible, like the pointer cursor and "button" here.
It would also be great if, instead of using nested <div>s, you could use a <nav> and <details> element. That would work without JavaScript and is better for accessibility by default (though since you'd have multiple <nav>s then, please consider labelling them).
Amazing feature. Thanks for adding hashnode.
New Features and Highlights β¨
A series about Hashnode's new features releases and updates. We ship things faster and listen to the dev community at Hashnode. Request a new feature [here](https://hashnode.com/feature-requests).
