Innholdsfortegnelse: Format og regler

I elementbiblioteket gir en rask oversikt og innholdsfortegnelse leserne beskjed om hva en side dekker, hva den vil hjelpe dem med å bestemme, og hvordan de kan hoppe til den seksjonen de trenger.

Rask oversikt. Bruk dette sammenkoblede åpningselementet på lange eller strukturelt komplekse sider. Skriv en oversikt på 40–90 ord som angir omfang og forventet resultat, og oppgi deretter en innholdsliste laget av stabile H2-overskrifter og kun nyttige H3-overskrifter. På denne nettsiden forblir den levende innholdskontrollen nedenfor skjult til leseren har scrollet mer enn 300 piksler; den vises deretter som en fast skrivebordsnedtrekksmeny under nettstedets topptekst.

Hvorfor dette elementet betyr noe

Lesere begynner ikke alle lange sider på samme sted. En person trenger en definisjon, en annen vil ha implementeringstrinn, og en tredje sjekker en enkelt begrensning før de godkjenner arbeid. En kort oversikt svarer på «Er jeg på rett sted?» før leseren investerer oppmerksomhet. Innholdslisten svarer på «Hvor er delen jeg trenger?» uten å tvinge frem en lineær lesing.

De to delene er spesifisert sammen fordi de løser tilstøtende, men ulike orienteringsproblemer. Oversikten forklarer sidens løfte, grenser og nyttige resultat i setninger. Innholdslisten eksponerer ruten gjennom dette løftet som destinasjoner. En innholdsliste uten oversikt kan vise at en side har seksjoner kalt «Konfigurasjon» og «Tilgjengelighet», men kan ikke forklare om siden er en konseptuell introduksjon eller en produksjonsspesifikasjon. En oversikt uten navigasjon kan etablere omfang, men likevel tvinge en leser til å lete gjennom 3 000 ord.

Dette elementet forbedrer også maskinuttrekkbarhet, det vil si programvares evne til å isolere et avsnitt og bevare hensikten utenfor hele siden. Oversikten er et andre konsist, selvstendig sammendrag etter tittelen og beskrivelsen. Hugos kildeinnholdsfortegnelse er en lenket, maskinlesbar oversikt over sidens dekning og hierarki; den nåværende faste gjengiveren konverterer disse lenkene til alternativer som beholder URL-fragmentverdiene, #seksjon-delen av en URL. Søkesystemer, hentingsverktøy, nettleserutvidelser og AI-agenter kan bruke dokumentdisposisjonen for å identifisere sannsynlige svarområder før de behandler hvert avsnitt. Dette garanterer ikke en søkefunksjon eller AI-sitering; det reduserer tvetydighet om hvor emner begynner og hvordan de forholder seg.

Kombinasjonen må ikke skape repetisjon. En oversikt angir omfang og resultat. En direkte svar-blokk svarer på hovedspørsmålet. Hovedpunktene angir konklusjoner verdt å huske. Når alle tre sier det samme i forskjellige bokser, blir åpningen et hinder snarere enn en hjelp.

Når du skal bruke det

Innholdslisten fortjener sin plass når hopping er en sannsynlig leseradferd. Ordantall er en nyttig indikator, men struktur er den avgjørende faktoren.

Bruk oversikten alene når tittelen kan tolkes bredt, når siden bevisst utelater tilstøtende emner, eller når leseren trenger å vite forventet resultat før de går videre. En policieside på 900 ord kan trenge en oversikt på to setninger selv om den ikke trenger navigasjon.

Bruk innholdslisten alene bare når tittelen og åpningen allerede gjør omfanget utvetydig. Denne nesten-miss-situasjonen er vanlig på referansesider: åpningen kan inneholde en direkte definisjon som utfører orienteringsjobben, mens et langt sett med uavhengige felt fortsatt trenger navigasjon.

