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üphaneVersiyonKullanım Alanı
Vue.js3.2.37Component bazlı geliştirme
Vue Router4.xSPA Routing (tek sayfa uygulama yönlendirme)
LightGallery2.xMedya lightbox gösterimi
Swiper11.xMobil uyumlu slider/carousel yapıları
LazySizes5.xGö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.