Geliştirme akışı
Temayı yerelde yaz ve önizle, denetle, zip'le; mağazanın panelinden yükle, taslakta dene. Yayına almak incelememizden sonra.
Tema aracı @multikolay/tema npm'de; kurulum gerekmez, Node 20 ve üstüyle npx yeter.
Yeni tema aç
npx @multikolay/tema yeni benim-temam
cd benim-temamVarsayılan olarak Liman'dan miras alan bir alt tema kurulur: Liman'ın bütün bölümleri hazır
gelir, sen yalnız farklı olanı yazarsın. Sıfırdan başlamak için --bos ekle.
benim-temam/
├── tema.json # ad, başlık, sürüm, "temel": Liman
├── bolumler/merhaba.liquid # örnek bölüm: ayarlar, bloklar, hazır kurgu
└── varliklar/tema.css # satıcının --mk-* değişkenleriyle stilYerelde önizle
npx @multikolay/tema gelistirhttp://localhost:4300 açılır. Her bölüm vitrindeki şablon motoruyla, örnek mağaza verisiyle (ürünler, kategori,
menü) çizilir. Dosyayı kaydettiğinde paket yeniden denetlenir ve sayfa kendiliğinden yenilenir; hata varsa dosya
ve satırıyla gösterilir.
- Bölümler: temanın ve Liman'dan gelen her bölüm ayrı sayfada, şemadaki ilk hazır kurguyla (
presets). - Sayfa türü: üst çubuktan
urun,listeya daicerikseç; ürün sayfası bölümleriproduct, liste bölümlericollectiongörür. - Yaklaşık: satıcının renkleri yerine varsayılan renkler, gerçek ürün yerine örnek veri kullanılır. Kesin görünüm için temayı taslağa yükle (aşağıda).
Denetle ve paketle
npx @multikolay/tema paketleYüklemedeki denetimin aynısını yapar (ne denetlenir) ve benim-temam-0.1.0.zip'i yazar. Yalnız
pakete girebilen dosyaları alır; diğerlerini (notların, kaynak dosyaların) listeler. Yalnız denetlemek için
npx @multikolay/tema dogrula (hata varsa çıkış kodu 1; CI'da kullanabilirsin).
Panelden yükle, taslakta dene
Çalıştığın mağazada Mağaza Düzenleyici'yi kullanabilen bir personel hesabın olmalı (mağaza sahibi seni Ayarlar → Personel'den ekler). Panelde Mağaza → Tema mağazası → Özel tema yükle → Tema dosyanızı ekleyin.
Denetimden geçen tema hemen önizlenebilir ve mağazanın taslağına kurulabilir: Önizle mağazanın bugünkü
içeriğini senin temanla gösterir, Taslağa kur temayı düzenleyiciye getirir. Ziyaretçiler bu sırada bugünkü
siteyi görmeye devam eder. Değişiklik yaptıkça surum'u artırıp yeniden paketle ve yükle.
İnceleme ve yayın
Her yüklenen sürümü MultiKolay ekibi inceler (genelde 1 iş günü). Onaylanınca satıcı düzenleyicide Yayınla'ya basar. Onaylanmamış sürüm taslakta denenir ama yayınlanamaz. Düzeltme istenirse notu Tema mağazasında görürsün; düzeltip yeni sürüm numarasıyla yükle.
Yüklenen tema yalnız o mağazada kullanılır; tema mağazası kataloğunda görünmez.
Komutlar
| Komut | Ne yapar |
|---|---|
yeni <klasör> [--bos] | Yeni tema (varsayılan Liman alt teması) |
indir <tema> [klasör] | Açık bir temanın kaynağını indirir: indir liman |
gelistir [klasör] [--port 4300] | Yerel önizleme, değişince yenilenir |
dogrula [klasör] | Yüklemedeki denetim |
paketle [klasör] [--cikti x.zip] | Denetler ve zip'i yazar |
Araçsız da olur
Araç yalnız kolaylık: klasörü kendin zip'leyip yükleyebilirsin. Zip'in kökünde dosyalar ya da tek bir klasör
olabilir; .DS_Store, __MACOSX gibi kalıntılar yok sayılır.
Sürüm ve ad kuralları
ad: küçük harf, rakam ve-(en çok 48 karakter). Bir mağazanın temasının adını başka mağaza ya da katalog teması alamaz.surum:1.2.3biçiminde. Aynı sürüm aynı içerikle tekrar yüklenirse bir şey olmaz; farklı içerikle yüklenemez, sürümü artır.
Denetim
Yüklemede şunlar denetlenir. Hata varsa paket kaydedilmez.
| Kural | Sınır |
|---|---|
| İzinli yollar | tema.json, bolumler/<ad>.liquid, parcalar/<ad>.liquid, varliklar/<ad>.css | .js | .svg | .json |
| Dosya adları | küçük harf, rakam, - (varlıklarda . ve _ de) |
| Dosya sayısı | en çok 300 |
| Dosya boyutu | dosya başına 1 MB, paket toplamı 5 MB |
tema.json | geçerli JSON; ad ve surum paketle aynı, baslik dolu |
| Bölümler | en az bir bölüm (alt temada gerekmez); her bölümde geçerli {% schema %} |
| Şablonlar | her bölüm ve parça hatasız ayrıştırılmalı; bilinmeyen ada ya da uygulama adı hata |
Görseller pakette değil
Paket metin dosyalarından oluşur. Fotoğraflar satıcının medya kitaplığından gelir (image_picker ayarı); küçük
ikon ve desenler için varliklar/*.svg kullan.