Création d'un lien vers un titre dans un message ou un sujet

: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 « J'aime »

Je ne vois pas les icônes de liens sur ce site ni sur le mien. Ni dans FF ni dans Chrome.

Est-ce que quelque chose a changé ?

Vous devez survoler l’en-tête pour qu’ils apparaissent :

Je passe la souris et je ne vois rien.

Il semble y avoir quelque chose, mais aucune icône n’est affichée.

Une question de suivi…

Je suppose que si vous changez le texte de l’en-tête, le lien sera rompu.

MODIFICATION POUR AJOUTER : Non seulement l’ancre change si le titre change, mais si vous insérez un autre en-tête avant les en-têtes existants, le suffixe numérique de l’en-tête change. Cela semble fragile au point d’être inutile.

La seule solution de contournement sûre serait d’encadrer les en-têtes dans des balises a html et de lui donner un id, correct ?

Modifier à nouveau pour ajouter : J’ai essayé à la fois d’encadrer le texte de l’en-tête dans des balises a et de simplement mettre des balises vides avant le texte de l’en-tête. Aucun des deux id n’a fonctionné. J’ai également essayé des spans à la place avec le même échec.

Oui, je peux le trouver dans le DOM comme un before :

Je suis sous Windows 11.

La seule façon d’obtenir l’icône de lien est de copier le lien, puis d’ouvrir ce lien (avec le # et l’id) dans un nouvel onglet et d’y aller. Ensuite, l’icône de lien s’affiche en permanence (sans survol), mais toujours, aucune des autres icônes de lien n’apparaît au survol.

Est-ce que je suis autorisé à relancer ce sujet ? Je me demande si je ne comprends pas quelque chose d’évident concernant les liens à l’intérieur d’un message.

J’ai le même problème. L’icône est là, mais son opacité est réglée à zéro, donc elle n’est pas visible.


.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;

}

Je ne vois pas non plus les icônes dans le message original (OP), ce qui exclut tout style personnalisé sur mon instance.

J’utilise Chrome.

1 « J'aime »

En tant que problème distinct, je constate que le lien fourni par l’icône (invisible) ne fonctionne pas depuis le même sujet. Si l’icône me donne :

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

Je dois créer mon lien en utilisant uniquement #p-311503-heading-1, et non l’URL complète. L’URL complète fonctionne si je la colle dans le navigateur cependant.

1 « J'aime »