# CSS/JS Dosya Dahil Etme

TYPO3 v13'te CSS ve JavaScript dosyalarını projeye dahil etmenin farklı yöntemlerini kapsar.

---

## Yöntem 1: TypoScript ile

Bu yöntemde CSS/JS dahil etme ayarları **Site Package** içindeki **page.typoscript** dosyasına eklenir (ör. `Configuration/Sets/SitePackage/TypoScript/page.typoscript`). `page.includeCSS`, `page.includeJS`, `page.includeJSFooter` vb. bu dosyada tanımlanır.

### CSS Dosyaları

```typoscript
page {
    # CSS dahil etme
    includeCSS {
        # Extension'dan CSS
        theme = EXT:my_site_package/Resources/Public/Css/theme.css
        theme.media = screen

        # public/ (document root) altındaki assets — PATH_site'a göre göreli yol
        assets_main = assets/css/output.css
        assets_main.media = screen

        # CDN'den CSS
        googleFonts = https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap
        googleFonts.external = 1

        # Koşullu CSS
        print = EXT:my_site_package/Resources/Public/Css/print.css
        print.media = print
    }

    # CSS lib (öncelikli yükleme)
    includeCSSLibs {
        tailwind = EXT:my_site_package/Resources/Public/Css/tailwind.css
        tailwind.forceOnTop = 1
    }
}
```

### JavaScript Dosyaları

```typoscript
page {
    # JS head'de
    includeJS {
        critical = EXT:my_site_package/Resources/Public/JavaScript/critical.js
    }

    # JS footer'da (önerilen)
    includeJSFooter {
        main = EXT:my_site_package/Resources/Public/JavaScript/main.js
        main.async = 1

        # public/assets altındaki build edilmiş JS (document root'a göre)
        assets_app = assets/js/app.js
        assets_app.defer = 1

        swiper = EXT:my_site_package/Resources/Public/JavaScript/swiper-bundle.min.js
        swiper.defer = 1
    }

    # JS lib (üçüncü parti)
    includeJSFooterlibs {
        jquery = https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
        jquery.external = 1
        jquery.disableCompression = 1
        jquery.excludeFromConcatenation = 1
    }
}
```

### Önemli Parametreler

| Parametre | Açıklama |
|-----------|----------|
| `external` | Dış kaynak (CDN) mı? |
| `async` | Asenkron yükleme |
| `defer` | Ertelenmiş yükleme |
| `forceOnTop` | En üste zorla |
| `media` | CSS media query |
| `disableCompression` | Sıkıştırmayı devre dışı bırak |
| `excludeFromConcatenation` | Birleştirmeden hariç tut |

---

## Yöntem 2: Fluid Asset ViewHelper (Önerilen — v13)

### Fluid Template'de

```html
<!-- CSS dosyası -->
<f:asset.css identifier="theme-styles"
             href="EXT:my_site_package/Resources/Public/Css/theme.css" />

<!-- JavaScript dosyası -->
<f:asset.script identifier="main-script"
                src="EXT:my_site_package/Resources/Public/JavaScript/main.js"
                defer="true" />

<!-- Inline CSS -->
<f:asset.css identifier="custom-inline">
    :root {
        --primary: #0078D4;
        --secondary: #2B579A;
    }
</f:asset.css>

<!-- Inline JavaScript -->
<f:asset.script identifier="init-script">
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Site yüklendi');
    });
</f:asset.script>

<!-- Öncelikli (head'de) -->
<f:asset.css identifier="critical-css"
             href="EXT:my_site_package/Resources/Public/Css/critical.css"
             priority="true" />

<!-- CDN kaynağı -->
<f:asset.script identifier="alpine"
                src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
                defer="true" />
```

---

## Yöntem 3: AssetCollector (PHP)

```php
<?php

declare(strict_types=1);

namespace MySite\SitePackage\EventListener;

use TYPO3\CMS\Core\Page\AssetCollector;

class AddAssetsListener
{
    public function __construct(
        private readonly AssetCollector $assetCollector,
    ) {}

    public function __invoke(): void
    {
        // CSS dosyası
        $this->assetCollector->addStyleSheet(
            'my-styles',
            'EXT:my_site_package/Resources/Public/Css/styles.css',
            ['media' => 'screen']
        );

        // JavaScript dosyası
        $this->assetCollector->addJavaScript(
            'my-script',
            'EXT:my_site_package/Resources/Public/JavaScript/main.js',
            ['defer' => 'defer']
        );

        // Inline JavaScript
        $this->assetCollector->addInlineJavaScript(
            'ga-init',
            "gtag('config', 'GA-XXXXXXX');",
            ['priority' => true]
        );
    }
}
```

---

## Sıkıştırma ve Birleştirme

```typoscript
# Production ortamda aktif et
config {
    compressCss = 1
    compressJs = 1
    concatenateCss = 1
    concatenateJs = 1
}
```

> **Not:** `concatenate` TYPO3 v13'te `compressor` ile birlikte çalışır. Harici dosyalar (`external = 1`) birleştirmeden hariç tutulur.

---

## public/assets kullanırken: İzinli path

`public/` altındaki `assets/` klasöründen CSS/JS dahil ediyorsanız, TYPO3 Frontend sadece belirli path’lere izin verir (`fileadmin/`, `uploads/`, `typo3temp/`, `_assets/` vb.). Bu yüzden **`assets/`** path’ini izinli listeye eklemeniz gerekir.

**config/system/settings.php** içinde `FE.addAllowedPaths` (virgülle ayrılmış, path’ler slash ile bitmeli):

```php
'FE' => [
    'addAllowedPaths' => 'assets/',
    // ...
],
```

Bu ayar olmadan `assets/css/...` veya `assets/js/...` dahil edilirken `InvalidFileException` alınır ve dosyalar sayfaya eklenmez.

---

## Cache

page.typoscript veya ayar değişikliklerinden sonra CSS/JS’in güncel haliyle yüklenmesi için cache’i temizleyin:

```bash
ddev typo3 cache:flush
```

---

## Kaynaklar

- [TYPO3 AssetCollector](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/Assets/)
- [TypoScript PAGE Properties](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/TopLevelObjects/Page.html)
