Indholdsfortegnelse: Format og regler

I elementbiblioteket fortæller et hurtigt overblik og en indholdsfortegnelse læserne, hvad en side dækker, hvad den vil hjælpe dem med at beslutte, og hvordan de kan springe til det afsnit, de har brug for.

Hurtigt overblik. Brug dette parrede indledningselement på lange eller strukturelt komplekse sider. Skriv et overblik på 40–90 ord, der fastsætter omfang og forventet resultat, og angiv derefter en indholdsliste lavet af stabile H2-overskrifter og kun nyttige H3-overskrifter. På dette site forbliver den nedenstående live-indholdsfortegnelse skjult, indtil læseren har scrollet mere end 300 pixels; den vises derefter som en fast desktop-dropdown under site-headeren.

Hvorfor dette element er vigtigt

Læsere begynder ikke alle lange sider samme sted. Én person har brug for en definition, en anden ønsker implementeringstrin, og en tredje tjekker en enkelt betingelse, før arbejdet godkendes. Et kort overblik besvarer “Er jeg det rigtige sted?” før læseren investerer opmærksomhed. Indholdslisten besvarer “Hvor er den del, jeg har brug for?” uden at tvinge læseren til at læse lineært.

De to dele er specificeret sammen, fordi de løser tilstødende, men forskellige orienteringsproblemer. Overblikket forklarer sidens løfte, grænser og nyttige resultat i sætninger. Indholdslisten blotlægger ruten gennem dette løfte som destinationer. En indholdsliste uden overblik kan vise, at en side har afsnit kaldet “Konfiguration” og “Tilgængelighed”, men kan ikke forklare, om siden er en konceptuel introduktion eller en produktionsspecifikation. Et overblik uden navigation kan fastlægge omfang, men stadig få en læser til at lede gennem 3.000 ord.

Dette element forbedrer også maskinel udtrækbarhed, dvs. softwarens evne til at isolere en passage og bevare dens formål uden for den fulde side. Overblikket er et andet kortfattet, selvstændigt sammendrag efter titel og beskrivelse. Hugos kilde til indholdsfortegnelsen er en linket, maskinlæsbar oversigt over sidens dækning og hierarki; den nuværende klæbrige renderer konverterer disse links til muligheder, der bevarer deres URL-fragmentværdier, #sektion-delen af en URL. Søgesystemer, genfindingsværktøjer, browserudvidelser og AI-agenter kan bruge dokumentoversigten til at identificere sandsynlige svarområder, før de behandler hvert afsnit. Dette garanterer ikke en søgefunktion eller AI-citering; det reducerer tvetydighed om, hvor emner begynder, og hvordan de relaterer sig.

Parringen må ikke skabe gentagelse. Et overblik angiver omfang og resultat. En direkte svar-blok besvarer det primære spørgsmål. De vigtige pointer angiver konklusioner, der er værd at huske. Når alle tre siger det samme i forskellige bokse, bliver indledningen en forhindring frem for en hjælp.

Hvornår skal det bruges

Indholdslisten fortjener sin plads, når det at springe er en sandsynlig læseradfærd. Ordantal er en nyttig indikator, men struktur er den afgørende faktor.

Brug kun overblikket, når titlen kunne fortolkes bredt, når siden bevidst udelader tilstødende emner, eller når læseren har brug for at kende det forventede resultat, før de fortsætter. En 900-ords policieside kan have brug for et overblik på to sætninger, selvom den ikke har brug for navigation.

Brug kun indholdslisten alene, når titlen og indledningen allerede gør omfanget umiskendeligt. Denne nær-ved-fejl er almindelig på referencesider: indledningen kan indeholde en direkte definition, der udfører orienteringsopgaven, mens et langt sæt uafhængige felter stadig har brug for navigation.

