Identische Titel führen zu identischen IDs und Ankerpunkten

Merkmal
,
1

Hallo,

Ich habe einen Bug (?) oder eine technische Einschränkung entdeckt. Die Links im Inhaltsverzeichnis sowie die Hervorhebung beim Scrollen nach unten funktionieren nicht richtig, wenn die Überschriften denselben Namen haben. Ich vermute, das liegt daran, dass keine eindeutige ID generiert wird, sondern die ID nur der Name der Überschrift ist.

In meinem Fall sieht das Inhaltsverzeichnis so aus – aus pädagogischer Sicht ist die Struktur für unsere Lerneinheiten immer gleich, z. B.

  • H1 - Übersicht
  • H1 - 0:00 > 0:15 - Plenum und Einführung
    • H2 - Ziel
    • H2 - Inhalt
    • H2 - Methode
    • H2 - Hinweise
    • H2 - Folien
  • H1 - 0:15 > 0:45 - Gruppenarbeit
    • H2 - Ziel
    • H2 - Inhalt
    • H2 - Methode
    • H2 - Hinweise
    • H2 - Folien
  • H1 - 0:45 > 0:60 - Einzelarbeit
    • H2 - Ziel
    • H2 - Inhalt
    • H2 - Methode
    • H2 - Hinweise
    • H2 - Folien
  • H1 - 0:60 > 0:90 - Plenumsdiskussion
    • H2 - Ziel
    • H2 - Inhalt
    • H2 - Methode
    • H2 - Hinweise
    • H2 - Folien

Ich vermute, wir könnten die H2-Titel aussagekräftiger gestalten, indem wir mehr Informationen geben, aber das widerspricht einer klaren Struktur über alle Lerneinheiten hinweg – und gerade bei „Hinweisen“ und „Folien“ gibt es nicht viel mehr, was wir schreiben könnten.

Vielleicht hängt dieses ganze Problem mit dem oben erwähnten Problem zusammen… aber ich bin nicht sachkundig genug.

6 „Gefällt mir“
2

Es ist kein Fehler, da er dem HTML selbst innewohnt, also ist es eine technische Einschränkung.

Ein Video dieses Verhaltens, das die Theme-Komponente wie von Ihnen erklärt verwendet:

Ich denke, es hat eine ziemlich niedrige Priorität, aber eine Änderung wäre willkommen, daher werde ich ein #pr-welcome-Tag hinzufügen, falls jemand es versuchen möchte. :slight_smile:

1 „Gefällt mir“
3

Hm, nein, die Anker erhalten eindeutige name-Attribute

# Überschriftenebene A
foo

## Überschriftenebene B
bar

## Überschriftenebene B
bar

# Überschriftenebene A
foo

## Überschriftenebene B
bar

## Überschriftenebene B
bar

generiert: (beachten Sie die -1 -2 -3 usw.)


<h1 dir="ltr">
  <a name="heading-level-a-1" class="anchor" href="#heading-level-a-1"></a>Überschriftenebene A
</h1>
<p dir="ltr">foo</p>
<h2 dir="ltr">
  <a name="heading-level-b-2" class="anchor" href="#heading-level-b-2"></a>Überschriftenebene B
</h2>
<p dir="ltr">bar</p>
<h2 dir="ltr">
  <a name="heading-level-b-3" class="anchor" href="#heading-level-b-3"></a>Überschriftenebene B
</h2>
<p dir="ltr">bar</p>
<h1 dir="ltr">
  <a name="heading-level-a-4" class="anchor" href="#heading-level-a-4"></a>Überschriftenebene A
</h1>
<p dir="ltr">foo</p>
<h2 dir="ltr">
  <a name="heading-level-b-5" class="anchor" href="#heading-level-b-5"></a>Überschriftenebene B
</h2>
<p dir="ltr">bar</p>
<h2 dir="ltr">
  <a name="heading-level-b-6" class="anchor" href="#heading-level-b-6"></a>Überschriftenebene B
</h2>
<p dir="ltr">bar</p>
4

Die Werte der Attribute basieren auf den Inhalten der Titel, sodass identische Titel identische id- und data-d-toc-Attribute haben:

Letzter „Aim“-Titel:

image
image1247×1359 96.1 KB

Führt zum ersten Aim, das ein id- und ein data-d-toc-Attribut hat, dessen Wert derselbe ist wie das letzte ToC-Element:

image
image1247×1359 117 KB

1 „Gefällt mir“
5

Genau, das ist also keine inhärente Einschränkung von HTML (tatsächlich ist es ein Verstoß gegen die Spezifikation, identische IDs in einem einzigen Dokument zu haben), sondern ein Fehler in der Theme-Komponente.

Ich vermute, dieser

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

muss etwas wie folgt aussehen:

const suffix = slugify(h.textContent) || '';
const id = h.getAttribute("id") || slugify(`toc-${h.nodeName}-${suffix}-${index}`);
6 „Gefällt mir“