Ikke bruk noen av delene som dekorasjon. En innholdsfortegnelse med seks punkter på en artikkel på 700 ord legger til en ekstra beslutning før svaret. En oversikt som sier «Denne guiden utforsker alt du trenger å vite» definerer ikke omfang, resultat eller unntak. Ikke bruk paret for å skjule en svak overskriftsstruktur: hvis overskrifter overlapper, bruker inkonsistent grammatikk, eller deler én idé inn i mange bittesmå seksjoner, fiks dokumentet før du eksponerer disposisjonen.

Hvor du skal plassere det

Plassering er en del av elementets betydning. Oversikten må komme etter helten eller det åpne direkte svaret og før den første H2-overskriften. Det kan være et kort avsnitt eller en kompakt liste, men det må møtes før leseren forplikter seg til brødteksten. Innholdsfortegnelse-kallet hører umiddelbart etter oversikten, slik at den forfattede kilden holder orientering og navigasjon sammen, selv om denne nettsidens faste kontroll først blir synlig etter 300 pikslers scrolling.

Paret må ikke avbryte en definisjon, skille et krav fra beviset, eller vises for første gang midt i dokumentet. Ikke plasser det mellom en overskrift og den overskriftens innledende avsnitt: forholdet mellom overskrift og forklaring bør forbli direkte. Ikke plasser en annen oversiktslignende komponent rett ved siden av. Når en direkte svar-blokk eller hovedpunkter er påkrevd, tilordne distinkte oppgaver og bruk denne rekkefølgen: direkte svar, kort omfangsoversikt, innholdsfortegnelse-kall, første brødtekstseksjon. Utelat ett av sammendragene hvis ordlyden fortsatt overlapper.

Bruk shortcode én gang per side. Dens gjengitte ID-er (tocDropdown, tocSelect, selectTrigger og relaterte kontroller) er faste, så en ny instans skaper dupliserte dokument-ID-er og uforutsigbare skript.

Anatomi

Elementet har seks meningsfulle områder. De første fem er innhold eller atferd; fremdriftsindikatoren er status. Forklaringen beholdes på siden slik at den forblir lesbar når skjermbildet endres størrelse eller erstattes.

1. Oversiktsbrødtekst: 40–90 ord som angir omfang, tiltenkt resultat og eventuelle viktige grenser.
2. Festet tittel: sidetittelen som standard, eller den forfattede title-attributten når en kortere etikett er tydeligere.
3. Gjeldende-seksjon-etikett: starter som «Velg seksjon…» og endres etter hvert som nettleserens IntersectionObserver, et API som oppdager elementer som kommer inn i et definert visningsområde, markerer seksjoner som aktive.
4. Nedtrekksutløser: åpner den genererte listen over seksjonsdestinasjoner ved klikk i den gjeldende implementeringen.
5. Overskriftsalternativer: lenker utledet fra Hugos sideinnholdsfortegnelse, for tiden H2 og H3 på grunn av markup.toml.
6. Fremdriftslinje: viser andelen av det totale scrollerbare dokumentet som er gjennomgått; den identifiserer ikke seksjonsfullføring.

Designeksempler

Galleriet dekker atferdstilstander snarere enn dekorative temaer. Det underliggende innholdet forblir det samme slik at vurderere kan sammenligne tidspunkt, hierarki, beskjæring og interaksjon.

Ingen alternative visuelle varianter er forfattet via Markdown. title endrer etiketten og class legger til innpakningsklasser, men ingen av dem skaper et semantisk forskjellig element. Nye farge-, kort-, sidefelt- eller inline-listebehandlinger krever en komponentbeslutning snarere enn en vilkårlig klasse lagt til i innhold.

Parametere

Oversikten og innholdsfortegnelsen deler én redaksjonell kontrakt, men kun den faste innholdsfortegnelsen gjengis av den gjeldende shortcode. Konfigurasjonsverdier er inkludert fordi de endrer utdata, selv om forfattere ikke kan angi dem per kall.

