With particularly long posts, it can be tedious to dig through the entire content. Then you often no longer read everything and skip key points. With a Table of Contents, you can jump straight to the paragraph that interests you.

Table of Contents


In order to jump to a certain heading, it must first be assigned an ID. This ID can then be addressed with a corresponding link. The heading can be created with HTML or Markdown.

[Jump to "content"](https://en.number13.de/blogpost/#content)

<h2 id="content">Heading</h2>

The ID is added to the link with #id and in the <h2> bracket. To try it out, click here: Jump to "Create Links"

Here you see a problem for the Casper Theme: The heading is hidden by the navigation bar. This problem can be solved with a small adjustment.

Ghost Blog: How to Add Footnotes to Your Post
Footnotes can be used to refer to links without interrupting the text. Mostly used in scientific papers, however, blogs can also use this function to add sources, or to add additional explanations.
number13julian


Adjustment for Casper Theme

In order to compensate for the offset, the heading must be "pushed down" a little, or the section to which the link jumps must be slightly above the heading.

Of course, you do not have this problem if your theme hides the navigation bar when reading blog posts.

By placing one (or more) line break <br> in front of the heading and addressing it by ID, the heading is finally displayed in the right place.

[Jump to "content"](https://en.number13.de/blogpost/#content)

<br id="content">
<br>
<h2>Heading</h2>

This link will now jump to the line break above the heading, which is hidden by the navigation bar. This means that the heading is displayed correctly.

GhostGuides