Brug ikke nogen af delene som dekoration. En indholdsfortegnelse med seks punkter på en 700-ords artikel tilføjer en ekstra beslutning før svaret. Et overblik, der siger “Denne guide udforsker alt, du behøver at vide,” definerer ikke omfang, resultat eller udelukkelser. Brug ikke parret til at skjule en svag overskriftstruktur: hvis overskrifter overlapper, bruger inkonsistent grammatik eller deler én idé op i mange små afsnit, så ret dokumentet, før du eksponerer dets oversigt.

Hvor skal det placeres

Placering er en del af elementets betydning. Overblikket skal vises efter hero-sektionen eller det indledende direkte svar og før det første H2-afsnit. Det kan være et kort afsnit eller en kompakt liste, men det skal stødes på, før læseren forpligter sig til brødteksten. Indholdsfortegnelsen skal placeres umiddelbart efter overblikket, så den redigerede kilde holder orientering og navigation sammen, selvom dette sites klæbrige kontrol først bliver synlig efter 300 pixels scroll.

Parret må ikke afbryde en definition, adskille et udsagn fra dets evidens eller dukke op for første gang midtvejs i dokumentet. Placer det ikke mellem en overskrift og dens indledende afsnit: forholdet mellem overskrift og forklaring skal forblive direkte. Placer ikke en anden overblik-lignende komponent umiddelbart ved siden af. Når en direkte svar- eller vigtige-pointer-blok er påkrævet, tildel forskellige opgaver og brug denne rækkefølge: direkte svar, kort omfangsoverblik, indholdsfortegnelse, første brødtekstafsnit. Undlad én af opsummeringerne, hvis ordlyden stadig overlapper.

Brug shortcode én gang per side. Dens gengivne ID’er (tocDropdown, tocSelect, selectTrigger og relaterede kontroller) er faste, så en anden instans skaber duplikerede dokument-ID’er og uforudsigelige scripts.

Anatomi

Elementet har seks meningsfulde områder. De første fem er indhold eller adfærd; fremskridtsindikatoren er status. Forklaringen beholdes på siden, så den forbliver læsbar, når skærmbilledet ændres eller udskiftes.

1. Overblikstekst: 40–90 ord, der angiver omfang, tilsigtet resultat og eventuelle vigtige grænser.
2. Klæbrig wrappertitel: sidetitlen som standard, eller den redigerede title-attribut, når et kortere label er tydeligere.
3. Nuværende sektionslabel: starter som “Vælg sektion…” og ændres, når browserens IntersectionObserver, en API, der registrerer elementer, der kommer ind i en defineret viewport-region, markerer sektioner som aktive.
4. Dropdown-udløser: åbner den genererede liste over sektionsdestinationer ved klik i den nuværende implementering.
5. Overskriftsmuligheder: links afledt fra Hugos sideindholdsfortegnelse, i øjeblikket H2 og H3 på grund af markup.toml.
6. Fremskridtslinje: viser andelen af det samlede scrollbare dokument, der er gennemgået; den identificerer ikke sektionsfuldførelse.

Designeksempler

Galleriet dækker adfærdstilstande frem for dekorative temaer. Det underliggende indhold forbliver det samme, så anmeldere kan sammenligne timing, hierarki, beskæring og interaktion.

Ingen alternative visuelle varianter er redigeret via Markdown. title ændrer label og class tilføjer wrapper-klasser, men ingen af dem skaber et semantisk anderledes element. Nye farve-, kort-, sidebar- eller inline-liste-behandlinger kræver en komponentbeslutning frem for en vilkårlig klasse tilføjet i indhold.

Parametre

Overblikket og indholdsfortegnelsen deler én redaktionel kontrakt, men kun den klæbrige indholdsfortegnelse gengives af den nuværende shortcode. Konfigurationsværdier er inkluderet, fordi de ændrer output, selvom forfattere ikke kan sætte dem per aktivering.