Avhengigheten er lett å overse: en side uten H2-overskrifter gjengir lydløst ingen fast innholdsfortegnelse fordi Hugo ikke produserer noen brukbar disposisjon og partialen sender ut markering kun når den har overskrifter. Med den gjeldende konfigurasjonen er H2 og deres H3-etterkommere kvalifisert; H4 og dypere overskrifter er ekskludert. Partialen analyserer normalt Hugos .TableOfContents. Dens HTML-reserveplan skanner kun gjengitte H2-elementer, så forfattere må ikke stole på reserveplan-atferd for å bevare H3-navigasjon.

Syntaks og kodeeksempler

Den bærbare notasjonen beholder oversikten som elementbrødtekst og navigasjonsinnstillingene som attributter. Overskriftslenker forblir generert fra det omkringliggende dokumentet snarere enn duplisert av forfatteren.

:::quick-overview-and-toc{title="På denne siden" class=""}
Denne guiden forklarer når du skal bruke elementet, hvordan den faste Hugo-kontrollen oppfører seg,
og hvordan du bevarer tilgjengelige, stabile seksjonsdestinasjoner etter publisering.
:::

Den gjeldende Hugo-tilordningen skriver oversikten som vanlig Markdown og kaller den medfølgende shortcode én gang. Det er ingen JSON-brødtekst.

Denne guiden forklarer når du skal bruke elementet, hvordan den faste Hugo-kontrollen oppfører seg,
og hvordan du bevarer tilgjengelige, stabile seksjonsdestinasjoner etter publisering.

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

WordPress-blokktilordningen lagrer den samme brødteksten og attributtene. Et nettsted som ikke har registrert blokken kan bruke den tilsvarende shortcode-formen; den må ikke håndforfatte overskriftslenkene.

<!-- wp:amicited/quick-overview-and-toc {"title":"På denne siden","className":""} -->
<p>Denne guiden forklarer når du skal bruke elementet, hvordan den faste kontrollen oppfører seg,
og hvordan du bevarer tilgjengelige, stabile seksjonsdestinasjoner etter publisering.</p>
<!-- /wp:amicited/quick-overview-and-toc -->

[amicited_quick_overview_toc title="På denne siden" class=""]
Denne guiden forklarer elementets omfang, atferd og ankerpolicy.
[/amicited_quick_overview_toc]

På tvers av alle tre systemene er sannhetskilden dokumentets virkelige overskriftshierarki. En manuelt vedlikeholdt liste vil drive bort ettersom overskrifter endres og kan peke til ID-er som ikke lenger finnes.

Eksempler

Godt eksempel

Rask oversikt. Denne guiden viser innholdsteam hvordan de planlegger, skriver, gjennomgår og vedlikeholder en sammenligningsside. Den dekker bevisstandarder, sammenligningskriterier, produktpåstander, tilgjengelige tabeller og kontroller etter publisering. Den dekker ikke betalt plassering eller tilknyttede provisjonsvilkår.

På denne siden: Definer beslutningen · Velg sammenligningskriterier · Samle bevis · Utkast til siden · Gå gjennom påstander · Mål og vedlikehold

Dette fungerer fordi oversikten navngir målgruppen, resultatet, dekningen og grensen på 48 ord. De seks destinasjonene er distinkte oppgaver en leser kan komme tilbake til uavhengig. Etikettene deres bruker parallelle verbformer, slik at både mennesker og maskiner kan slutte seg til en prosess. Ingen av oppføringene gjentar sidetittelen eller eksponerer en triviell underseksjon.

Dårlig eksempel

Oversikt: Velkommen til vår komplette guide. I dagens skiftende verden er det mye å vite, så les videre for å lære alt.

Innhold: Introduksjon · Mer informasjon · Viktige ting · Andre ting · Konklusjon

Dette mislykkes av to grunner. Oversikten bruker 22 ord uten å definere omfang, leser, resultat eller unntak. Oppføringene etiketterer retoriske beholdere snarere enn emner, så de hjelper ikke en leser med å forutsi hvor et svar befinner seg. Å legge til flere overskrifter ville ikke fikse det; dokumentet trenger meningsfulle seksjonsgrenser først.

