មើល Lily នៅក្នុងកម្មវិធីពិតប្រាកដ
គម្រោងគំរូប្រាំពីរដែលបានដំណើរការ បង្ហាញពីរបៀបយកសមាសភាគគ្មានក្បាល បន្ថែមរចនាប័ទ្ម និងដឹកជញ្ជូនគេហទំព័រពិតប្រាកដ។ ជ្រើសរើសក្របខណ្ឌដែលអ្នកប្រើ។
កម្មវិធីបង្ហាញជាមួយ CSS ពេញលេញ និងការរុករក
HTML JavaScript
ទំព័រ HTML ធម្មតា JavaScript សុទ្ធ គ្មានឧបករណ៍សាងសង់។ ដាក់ចូលម៉ាស៊ីនបម្រើឋិតិតណាមួយ — ល្អឥតខ្ចោះសម្រាប់គេហទំព័រតូចៗ និងការកែលម្អជាបណ្តើរ។
Svelte + SvelteKit
កម្មវិធី SvelteKit 3 ដែលប្រើ Svelte 5 runes។ ផ្លូវសមាសភាគ ការរុករកផ្អែកលើឯកសារ និង storybook មានរចនាប័ទ្មនៃសមាសភាគនីមួយៗ។
React + Next.js
កម្មវិធី Next.js 16 ដែលបង្ហាញសមាសភាគនីមួយៗក្នុងបរិបទ ជាមួយ TypeScript ពេញមួយ និងទំព័របង្ហាញសម្រាប់លំនាំផ្សំ។
Vue + Nuxt.js
កម្មវិធី Nuxt 4។ <script setup> និង Composition API នៅទូទាំងផ្លូវបង្ហាញនីមួយៗ។
Angular + Analog
កម្មវិធី Angular 22 + Analog.js។ ការរុករកផ្អែកលើឯកសារ signals ការរកឃើញការផ្លាស់ប្តូរគ្មានតំបន់ និងការបង្ហាញជាមុន SSG ពេញលេញ។
Blazor Web
កម្មវិធី Blazor Web ជាមួយសមាសភាគ Razor។ ងាយស្រួលជាមួយម៉ាស៊ីនមេ និង WebAssembly ជាមួយមូលដ្ឋាន .NET 10។
Nunjucks + Eleventy
គេហទំព័រ Eleventy ដែលប្រើម៉ាក្រូ Nunjucks។ ល្អឥតខ្ចោះសម្រាប់គេហទំព័រឋិតិតដែលសម្បូរមាតិកា ដែលនៅតែចង់បានប្រព័ន្ធសមាសភាគពិតប្រាកដ។
កម្មវិធីគំរូនីមួយៗមានរាងដូចគ្នា
ដើម្បីឱ្យការលោតរវាងក្របខណ្ឌមានអារម្មណ៍ស្គាល់ កម្មវិធីគំរូនីមួយៗផ្តល់៖
- ផ្លូវស្វាគមន៍នៅ
/ដែលណែនាំគម្រោង។ - សន្ទស្សន៍សមាសភាគនៅ
/componentsដែលរាយសមាសភាគនីមួយៗ។ - ទំព័របង្ហាញសម្រាប់សមាសភាគនីមួយៗនៅ
/components/<component>. - CSS ពិតប្រាកដ — មិនមែនតូខឹនរចនាអរូបីទេ — ដូច្នេះអ្នកអាចយករចនាប័ទ្មដោយផ្ទាល់។
- ការរុករកដោយក្តារចុច និងការគ្រប់គ្រងការផ្តោតដែលដំណើរការចេញពីប្រអប់។
ត្រូវការមើលថាតើសមាសភាគមួយត្រូវបានដាក់រចនាប័ទ្មយ៉ាងដូចម្តេច?
បើកកម្មវិធីគំរូដែលពាក់ព័ន្ធ រុករកទៅ
/components/<name>ហើយចម្លងម៉ាកអាប់ និង CSS ចូលគម្រោងផ្ទាល់ខ្លួនរបស់អ្នក។ កម្មវិធីគំរូប្រើ CSS ធម្មតា (ឬជិតធម្មតា) ដោយចេតនា ដូច្នេះអ្នកអាចសម្របវាទៅនឹងប្រព័ន្ធណាមួយដែលអ្នកចូលចិត្ត។
ចង់បានគ្មានក្បាលវិញ?
ផ្គូផ្គងកម្មវិធីគំរូណាមួយជាមួយកញ្ចប់ គ្មានក្បាល ដែលត្រូវគ្នា — ពួកវាបោះពុម្ពសមាសភាគដូចគ្នាដោយគ្មាន CSS ណាមួយ រួចជាស្រេចសម្រាប់តូខឹនរចនាផ្ទាល់ខ្លួនរបស់អ្នក។