Zoals je in de mappenstructuur bij de installatie al kon zien, zet je je componenten in de components folder in de src.
Binnen deze folder, kan je je componenten ook weer ordenen op bijvoorbeeld atoms, molecules en organisms zoals dit:
In die component folders maak je een component aan door het een naam te geven met een hoofdletter, en er .astro achter te zetten:
Astro maakt gebruik van frontmatter:
"Frontmatter is a section at the top of Astro components and Markdown/MDX files, enclosed by two code fences ( --- ). Frontmatter in Astro components is the component script."
Om de componenten te gebruiken kun je deze in de frontmatter van je pagina (in pages) importeren:
---
import HeroHeaders from '../components/molecules/HeroHeaders.astro';
import IntroHeaders from '../components/atoms/IntroHeaders.astro';
import OverViewPages from '../components/molecules/OverViewPages.astro';
---
Je hebt hiervoor geen extra index.js nodig zoals in Sveltekit.
Om ze vervolgens in je pagina's te gebruiken doe je hetzelfde als in Sveltekit:
Componenten implementeren met Astro
Zoals je in de mappenstructuur bij de installatie al kon zien, zet je je componenten in de
componentsfolder in desrc. Binnen deze folder, kan je je componenten ook weer ordenen op bijvoorbeeldatoms,moleculesenorganismszoals dit:In die component folders maak je een component aan door het een naam te geven met een hoofdletter, en er
.astroachter te zetten:Astro maakt gebruik van
frontmatter:"Frontmatter is a section at the top of Astro components and Markdown/MDX files, enclosed by two code fences ( --- ). Frontmatter in Astro components is the component script."
Om de componenten te gebruiken kun je deze in de
frontmattervan je pagina (inpages) importeren:Je hebt hiervoor geen extra
index.jsnodig zoals in Sveltekit.Om ze vervolgens in je pagina's te gebruiken doe je hetzelfde als in Sveltekit:
Bronnen
Commits