Gwelwch Lily mewn apiau go iawn
Mae saith prosiect enghreifftiol gweithredol yn dangos sut i gymryd y cydrannau headless, ychwanegu arddulliau, a chludo gwefan go iawn. Dewiswch y fframwaith rydych chi'n ei ddefnyddio.
Apiau arddangos gyda CSS llawn a llwybro
HTML JavaScript
Tudalennau HTML plaen, JavaScript fanila, dim offer adeiladu. Mae'n gollwng i unrhyw westeiwr statig — perffaith ar gyfer gwefannau bach a gwella graddol.
Svelte + SvelteKit
Ap SvelteKit 3 yn defnyddio runes Svelte 5. Llwybrau cydrannau, llwybro yn seiliedig ar ffeiliau, a storybook wedi'i arddullio o bob cydran.
React + Next.js
Ap Next.js 16 sy'n dangos pob cydran yn ei chyd-destun, gyda TypeScript drwyddo draw a thudalennau arddangos ar gyfer patrymau cyfansawdd.
Vue + Nuxt.js
Ap Nuxt 4. <script setup> a'r API Cyfansoddi ar draws
pob llwybr arddangos.
Angular + Analog
Ap Angular 22 + Analog.js. Llwybro yn seiliedig ar ffeiliau, signalau, canfod newid heb zone, a rhagrendro SSG llawn.
Blazor Web
Ap Blazor Web gyda chydrannau Razor. Yn gyfeillgar i'r gweinydd a WebAssembly, gyda llinell sylfaen .NET 10.
Nunjucks + Eleventy
Gwefan Eleventy yn defnyddio macros Nunjucks. Delfrydol ar gyfer gwefannau statig llawn cynnwys sy'n dal eisiau system gydrannau go iawn.
Mae gan bob ap enghreifftiol yr un siâp
I wneud i neidio rhwng fframweithiau deimlo'n gyfarwydd, mae pob ap enghreifftiol yn darparu:
- Llwybr croeso yn
/sy'n cyflwyno'r prosiect. - Mynegai cydrannau yn
/componentssy'n rhestru pob cydran. - Tudalen arddangos fesul cydran yn
/components/<component>. - CSS go iawn — nid tocynnau dylunio haniaethol — fel y gallwch gopïo arddulliau'n uniongyrchol.
- Llywio bysellfwrdd a rheoli ffocws sy'n gweithio o'r bocs.
Angen gweld sut mae un gydran wedi'i harddullio?
Agorwch yr ap enghreifftiol perthnasol, ewch i
/components/<name>, a chopïwch y marcio a'r CSS i'ch
prosiect eich hun. Mae'r apiau enghreifftiol yn defnyddio CSS plaen (neu bron
yn blaen) yn fwriadol fel y gallwch eu haddasu i unrhyw system a ffafriwch.
Eisiau headless yn lle hynny?
Pârwch unrhyw un o'r apiau enghreifftiol â'u pecyn headless cyfatebol — mae'r rheini'n cyhoeddi'r un cydrannau heb unrhyw CSS, yn barod ar gyfer eich tocynnau dylunio eich hun.