同じタイトルがあると、同じIDとアンカーが生成されます

特徴
,
1

こんにちは。

バグ（？）または技術的な制限を発見しました。見出しの名前が同じ場合、目次のリンクやスクロール時のハイライトが正しく機能しません。これは、一意のIDが生成されず、IDが見出しの名前のみになるためだと推測します。

私の場合は、目次が次のようになります。教育分野出身なので、学習ユニットの構造は常に同じです。たとえば、

  • H1 - Overview
  • H1 - 0:00 > 0:15 - Plenary and Introduction
    • H2 - Aim
    • H2 - Content
    • H2 - Method
    • H2 - Hints
    • H2 - Slides
  • H1 - 0:15 > 0:45 - Groupwork
    • H2 - Aim
    • H2 - Content
    • H2 - Method
    • H2 - Hints
    • H2 - Slides
  • H1 - 0:45 > 0:60 - Individual Work
    • H2 - Aim
    • H2 - Content
    • H2 - Method
    • H2 - Hints
    • H2 - Slides
  • H1 - 0:60 > 0:90 - Plenary Discussion
    • H2 - Aim
    • H2 - Content
    • H2 - Method
    • H2 - Hints
    • H2 - Slides

H2の見出しをより豊かなものにすることは可能だと思いますが、これはすべての学習ユニットで明確な構造を持つことと相反します。特に「hints」と「slides」の場合は、さらに多くのことを書くことができません。

この問題全体が上記の問題に関連しているのかもしれませんが、私は十分な専門家ではありません。

「いいね！」 6
2

HTML自体に固有のものであるため、バグではなく技術的な制限です。

説明されているように、テーマコンポーネントを使用したこの動作のビデオ：

優先度はかなり低いと思いますが、変更は歓迎される可能性があるため、誰かが試したい場合に備えて#pr-welcomeタグを追加します。 :slight_smile:

「いいね！」 1
3

うーん、いや、アンカーには一意の name 属性が付与されています

# 見出しレベルA
foo

## 見出しレベルB
bar

## 見出しレベルB
bar

# 見出しレベルA
foo

## 見出しレベルB
bar

## 見出しレベルB
bar

生成されるもの：（-1、-2、-3などの部分に注意）


<h1 dir="ltr">
  <a name="heading-level-a-1" class="anchor" href="#heading-level-a-1"></a>見出しレベルA
</h1>
<p dir="ltr">foo</p>
<h2 dir="ltr">
  <a name="heading-level-b-2" class="anchor" href="#heading-level-b-2"></a>見出しレベルB
</h2>
<p dir="ltr">bar</p>
<h2 dir="ltr">
  <a name="heading-level-b-3" class="anchor" href="#heading-level-b-3"></a>見出しレベルB
</h2>
<p dir="ltr">bar</p>
<h1 dir="ltr">
  <a name="heading-level-a-4" class="anchor" href="#heading-level-a-4"></a>見出しレベルA
</h1>
<p dir="ltr">foo</p>
<h2 dir="ltr">
  <a name="heading-level-b-5" class="anchor" href="#heading-level-b-5"></a>見出しレベルB
</h2>
<p dir="ltr">bar</p>
<h2 dir="ltr">
  <a name="heading-level-b-6" class="anchor" href="#heading-level-b-6"></a>見出しレベルB
</h2>
<p dir="ltr">bar</p>
4

属性の値はタイトルの内容に基づいているため、同じタイトルの場合は id および data-d-toc 属性も同じになります。

最後の「Aim」タイトル:

image
image1247×1359 96.1 KB

最初のAimにつながり、その id および data-d-toc 属性の値は、最後のToC要素と同じになります。

image
image1247×1359 117 KB

「いいね！」 1
5

その通りです。これはHTMLの固有の制限（実際には、単一のドキュメントで同じIDを持つことは仕様違反です）ではなく、テーマコンポーネントのバグです。

おそらく、これが

const suffix = slugify(h.textContent) || index;
const id = h.getAttribute("id") || slugify(`toc-${h.nodeName}-${suffix}`);

次のようなものにする必要があるでしょう。

const suffix = slugify(h.textContent) || '';
const id = h.getAttribute("id") || slugify(`toc-${h.nodeName}-${suffix}-${index}`);
「いいね！」 6