Ana içeriğe geç

Twig Temelleri

Twig Template Engine Nedir?​

Twig, PHP için modern, güvenli ve esnek bir template engine'dir. serB2B sisteminde tüm temalar Twig kullanılarak geliştirilir.

Twig'in Temel Özellikleri​

  • Güvenli: Otomatik HTML escaping ile XSS saldırılarına karşı koruma
  • Hızlı: Template'ler PHP koduna derlenir ve cache'lenir
  • Esnek: Özel fonksiyonlar, filtreler ve etiketlerle genişletilebilir
  • Okunabilir: Temiz ve anlaşılır sözdizimi

Temel Twig Sözdizimi​

{# Yorum satırı #}

{{ değişken }}                  {# Değişken çıktısı #}
{{ 'metin' | filtre }}          {# Filtre kullanımı #}
{{ fonksiyon() }}               {# Fonksiyon çağrısı #}

{% if koşul %}                  {# Kontrol yapısı #}
  İçerik
{% endif %}

{% for item in items %}         {# Döngü #}
  {{ item }}
{% endfor %}

{% include 'dosya.twig' %}      {# Dosya dahil etme #}
{{ include('dosya.twig') }}     {# Fonksiyon ile dahil etme #}

{% set degisken = 'değer' %}    {# Değişken tanımlama #}

serB2B Tema Sistemi​

serB2B'de temalar modüler ve özelleştirilebilir yapıdadır. Her tema şu bileşenleri içerir:

Tema Dizin Yapısı​

public/templates/
├── basic/                    # Varsayılan tema
│   ├── config.json          # Tema konfigürasyonu
│   ├── assets/              # CSS, JS, resimler
│   │   ├── src/            # Kaynak dosyalar
│   │   └── build/          # Derlenmiş dosyalar
│   └── views/              # Twig template dosyaları
│       ├── layouts/        # Ana sayfa yapıları
│       ├── widgets/        # Yeniden kullanılabilir bileşenler
│       └── ...            # Diğer template'ler
├── modern/                  # Özel tema örneği
└── custom/                  # Başka bir özel tema

Tema Özellikleri​

  • Çoklu Tema Desteği: Aynı sistemde birden fazla tema bulunabilir
  • Konfigürasyon Dosyası: Her temanın config.json dosyası ile özelleştirme
  • Widget Sistemi: Modüler ve yeniden kullanılabilir bileşenler
  • Responsive Tasarım: Mobil ve masaüstü için optimize edilmiş
  • Webpack Entegrasyonu: Modern asset yönetimi

Basic Tema​

basic teması, tüm yeni temaların temelini oluşturur. İçeriği:

  • 5 farklı header stili (standard, ella, fox, helen, mobile)
  • Modüler widget sistemi (slider, ürün kartları, kategori grid'leri)
  • E-ticaret template'leri (ürün listesi, detay, sepet, checkout)
  • Kullanıcı yönetimi (giriş, kayıt, profil düzenleme)
  • SEO optimizasyonu (Open Graph, meta etiketler)

Twig'de Kullanılabilir Temel Yapılar​

Değişkenler​

{{ degisken }}                   {# Basit değişken #}
{{ nesne.ozellik }}              {# Nesne özelliği #}
{{ dizi['anahtar'] }}            {# Dizi elemanı #}
{{ dizi[0] }}                    {# İndeks ile erişim #}
{{ nesne.metod() }}              {# Metod çağrısı #}

Filtreler​

{{ 'metin' | upper }}            {# BÜYÜK HARF #}
{{ 'metin' | lower }}            {# küçük harf #}
{{ 'metin' | capitalize }}       {# İlk Harf Büyük #}
{{ '<p>HTML</p>' | raw }}        {# HTML olarak render et #}
{{ null | default('varsayılan') }} {# Varsayılan değer #}
{{ tarih | date('d.m.Y') }}      {# Tarih formatlama #}
{{ 1234.56 | number_format(2) }} {# Sayı formatlama #}
{{ metin | slice(0, 100) }}      {# İlk 100 karakter #}
{{ dizi | length }}              {# Eleman sayısı #}
{{ dizi | first }}               {# İlk eleman #}
{{ dizi | last }}                {# Son eleman #}
{{ dizi | join(', ') }}          {# Birleştirme #}

Operatörler​

{# Matematiksel #}
{{ a + b }}  {{ a - b }}  {{ a * b }}  {{ a / b }}  {{ a % b }}  {{ a ** b }}

{# Karşılaştırma #}
{% if a == b %}  {% if a != b %}  {% if a < b %}  {% if a > b %}
{% if a <= b %}  {% if a >= b %}

{# Mantıksal #}
{% if a and b %}  {% if a or b %}  {% if not a %}

{# Diğer #}
{% if a in b %}                  {# İçinde mi? #}
{% if a is defined %}            {# Tanımlı mı? #}
{% if a is null %}               {# Null mı? #}
{% if a is empty %}              {# Boş mu? #}
{% if a starts with 'test' %}    {# İle başlıyor mu? #}
{% if a ends with 'test' %}      {# İle bitiyor mu? #}
{% if a matches '/regex/' %}     {# Regex eşleşmesi #}

Kontrol Yapıları​

{# If/Else #}
{% if kullanici_giris %}
    Hoşgeldin!
{% elseif misafir %}
    Lütfen giriş yapın
{% else %}
    Kayıt olun
{% endif %}

{# For Döngüsü #}
{% for urun in urunler %}
    {{ loop.index }}. {{ urun.isim }}
    {% if loop.first %}İlk ürün{% endif %}
    {% if loop.last %}Son ürün{% endif %}
{% else %}
    Ürün bulunamadı
{% endfor %}

{# Set - Değişken Tanımlama #}
{% set isim = 'serB2B' %}
{% set sayilar = [1, 2, 3] %}
{% set bilgi = {'ad': 'Test', 'soyad': 'Kullanıcı'} %}

Include ve Extend​

{# Template dahil etme #}
{% include 'header.twig' %}
{% include 'widget.twig' with {'parametre': deger} %}
{% include 'footer.twig' ignore missing %}

{# Template kalıtımı #}
{% extends 'layouts/base.twig' %}

{% block content %}
    Sayfa içeriği
{% endblock %}

Mevcut Template'lerde Kullanılan Örnekler​

Basic tema içinde sıkça kullanılan Twig yapıları:

{# Koşullu widget yükleme #}
{% if theme_config('brands_slider_active') %}
    {% include 'widgets/brands_slider.twig.php' %}
{% endif %}

{# Ürün döngüsü #}
{% for product in products %}
    <div class="col-md-3">
        {{ include('_product_card.twig.php', {'product': product}) }}
    </div>
{% else %}
    {% include 'no_records.twig.php' %}
{% endfor %}

{# Güvenli değişken kullanımı #}
{{ product.title | default('İsimsiz Ürün') }}
{{ product.description | default('&nbsp;') | raw }}

{# Döngü özellikleri #}
{% for item in items %}
    {% if loop.index % 4 == 1 %}
        <div class="row">
    {% endif %}
    
    {# İçerik #}
    
    {% if loop.index % 4 == 0 or loop.last %}
        </div>
    {% endif %}
{% endfor %}

Sonraki Adımlar​

📚 Detaylı Dokümantasyon​

Twig'in serB2B'ye özel fonksiyonları, filtreleri ve değişkenleri için:

➡️ Template Sistemi Dokümantasyonu - serB2B özel Twig fonksiyonları, global değişkenler, filtreler ve detaylı kullanım örnekleri

🗂️ Template Dosyaları​

Mevcut template dosyalarının ne işe yaradığı ve nasıl kullanıldığı için:

➡️ Template View Dosyaları Referansı - Tüm view dosyalarının detaylı açıklamaları ve kod örnekleri

🛠️ Geliştirme İpuçları​

  1. Önce Basic tema'yı inceleyin - Tüm temel yapılar burada
  2. Widget'ları öğrenin - Modüler bileşenler için widgets/ klasörü
  3. Layout yapısını anlayın - layouts/theme.twig.php master template
  4. Değişkenleri test edin - {{ dump(degisken) }} ile debug yapın
  5. Cache'i temizleyin - Template değişikliklerinin görünmesi için

Bu kılavuz, Twig template engine'i ve serB2B tema sistemi hakkında temel bilgiler sağlar. Detaylı bilgi için yukarıdaki dokümantasyon linklerini takip edin.