Tener títulos idénticos conduce a ids y anclas idénticas

Característica
,
1

Hola,

Descubrí un error (?) o una limitación técnica. Los enlaces de la tabla de contenido (TOC), así como el resaltado al desplazarse hacia abajo, no funcionan correctamente si los encabezados tienen el mismo nombre. Supongo que se debe a que no se genera un ID único, sino que el ID es solo el nombre del encabezado.

En mi caso, la TOC se ve así: viniendo de un entorno educativo, la estructura es siempre la misma para nuestras unidades de aprendizaje, por ejemplo:

  • H1 - Resumen
  • H1 - 0:00 > 0:15 - Plenario e Introducción
    • H2 - Objetivo
    • H2 - Contenido
    • H2 - Método
    • H2 - Pistas
    • H2 - Diapositivas
  • H1 - 0:15 > 0:45 - Trabajo en grupo
    • H2 - Objetivo
    • H2 - Contenido
    • H2 - Método
    • H2 - Pistas
    • H2 - Diapositivas
  • H1 - 0:45 > 0:60 - Trabajo individual
    • H2 - Objetivo
    • H2 - Contenido
    • H2 - Método
    • H2 - Pistas
    • H2 - Diapositivas
  • H1 - 0:60 > 0:90 - Discusión plenaria
    • H2 - Objetivo
    • H2 - Contenido
    • H2 - Método
    • H2 - Pistas
    • H2 - Diapositivas

Supongo que podríamos hacer que los títulos H2 sean más ricos al dar más información, pero esto va en contra de tener una estructura clara en todas las unidades de aprendizaje, y especialmente en el caso de “pistas” y “diapositivas” no hay mucho más que podamos escribir.

Quizás todo este problema esté relacionado con el problema mencionado anteriormente… pero no soy lo suficientemente experto.

6 Me gusta
2

No es un error, ya que es inherente al propio HTML, por lo que es una limitación técnica.

Un video de este comportamiento utilizando el componente temático como explicas:

Creo que tiene una prioridad bastante baja, pero un cambio sería bienvenido, así que añadiré una etiqueta de pr-welcome si alguien quiere intentarlo. :slight_smile:

1 me gusta
3

Hmm no, las anclas obtienen atributos name únicos

# Nivel de encabezado A
foo

## Nivel de encabezado B
bar

## Nivel de encabezado B
bar

# Nivel de encabezado A
foo

## Nivel de encabezado B
bar

## Nivel de encabezado B
bar

genera: (nota el -1 -2 -3 etc)


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

Los valores de los atributos se basan en el contenido de los títulos, por lo que títulos idénticos tendrán atributos id y data-d-toc idénticos:

Último título “Aim”:

image
image1247×1359 96.1 KB

Conduce al primer Aim que tiene un id y data-d-toc cuyos valores son los mismos que el último elemento de la ToC:

image
image1247×1359 117 KB

1 me gusta
5

Exactamente, por lo que esta no es una limitación inherente de HTML (en realidad, tener idénticos id en un solo documento es una violación de la especificación) sino un error en el componente del tema.

Supongo que esto

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

necesita ser algo como

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