Bei besonders langen Posts kann es mühselig werden, sich durch den ganzen Inhalt zu quälen. Oft liest man dann nicht mehr alles und überspringt Schlüsselstellen. Mit einer Inhaltsübersicht kannst du direkt zur Stelle springen, die dich interessiert.

Inhaltsübersicht



Verlinkungen Erstellen

Um zu einer bestimmten Überschrift zu springen, muss sie zuvor mit einer ID versehen werden. Die kann dann mit einem entsprechenden Link angesprochen werden. Die Überschrift kann mit HTML oder Markdown erstellt werden, das spielt keine Rolle.

[Springe zu "inhalt"](https://number13.de/blogpost/#inhalt)

<h2 id="inhalt">Überschrift</h2>

Die ID zur richtigen Stelle wird also mit #id an den Link angehängt. In die <h2> Klammer kommt die ID, zu dem der Link springt. Zum Ausprobieren kannst du hier auf diesen Link klicken: Springe zu "Verlinkungen Erstellen"

Hier siehst du für das Casper Theme direkt ein Problem: Die Überschrift ist von der Navigationsleiste verdeckt. Mit einer kleinen Anpassung kann dieses Problem behoben werden.

Ghost Blog: Fußnoten zu deinem Post hinzufügen
Mit Fußnoten kann auf Links verwiesen werden, ohne dass der Fließtext unterbrochen wird. Meist verwendet in wissenschaftlichen Arbeiten, dennoch können auch Blogs von dieser Funktion Gebrauch machen, um Quellen von Ressourcen zu hinterlegen, oder zusätzliche Erklärungen anzufügen.
number13.dejulian


Anpassung für das Casper Theme

Um den Versatz auszugleichen, muss die Überschrift etwas nach "unten geschoben" werden, bzw. der Abschnitt, zu dem durch den Link gesprungen wird, muss etwas oberhalb der Überschrift liegen.

Dieses Problem hast du natürlich nicht, wenn dein Theme die Navigationsleiste beim Lesen von Blogposts ausblendet.

Indem man vor die Überschrift einen (oder mehrere) Zeilenumbruch <br> platziert und diesen per ID ansprichst, wird die Überschrift schließlich am richtigen Ort angezeigt.

[Springe zu "inhalt"](https://number13.de/blogpost/#inhalt)

<br id="inhalt">
<br>
<h2>Überschrift</h2>

Damit springt man jetzt zu dem <br> oberhalb der Überschrift, das durch die Navigationsleiste verdeckt ist. Somit wird die Überschrift genau richtig angezeigt.

Ghost Blog