Template Engine
Tema geliştirme sürecinde Twig template engine kullanılmaktadır. Twig hakkında detaylı bilgiye Twig Resmi Dokümantasyonu üzerinden ulaşabilirsiniz.
📚 Sistemde Default Olarak Bulunan Kütüphaneler
Bu belgede, projeye global ve default olarak dahil edilen JavaScript ve Vue.js tabanlı kütüphaneler listelenmiştir.
Bu kütüphaneler sistemin temel işleyişi için önceden yüklenmiş ve kullanıma hazır hale getirilmiştir.
Her biri spesifik görevler üstlenmekte olup, frontend geliştirme süreçlerinde aktif olarak kullanılmaktadır. Bu yüzden haricen dahil edilmelerine gerek yoktur.
🏛️ Sisteme Default Edilen Kütüphaneler
1. Vue.js 3 (v3.2.37)
- Açıklama: Vue.js, modern kullanıcı arayüzleri geliştirmek için kullanılan progresif bir JavaScript framework’üdür.
- Sistem Kullanımı:
- Component bazlı geliştirme yapılmaktadır fakat snippet ya da widget olarak kullanılabilir.
- Global UMD versiyonu yüklenmiştir ve tüm sayfalarda otomatik olarak kullanılabilir durumdadır.
- Yükleme Şekli:
defer
attribute’u ile çağrılır, DOM tam yüklendikten sonra çalışır.
2. Vue Router (v4.x)
- Açıklama: Vue.js uygulamaları için client-side yönlendirme (SPA Routing) çözümüdür.
- Sistem Kullanımı:
- Vue bileşenleri arasında route yönetimi sağlar.
- Sayfa yenilemeden hızlı geçişler yapılabilir.
- Yükleme Şekli: Global UMD sürümü kullanılarak
defer
ile yüklenir.
3. LightGallery (v2.x)
- Açıklama: Hafif ve yüksek performanslı bir galeri kütüphanesidir. Özellikle mobil cihazlarda hızlı ve akıcı deneyim sunar.
- Sistem Kullanımı:
- Ürün görselleri, medya dosyaları, veya galeri içeriklerinde lightbox tarzı açılır görsel gösterimi sağlar.
- Slideshow, zoom, thumbnail gibi gelişmiş özellikleri destekler.
- Yükleme Şekli:
defer
attribute ile yüklenir.
4. Swiper (v11.x)
- Açıklama: Swiper, özellikle mobil dostu kaydırmalı slider/carousel oluşturmak için kullanılan en popüler kütüphanelerden biridir.
- Sistem Kullanımı:
- Anasayfa bannerları, ürün listeleri, referans kaydırıcıları gibi yatay scroll içeren tüm yapılarda kullanılır.
- Responsive tasarımlarda yüksek uyumluluk ve touch desteği sağlar.
5. LazySizes (v5.x)
- Açıklama: LazySizes, tembel yükleme (lazy load) mantığı ile resimlerin, iframe’lerin ve diğer medya öğelerinin yalnızca görünüm alanına geldiğinde yüklenmesini sağlar.
- Sistem Kullanımı:
- Sayfa ilk açıldığında tüm resimler yüklenmez, bu da performansı ve hız skorlarını önemli ölçüde artırır.
- Yükleme Şekli:
async
attribute ile yüklenerek yüklenme anında diğer işlemleri engellemez.
6. Tailwind CSS (v3.x)
- Açıklama: Tailwind CSS, utility-first yaklaşımıyla hızlı ve özelleştirilebilir CSS yazmayı sağlayan modern bir CSS framework’üdür.
- Sistem Kullanımı:
- Proje genelinde stil yönetimi için kullanılır.
- Hazır utility sınıflarıyla hızlı prototipleme ve responsive tasarımlar oluşturulabilir.
- Yükleme Şekli: Global olarak dahil edilmiştir ve tüm sayfalarda kullanılabilir.
⚙️ Özet
Kütüphane | Versiyon | Kullanım Alanı |
---|---|---|
Vue.js | 3.2.37 | Component bazlı geliştirme |
Vue Router | 4.x | SPA Routing (tek sayfa uygulama yönlendirme) |
LightGallery | 2.x | Medya lightbox gösterimi |
Swiper | 11.x | Mobil uyumlu slider/carousel yapıları |
LazySizes | 5.x | Görsellerde tembel yükleme |
📌 Ek Bilgiler
Vue ve bağlı kütüphaneler UMD (Universal Module Definition) formatında global olarak tanımlıdır.
Bu kütüphaneler tüm sistemde varsayılan olarak bulunur ve ayrıca dahil edilmesine gerek yoktur.