En annen nesten-miss er et svar på 600 ord med «Oversikt», «Bakgrunn», «Detaljer», «Tips» og «Konklusjon» i innholdsfortegnelsen. Selv om hvert anker fungerer, legger listen til mer grensesnitt enn navigasjonsverdi. Behold den direkte åpningen og fjern innholdsfortegnelsen.

Skjemamerking og tilgjengelighet

Her betyr skjemamerking standardisert maskinlesbar kode som identifiserer enheter og egenskaper. Dette elementet har ingen dedikert type eller egenskap i Schema.org-vokabularet, og Hugo-shortcode sender ikke ut JSON-LD, skriptbasert notasjon som vanligvis brukes til å publisere dette vokabularet. Ikke merk innholdsfortegnelsen som ItemList bare fordi den er en liste; det ville antyde en liste over emner snarere enn navigasjon. Oversikten kan informere en sides description bare når ordlyden er uavhengig egnet, men den kopieres ikke automatisk inn i strukturerte data.

HTML- og ARIA-atferd betyr mer her. ARIA, Accessible Rich Internet Applications-standarden, leverer roller, navn og tilstander når innfødt HTML ikke gjør det. Et landemerke er et navngitt sideområde som brukere av hjelpeteknologi kan hoppe til. Fokus er det gjeldende tastaturinteraksjonsmålet.

Dette er implementeringsfakta, ikke tillatelse til å ignorere tilgjengelighet. Innholdsvurderere kan verifisere overskriftsklarhet, unike ID-er og logisk rekkefølge i dag. Komponenteiere må løse utløser-, landemerk-, fokus-, URL- og redusert-bevegelse-atferd før de beskriver den faste varianten som tastaturtilgjengelig.

Skriveregler

Skriv oversikten etter at sidestrukturen er stabil. Dette forhindrer at et tidlig løfte driver bort fra den ferdige dekningen. Hold den mellom 40 og 90 ord. Foretrekk to eller tre setninger; bruk tre til fem punktlister bare når siden inneholder flere virkelig parallelle resultater. Angi hva siden hjelper leseren med å forstå, bestemme eller gjøre. Nevn et unntak når tittelen rimeligvis kan love mer enn siden leverer.

Bruk H2 for sidens viktigste spørsmål, stadier eller beslutningsområder. Inkluder H3 i navigasjon kun når det er en nyttig uavhengig destinasjon under en omfattende H2. På denne nettsiden inkluderer konfigurasjonen automatisk hver H2 og H3, så den praktiske policyen er strengere: ikke opprett en overskrift med mindre den fortjener å vises i navigasjon. Sikt mot 5–18 oppføringer totalt. Hvis den genererte listen overstiger 18, kombiner overlappende seksjoner, fjern unødvendige H3-overskrifter, eller del siden. Hopp aldri direkte fra H2 til H4 for å skjule en overskrift fra innholdsfortegnelsen; overskriftsnivåer uttrykker hierarki, ikke styling eller navigasjonspreferanse.

Bruk konsis, beskrivende overskriftstekst. En leser bør forstå hver destinasjon uten å lese det overordnede avsnittet. Foretrekk parallelle former innenfor en sekvens: «Velg kriterier», «Samle bevis» og «Gå gjennom påstander» er lettere å skanne enn en blanding av substantiver, spørsmål og vage etiketter. Ikke legg inn sitater, markedsføringspåstander, emojier, statusmerker eller hele setninger i en overskrift utelukkende for å påvirke innholdsfortegnelsen.

Oversikten må aldri inneholde en andre miniatyr-innholdsliste, ubegrunnede ytelsespåstander eller instruksjoner som ikke finnes noe sted i brødteksten. Innholdsfortegnelsen må aldri inneholde manuelt skrevne ankere, destinasjoner utenfor gjeldende side, eller lenker til tomme seksjoner.

Ankerstabilitetspolicy

