投稿やトピック内の見出しへのリンク

: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

このサイトでも自分のサイトでもリンクアイコンが表示されません。FFでもChromeでも。

何か変更があったのでしょうか?

見出しにマウスを合わせると表示されます。

マウスオーバーしても何も表示されません。

何かがそこにあるようですが、アイコンは表示されません。

追加の質問です…

見出しのテキストを変更すると、リンクが壊れると想定しています。

追記:タイトルを変更するとアンカーが変わるだけでなく、既存の見出しの前に別の見出しを挿入すると、見出しの数値サフィックスも変わります。これは脆弱で役に立たないように思えます。

唯一の安全な回避策は、見出しをHTMLのaタグで囲み、idを与えることでしょうか?

再度追記:見出しのテキストをaタグで囲む方法と、空のタグを見出しのテキストの前に置く方法の両方を試しました。どちらのidも機能しませんでした。代わりにspanも試しましたが、同じように失敗しました。

はい、before として DOM で見つけることができます。

Windows 11 を使用しています。

リンクアイコンが表示される唯一の方法は、リンクをコピーしてから、そのリンク(# と ID を含む)を新しいタブで開き、そこに移動することです。そうすると、リンクアイコンが常に表示されます(ホバーなしで)が、他のリンクアイコンはホバー時に表示されません。

これをバンプしてもよろしいでしょうか?投稿内のリンクについて何か明らかなことを見落としているのではないかと思います。