Ter títulos idênticos leva a ids e âncoras idênticas

Funcionalidade
,
1

Olá,

Descobri um bug (?) ou limitação técnica. Os links do índice (TOC) e o destaque ao rolar para baixo não funcionam corretamente se os títulos tiverem o mesmo nome. Acho que é porque não é gerado um ID único, mas o ID é apenas o nome do título.

No meu caso, o índice fica assim - vindo de uma formação educacional, a estrutura é sempre a mesma para nossas unidades de aprendizado, por exemplo:

  • H1 - Visão Geral
  • H1 - 0:00 > 0:15 - Plenária e Introdução
    • H2 - Objetivo
    • H2 - Conteúdo
    • H2 - Método
    • H2 - Dicas
    • H2 - Slides
  • H1 - 0:15 > 0:45 - Trabalho em Grupo
    • H2 - Objetivo
    • H2 - Conteúdo
    • H2 - Método
    • H2 - Dicas
    • H2 - Slides
  • H1 - 0:45 > 0:60 - Trabalho Individual
    • H2 - Objetivo
    • H2 - Conteúdo
    • H2 - Método
    • H2 - Dicas
    • H2 - Slides
  • H1 - 0:60 > 0:90 - Discussão Plenária
    • H2 - Objetivo
    • H2 - Conteúdo
    • H2 - Método
    • H2 - Dicas
    • H2 - Slides

Acho que poderíamos tornar os Títulos H2 mais ricos, dando mais informações, mas isso vai contra ter uma estrutura clara em todas as unidades de aprendizado - e especialmente no caso de “dicas” e “slides” não há muito mais que poderíamos escrever.

Talvez todo esse problema esteja relacionado ao problema mencionado acima… mas não sou especialista o suficiente.

6 curtidas
2

Não é um bug, pois é inerente ao próprio HTML, portanto, é uma limitação técnica.

Um vídeo desse comportamento usando o componente temático como você explica:

Acho que é de prioridade bem baixa, mas uma mudança seria bem-vinda, então adicionarei uma tag de pr-welcome se alguém quiser tentar. :slight_smile:

1 curtida
3

Hmm, não, as âncoras recebem atributos name únicos

# Heading level A
foo

## Heading level B
bar

## Heading level B
bar

# Heading level A
foo

## Heading level B
bar

## Heading level B
bar

gera: (note o -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

Os valores dos atributos são baseados no conteúdo dos títulos, portanto, títulos idênticos terão atributos id e data-d-toc idênticos:

Último título “Aim”:

image
image1247×1359 96.1 KB

Leva ao primeiro Aim que tem atributos id e data-d-toc cujo valor é o mesmo do último elemento ToC:

image
image1247×1359 117 KB

1 curtida
5

Exatamente, então esta não é uma limitação inerente do HTML (na verdade, ter IDs idênticos em um único documento é uma violação da especificação) mas um bug no componente do tema.

Eu acho que isto

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

precisa ser algo como

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