En overskrifts-ID er fragmentdelen av en URL, for eksempel #anker-stabilitetspolicy. Publiserte fragment-URL-er er offentlige grensesnitt. Bokmerker, kampanjelenker, støttedokumentasjon, søkeresultater og AI-genererte svar kan peke direkte til dem. Endring av overskriftsteksten kan endre Hugos genererte ID og bryte alle innkommende ankere selv om side-URL-en forblir den samme.

Etter publisering, frys ID-ene til alle H2- og H3-overskrifter. Foretrekk å redigere avsnittet under en overskrift fremfor å gi overskriften nytt navn. Når en navneendring er nødvendig, behold den gamle ID-en ved hjelp av en eksplisitt anker-mekanisme som støttes av publiseringssystemet, og verifiser deretter både det gamle innkommende fragmentet og det nye innholdsfortegnelse-valget. Gjenbruk aldri en gammel ID for et annet emne, dupliser aldri en ID på siden, og oversett aldri en ID på en eksisterende lokalisert URL uten en migreringsplan. Registrer tilsiktede ankerendringer i release-notatet eller innholdsendringsloggen slik at eiere av kjente innkommende lenker kan oppdatere dem.

Innleggstyper som bruker det

postTypes-frontmatteren viser formatene som dette elementet er en del av produksjonsmønsteret for. Det er fortsatt betinget: et kort eksemplar av et normalt langt format kan falle under innholdsfortegnelse-terskelen.

Produkt-, kategori- og bruksområdesider er ikke inkludert som standard fordi deres primære reiser ofte håndteres av sidenavigasjon og handlingsknapper. Legg til dette elementet kun gjennom en dokumentert malbeslutning, ikke fordi siden tilfeldigvis er lang.

QA-sjekkliste

• Bekreft at siden oppfyller terskelen: minst 1 800 ord, syv H2-seksjoner, eller et dokumentert ikke-lineært navigasjonsbehov.
• Bekreft at oversikten er på 40–90 ord og angir omfang, tiltenkt resultat og eventuelle nødvendige unntak.
• Bekreft at oversikten ikke gjentar det direkte svaret eller hovedpunktene.
• Bekreft at shortcode vises én gang, umiddelbart etter oversikten og før den første H2-overskriften.
• Bekreft at hver H2 er en meningsfull hoveddestinasjon og hver H3 er nyttig nok til å vises i navigasjon.
• Bekreft at den genererte listen inneholder 5–18 oppføringer, bruker en logisk rekkefølge, og inneholder ingen H4-elementer under gjeldende konfigurasjon.
• Bekreft at config/_default/markup.toml fortsatt bruker startLevel = 2, endLevel = 3 og ordered = false, eller oppdater denne spesifikasjonen med komponentendringen.
• Bekreft at en side uten kvalifiserende H2 ikke hevder å inneholde en innholdsfortegnelse; shortcode vil lydløst gjengi ingenting.
• Bekreft at hvert generert fragment er unikt og når den tiltenkte overskriften.
• Test publiserte innkommende anker-URL-er før du endrer noen H2- eller H3-ordlyd; behold gamle ID-er når overskrifter må endres.
• På skrivebord, verifiser at den faste innpakningen er skjult ved 300 piksler eller mindre og vises etter at scrollerposisjonen overstiger 300 piksler.
• Verifiser at den faste innpakningen sitter under den faktiske toppteksten, fremdriftslinjen beveger seg, og den aktive etiketten følger seksjonsendringer.
• Verifiser at smale visningsområder ikke viser den gjeldende kontrollen, og noter dette som forventet nåværende atferd snarere enn et ødelagt skjermbilde.
• Noter de gjeldende tilgjengelighetsbegrensningene: intet navigasjonslandemerke, ingen tastaturfokuserbar synlig utløser, ingen fokusoverføring, ingen fragmentoppdatering og ingen gren for redusert bevegelse.
• Bekreft at ingen skjermbilde-sti gjengis før den tilsvarende ressursen finnes på disk.

FAQ

Spørsmålene nedenfor dekker de redaksjonelle beslutningene som oftest fører til at dette elementet legges til for tidlig, gjøres for dypt, eller blir ødelagt etter publisering.