Tema Yapısı
Her tema öngörülebilir bir klasör yapısına sahiptir. Tema motoru bu dizinleri tanır ve dosyaları doğru bağlamda işler.
CLI temaları mağaza dizininin altına açar; aşağıdaki my-theme/ adı, geliştirdiğiniz temanın kendi adı olur (Çalışma Dizini):
example-tsoft-biz/my-theme/
example-tsoft-biz/ # Mağaza dizini
└── my-theme/ # Tema dizini — komutları buradan çalıştırın
├── .theme # Tema manifest dosyası
├── assets/
│ ├── css/ # Özel CSS — giriş: theme.css
│ │ └── theme.css
│ └── js/ # Özel JavaScript — giriş: theme.js
│ └── theme.js
├── section/ # Sayfaya panelden eklenen bölümler
│ └── product-list/
│ └── default.twig
└── snippets/ # Section'larda yeniden kullanılan parçalar
└── product-list/
└── product-card/
├── default.twig
└── list.twig
Dizinlerin görevi
| Dizin / Dosya | Açıklama |
|---|---|
.theme | Tema manifest dosyası. Tema adı, yazar ve sürüm bilgisini içerir. |
section/<isim>/default.twig | Bir section, kendi adıyla bir klasör altında yaşar; giriş dosyası default.twig'dir. Aynı klasörde varyant dosyaları (list.twig, compact.twig) olabilir. |
snippets/ | {{ snippet('isim') }} ile çağrılan, birden çok yerde kullanılan parçalar (ör. product-card, variant-1). Nokta notasyonu klasör hiyerarşisine denk gelir. |
assets/css/ | Özel CSS dosyaları. theme.css giriş noktası olarak kullanılır. |
assets/js/ | Özel JavaScript dosyaları. theme.js giriş noktası olarak kullanılır. |
.gitkeep dosyaları, henüz içerik konmamış klasörlerin git tarafından izlenmesini sağlar. İçerik eklediğinizde silebilir veya bırakabilirsiniz..theme manifest
Tema klasörünün kökünde yer alan .theme dosyası, basit bir JSON manifest'tir:
.theme
{
"name": "Default",
"author": "T-SOFT Development Team",
"version": "1.0.0"
}
| Alan | Açıklama |
|---|---|
name | Tema adı. Panelde ve mağaza listesinde görünür. |
author | Geliştirici veya ekip adı. |
version | SemVer formatında sürüm. Her yayında güncelleyin. |
Sürümü elle yönetmeniz gerekmez.
tsoft theme push yeni sürüm numarasını ve artış türünü değişikliklerinize göre sunucudan alır; .theme dosyasındaki version alanı push sonrası güncellenir. Geriye dönmek için eski sürüme rollback yapmanız gerekir.Hangi dosya nereye?
İçerik eklerken karar tablosu:
| Ne yazıyorsun? | Nereye? |
|---|---|
| Sayfaya panelden eklenecek bir bölüm | section/<isim>/default.twig |
| Bir bölümün varyantı (liste / grid…) | Aynı klasörde section/<isim>/<varyant>.twig |
| Birden fazla yerde tekrarlanan parça | snippets/<isim>.twig |
| Sadece bir section'a özel parça | Aynı dosyaya gömün veya snippets/_<isim>.twig (alt çizgi → dahili) |
include'la kullanılacak paylaşılan parça (pagination vb.) | layout/<isim>.twig |
{% from 'layout/components/macros.twig' import link_attributes %} ile import edilecek macro | {{ link_attributes(IMAGE) }} |
| Özel stil | assets/css/theme.css |
| Özel JavaScript | assets/js/theme.js |
| Statik görsel / font | assets/ altında uygun bir alt klasör |
Snippet klasör hiyerarşisi
Snippet'lar gruplandığında nokta notasyonu kullanılır ve fiziksel olarak klasör yapısına denk gelir:
snippets/
snippets/
├── product-card.twig → snippet('product-card')
├── _cookie-law.twig → snippet('_cookie-law')
└── product-detail/
├── variant-1/
│ ├── default.twig → snippet('product-detail.variant-1.default')
│ └── select.twig → snippet('product-detail.variant-1.select')
└── related/
└── default.twig → snippet('product-detail.related.default')
Detaylar için bkz. Snippet.