Afhængigheden er let at overse: en side uden H2-overskrifter gengiver lydløst ingen klæbrig indholdsfortegnelse, fordi Hugo ikke producerer en brugbar oversigt, og partial’en udsender kun markup, når den har overskrifter. Med den nuværende konfiguration er H2 og deres H3-underoverskrifter berettigede; H4 og dybere overskrifter er ekskluderet. Partial’en parser normalt Hugos .TableOfContents. Dens HTML-fallback scanner kun gengivne H2-elementer, så forfattere må ikke stole på fallback-adfærd for at bevare H3-navigation.

Syntaks og kodeeksempler

Den bærbare notation holder overblikket som elementets brødtekst og navigationsindstillingerne som attributter. Overskriftslinks forbliver genereret fra det omgivende dokument frem for duplikeret af forfatteren.

:::quick-overview-and-toc{title="På denne side" class=""}
Denne guide forklarer, hvornår elementet skal bruges, hvordan den klæbrige Hugo-kontrol opfører sig,
og hvordan man bevarer tilgængelige, stabile sektionsdestinationer efter publicering.
:::

Den nuværende Hugo-mapping skriver overblikket som almindelig Markdown og aktiverer den medfølgende shortcode én gang. Der er ingen JSON-brødtekst.

Denne guide forklarer, hvornår elementet skal bruges, hvordan den klæbrige Hugo-kontrol opfører sig,
og hvordan man bevarer tilgængelige, stabile sektionsdestinationer efter publicering.

{{< table-of-contents title="På denne side" class="" >}}

WordPress-blok-mappingen gemmer den samme brødtekst og attributter. Et site, der ikke har registreret blokken, kan bruge den tilsvarende shortcode-form; det må ikke håndskrive overskriftslinkene.

<!-- wp:amicited/quick-overview-and-toc {"title":"På denne side","className":""} -->
<p>Denne guide forklarer, hvornår elementet skal bruges, hvordan den klæbrige kontrol opfører sig,
og hvordan man bevarer tilgængelige, stabile sektionsdestinationer efter publicering.</p>
<!-- /wp:amicited/quick-overview-and-toc -->

[amicited_quick_overview_toc title="På denne side" class=""]
Denne guide forklarer elementets omfang, adfærd og ankerpolitik.
[/amicited_quick_overview_toc]

På tværs af alle tre systemer er sandhedskilden dokumentets faktiske overskrift-hierarki. En manuelt vedligeholdt liste vil afvige, efterhånden som overskrifter ændres, og kan pege på ID’er, der ikke længere findes.

Eksempler

Godt eksempel

Hurtigt overblik. Denne guide viser indholdsteams, hvordan de planlægger, skriver, gennemgår og vedligeholder en sammenligningsside. Den dækker evidensstandarder, sammenligningskriterier, produktpåstande, tilgængelige tabeller og eftersyn efter publicering. Den dækker ikke betalt placering eller affilieringsprovision.

På denne side: Definér beslutningen · Vælg sammenligningskriterier · Indsam evidens · Udkast til siden · Gennemgå påstande · Mål og vedligehold

Dette virker, fordi overblikket nævner målgruppe, resultat, dækning og grænse på 48 ord. De seks destinationer er distinkte opgaver, en læser måske vender tilbage til uafhængigt. Deres labels bruger parallelle verbalfraser, så både mennesker og maskiner kan udlede en proces. Ingen af indgangene gentager sidetitlen eller eksponerer et trivielt underafsnit.

Dårligt eksempel

Overblik: Velkommen til vores komplette guide. I dagens foranderlige verden er der meget at vide, så læs videre for at lære alt.

Indhold: Introduktion · Mere information · Vigtige ting · Andre ting · Konklusion

Dette fejler af to grunde. Overblikket bruger 22 ord uden at definere omfang, læser, resultat eller udelukkelse. Indgangene mærker retoriske beholdere frem for emner, så de hjælper ikke en læser med at forudsige, hvor et svar findes. At tilføje flere overskrifter ville ikke løse det; dokumentet har brug for meningsfulde sektionsgrænser først.

