Theme Studio, JekCMS kurulumunuza yalnızca tema varlıklarına kapsamlı bir okuma/yazma API tokeniyle bağlanıyor. Değişiklikler WebSocket üzerinden iletiliyor ve tam sayfa yenilenmeden güncellenen gömülü bir iframe'de anlık önizlenebiliyor. CSS değişikliğini kaydettikten önizlemede görmek arasında geçen ortalama süre aynı bölge sunucusunda 140 ms; çapraz bölge gecikmesi buna 60–80 ms ekliyor.

Yerel Araç Zinciri Gerektirmiyor

Varlık derleme işlemi sunucu tarafında gerçekleşiyor. Yerel Node.js, Vite veya webpack kurulumu gerekmiyor. Temanın variables.json dosyasında tanımlanan CSS değişkenleri, Theme Studio'nun kenar çubuğunda form kontrolleri olarak görünüyor: renk seçiciler, kaydırıcılar, açılır menüler. Bir değişkeni değiştirmek onu referans alan tüm bileşenleri önizlemede eş zamanlı güncelliyor. Bu, özellikle renk paleti ve tipografi gibi site genelinde etki eden kararları denemek için oldukça pratik bir yöntem.

Temiz Dışa Aktarma, Bağımlılık Yok

Dışa aktarma işlemi tema dizininin temiz bir ZIP dosyasını üretiyor. Çıktı, elle oluşturulmuş bir temayla bire bir aynı — Theme Studio meta verisi yok, Theme Studio'nun kurulu olmasına dair hiçbir bağımlılık yok. Dışa aktarılan tema JekCMS tema pazarından dağıtılabilir ya da herhangi bir kuruluma doğrudan yüklenebilir.

Hangi Lisansla Kullanılabilir?

Theme Studio tüm JekCMS Agency ve Enterprise lisanslarına dahil. Standard lisans sahipleri, satın almadan önce bir temanın kendi kurulumlarında nasıl görüneceğini inceleyebilecekleri salt okunur önizleme moduna erişebiliyor. Ajanslar ve serbest çalışan geliştiriciler için Agency lisansı 25 kuruluma kadar tam Theme Studio erişimi sunuyor.

variables.json Yapılandırma Dosyası

Theme Studio uyumlu her tema, kök dizininde bir variables.json dosyası barındırıyor. Bu dosya, düzenlenebilir her özelliği — renkler, yazı tipi boyutları, boşluk değerleri, kırılım noktaları — her değişkenin kenar çubuğu arayüzünde nasıl görüneceğini belirleyen meta verilerle birlikte tanımlıyor. Renk değişkeni bir renk seçici olarak, min, max ve step alanları olan sayısal değişken kaydırıcı olarak, numaralandırılmış değişken ise açılır menü olarak görünüyor.

{
 "colors": {
 "--primary": {
 "label": "Ana Renk",
 "type": "color",
 "default": "#2563eb",
 "group": "Marka"
 },
 "--surface": {
 "label": "Yüzey Arka Planı",
 "type": "color",
 "default": "#ffffff",
 "group": "Yüzeyler"
 }
 },
 "typography": {
 "--font-size-base": {
 "label": "Temel Yazı Boyutu",
 "type": "range",
 "default": "16px",
 "min": 12,
 "max": 24,
 "step": 1,
 "unit": "px"
 }
 }
}

Değişken Grupları ve Bölümler

Değişkenler, kenar çubuğunda daraltılabilir bölümler olarak görünen gruplar halinde düzenleniyor. Varsayılan gruplar — Marka, Yüzeyler, Tipografi, Boşluk, Düzen — mantıksal bir yapı sağlıyor ancak tema yazarları özel gruplar tanımlayabiliyor. Her grup en fazla 50 değişken barındırabiliyor. Grup ataması olmayan değişkenler kenar çubuğunun altında "Diğer" bölümünde görünüyor.

WebSocket Mimarisi

Theme Studio, tarayıcı editörü ile JekCMS sunucusu arasında kalıcı bir WebSocket bağlantısı sürdürüyor. Bir CSS değişkenini değiştirdiğinizde değişiklik üç aşamadan geçiyor:

  • Tarayıcı, değişken adı ve yeni değeri içeren bir JSON yama mesajı gönderiyor
  • Sunucu, değeri variables.json dosyasında tanımlanan tür kısıtlamalarına göre doğruluyor
  • Sunucu, güncellenen değişkeni temanın derlenmiş CSS'ine enjekte ediyor ve sonucu bağlı tüm önizleme istemcilerine yayınlıyor

Bu mimari, birden fazla tasarımcının aynı tema üzerinde eş zamanlı çalışabilmesini sağlıyor. Bağlı her tarayıcı, diğer editörlerin değişikliklerini gerçek zamanlı olarak görüyor. Çakışma çözümü, değişken bazında son yazanın kazandığı stratejiyi kullanıyor — birleştirme veya kilitleme mekanizması yok; bu da uygulamayı basit ve hızlı tutuyor.

Şablon Düzenleme ve Bileşen Kütüphanesi

CSS değişkenlerinin ötesinde Theme Studio, PHP şablon dosyalarını doğrudan tarayıcıda düzenlemek için bir şablon editörü sunuyor. Sözdizimi vurgulama, JekCMS yardımcı fonksiyonları için otomatik tamamlama ve satır içi hata raporlama yerleşik olarak geliyor. Bileşen kütüphanesi paneli, temada mevcut her parçalı bileşeni listeliyor ve şablonlara get_partial() çağrıları eklemek için sürükle-bırak desteği sunuyor.

Canlı Hata Algılama

PHP sözdizimi hatası içeren bir şablon dosyasını kaydettiğinizde Theme Studio bunu dosya diske yazılmadan önce yakalıyor. Sunucu, gönderilen içerik üzerinde php -l (lint) çalıştırıyor ve hata mesajını editör arayüzünde döndürüyor. Bu, canlı siteyi yanlış bir karakter yüzünden bozma senaryosunu önlüyor. Önizleme iframe'i, hata düzeltilinceye kadar son çalışan versiyonu göstermeye devam ediyor.

Production Üzerindeki Performans Etkisi

Theme Studio production sitelerine sıfır ek yük getiriyor. WebSocket sunucusu, değişken derleme katmanı ve editör arayüzü yalnızca aktif bir Theme Studio oturumu çalışırken etkin. Halka açık sitede ek JavaScript veya CSS yüklenmiyor. Derlenen tema çıktısı, Theme Studio ile mi yoksa elle mi oluşturulduğundan bağımsız olarak aynı — aynı CSS dosyası, aynı PHP şablonları, aynı dizin yapısı.