Навигация
Part 1

Тақырыптау жүйесі (Theming System)

CSS айнымалыларын, тақырыптар тізілімін және варианттарды көрсетуді (rendering) қоса алғанда, динамикалық тақырыптау жүйесінің негізгі архитектурасын түсіну.

AstroGlass Tailwind CSS v4 және Astro компоненттік архитектурасының үстіне құрылған өте икемді, динамикалық тақырыптау жүйесімен ерекшеленеді.

Архитектураға шолу

Тақырыптау жүйесі үш негізгі деңгейден тұрады:

  1. Тақырыптар тізілімі (Theme Registry): src/config/themes.ts ішіндегі әрбір тақырыпқа арналған анықтамалар.
  2. CSS Custom Properties (CSS арнайы қасиеттер): src/styles/_themes.css ішінде анықталған тақырыпқа сезімтал айнымалылар.
  3. Динамикалық рендеринг (Dynamic Rendering): [theme].astro беті әр секция үшін дұрыс компонент нұсқасын динамикалық түрде көрсетеді.

Тақырыптар тізілімі

Әрбір тақырып src/config/themes.ts ішінде тіркеледі. Бұл тақырып метадеректерін орталықтандырады және оны бүкіл қосымшаға қолжетімді етеді.

  • src/
    • config/
      • themes.ts

Әрбір тақырып анықтамасы мыналарды қамтиды:

export const themes: ThemeDefinition[] = [
  {
    id: 'liquid',
    name: 'Liquid',
    color: 'from-blue-500 to-cyan-400',  // Tailwind градиентті кластары
    icon: '💧',
    sections: ['Header', 'Hero', 'About', 'Features', 'Portfolio', 'Pricing', 'Testimonial', 'FAQ', 'CTA', 'Contact', 'Footer'],
    enabled: true,
    premium: false,
    description: 'Жұмсақ анимациялары бар сұйық, органикалық дизайн',
  },
  // Glass, Neo, Luxury, Minimal, Aurora...
];

CSS айнымалылары

Тақырыпқа тән түстер мен эффектілер CSS тапсырыстық қасиеттері арқылы басқарылады. Айнымалылар <html> немесе <body> тегіндегі data-theme атрибутына бекітілген.

src/styles/_themes.css
[data-theme="liquid"] {
  --p: 260 80% 60%;    /* Негізгі (Primary) */
  --s: 310 80% 60%;    /* Қосымша (Secondary) */
  --a: 190 90% 60%;    /* Акцент (Accent) */
  --b1: 220 20% 10%;   /* Базалық фон (Base background) */
  --bc: 220 20% 90%;   /* Базалық контент (Мәтін) */
}

Компоненттер бұларды hsl(var(--p)) немесе Tailwind утилиталары арқылы тұтынады:

<div class="bg-[hsl(var(--p))] text-[hsl(var(--bc))]">
  Тақырыпқа сай контент
</div>
⚠️
Атау конвенциясы

Жобаның барлығында қолданылатын DaisyUI шабыттандырған атау конвенциясымен сәйкес болу үшін айнымалылар қысқа атауларды пайдаланады (--p, --s, --a, --b1, --bc, --er, --su).

Динамикалық компоненттерді рендерингтеу

Тақырып беттері src/pages/[theme].astro арқылы жасалады. Бұл файл әр секция үшін дұрыс нұсқаны (вариантты) динамикалық түрде таңдау үшін компоненттік картаны (component map) пайдаланады:

[theme].astro
---
const componentMap = {
  liquid: {
    Header: HeaderLiquid,
    Hero: HeroLiquid,
    About: AboutLiquid,
    Features: FeaturesLiquid,
    // ... барлық 12-ден астам секциялар
  },
  glass: { /* ... */ },
  neo: { /* ... */ },
  luxury: { /* ... */ },
  minimal: { /* ... */ },
  aurora: { /* ... */ },
};


const components = componentMap[themeId];
---


<components.Header />
<components.Hero />
<components.About />
<!-- ... -->
ℹ️

Әрбір секция варианты - бұл дербес Astro компоненті. Ол барлық мәтіндер үшін useTranslations() пайдаланады — ешқандай сыртқы props (қасиеттер) қажет емес. Бұл бірыңғай API-ді сақтай отырып, әр тақырыптың мүлде басқа HTML құрылымдарына ие болуына мүмкіндік береді.

Жаңа тақырып жасау

  1. Тақырып анықтамасын қосу

    src/config/themes.ts ішіне тақырып анықтамасының нысанын (object) қосыңыз.

  2. CSS айнымалыларын анықтау

    Жаңа тақырыптың CSS айнымалыларын src/styles/_themes.css ішінде анықтаңыз.

  3. Секция компоненттерін құру

    Әрбір секция үшін тақырыпқа тән компонент нұсқаларын (варианттарды) жасаңыз, мысалы, src/components/sections/hero/HeroMyTheme.astro.

  4. Компоненттер картасына тіркеу

    Жаңа тақырыптың компоненттерін src/pages/[theme].astro ішіндегі componentMap картасына қосыңыз.

  5. Аудармаларды қосу

    Кез келген жаңа оқшауланған жолдарды src/locales/ ішіндегі JSON файлдарына қосыңыз.