Linking to a heading within a post or topic

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

:information_source: The link icon only appears on desktop (non-touch) devices when hovering over a heading. On touch and mobile devices, the anchor links exist in the page but are not visible.

Understanding heading anchor URLs

When you click a heading’s link icon, the URL in your address bar updates with a fragment in the format:

#p-{postId}-{slugified-heading}-{number}

For example, a heading “Getting Started” in post 12345 would produce a URL fragment like #p-12345-getting-started-1. The number at the end is a sequential counter based on the heading’s position in the post.

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.
  • Be aware that editing heading text or reordering headings will change their anchor URLs, which may break existing links.

FAQs

Can I link to any part of a post?
You can link to any heading properly formatted in Markdown, as long as it is not inside a blockquote or quote block. Headings inside those blocks do not generate anchor links.

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개의 좋아요

이 사이트나 내 사이트에서 링크 아이콘이 보이지 않습니다. Firefox나 Chrome에서 모두 마찬가지입니다.

무언가 변경된 건가요?

표제 위에 마우스를 올려야 표시됩니다:

마우스를 올려 보았지만 아무것도 보이지 않습니다.

무언가가 있는 것 같지만, 아이콘은 표시되지 않습니다.

추가 질문이 있습니다…

제목의 텍스트를 변경하면 링크가 깨질 것 같습니다.

추가 편집: 제목이 변경되면 앵커도 변경될 뿐만 아니라, 기존 제목 앞에 새로운 제목을 삽입하면 제목의 숫자 접두사가 변경됩니다. 이는 사실상 쓸모 없을 정도로 취약해 보입니다.

유일한 안전한 우회 방법은 제목을 html a 태그로 감싸고 id를 부여하는 것일까요?

다시 추가 편집: 제목 텍스트를 a 태그로 감싸는 방법과 제목 텍스트 앞에 빈 태그를 넣는 방법 모두 시도해 보았지만, id가 작동하지 않았습니다. span 태그를 사용해도 동일한 실패를 겪었습니다.

네, DOM에서 before로 찾을 수 있습니다:

저는 Windows 11을 사용하고 있습니다.

링크 아이콘이 표시되게 하는 유일한 방법은 링크를 복사한 뒤, 해당 링크(#와 id 포함)를 새 탭에서 열어 해당 페이지로 이동하는 것입니다. 이렇게 하면 링크 아이콘이 항상(호버 없이) 표시되지만, 여전히 다른 링크 아이콘은 호버 시에도 표시되지 않습니다.

이 게시물을 올려도 될까요? 게시물 내에서 링크를 사용하는 것에 대해 뭘 놓치고 있는 건지 모르겠네요.

저도 같은 문제를 겪고 있습니다. 아이콘은 존재하지만 투명도가 0으로 설정되어 있어 보이지 않습니다.


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

}

OP에서도 아이콘이 보이지 않으므로, 제 인스턴스에서 커스텀 스타일링을 적용한 것은 아닌 것 같습니다.

Chrome을 사용 중입니다.

1개의 좋아요

별개의 문제로, (보이지 않는) 아이콘에서 제공하는 링크가 같은 토픽에서는 작동하지 않는다고 생각합니다. 아이콘이 다음과 같은 주소를 제공하면:

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

전체 URL이 아닌 #p-311503-heading-1만 사용하여 링크를 생성해야 합니다. 다만, 브라우저에 전체 URL을 붙여넣으면 정상적으로 작동합니다.

현재 3.6.0.beta3-latest 버전으로 업데이트되어 있습니다.

1개의 좋아요