Mavzular va moslashtirish
Hujjatlaringiz ko'rinishini mavzular va brending opsiyalari bilan moslashtiring.
Cirth-ning mavzular tizimi yordamida hujjatlaringizni brendingizga moslashtiring. Tayyor mavzulardan birini tanlang yoki o'zligingizga mos ranglarni sozlang.
Mavzuni tanlash
Tayyor mavzular
Cirth bir nechta professional tarzda ishlab chiqilgan mavzularni taklif etadi:
Loyiha sozlamalari > Tashqi ko'rinish (Appearance) bo'limiga o'ting
Mavjud mavzularni ko'zdan kechiring
Ko'rish uchun bosing
Mavzuni qo'llash (Apply Theme) tugmasini tanlang
Mavzuni ko'zdan kechirish (Preview)
Qo'llashdan oldin siz quyidagilarni amalga oshirishingiz mumkin:
Yorug' va qorong'u rejimdagi ranglarni ko'rish
Tipografiya tanlovlarini tekshirish
Kod bloklari uslubini ko'rish
Mavzu komponentlari
Har bir mavzu quyidagilarni belgilaydi:
Ranglar
O'zgaruvchi | Foydalanish |
|---|---|
Asosiy (Primary) | Havolalar, tugmalar, urg'ular |
Orqa fon (Background) | Sahifa foni |
Old fon (Foreground) | Asosiy matn rangi |
Xira (Muted) | Ikkinchi darajali matn, chegaralar |
Karta (Card) | Karta fonlari |
Urg'u (Accent) | Ajratib ko'rsatish, hover holatlari |
Tipografiya
Shrift oilasi - O'qish qulayligi uchun sans-serif
Sarlavha vazni - Ierarxiya uchun qalin
Kod shrifti - Kod bloklari uchun monospace
Qorong'u rejim
Barcha mavzular qorong'u rejim variantlarini o'z ichiga oladi:
Tizim afzalliklariga qarab avtomatik aniqlash
O'quvchilar uchun qo'lda almashtirish imkoniyati
Har bir rejim uchun optimallashtirilgan ranglar
Brending opsiyalari
Logotip
Hujjatlar sarlavhasiga logotipingizni qo'shing:
Loyiha sozlamalari > Brending bo'limiga o'ting
Logotip rasmini yuklang
Tavsiya etiladi: shaffoflikka ega 200x200px PNG
Logotipingiz quyidagi joylarda ko'rinadi:
Hujjatlar sarlavhasi
Brauzer tabi (favicon sifatida)
Ijtimoiy tarmoqlardagi prevyu
Favicon
Brauzer tabidagi belgini moslashtiring:
Favicon rasmini yuklang
Qo'llab-quvvatlanadigan formatlar: ICO, PNG
Tavsiya etiladi: 32x32px
Loyiha ranglari
Brendingiz uchun mavzu ranglarini o'zgartiring:
Maxsus ranglar (Custom Colors) ni tanlang
Asosiy brend rangingizni o'rnating
Ikkinchi darajali ranglar avtomatik ravishda yaratiladi
Yorug' va qorong'u rejim
Bu qanday ishlaydi
O'quvchilar o'zlariga ma'qul rejimni tanlashlari mumkin:
Tizim (System) - Operatsion tizim sozlamalariga amal qiladi
Yorug' (Light) - Har doim yorug' mavzu
Qorong'u (Dark) - Har doim qorong'u mavzu
Ikkala rejim uchun loyihalash
Ikkala rejimda ham yaxshi ko'rinadigan kontent uchun maslahatlar:
Sof qora/oq rangdan qoching - To'q kulrang va ochiq oq ranglardan foydalaning
Rasmlarni tekshiring - Ularning ikkala rejimda ham ko'rinishiga ishonch hosil qiling
Mavzu ranglaridan foydalaning - Ular avtomatik ravishda moslashadi
Kod bloki mavzulari
Kod sintaksisini yoritish rejimga qarab moslashadi:
Yorug' rejim: Yorug' fon, to'q sintaksis
Qorong'u rejim: To'q fon, yorqin sintaksis
Maxsus CSS (Murakkab)
Chuqurroq moslashtirish uchun siz maxsus CSS qo'shishingiz mumkin:
css
/* Hujjatlaringiz uchun maxsus uslublar */
.prose h2 {
border-bottom: 2px solid var(--primary);
}
.prose code {
background: var(--muted);
padding: 0.2em 0.4em;
border-radius: 4px;
}Mavjud CSS o'zgaruvchilari
css
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--border: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}Eng yaxshi amaliyotlar
Barqarorlik
Barcha versiyalarda bir xil mavzudan foydalaning
Hujjatlarni asosiy veb-saytingizga moslashtiring
Brend elementlarini barqaror saqlang
Kirish imkoniyati (Accessibility)
Ranglar kontrasti yetarli ekanligiga ishonch hosil qiling
Daltonizm simulyatorlari bilan tekshiring
Ma'noni faqat rang orqali yetkazishga tayanmang
Unumdorlik
Logotip rasmlarini optimallashtiring (PNG-ni siqing)
Iloji bo'lsa, logotiplar uchun SVG-dan foydalaning
Og'ir maxsus CSS-dan qoching
Muammolarni bartaraf etish
Mavzu qo'llanmayapti
Brauzer keshini tozalang
Maxsus CSS mavjud uslublarni bekor qilmayotganini tekshiring
Boshqa brauzerda urinib ko'ring
Logotip ko'rinmayapti
Rasm formatini tekshiring (PNG, JPG, SVG)
Fayl hajmini tekshiring (1MB dan kam)
URL-ga kirish imkoni borligini tekshiring
Qorong'u rejim muammolari
O'zgarishlardan keyin ikkala rejimni ham tekshiring
Kontentda qat'iy belgilangan (hardcoded) ranglarni tekshiring
Rasmlar ikkala rejimda ham ishlashini tasdiqlang