# Content Blocks

Bu bölümde projede kullanılan tüm Content Block'lar detaylı olarak açıklanmaktadır.

## 📋 Mevcut Content Block'lar

1. [Hero Section](hero-section.md) - Etkileyici hero bölümleri için tam özellikli bileşen
2. [Text & Image](text-image.md) - Metin ve görsel kombinasyonları için esnek bileşen

## 🎨 Content Block Yapısı

Her Content Block aşağıdaki standart yapıya sahiptir:

```
ContentBlock/
├── config.yaml              # Alan tanımları ve yapılandırma
├── assets/
│   └── icon.svg            # Backend için ikon
├── language/
│   └── labels.xlf          # Çeviri dosyası
└── templates/
    ├── frontend.html       # Frontend görünümü
    └── backend-preview.html # Backend önizleme
```

## 🔧 Ortak Özellikler

Tüm Content Block'larda ortak olan özellikler:

### Appearance Settings

Her Content Block, TYPO3'ün standart görünüm ayarlarına sahiptir:

- **Layout**: Farklı layout varyasyonları
- **Frame Class**: CSS sınıfları
- **Space Before/After**: Boşluk ayarları

### Backend Preview

Tüm bileşenler backend'de görsel preview desteği sunar:

- Başlık ve içerik önizlemesi
- Görsel önizlemeleri
- Yapılandırma özeti

### Responsive Tasarım

Tüm bileşenler responsive tasarıma sahiptir:

- Mobil öncelikli yaklaşım
- Tablet ve desktop optimizasyonu
- Esnek layout sistemleri

## 📝 Yeni Content Block Ekleme

Yeni bir Content Block eklemek için:

1. **Klasör Yapısını Oluşturun**:

```bash
packages/my_site_package/ContentBlocks/ContentElements/[block-name]/
```

2. **config.yaml Oluşturun**:

```yaml
name: my-site/[block-name]
group: common
title: Block Title
description: Block description
icon: content-icon-name
prefixFields: false

fields:
  # Alan tanımlarınız
```

3. **Templates Oluşturun**:

- `templates/frontend.html` - Frontend görünümü
- `templates/backend-preview.html` - Backend önizleme

4. **Çeviri Dosyası Ekleyin**:

- `language/labels.xlf`

5. **İkon Ekleyin**:

- `assets/icon.svg`

## 🎯 Alan Tipleri

Content Blocks'ta kullanılabilir alan tipleri:

### Temel Alanlar

- **Text**: Tek satırlık metin
- **Textarea**: Çok satırlık metin
- **Number**: Sayısal değerler
- **Email**: Email adresleri
- **Link**: Link/URL alanları

### Medya Alanları

- **File**: Dosya yükleme
- **Image**: Görsel yükleme (File'ın özelleştirilmiş hali)

### Seçim Alanları

- **Select**: Açılır menü
- **Checkbox**: Onay kutusu
- **Radio**: Radyo butonları

### Yapısal Alanlar

- **Palette**: Alanları gruplandırma
- **Collection**: Tekrarlayan alan grupları
- **Relation**: Diğer kayıtlarla ilişki

### Özel Alanlar

- **Color**: Renk seçici
- **DateTime**: Tarih/saat seçici
- **Category**: Kategori seçimi

## 🔄 Mevcut Alanları Yeniden Kullanma

TYPO3'ün standart `tt_content` alanlarını kullanmak için:

```yaml
fields:
  - identifier: header
    useExistingField: true

  - identifier: bodytext
    useExistingField: true
    enableRichtext: true

  - identifier: image
    useExistingField: true
```

## 📚 Daha Fazla Bilgi

- [TYPO3 Content Blocks Dokümantasyonu](https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/)
- [Field Types Reference](https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/)