Endnu en nær-ved-fejl er et 600-ords svar med “Overblik,” “Baggrund,” “Detaljer,” “Tips” og “Konklusion” i sin indholdsfortegnelse. Selv hvis alle ankre virker, tilføjer listen mere grænseflade end navigationsværdi. Bevar den direkte indledning og fjern indholdsfortegnelsen.

Skema-markup og tilgængelighed

Her betyder skema-markup standardiseret maskinlæsbar kode, der identificerer enheder og egenskaber. Dette element har ingen dedikeret type eller egenskab i Schema.org-ordforrådet, og Hugo-shortcode’en udsender ingen JSON-LD, den script-baserede notation, der almindeligvis bruges til at publicere dette ordforråd. Markér ikke indholdsfortegnelsen som ItemList blot fordi den er en liste; det ville antyde en liste over emner frem for navigation. Overblikket kan informere en sides description, kun når ordlyden er uafhængigt egnet, men den kopieres ikke automatisk ind i struktureret data.

HTML og ARIA-adfærd betyder mere her. ARIA, Accessible Rich Internet Applications-standarden, leverer roller, navne og tilstande, når native HTML ikke gør det. Et landmark er et navngivet sideregion, som brugere af hjælpeteknologi kan springe til. Fokus er det nuværende tastaturinteraktionsmål.

Disse er implementeringsfakta, ikke tilladelse til at ignorere tilgængelighed. Indholdsanmeldere kan verificere overskriftsklarhed, unikke ID’er og logisk rækkefølge i dag. Komponentejere skal løse udløser-, landmark-, fokus-, URL- og reduceret-bevægelse-adfærd, før den klæbrige variant beskrives som tastaturtilgængelig.

Skriveregler

Skriv overblikket, efter sidestrukturen er stabil. Dette forhindrer et tidligt løfte i at afvige fra den færdige dækning. Hold det mellem 40 og 90 ord. Foretræk to eller tre sætninger; brug tre til fem punkter kun, når siden indeholder flere virkelig parallelle resultater. Angiv, hvad siden hjælper læseren med at forstå, beslutte eller gøre. Nævn en udelukkelse, når titlen med rimelighed kunne love mere, end siden leverer.

Brug H2 til sidens store spørgsmål, faser eller beslutningsområder. Inkludér H3 i navigation kun, når det er en nyttig uafhængig destination under et væsentligt H2-afsnit. På dette site inkluderer konfigurationen automatisk alle H2 og H3, så den praktiske politik er strengere: opret ikke en overskrift, medmindre den fortjener at optræde i navigation. Sigt mod 5–18 indgange totalt. Hvis den genererede liste overstiger 18, så kombiner overlappende afsnit, fjern unødvendige H3-overskrifter, eller opdel siden. Hop aldrig direkte fra H2 til H4 for at skjule en overskrift fra indholdsfortegnelsen; overskriftsniveauer udtrykker hierarki, ikke styling eller navigationspræference.

Brug kortfattet, beskrivende overskriftstekst. En læser bør forstå hver destination uden at læse dens overordnede afsnit. Foretræk parallelle former inden for en sekvens: “Vælg kriterier,” “Indsam evidens” og “Gennemgå påstande” er lettere at skanne end en blanding af navneord, spørgsmål og vage labels. Sæt ikke citater, salgsfremmende påstande, emojier, statusmærker eller hele sætninger i en overskrift udelukkende for at påvirke indholdsfortegnelsen.

Overblikket må aldrig indeholde en anden miniature-indholdsliste, ubegrundede præstationspåstande eller instruktioner, der ikke findes i brødteksten. Indholdsfortegnelsen må aldrig indeholde manuelt indtastede ankre, destinationer uden for den aktuelle side eller links til tomme afsnit.

Ankerstabilitetspolitik

