Avoir des titres identiques mène à des identifiants et ancres identiques

Fonctionnalité
,
1

Salut,

J’ai découvert un bug (?) ou une limitation technique. Les liens de la table des matières ainsi que la mise en surbrillance lors du défilement vers le bas ne fonctionnent pas correctement si les titres ont le même nom. Je suppose que c’est parce qu’un ID unique n’est pas généré, mais que l’ID n’est que le nom du titre.

Dans mon cas, la table des matières ressemble à ceci - venant d’un milieu éducatif, la structure est toujours la même pour nos unités d’apprentissage, par exemple :

  • H1 - Vue d’ensemble
  • H1 - 0:00 > 0:15 - Plénière et Introduction
    • H2 - Objectif
    • H2 - Contenu
    • H2 - Méthode
    • H2 - Indices
    • H2 - Diapositives
  • H1 - 0:15 > 0:45 - Travail de groupe
    • H2 - Objectif
    • H2 - Contenu
    • H2 - Méthode
    • H2 - Indices
    • H2 - Diapositives
  • H1 - 0:45 > 0:60 - Travail individuel
    • H2 - Objectif
    • H2 - Contenu
    • H2 - Méthode
    • H2 - Indices
    • H2 - Diapositives
  • H1 - 0:60 > 0:90 - Discussion plénière
    • H2 - Objectif
    • H2 - Contenu
    • H2 - Méthode
    • H2 - Indices
    • H2 - Diapositives

Je suppose que nous pourrions rendre les titres H2 plus riches en donnant plus d’informations, mais cela va à l’encontre d’une structure claire dans toutes les unités d’apprentissage - et surtout dans le cas des “indices” et des “diapositives”, il n’y a pas beaucoup plus que nous pourrions écrire.

Peut-être que tout ce problème est lié au problème mentionné ci-dessus… mais je ne suis pas assez expert.

6 « J'aime »
2

Ce n’est pas un bug car c’est inhérent au HTML lui-même, c’est donc une limitation technique.

Une vidéo de ce comportement utilisant le composant thématique comme vous l’expliquez :

Je pense que c’est une priorité assez basse, mais un changement pourrait être le bienvenu, donc j’y ajouterai une balise pr-welcome si quelqu’un veut tenter sa chance. :slight_smile:

1 « J'aime »
3

Hmm non, les ancres obtiennent des attributs name uniques

# Heading level A
foo

## Heading level B
bar

## Heading level B
bar

# Heading level A
foo

## Heading level B
bar

## Heading level B
bar

génère : (notez les -1 -2 -3 etc)


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

Les valeurs des attributs sont basées sur le contenu des titres, donc des titres identiques auront des attributs id et data-d-toc identiques :

Dernier titre « Aim » :

image
image1247×1359 96.1 KB

Mène au premier Aim qui a des attributs id et data-d-toc dont la valeur est la même que le dernier élément ToC :

image
image1247×1359 117 KB

1 « J'aime »
5

Exactement, ce n’est donc pas une limitation inhérente au HTML (en fait, avoir des id identiques dans un même document est une violation de la spécification) mais un bug dans le composant du thème.

Je suppose que ceci

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

doit être quelque chose comme

const suffix = slugify(h.textContent) || '';
const id = h.getAttribute("id") || slugify(`toc-${h.nodeName}-${suffix}-${index}`);
6 « J'aime »