Enlace a un encabezado dentro de una publicación o tema

[Discourse]

このガイドでは、Discourse の投稿またはトピック内の見出しに直接リンクする方法を説明し、ユーザーが長い投稿を効率的に移動できるようにします。

必要なユーザーレベル: 全てのユーザー

長い投稿内に見出しを追加すると、コンテンツの可読性が向上し、ユーザーが特定のセクションに直接リンクできるようになります。これは、広範なディスカッションやドキュメントをナビゲートする際に特に役立ちます。

概要

このガイドでは、以下について説明します。

• Markdown を使用した見出しの作成
• 投稿内の特定の見出しへの直接リンク

Markdown を使用した見出しの作成

Markdown で見出しを作成するには、テキストの行の先頭に 1 つ以上の # 文字を付けます。# の数は見出しのレベルに対応します。以下に例を示します。

## レベル 2 の見出し
その後には短い段落が続きます。

### レベル 3 の見出し
別の短い段落が続きます。

レンダリングすると、次のようになります。

---

レベル 2 の見出し

その後には短い段落が続きます。

レベル 3 の見出し

別の短い段落が続きます。

---

見出しへの直接リンク

投稿内の見出しへの直接リンクを共有するには：

1. 見出しの上にカーソルを合わせると、隣にリンクアイコンが表示されます。
2. リンクアイコンをクリックすると、ブラウザのアドレスバーの URL がその見出しへの直接リンクに更新されます。
3. アドレスバーから更新された URL をコピーして共有します。

リンクアイコンは、見出しの上にカーソルを合わせたときに、デスクトップ (非タッチ) デバイスでのみ表示されます。タッチデバイスやモバイルデバイスでは、アンカーリンクはページ内に存在しますが、表示されません。

見出しのアンカー URL の理解

見出しのリンクアイコンをクリックすると、アドレスバーの URL が次の形式のフラグメントに更新されます。

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

たとえば、投稿 12345 内の「Getting Started」という見出しは、#p-12345-getting-started-1 のような URL フラグメントを生成します。末尾の番号は、投稿内での見出しの位置に基づいた連番カウンターです。

ベストプラクティス

• コンテンツを明確に要約するために、説明的な見出しを使用します。
• 適切な場合は、階層的な見出しを使用して投稿を構成します。
• 可読性を高めるために、見出しが一貫性があり論理的であることを確認します。
• 見出しのテキストを編集したり、見出しの順序を変更したりすると、アンカー URL が変更され、既存のリンクが壊れる可能性があることに注意してください。

よくある質問 (FAQ)

投稿の任意の部分にリンクできますか？
Markdown で適切にフォーマットされた見出しにはリンクできますが、引用ブロック内にあるものは除きます。これらのブロック内の見出しはアンカーリンクを生成しません。

見出しへのリンクは複数の投稿で機能しますか？
はい！これらのリンクは、他のトピックで使用されたり、どこかで共有されたりすると、投稿内のヘッダーに誘導します。

追加リソース

• 投稿でサポートされているフォーマット (Markdown、BBCode、HTML)
• インタラクティブ Markdown ガイド

[one1]

No estoy viendo los iconos de los enlaces en este sitio ni en el mío. Ni en FF ni en Chrome.

¿Ha cambiado algo?

[pfaffman (Jay Pfaffman)]

Necesitas pasar el ratón por encima del encabezado para que aparezcan:

[one1]

Paso el ratón por encima y no veo nada.

Parece que hay algo ahí, pero no se muestra ningún icono.

Una pregunta de seguimiento…

Asumo que si cambias el texto del encabezado, el enlace se romperá.

EDIT PARA AÑADIR: No solo cambia el ancla si cambia el título, sino que si insertas otro encabezado antes de los encabezados existentes, el sufijo numérico del encabezado cambia. Esto parece frágil hasta el punto de ser inútil.

La única solución segura sería envolver los encabezados en etiquetas a de html y darle un id, ¿correcto?

Editar de nuevo para añadir: Intenté envolver el texto del encabezado en etiquetas a y simplemente poner etiquetas vacías antes del texto del encabezado. Ninguno de los dos ID funcionó. También probé con spans en su lugar con el mismo fallo.

[one1]

Sí, puedo encontrarlo en el DOM como un before:

Estoy en Windows 11.

La única forma en que puedo hacer que aparezca el icono de enlace es copiando el enlace y luego abriendo ese enlace (con el # y el id) en una nueva pestaña y yendo allí. Entonces, el icono de enlace se muestra a tiempo completo (sin pasar el cursor por encima), pero aún así, ninguno de los otros iconos de enlace aparecerá al pasar el cursor por encima.

[one1]

¿Se me permite reflotar esto? Me pregunto si me estoy perdiendo algo obvio sobre cómo enlazar dentro de una publicación.

[markschmucker (Mark S)]

@one1

Paso el ratón por encima y no veo nada.

Parece que hay algo ahí, pero no se muestra ningún icono.

Tengo el mismo problema. El icono está ahí, pero su opacidad está configurada a cero, por lo que no es 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

Especificidad: (0,2,2)

{

opacity: 0;

transition: opacity .25s;

}

Tampoco puedo ver los iconos en el OP, así que eso descarta cualquier estilo personalizado en mi instancia.

Estoy usando Chrome.

[markschmucker (Mark S)]

Como un problema separado, encuentro que el enlace proporcionado por el ícono (invisible) no funciona desde el mismo tema. Si el ícono me da:

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

Tengo que crear mi enlace usando solo #p-311503-heading-1, no la URL completa. La URL completa sí funciona si la pego en el navegador.