Et overskrifts-ID er fragmentdelen af en URL, såsom #ankerstabilitetspolitik. Publicerede fragment-URL’er er offentlige grænseflader. Bogmærker, kampagnelinks, supportdokumentation, søgeresultater og AI-genererede svar kan pege direkte på dem. Ændring af overskriftsteksten kan ændre Hugos genererede ID og bryde hvert indgående anker, selvom side-URL’en forbliver den samme.

Efter publicering skal ID’erne for alle H2- og H3-overskrifter fryses. Foretræk at redigere afsnittet under en overskrift frem for at omdøbe overskriften. Når en omdøbning er nødvendig, bevar det gamle ID via en eksplicit anker-mekanisme, der understøttes af publiceringssystemet, og verificér derefter både det gamle indgående fragment og den nye indholdsfortegnelses markering. Genbrug aldrig et gammelt ID til et andet emne, duplikér aldrig et ID på siden, og oversæt aldrig et ID på en eksisterende lokaliseret URL uden en migrationsplan. Notér bevidste ankerændringer i udgivelsesnoten eller indholdsændringsloggen, så ejere af kendte indgående links kan opdatere dem.

Posttyper, der bruger det

postTypes-frontmatteren lister de formater, som dette element er en del af produktionsmønstret for. Det er stadig betinget: en kort udgave af et normalt langt format kan falde under indholdsfortegnelses-grænsen.

Produkt-, kategori- og use-case-sider er ikke inkluderet som standard, fordi deres primære rejser ofte håndteres af sidenavigation og call-to-actions. Tilføj dette element kun gennem en dokumenteret skabelonbeslutning, ikke fordi siden tilfældigvis er lang.

QA-tjekliste

• Bekræft at siden opfylder tærsklen: mindst 1.800 ord, syv H2-afsnit eller et dokumenteret ikke-lineært navigationsbehov.
• Bekræft at overblikket er 40–90 ord og angiver omfang, tilsigtet resultat og eventuel nødvendig udelukkelse.
• Bekræft at overblikket ikke gentager det direkte svar eller de vigtige pointer.
• Bekræft at shortcode optræder én gang, umiddelbart efter overblikket og før det første H2-afsnit.
• Bekræft at hver H2 er en meningsfuld hoveddestination og hver H3 er nyttig nok til at optræde i navigation.
• Bekræft at den genererede liste indeholder 5–18 indgange, bruger en logisk rækkefølge og ikke indeholder H4-punkter under den nuværende konfiguration.
• Bekræft at config/_default/markup.toml stadig bruger startLevel = 2, endLevel = 3 og ordered = false, eller opdater denne specifikation med komponentændringen.
• Bekræft at en side uden berettigede H2-overskrifter ikke hævder at indeholde en indholdsfortegnelse; shortcode vil lydløst gengive intet.
• Bekræft at hvert genereret fragment er unikt og når den tilsigtede overskrift.
• Test publicerede indgående anker-URL’er før ændring af nogen H2- eller H3-ordlyd; bevar gamle ID’er når overskrifter må ændres.
• På desktop, verificér at den klæbrige wrapper er skjult ved 300 pixels eller mindre og vises efter scroll-positionen overstiger 300 pixels.
• Verificér at den faste wrapper sidder under den faktiske header, at fremskridtslinjen bevæger sig, og at det aktive label følger sektionsskift.
• Verificér at smalle viewports ikke viser den nuværende kontrol, og notér dette som forventet nuværende adfærd frem for et defekt skærmbillede.
• Notér de nuværende tilgængelighedsbegrænsninger: intet navigations-landmark, ingen tastaturfokuserbar synlig udløser, ingen fokusoverførsel, ingen fragmentopdatering og ingen reduceret-bevægelse-gren.
• Bekræft at ingen skærmbilledesti gengives, før det tilsvarende aktiv findes på disken.

FAQ

Spørgsmålene nedenfor dækker de redaktionelle beslutninger, der oftest får dette element til at blive tilføjet for tidligt, gjort for dybt eller brudt efter publicering.