How to show a table of contents beside a post or article

In TeleportHQ, a post or article page can show a Contents list: the post's sections as links, headed On this page, beside the text on wide screens and above it on phones. Turn it on in the panel's settings under Article page → Contents (Post page → Contents in the Blog). Help Center articles have it on from the start; the Blog starts with it off.

Before you start#

• Your project needs the Blog or the Help Center switched on. See How to add a blog to your site or How to add a help center to your site.
• The list is made from the headings in each post's text, so give your posts headings. A post with fewer than three sections shows no list.

Turn the Contents list on or off#

1. In the left sidebar (the icon column), click Help Center, or Blog.
2. At the top right of the panel, click the gear (tooltip Help Center Settings, or Blog Settings).

3. Find the first block, Article page in the Help Center or Post page in the Blog. It lists the elements every post page can carry:

   1. Contents: "The sections of each article as links, beside it on wide screens and above it on phones, the one being read marked. Shown on articles with three sections or more."
   2. Heading Links: a # link beside each heading, so readers can link straight to a section.

   

4. Turn on Contents. TeleportHQ adds the list to the post page at once, for every post. Turning it off takes it away again.

In the Blog, the same switch is under Post page, and starts off:

Add the Contents list by hand (Blog)#

On a Blog post page you can also place the list yourself, for example in a sidebar you built:

1. Open the post page, blog-post-details in the blog folder.
2. In the left sidebar, click Elements.
3. In the Blog group, drag Contents ("The sections of the post, each a link that jumps to it.") onto the post page.

A page holds one Contents list. If the page already has one, TeleportHQ selects it instead: "This post page already has it — it is now selected." The Blog group's post-page elements (Share Buttons, Author Box, Previous & Next Posts, Reading Progress and Contents) work on Blog post pages only; in the Help Center, use the Contents switch.

What readers see#

• On this page, then one link per section. A section is a top-level heading of the post: if your post uses H2 headings for its parts and H3 inside them, the list shows the H2s.
• On wide screens the list sits on the right of the text and stays in view while the reader scrolls. On tablets and phones it sits above the text.
• On your published site, the link of the section being read is marked. The editor's canvas shows the list without that mark.

Heading Links#

With Heading Links on, every heading in a post (H2 to H6) becomes a link to its own place, and a # appears beside it when a reader points at it. Readers click a heading to get an address such as /help/how-do-i-change-my-order#change-the-delivery-day, which opens the article at that section. A blog or help center switched on now starts with Heading Links on; a blog set up before this setting existed starts with it off.

Check that it worked#

• On the canvas, open the post page (help-article-details in the help-center folder, or blog-post-details in the blog folder) and show a post with three or more headings: the On this page list appears beside it.
• On your live site, the list and the marked section show after you publish. See How to publish a web app.

Troubleshooting#

The list doesn't show on a post The post has fewer than three sections. Add headings to its text. If the post uses only one H2 and several H3s, the list counts the H2s: make the parts the same heading level.

The Contents switch is greyed out The panel says "Your blog has no post page to add this to." The post page was deleted. Rebuild it, see How to design the blog list and post pages.

"Add this on a blog post page — it shows the post that page displays." You dropped the Contents element on a page that isn't a Blog post page. Open blog-post-details first. In the Help Center, use the Contents switch.

Good to know#

• Blog and Help Center differ in two ways: the Help Center turns Contents on for new help centers and the Blog doesn't, and only Blog post pages take the Contents element from Elements. Both start with Heading Links on when you switch them on now.
• The list reads the headings each time a post is shown, so editing a post's headings updates its list. You don't need to publish again for a post's text changes.
• To change the list's look, select it on the canvas and style it like any element. The marked link uses the list's text color.