Tema Standardı

Tek kural var: temada görünen her şey düzenleyiciden düzenlenir. Satıcı logoyu taşıyabilmeli, yazıyı değiştirebilmeli, istemediği parçayı kaldırabilmeli; bunun için kimseye kod yazdırmamalı.

Hangi blokları yazacağın sana kalmış. Sabit bir blok listesi yok, istediğin kadar yeni blok ekleyebilirsin. Şart, her bloğun düzenleyicide seçilebilmesi ve ayarlarının gerçekten işe yaramasıdır.

Kurallar npx @multikolay/tema dogrula, paketle ve MCP tema_dogrula ile yüklemedekinin aynısıdır. Hepsinin düzeyi hata: geçmeyen sürüm yüklenmez. yeni ile gelen İskelet bütün kurallardan geçer, başlangıç için onu al.

KurallarBağlantıyı kopyala

Şunlar sabit metin sayılmaz: <style> ve <script> içi, HTML yorumları, {% if tasarim %} dalı (yalnız düzenleyicide görünen ipucu) ve rakam ya da noktalama gibi harf içermeyen yazılar. Adanın içindeki yedek yazı sabit metin sayılır; {{ 'anahtar' | t }} ile bas.

Otomatik denetim "bu bölüm daha çok bloğa bölünmeliydi" kararını tam veremez. Bunu incelemede biz de bakarız: kuraldan geçse de tek parça duran üst kısım ya da ürün sayfası için düzeltme isteyebiliriz.

Parçayı bloğa ayırmakBağlantıyı kopyala

Önce bölüme gömülü logo ve adalar:

<header>
  <a href="{{ yollar.anasayfa }}">{{ logo.text | default: shop.ad }}</a>
  {% ada 'arama' %}{% endada %}
  {% ada 'sepet' %}{% endada %}
</header>

Her parça kendi dosyasına geçer, bölüm yalnız kutuyu çizer:

<header class="ust">{% icerik 'bloklar' %}</header>

{% schema %}
{
  "name": "Üst kısım",
  "blocks": [{ "type": "logo" }, { "type": "_arama" }, { "type": "_sepet" }, { "type": "@theme" }, { "type": "@app" }]
}
{% endschema %}

<a class="ust__logo" href="{{ yollar.anasayfa }}" {{ block.nitelik }}>{{ logo.text | default: shop.ad }}</a>

{% schema %}
{ "name": "Logo" }
{% endschema %}

<div class="mk-tema-blok" {{ block.nitelik }}>{% ada 'arama' %}{% endada %}</div>

{% schema %}
{ "name": "Arama" }
{% endschema %}

_sepet de _arama ile aynı biçimdedir. Adı _ ile başlayan blok @theme ile gelmez, yalnız adıyla anılan yerde seçilir (Tema blokları). Bölümün şablondaki varsayılan kurgusunu da yaz ki tema boş açılmasın:

{
  "bolumler": {
    "ust": {
      "tur": "ust",
      "bloklar": { "ust-logo": { "tur": "logo" }, "ust-arama": { "tur": "_arama" }, "ust-sepet": { "tur": "_sepet" } },
      "blok_sira": ["ust-logo", "ust-arama", "ust-sepet"]
    }
  },
  "sira": ["ust"]
}

Adayı saran kutu düzeni bozmasın diye varliklar/tema.css'e şunu ekle (İskelet'te hazır gelir):

.mk-tema-blok { display: contents; }

Böylece içindeki öge flex ya da grid kutusunun çocuğu gibi davranır. Ama .ust > mk-ada gibi doğrudan çocuk seçicileri artık tutmaz; .ust mk-ada yaz.

Uygulamalara yer açBağlantıyı kopyala

Üst kısım, alt kısım, ürün ve sepet gibi bölümlerin şemasına { "type": "@app" } ekle. Satıcı WhatsApp, dil, para birimi, yorum, teklif ve bülten bloklarını o yere kendisi koyar (Uygulama blokları).

Görseller dile göre değişirBağlantıyı kopyala

Bölüm ve blok image_picker ayarları için bir şey yazman gerekmez: mağaza birden çok dilde açıksa satıcı her dile ayrı görsel seçebilir, seçmediği dilde kaynak görsel çizilir. Genel ayarlardaki görseller (ayarlar.json) tek değerlidir.

Yayındaki temanı geçirmekBağlantıyı kopyala

Yüklü sürümler çalışmaya devam eder, mağazalar etkilenmez. Yalnız yeni sürüm yüklemek için standarda uyman gerekir.

1. npx @multikolay/tema@latest dogrula ile listeyi al. Eski araç yeni kuralları bilmez.
2. Sabit yazıları ayara ya da diller/e al, okunmayan ayarları sil.
3. Gömülü parçaları yukarıdaki gibi bloğa ayır, bölümlere @app ekle.
4. Eski kopyaları koru: satıcıların kayıtlı şablonları blok ağacını kendiliğinden almaz. tema.json'a tasima.bloga_bol yaz, yoksa güncelleyen mağazada bölüm boş kalır.
5. Önce bir mağazada taslağa kurup eski ayarların yerinde durduğuna bak, sonra surum'u artırıp yayına gönder.