Artikelsjabloon — elk element op één pagina
Een sjabloon, geen artikel. Alle opmaak die een post kan gebruiken staat hier één keer: koppen, lijsten, citaat, tabel, code, afbeelding, figuur met bijschrift en voetnoten.
Dit is het Nederlandse sjabloon. Kopieer de map src/content/blog/artikelsjabloon/, geef de
kopie een eigen slug, en vervang alles hieronder. De Engelse tegenhanger is
article-template/; de twee zijn aan elkaar gekoppeld met dezelfde translationKey, en
daarom staat onderaan deze pagina een link naar de andere taal.
Frontmatter
Elk veld dat het schema kent staat hieronder. Alleen title, description, pubDate en
lang zijn verplicht; de rest heeft een standaardwaarde of mag weg. Een ontbrekende lang
laat de build falen — dat is expres.
title: "De titel van het artikel"
description: "Eén of twee zinnen. Dit is de deck op de kaart, de meta-description en de
samenvatting in de RSS-feed."
pubDate: 2026-08-11 # verplicht, bepaalt de volgorde overal
updatedDate: 2026-08-13 # alleen bij een inhoudelijke herziening
heroImage: ./hero.png # naast het artikel, in dezelfde map
lang: nl # 'nl' of 'en', geen standaardwaarde
tags: ["warmtepomp"] # kleine letters, koppeltekens, geen taalprefix
translationKey: article-template # dezelfde sleutel als de vertaling
draft: false # true houdt de post uit elke index, feed en build
De leestijd staat niet in de frontmatter en krijgt daar ook nooit een veld: die wordt bij het bouwen uit de tekst zelf geteld en verschijnt in de regel onder de titel.
Kop op niveau twee
Lopende tekst met een link, wat vet en cursief, een stukje inline code en
een getal van 168.014 om de cijferopmaak te zien. Een lange samenstelling als
warmtepompsubsidieregeling moet op een telefoon van 360 pixels afbreken in plaats van de regel
op te rekken.1
Kop op niveau drie
Een tweede alinea, zodat de ruimte tussen kop en tekst zichtbaar wordt.
Kop op niveau vier
De diepste kop die de opmaak kent. Kom je hieronder uit, dan is het artikel waarschijnlijk twee artikelen.
Lijsten
- Eerste item in een ongeordende lijst
- Tweede item, lang genoeg om over twee regels te lopen en zo de inspringing te tonen
- Genest item, dat dichter op zijn ouder staat dan op zijn buur
- Derde item
- Eerste genummerde stap
- Tweede genummerde stap
- Derde genummerde stap
Citaat
Een citaat van twee regels, zonder aanhalingstekens, waar de streep en de kleurverschuiving samen “apart gezet” betekenen.
Tabel
Een tabel is breder dan een telefoon en schuift daarom binnen zijn eigen kader.
| Jaar | Verkocht | Groei |
|---|---|---|
| 2024 | 158.538 | 12% |
| 2025 | 136.000 | −14% |
| 2026 | 168.014 | 6% |
Code
const groei = (nu, toen) => (nu - toen) / toen;
console.log(groei(168014, 158538));
Afbeeldingen
Twee vormen, en het verschil is niet cosmetisch. Een gewone afbeelding schrijf je met de
markdown-syntaxis — die gaat door de beeldpijplijn van Astro en levert webp, srcset, luie
laadtijd en vaste afmetingen op:
Wil je een bijschrift, dan is het <Figure>, want markdown kan geen <figcaption> maken. De
twee import-regels staan bovenaan dit bestand. Het bijschrift is een slot en mag dus een
bronlink bevatten.
FIG 1 · Verkoop van residentiële warmtepompen in Nederland, 2019–2026. BRON: CBS, 2026.
Schrijf nooit met de hand een <img>-tag in MDX: die gaat langs de pijplijn heen en levert het
originele bestand af, zonder afmetingen en zonder luie laadtijd.
Grafieken
Een grafiek is een Astro-component: bovenaan dit bestand geïmporteerd, net als <Figure>, en
geplaatst waar hij in het betoog thuishoort. De cijfers staan in data/ naast deze post, het
bijschrift schrijf je hier, en de bronregel eronder komt uit het databestand zelf — zo kan die
niet losraken van de cijfers die hij beschrijft.
- Zon
- Wind
- Aardgas
FIG 2 · Elektriciteitsproductie naar bron, 2021–2026.
BRON: voorbeeldcijfers, geen echte data — zie data/elektriciteitsmix.json.
Bekijk de cijfers
| Jaar | Zon (TWh) | Wind (TWh) | Aardgas (TWh) |
|---|---|---|---|
| 2021 | 8 | 14 | 55 |
| 2022 | 12 | 19 | 51 |
| 2023 | 17 | 23 | 44 |
| 2024 | 21 | 28 | 38 |
| 2025 | 26 | 36 | 31 |
| 2026 | 30 | 45 | 25 |
Tik of klik een jaar aan om de waarden vast te zetten; tik ergens anders, of druk op Escape, om ze weer los te laten. Dezelfde cijfers staan onder Bekijk de cijfers, dat elke grafiek meekrijgt — niets op deze site is alleen te bereiken door érgens op te wijzen. De tekening is af voordat er een script draait, dus met JavaScript uit staat alles er gewoon, en hij wordt één keer getekend voor beide thema’s.
Na een scheidingslijn nog een laatste alinea, en daaronder de voetnoten.