Verbindung zu einer Überschrift innerhalb eines Beitrags oder Themas

:bookmark: This guide explains how to link directly to a heading within a Discourse post or topic, enabling users to navigate long posts efficiently.

:person_raising_hand: Required user level: All users

Adding headings within long posts can make the content more readable and allow users to link directly to specific sections. This can be particularly useful for navigating extensive discussions and documentation.

Summary

This guide covers:

  • Creating headings using Markdown
  • Linking directly to specific headings in a post

Creating headings using Markdown

To create a heading in Markdown, prefix a line of text with one or more # characters. The number of # characters corresponds to the heading level. Here are some examples:

## This is a level 2 heading
Here is a short paragraph afterwards.

### This is a level 3 heading
Here is another short paragraph.

When rendered, it looks like this:


This is a level 2 heading

Here is a short paragraph afterwards.

This is a level 3 heading

Here is another short paragraph.


Linking directly to a heading

To share a direct link to a heading within a post:

  1. Hover over the heading to reveal a link icon next to it: link icon.
  2. Click the link icon to update the URL in your browser’s address bar with the direct link to that heading.
  3. Copy the updated URL from the address bar to share it with others.

Best practices

  • Use descriptive headings to summarize content clearly.
  • Structure your post using hierarchical headings where appropriate.
  • Ensure that headings are consistent and logical for better readability.

FAQs

Can I link to any part of a post?
Yes, as long as it’s a heading properly formatted in Markdown.

Do links to headings work across different posts?
Yes! These links will direct to the header in the post when used in other topics or shared somewhere else.

Additional resources

Last edited by @JammyDodger 2024-07-09T11:12:13Z

Last checked by @hugh 2024-08-08T01:48:04Z

Check documentPerform check on document:
73 „Gefällt mir“

Ich sehe die Link-Icons weder auf dieser Seite noch auf meiner eigenen. Nicht in FF oder in Chrome.

Hat sich etwas geändert?

Sie müssen mit der Maus über die Überschrift fahren, damit diese angezeigt wird:

Ich fahre mit der Maus darüber und sehe nichts.

Es scheint zwar etwas da zu sein, aber es wird kein Symbol angezeigt.

Eine Anschlussfrage …

Ich gehe davon aus, dass der Link kaputt geht, wenn man den Text der Überschrift ändert.

ERGÄNZUNG: Nicht nur der Anker ändert sich, wenn sich der Titel ändert, sondern auch das numerische Suffix der Überschrift, wenn man eine weitere Überschrift vor bestehende Überschriften einfügt. Das erscheint so anfällig, dass es nutzlos ist.

Die einzig sichere Problemumgehung wäre, die Überschriften in HTML-a-Tags einzuschließen und ihnen eine ID zu geben, richtig?

Ergänzung: Ich habe sowohl versucht, den Überschriftstext in a-Tags einzuschließen als auch nur leere Tags vor den Überschriftstext zu setzen. Keine der beiden IDs funktionierte. Ich habe es auch mit spans stattdessen versucht, mit dem gleichen Misserfolg.

Ja, ich kann es im DOM als before finden:

Ich bin auf Windows 11.

Der einzige Weg, wie ich das Link-Symbol erscheinen lassen kann, ist, den Link zu kopieren und dann diesen Link (mit dem # und der ID) in einen neuen Tab zu öffnen und dorthin zu navigieren. Dann wird das Link-Symbol dauerhaft angezeigt (ohne Hover), aber keines der anderen Link-Symbole erscheint beim Hovern.

Darf ich diesen Thread hochschieben (bump)? Ich frage mich, ob ich etwas Offensichtliches über das Verlinken innerhalb eines Beitrags übersehe.

Ich habe das gleiche Problem. Das Symbol ist da, aber seine Deckkraft ist auf Null gesetzt, sodass es nicht sichtbar ist.


.cooked h1 a.anchor, .cooked h2 a.anchor, .cooked h3 a.anchor, .cooked h4 a.anchor, .cooked h5 a.anchor, .cooked h6 a.anchor, .d-editor-preview h1 a.anchor, .d-editor-preview h2 a.anchor, .d-editor-preview h3 a.anchor, .d-editor-preview h4 a.anchor, .d-editor-preview h5 a.anchor, .d-editor-preview h6 a.anchor

Specificity: (0,2,2)

{

opacity: 0;

transition: opacity .25s;

}

Ich kann die Symbole auch im OP nicht sehen, was benutzerdefinierte Stile auf meiner Instanz ausschließt.

Ich benutze Chrome.

1 „Gefällt mir“

Als separates Problem stelle ich fest, dass der Link, der vom (unsichtbaren) Icon bereitgestellt wird, aus demselben Thema heraus nicht funktioniert. Wenn das Icon mir Folgendes gibt:

https://forum.example.com/t/testing-anchors/63647#p-311503-heading-1

Muss ich meinen Link erstellen, indem ich nur #p-311503-heading-1 verwende, nicht die vollständige URL. Die vollständige URL funktioniert, wenn ich sie in den Browser einfüge.