Lily Design System™

ស្បែក

សមាសភាគ Lily មាន class hook ស្ថិរភាព និង CSS សូន្យ — ដូច្នេះស្បែកគ្រាន់តែជាសន្លឹករចនាប័ទ្ម។ មេរៀននេះចាប់ពី “ភ្ជាប់ឯកសារមួយ” ទៅ “អនុញ្ញាតឱ្យអ្នកប្រើប្តូរស្បែកពេលដំណើរការ រក្សាទុក”។

អ្វីដែលអ្នកនឹងសាងសង់

កម្មវិធីដែលអ្នកប្រើអាចផ្លាស់ប្តូររូបរាងទាំងមូល — ចាប់ផ្តើមជាមួយសន្លឹករចនាប័ទ្មភ្ជាប់មួយ បញ្ចប់ជាមួយឧបករណ៍ប្តូរស្បែកពេលដំណើរការដែលស្ថិតស្ថេរ — ក្នុងរយៈពេលប្រហែល ១៥ នាទី។

មុនពេលអ្នកចាប់ផ្តើម

បញ្ចប់ មេរៀនក្របខណ្ឌ ជាមុនសម្រាប់ស្ទែករបស់អ្នក ដើម្បីឱ្យអ្នកមានទម្រង់ Lily តូចមួយដើម្បីដាក់ស្បែក។ អ្វីៗទាំងអស់នៅទីនេះដំណើរការក្នុងក្របខណ្ឌទាំងប្រាំពីរ; គំរូកូដបង្ហាញ Svelte និង HTML ធម្មតា។

ជំហាន ១ — ភ្ជាប់ស្បែករួចជាស្រេច

themes/ ថតផ្ទុកសន្លឹករចនាប័ទ្មឯករាជ្យ ៤៥។ ចម្លងវាទៅទ្រព្យឋិតិតរបស់កម្មវិធីអ្នក ហើយភ្ជាប់មួយ៖ 

<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />

ចំណុចសំខាន់នៃសំណុំ៖

  • វិស័យសាធារណៈ — NHS England / Scotland / Wales នីមួយៗក្នុងកំណែសម្រាប់អ្នកជំងឺ និងអ្នកអនុវត្ត; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • បំផុសដោយអ្នកលក់ — adobe-spectrum, mozilla-protocol.
  • គោលបំណងទូទៅ — light, dark, nord, dracula, wireframe, corporate, synthwaveហើយច្រើនទៀត។

ពិនិត្យការងាររបស់អ្នក៖ ផ្ទុកទំព័រឡើងវិញ។ ម៉ាកអាប់ដូចគ្នាដែលអ្នកបានសាងសង់ក្នុងមេរៀនក្របខណ្ឌឥឡូវមានរចនាប័ទ្មពេញលេញ — ប៊ូតុង វាលបញ្ចូល ស្លាក រង្វង់ផ្តោត។ HTML មួយជួរបានធ្វើអ្វីៗទាំងនេះ — សមាសភាគនីមួយៗនៅដដែលដូចមុន។

ជំហាន ២ — បដិសេធអ្វីក៏បាន

ឧបករណ៍ជ្រើសស្បែកត្រូវបានរុំក្នុង :where(...)ដែលមានភាពជាក់លាក់សូន្យ — ដូច្នេះច្បាប់ណាមួយដែលអ្នកសរសេរឈ្នះ យ៉ាងសាមញ្ញ៖ 

/* After the theme link: your brand button, everything else themed */
.button {
  background: #7c3aed;
  border-radius: 9999px;
}

ជំហាន ៣ — ការប្តូរពេលដំណើរការជាមួយ theme-picker

theme-picker ជំនួយការគឺជាប៊ូតុងរូបតំណាង + ប្រអប់បញ្ជីគ្មានក្បាលដែលជាម្ចាស់វដ្តជីវិតស្បែកទាំងមូល៖ វាផ្ទុកសន្លឹករចនាប័ទ្មដែលបានជ្រើសរើសដោយប្តូរមួយ <link> ដែលគ្រប់គ្រង (មានតែស្បែកសកម្មប៉ុណ្ណោះដែលត្រូវបានទាញយក) កំណត់ data-theme="{slug}" នៅលើឯកសារ ហើយជាជម្រើសរក្សាទុកទៅ localStorage។ Svelte បានបង្ហាញនៅទីនេះ; ច្រក React, Vue, Angular, HTML, Nunjucks និង Blazor ត្រូវគ្នាកិច្ចសន្យាដោយកិច្ចសន្យា៖ 

<script>
  import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>

<ThemePicker
  label="Theme"
  themesUrl="/assets/themes/"
  themes={["light", "dark", "nord", "wireframe"]}
  storageKey="my-app-theme"
/>

នោះជាការរួមបញ្ចូលទាំងមូល។ អាកប្បកិរិយាក្តារចុចធ្វើតាមលំនាំប្រអប់បញ្ជី WAI-ARIA APG; ការគ្រប់គ្រងខ្លួនឯងគ្មានក្បាល (class hook .theme-picker) ដូច្នេះវាយកស្បែកណាដែលសកម្ម។

បានផ្ទៀងផ្ទាត់ 2026-08-29៖ កំណាត់ពិតប្រាកដនេះត្រូវបានចងក្រងប្រឆាំងនឹងកញ្ចប់ដែលបានបោះពុម្ព 0.1.1 តាមរយៈ svelte/server.

ជំហាន ៤ — ឆ្លើយតបនឹងស្បែកក្នុង CSS ផ្ទាល់ខ្លួនរបស់អ្នក

ដោយសារជំនួយការកំណត់ data-theme នៅលើឫសឯកសារ រចនាប័ទ្មផ្ទាល់ខ្លួនរបស់អ្នកអាចចេញសាខាលើវា៖ 

[data-theme="dark"] .site-logo { filter: invert(1); }

កំណត់ចំណាំសម្រាប់ការបង្ហាញលើម៉ាស៊ីនមេ

ជំនួយការអនុវត្តការសរសេរ DOM ទាំងអស់ក្នុងវដ្តជីវិត mount/effect របស់ក្របខណ្ឌ ដូច្នេះវាសុវត្ថិភាព SSR តាមការរចនា។ ដើម្បីជៀសវាងការភ្លឹបភ្លែតនៅការគូរដំបូង សូមបង្ហាញ <link> និង data-theme នៃស្បែកដំបូងលើម៉ាស៊ីនមេ (ឧទាហរណ៍ពី cookie) — ឃ្លាំងជំនួយការ Svelte ដឹកជញ្ជូនឧទាហរណ៍ cookie SvelteKit ដែលអាចដំណើរការបាន ហើយកាតាឡុកផ្សេងទៀតចងក្រងឯកសារលំនាំដូចគ្នាសម្រាប់ស្ទែករបស់ពួកគេ។

ជំហានបន្ទាប់

  • ជំនួយការចំណូលចិត្ត — លំនាំដូចគ្នាសម្រាប់ភាសា ទំហំអក្សរ ការចែករំលែក និងការបញ្ចូលកាលបរិច្ឆេទ/ពេលវេលា។
  • ចូលរួមចំណែកស្បែក — នីមួយៗជាសន្លឹករចនាប័ទ្មឯករាជ្យមួយដែលកំណត់គោលដៅ class hook; មើល ការចូលរួមចំណែក.

មានសំណួរតាមផ្លូវ? ទំព័រជំនួយ ពេញដោយចម្លើយ — ហើយប្រសិនបើជំហានណាអាចច្បាស់ជាងនេះ ប្រាប់យើង ហើយយើងនឹងកែលម្អមេរៀនដោយអំណរ។