Avere titoli identici porta a ID e ancore identici

Funzionalità
,
1

Ciao,

Ho scoperto un bug (?) o una limitazione tecnica. I link del sommario, così come l’evidenziazione durante lo scorrimento verso il basso, non funzionano correttamente se le intestazioni hanno lo stesso nome. Suppongo che ciò sia dovuto al fatto che non viene generato un ID univoco, ma l’ID è solo il nome dell’intestazione.

Nel mio caso, il sommario è così - provenendo da un background educativo, la struttura è sempre la stessa per le nostre unità di apprendimento, ad esempio:

  • H1 - Panoramica
  • H1 - 0:00 > 0:15 - Plenaria e Introduzione
    • H2 - Obiettivo
    • H2 - Contenuto
    • H2 - Metodo
    • H2 - Suggerimenti
    • H2 - Slide
  • H1 - 0:15 > 0:45 - Lavoro di gruppo
    • H2 - Obiettivo
    • H2 - Contenuto
    • H2 - Metodo
    • H2 - Suggerimenti
    • H2 - Slide
  • H1 - 0:45 > 0:60 - Lavoro individuale
    • H2 - Obiettivo
    • H2 - Contenuto
    • H2 - Metodo
    • H2 - Suggerimenti
    • H2 - Slide
  • H1 - 0:60 > 0:90 - Discussione plenaria
    • H2 - Obiettivo
    • H2 - Contenuto
    • H2 - Metodo
    • H2 - Suggerimenti
    • H2 - Slide

Suppongo che potremmo rendere i titoli H2 più ricchi fornendo maggiori informazioni, ma ciò va contro l’avere una struttura chiara in tutte le unità di apprendimento - e specialmente nel caso di “suggerimenti” e “slide” non c’è molto altro che potremmo scrivere.

Forse tutto questo problema è correlato al problema sopra menzionato… ma non sono abbastanza esperto.

6 Mi Piace
2

Non è un bug in quanto è intrinseco all’HTML stesso, quindi è una limitazione tecnica.

Un video di questo comportamento utilizzando il componente tematico come spieghi:

Penso che sia di priorità piuttosto bassa, ma un cambiamento potrebbe essere gradito, quindi aggiungerò un tag pr-welcome se qualcuno vuole provarci. :slight_smile:

1 Mi Piace
3

Hmm no, gli ancoraggi ottengono attributi name univoci

# Heading level A
foo

## Heading level B
bar

## Heading level B
bar

# Heading level A
foo

## Heading level B
bar

## Heading level B
bar

genera: (nota il -1 -2 -3 ecc)


<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

I valori degli attributi si basano sul contenuto dei titoli, quindi titoli identici avranno attributi id e data-d-toc identici:

Ultimo titolo “Aim”:

image
image1247×1359 96.1 KB

Porta al primo Aim che ha attributi id e data-d-toc il cui valore è lo stesso dell’ultimo elemento ToC:

image
image1247×1359 117 KB

1 Mi Piace
5

Esatto, quindi questa non è una limitazione intrinseca dell’HTML (in realtà, avere id identici in un singolo documento viola la specifica) ma un bug nel componente del tema.

Immagino che questo

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

debba essere qualcosa del tipo

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