# News Extension: Özelleştirme

GeorgRinger/news extension'ının kurulumu, yapılandırması ve Fluid template'lerinin özelleştirilmesini kapsar.

---

## Kurulum

```bash
ddev composer require georgringer/news
ddev exec vendor/bin/typo3 extension:setup
ddev exec vendor/bin/typo3 cache:flush
```

---

## Temel Yapılandırma

### TypoScript

```typoscript
plugin.tx_news {
    view {
        templateRootPaths.10 = EXT:my_site_package/Resources/Private/Templates/News/
        partialRootPaths.10 = EXT:my_site_package/Resources/Private/Partials/News/
        layoutRootPaths.10 = EXT:my_site_package/Resources/Private/Layouts/News/
    }

    settings {
        # Detay sayfası PID
        detailPid = 5

        # Liste ayarları
        list {
            paginate {
                itemsPerPage = 10
                insertAbove = 0
                insertBelow = 1
            }
        }

        # Tarih formatı
        dateField = datetime
        
        # Resim ayarları
        media {
            image {
                maxWidth = 800
                maxHeight = 600
            }
        }

        # Link ayarları
        link {
            skipControllerAndAction = 1
        }
    }
}
```

---

## Template Özelleştirme

### Liste Görünümü

`Resources/Private/Templates/News/List.html`:

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:layout name="General" />

<f:section name="content">
    <div class="news-list">
        <f:if condition="{news}">
            <f:then>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <f:for each="{news}" as="newsItem">
                        <article class="news-card bg-white rounded-lg shadow-md overflow-hidden">
                            <!-- Resim -->
                            <f:if condition="{newsItem.firstPreview}">
                                <div class="news-image">
                                    <f:image image="{newsItem.firstPreview}"
                                             maxWidth="400" maxHeight="250"
                                             class="w-full h-48 object-cover" />
                                </div>
                            </f:if>

                            <div class="p-6">
                                <!-- Kategori -->
                                <f:if condition="{newsItem.firstCategory}">
                                    <span class="text-xs text-primary font-semibold uppercase">
                                        {newsItem.firstCategory.title}
                                    </span>
                                </f:if>

                                <!-- Başlık -->
                                <h3 class="text-xl font-bold mt-2 mb-2">
                                    <n:link newsItem="{newsItem}" settings="{settings}">
                                        {newsItem.title}
                                    </n:link>
                                </h3>

                                <!-- Tarih -->
                                <time class="text-sm text-gray-500 block mb-3">
                                    <f:format.date format="d.m.Y">{newsItem.datetime}</f:format.date>
                                </time>

                                <!-- Özet -->
                                <f:if condition="{newsItem.teaser}">
                                    <p class="text-gray-600 text-sm mb-4">
                                        <f:format.crop maxCharacters="150">{newsItem.teaser}</f:format.crop>
                                    </p>
                                </f:if>

                                <!-- Devamını Oku -->
                                <n:link newsItem="{newsItem}" settings="{settings}"
                                        class="text-primary font-medium hover:underline">
                                    Devamını Oku →
                                </n:link>
                            </div>
                        </article>
                    </f:for>
                </div>

                <!-- Sayfalama -->
                <f:render partial="List/Pagination" arguments="{pagination: pagination, pages: pages}" />
            </f:then>
            <f:else>
                <p class="text-gray-500 text-center py-12">Henüz haber bulunmuyor.</p>
            </f:else>
        </f:if>
    </div>
</f:section>

</html>
```

### Detay Görünümü

`Resources/Private/Templates/News/Detail.html`:

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:layout name="General" />

<f:section name="content">
    <article class="news-detail max-w-4xl mx-auto">
        <!-- Başlık -->
        <header class="mb-8">
            <f:if condition="{newsItem.firstCategory}">
                <span class="text-primary font-semibold text-sm uppercase">
                    {newsItem.firstCategory.title}
                </span>
            </f:if>

            <h1 class="text-4xl font-bold mt-2 mb-4">{newsItem.title}</h1>

            <div class="flex items-center text-gray-500 text-sm space-x-4">
                <time>
                    <f:format.date format="d F Y">{newsItem.datetime}</f:format.date>
                </time>
                <f:if condition="{newsItem.author}">
                    <span>| {newsItem.author}</span>
                </f:if>
            </div>
        </header>

        <!-- Ana Görsel -->
        <f:if condition="{newsItem.firstPreview}">
            <figure class="mb-8">
                <f:image image="{newsItem.firstPreview}" maxWidth="1200"
                         class="w-full rounded-lg" />
                <f:if condition="{newsItem.firstPreview.description}">
                    <figcaption class="text-sm text-gray-500 mt-2">
                        {newsItem.firstPreview.description}
                    </figcaption>
                </f:if>
            </figure>
        </f:if>

        <!-- İçerik -->
        <div class="prose prose-lg max-w-none">
            <f:format.html>{newsItem.bodytext}</f:format.html>
        </div>

        <!-- Etiketler -->
        <f:if condition="{newsItem.tags}">
            <div class="mt-8 flex flex-wrap gap-2">
                <f:for each="{newsItem.tags}" as="tag">
                    <span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm">
                        #{tag.title}
                    </span>
                </f:for>
            </div>
        </f:if>

        <!-- Geri Dönüş -->
        <div class="mt-12">
            <f:link.page pageUid="{settings.listPid}" class="text-primary hover:underline">
                ← Tüm Haberlere Dön
            </f:link.page>
        </div>
    </article>
</f:section>

</html>
```

---

## Routing Yapılandırması

`config/sites/main/config.yaml`:

```yaml
routeEnhancers:
  News:
    type: Extbase
    extension: News
    plugin: Pi1
    routes:
      -
        routePath: '/{news-title}'
        _controller: 'News::detail'
        _arguments:
          news-title: news
    defaultController: 'News::list'
    aspects:
      news-title:
        type: PersistedAliasMapper
        tableName: tx_news_domain_model_news
        routeFieldName: path_segment
```

---

## Kaynaklar

- [News Extension](https://docs.typo3.org/p/georgringer/news/main/en-us/)
- [News GitHub](https://github.com/georgringer/news)
