Wie man ein Template für die neuesten Nachrichten in TYPO3 EXT:news erstellt

Das bedeutet in der Regel, dass nur wenige aktuelle Datensätze mit einem anderen Layout als in der Hauptnachrichtenliste angezeigt werden. Um dies umzusetzen, müssen Sie die Plugin-Einstellungen konfigurieren, ein benutzerdefiniertes Template-Layout registrieren und ein eigenes Fluid-Partial aus Ihrem Site-Package laden.

Dieser Leitfaden erklärt die vollständige Einrichtung Schritt für Schritt, einschließlich Sortierung, Begrenzung der Datensätze, Template-Overrides und häufiger Probleme, die verhindern können, dass das benutzerdefinierte Layout angezeigt wird.

Was Sie erstellen werden

Am Ende dieses Tutorials verfügen Sie über ein benutzerdefiniertes Neueste-Nachrichten-Template für die TYPO3-EXT-Extension, das Redakteure direkt im News-Plugin auswählen können. Mit diesem Ansatz können Sie aktuelle Nachrichten mit einem eigenen Layout anzeigen, während das standardmäßige Listen-Template unverändert bleibt.

Das Endergebnis umfasst:

• Einen benutzerdefinierten Neueste-Nachrichten-Block mit einem eigenen visuellen Layout (Screenshot hier hinzufügen)
• Eine konfigurierbare Anzahl angezeigter Nachrichtenartikel
• Automatische Sortierung, bei der die neuesten Artikel zuerst angezeigt werden
• Ein benutzerdefiniertes Fluid-Template und Partial für das Layout der neuesten Nachrichten
• Direkte Links von jedem Nachrichteneintrag zu seiner Detailseite
• Ein responsives Layout, das auf Desktop-, Tablet- und Mobilgeräten funktioniert

Bevor Sie mit der Konfiguration beginnen, werfen Sie einen Blick auf den fertigen Neueste-Nachrichten-Block. Wenn Sie zuerst das Endergebnis sehen, erhalten Sie ein klares Verständnis davon, was Sie erstellen werden und wie die fertige Implementierung aussehen sollte.

Anforderungen und Versionskompatibilität

Bevor Sie ein benutzerdefiniertes Neueste-Nachrichten-Layout erstellen, stellen Sie sicher, dass Ihr TYPO3-Projekt eine kompatible Version von TYPO3 und EXT verwendet und dass die erforderliche News-Konfiguration bereits eingerichtet ist.

Unterstützte TYPO3- und EXT

Hinweis: EXT 14 unterstützt TYPO3 13–14 und PHP 8.2–8.5.

Was bereits konfiguriert sein muss

Bevor Sie ein EXT-benutzerdefiniertes Template implementieren, überprüfen Sie, ob die folgenden Voraussetzungen erfüllt sind:

• EXT ist installiert und konfiguriert.
• Ein Speicherordner (Storage PID) für Nachrichtendatensätze ist vorhanden.
• Beispiel-Nachrichtendatensätze wurden zu Testzwecken erstellt.
• Eine News-Detailseite ist konfiguriert und mit dem News-Plugin verknüpft.
• Ein benutzerdefiniertes Site-Package zum Speichern von Fluid-Templates, Partials und TypoScript ist vorhanden.
• Redakteuren und Administratoren sind die entsprechenden Backend-Berechtigungen zugewiesen.

Wenn diese Voraussetzungen erfüllt sind, lässt sich eine TYPO3-News-Template-Überschreibung unkompliziert implementieren, ohne die EXT-Extension selbst zu verändern. Dieser Ansatz sorgt dafür, dass Ihre Implementierung wartbar, upgradefreundlich und in Zukunft problemlos um weitere benutzerdefinierte Layouts erweiterbar bleibt.

So funktioniert die Einrichtung der neuesten Nachrichten.

Das Erstellen eines benutzerdefinierten Neueste-Nachrichten-Layouts in EXT umfasst vier einfache Ebenen, die zusammenarbeiten. Jede Ebene hat eine bestimmte Aufgabe, wodurch die Implementierung einfach zu warten und zu erweitern ist.

1. Das News-Plugin ruft die neuesten Datensätze ab.
   Das News-List-Plugin fragt den konfigurierten Speicherordner ab und zeigt die neuesten Nachrichteneinträge basierend auf den ausgewählten Sortier- und Filteroptionen an.
2. Page TSConfig fügt ein auswählbares Layout hinzu.
   Ein benutzerdefiniertes Template-Layout wird in Page TSConfig registriert und dadurch als auswählbare Option im News-Plugin verfügbar gemacht.
3. Fluid prüft das ausgewählte Layout.
   Das List-Template wertet das ausgewählte Template-Layout aus und entscheidet, welches Partial gerendert werden soll.
4. Ein benutzerdefiniertes Partial steuert die HTML-Ausgabe.
   Ein eigenes Fluid-Partial enthält das benutzerdefinierte HTML und Markup für den Neueste-Nachrichten-Block, während das Standardlayout unverändert bleibt.

Template vs. Layout vs. Partial

Schritt 1: Das News-Plugin für die Anzeige der neuesten Datensätze konfigurieren

Bevor Sie ein benutzerdefiniertes Template-Layout erstellen, konfigurieren Sie das News-List-Plugin so, dass die richtigen Datensätze abgerufen werden. Dadurch wird sichergestellt, dass Ihre TYPO3-Liste der neuesten Nachrichten die neuesten Inhalte anzeigt, bevor benutzerdefinierte Fluid-Templates angewendet werden.

Konfigurieren Sie das News-Plugin wie folgt:

• Wählen Sie das News List Plugin aus.
• Wählen Sie den richtigen Speicherordner (Storage PID).
• Sortieren Sie die Datensätze nach dem Feld „News-Datum“ (datetime).
• Verwenden Sie die Sortierreihenfolge absteigend, damit die neuesten Artikel zuerst angezeigt werden.
• Legen Sie die gewünschte Anzahl der angezeigten Datensätze fest.
• Deaktivieren Sie die Paginierung für Nachrichtenblöcke auf der Startseite oder Landingpage.
• Wählen Sie die News-Detailseite aus.
• Wenden Sie eine Kategoriefilterung an, wenn nur bestimmte Nachrichtenkategorien angezeigt werden sollen.

Empfohlene Einstellungen für die Startseite

Optionale TypoScript-Konfiguration

Wenn Sie die TYPO3-Liste der neuesten Nachrichten lieber vollständig über TypoScript verwalten möchten, anstatt Redakteuren die Änderung der Plugin-Einstellungen zu ermöglichen, können Sie die Plugin-Standardwerte in TypoScript konfigurieren.

plugin.tx_news.settings {
  list {
      paginate {
          itemsPerPage = 5
          insertAbove = 0
          insertBelow = 0
      }
  }

  orderBy = datetime
  orderDirection = desc
  startingpoint = {$plugin.tx_news.storagePid}
  detailPid = {$plugin.tx_news.detailPid}
}

Die Verwendung von TypoScript für diese Einstellungen hilft dabei, konsistente Nachrichtenlisten auf mehreren Seiten beizubehalten und gleichzeitig das Risiko von Konfigurationsänderungen im Backend zu reduzieren.

Schritt 2: Das Layout für die neuesten Nachrichten mit Page TSConfig hinzufügen

Sobald das News-Plugin so konfiguriert ist, dass die neuesten Datensätze angezeigt werden, besteht der nächste Schritt darin, ein benutzerdefiniertes Template-Layout zu registrieren. Dadurch wird Ihr neuestes Nachrichten-Layout als auswählbare Option im News-Plugin verfügbar.

Ein benutzerdefiniertes Template-Layout registrieren

Fügen Sie Ihrer Website die folgende Page-TSConfig hinzu.

tx_news.templateLayouts {
   10 = Latest News Layout
}

Im Gegensatz zum TypoScript-Setup erweitert Page TSConfig das TYPO3-Backend. Es wird verwendet, um Redakteuren zusätzliche Konfigurationsoptionen bereitzustellen, beispielsweise benutzerdefinierte Template-Layouts.

Sie können diese Konfiguration an einem der folgenden Orte hinzufügen:

• Im Page TSConfig Ihres Site Package
• In einer separaten Page-TSConfig-Datei
• Im Page TSConfig der Root-Seite (für größere Projekte nicht empfohlen)

Einen numerischen Layout-Bezeichner verwenden

Die aktuelle EXT-Implementierung empfiehlt die Verwendung numerischer Bezeichner statt Textschlüsseln.

tx_news.templateLayouts {
   10 = Latest News Layout
   20 = Featured News Layout
}

Numerische Bezeichner bieten einen stabilen Wert, auf den in Ihren Fluid-Templates verwiesen werden kann.

Optionales XLIFF-Übersetzungslabel

Für mehrsprachige TYPO3-Backends verwenden Sie anstelle von fest codiertem Text ein XLIFF-Label.

tx_news.templateLayouts {
   10 = LLL:EXT:site_package/Resources/Private/Language/locallang_be.xlf:news.templateLayout.latest
}

Dadurch kann das Label des Template-Layouts automatisch entsprechend der Backend-Sprache des Redakteurs übersetzt werden.

Page TSConfig vs. TypoScript Setup

Prüfen, ob das Layout verfügbar ist

Nachdem Sie den TYPO3-Cache geleert haben, öffnen Sie Ihr News-Plugin und navigieren Sie zu:

Inhaltselement → Plugin → News → Template → Template-Layout

Das Dropdown-Menü sollte nun Folgendes enthalten:

Latest News Layout

Wählen Sie die Option aus und speichern Sie das Inhaltselement.

Warum fehlt mein EXT Template-Layout?

Wenn das Layout nicht angezeigt wird, prüfen Sie Folgendes:Die 

• Page TSConfig wurde korrekt geladen.
• Die TYPO3-Caches wurden geleert.
• Sie bearbeiten ein News-List-Plugin.
• Die Page TSConfig ist dem aktuellen Seitenbaum zugeordnet.
• Ihr TSConfig enthält keine Syntaxfehler.

Schritt 3: Ein sicheres EXT:news Template-Override erstellen

Ändern Sie niemals die Originaldateien innerhalb von EXT:news. Überschreiben Sie stattdessen Templates aus Ihrem eigenen Projekt oder Site Package. Dieser Ansatz hält Ihre Implementierung upgrade-sicher und stellt sicher, dass zukünftige Updates der Extension Ihre Anpassungen nicht überschreiben.

Bearbeiten Sie nicht die Originaldateien von EXT:news

Die Dateien unter:

EXT:news/Resources/Private/

sollten immer als schreibgeschützt betrachtet werden.

Wenn Sie diese Dateien direkt ändern, können Ihre Anpassungen bei jedem Extension-Update überschrieben werden.

Platzieren Sie stattdessen alle benutzerdefinierten Templates in Ihrem eigenen Site Package.

Empfohlene Ordnerstruktur des Site Packages

site_package/
└── Resources
   └── Private
       ├── Layouts
       │   └── News
       ├── Partials
       │   └── News
       │       └── List
       │           ├── Item.html
       │           └── LatestNews.html
       └── Templates
           └── News
               ├── List.html
               └── Detail.html

Das Zusammenhalten von Templates, Layouts und Partials in Ihrem Site Package macht die Wartung deutlich einfacher.

Template-, Partial- und Layout-Pfade konfigurieren

Konfigurieren Sie EXT:news so, dass Ihre Projekt-Templates vor den Standard-Templates der Extension verwendet werden.

plugin.tx_news {
   view {
       templateRootPaths {
           10 = EXT:site_package/Resources/Private/Templates/News/
       }

       partialRootPaths {
           10 = EXT:site_package/Resources/Private/Partials/News/
       }

       layoutRootPaths {
           10 = EXT:site_package/Resources/Private/Layouts/News/
       }
   }
}

Wenn Sie TYPO3 Site Sets verwenden, konfigurieren Sie die entsprechenden View-Pfade innerhalb Ihres Site Sets, anstatt sie direkt in Ihrem TypoScript Setup zu hinterlegen.

Weitere Informationen zum Überschreiben von Templates finden Sie in der offiziellen EXT:news-Dokumentation.

Pfadpriorität überprüfen

TYPO3 wertet Root-Pfade entsprechend ihrer Priorität aus.

Ihr projektspezifisches Override sollte immer die höchste Priorität haben, damit TYPO3 Ihre benutzerdefinierten Templates vor den Standard-Templates von EXT:news lädt.

Dadurch wird sichergestellt, dass Ihr benutzerdefiniertes neueste-Nachrichten-Template gerendert wird, ohne die Extension selbst zu verändern.

Schritt 4: Das Template-Layout im News-Plugin auswählen

Nachdem Sie das benutzerdefinierte Layout registriert und Ihr Template-Override konfiguriert haben, weisen Sie das Layout dem News-Plugin zu.

Öffnen Sie das News List Inhaltselement und navigieren Sie zu:

Inhaltselement → Plugin → News → Template → Template-Layout

Wählen Sie:

Latest News Layout

Speichern Sie das Inhaltselement.

Nach dem Speichern übergibt TYPO3 das ausgewählte Template-Layout an Ihr Fluid-Template, sodass Ihre bedingte Rendering-Logik das LatestNews.html Partial anstelle des Standard-Item.html Partials laden kann.

Wenn das neue Layout nicht sofort sichtbar ist:

• Löschen Sie alle TYPO3-Caches.
• Laden Sie das Backend neu.
• Öffnen Sie das News-Inhaltselement bei Bedarf erneut.

Sobald das Layout ausgewählt ist, können Sie im nächsten Schritt die benutzerdefinierte Fluid-Rendering-Logik implementieren.

Schritt 5: Das EXT:news Fluid List Template aktualisieren

Nachdem das Template-Layout im News-Plugin registriert und ausgewählt wurde, besteht der letzte Schritt darin, das Fluid-Template zu aktualisieren, damit es Ihr benutzerdefiniertes Partial rendert, sobald das neueste Nachrichten-Layout ausgewählt ist.

Das Standard-List-Template kopieren

Bearbeiten Sie nicht das originale Template, das von EXT:news bereitgestellt wird. Kopieren Sie stattdessen das Standard-Template in Ihr Site Package.

Quelle

EXT:news/Resources/Private/Templates/News/List.html

Ziel

EXT:site_package/Resources/Private/Templates/News/List.html

Die Arbeit mit Ihrem eigenen Site Package stellt sicher, dass zukünftige EXT:news Updates Ihre Anpassungen nicht überschreiben.

settings.templateLayout überprüfen

Da das Template-Layout mit einem numerischen Bezeichner registriert wurde, vergleichen Sie den ausgewählten Wert mithilfe dieses Bezeichners.

<f:if condition="{settings.templateLayout} == 10">
   <f:then>
       <f:render
           partial="List/LatestNews"
           arguments="{news: news, settings: settings, className: className}" />
   </f:then>

   <f:else>
       <f:for each="{news}" as="newsItem">
           <f:render
               partial="List/Item"
               arguments="{newsItem: newsItem, settings: settings, className: className, view: 'list'}" />
       </f:for>
   </f:else>
</f:if>

Das Latest News Partial rendern

Halten Sie die bedingte Logik einfach, indem Sie ein eigenes Partial rendern.

Anstatt das gesamte HTML innerhalb der <f:if> Anweisung zu platzieren, verschieben Sie das benutzerdefinierte Markup nach:

Partials/News/List/LatestNews.html

Dadurch bleibt das List Template übersichtlich und zukünftige Layoutänderungen werden deutlich einfacher.

Das Standard List Layout beibehalten

Behalten Sie immer das Standard-Item-Partial im Fallback-Zweig bei.

Wenn ein anderes Template-Layout – oder gar kein Layout – ausgewählt ist, funktioniert die standardmäßige EXT:news Listen-Darstellung weiterhin ohne zusätzliche Änderungen.

Ein No-News-Fallback hinzufügen

Behandeln Sie den Fall, dass keine News-Datensätze verfügbar sind, indem Sie eine klare Meldung für den leeren Zustand anzeigen.

<f:if condition="{news}">
   <f:then>

       <f:if condition="{settings.templateLayout} == 10">
           <f:then>
               <f:render
                   partial="List/LatestNews"
                   arguments="{news: news, settings: settings}" />
           </f:then>

           <f:else>
               <f:for each="{news}" as="newsItem">
                   <f:render
                       partial="List/Item"
                       arguments="{newsItem: newsItem, settings: settings, className: className, view: 'list'}" />
               </f:for>
           </f:else>

       </f:if>

   </f:then>

   <f:else>
       <p class="news-empty">
           No news articles are available at the moment.
       </p>
   </f:else>

</f:if>

Dieser Ansatz hält Ihre Implementierung modular und bietet gleichzeitig einen sauberen Fallback, wenn keine News-Datensätze vorhanden sind.

Schritt 6: Das LatestNews.html Partial erstellen

Das LatestNews.html Partial ist für das Frontend-Markup Ihres benutzerdefinierten Neueste-Nachrichten-Blocks verantwortlich. Es sollte nur das HTML enthalten, das für das benutzerdefinierte Layout erforderlich ist, während alle Rendering-Entscheidungen im List Template verbleiben.

Ein gut gestaltetes Partial umfasst typischerweise:

• Artikel-Wrapper
• Semantische Überschriftenstruktur
• Nachrichtentitel
• Veröffentlichungsdatum
• Teaser-Text
• Vorschaubild
• Link zur Detailseite
• Optionales Kategorie-Label
• "Alle Nachrichten anzeigen" Link
• Barrierefreier Linktext
• Aussagekräftiger alternativer Bildtext
• Fallback, wenn kein Vorschaubild vorhanden ist

Empfohlene HTML-Struktur

Das folgende Beispiel bietet einen sauberen und barrierefreien Ausgangspunkt.

<section class="latest-news">

   <f:for each="{news}" as="newsItem">

       <article class="latest-news__item">

           <f:if condition="{newsItem.falMedia}">
               <f:then>
                   <f:image
                       image="{newsItem.falMedia.0}"
                       alt="{newsItem.title}"
                       class="latest-news__image" />
               </f:then>

               <f:else>
                   <div class="latest-news__image-placeholder">
                       No preview image available
                   </div>
               </f:else>
           </f:if>

           <div class="latest-news__content">

               <f:if condition="{newsItem.categories}">
                   <span class="latest-news__category">
                       {newsItem.categories.0.title}
                   </span>
               </f:if>

               <h2 class="latest-news__title">
                   <f:link.action
                       action="detail"
                       arguments="{news: newsItem}"
                       title="Read more about {newsItem.title}">
                       {newsItem.title}
                   </f:link.action>
               </h2>

               <time datetime="{newsItem.datetime -> f:format.date(format:'Y-m-d')}">
                   <f:format.date format="F j, Y">
                       {newsItem.datetime}
                   </f:format.date>
               </time>

               <p class="latest-news__teaser">
                   {newsItem.teaser}
               </p>

           </div>

       </article>

   </f:for>

   <p class="latest-news__all">
       <a href="/news/" aria-label="View all news articles">
           View all news
       </a>
   </p>

</section>

Das Markup barrierefrei halten

Beim Erstellen eines benutzerdefinierten Latest News Templates sollten Sie grundlegende Best Practices für Barrierefreiheit befolgen:

• Verwenden Sie semantische Elemente wie <section> und <article>.
• Halten Sie die Überschriftenhierarchie konsistent mit der umgebenden Seite.
• Stellen Sie sicher, dass jeder News-Link sein Ziel eindeutig beschreibt.
• Stellen Sie aussagekräftige alt-Texte für Vorschaubilder bereit.
• Zeigen Sie einen Fallback an, wenn kein Vorschaubild verfügbar ist.
• Stellen Sie sicher, dass alle interaktiven Elemente per Tastatur bedienbar sind.
• Verwenden Sie beschreibende Linktexte wie "Alle Nachrichten anzeigen" anstelle von allgemeinen Bezeichnungen wie "Hier klicken."

Die Befolgung dieser Vorgehensweisen verbessert die Benutzerfreundlichkeit für alle Besucher und unterstützt gleichzeitig eine bessere Barrierefreiheit und SEO.

Schritt 7: Responsives Styling hinzufügen

Nachdem Sie das LatestNews.html Partial erstellt haben, fügen Sie responsives Styling hinzu, um sicherzustellen, dass der Neueste-Nachrichten-Block auf Desktops, Tablets und Mobilgeräten einheitlich dargestellt wird.

Ein responsives Layout verbessert die Lesbarkeit und hält das Design gleichzeitig flexibel für unterschiedliche Bildschirmgrößen.

Empfohlene CSS-Struktur

Organisieren Sie Ihr CSS mit wiederverwendbaren Klassennamen, die die Komponente und ihre Elemente klar voneinander trennen.

.latest-news
.latest-news__grid
.latest-news__item
.latest-news__image
.latest-news__content
.latest-news__category
.latest-news__title
.latest-news__date
.latest-news__teaser
.latest-news__link

Grid-Verhalten

Verwenden Sie CSS Grid oder Flexbox, um ein flexibles Layout zu erstellen.

• Zeigen Sie mehrere News-Karten auf größeren Bildschirmen an.
• Reduzieren Sie die Anzahl der Spalten, wenn die Bildschirmgröße kleiner wird.
• Ermöglichen Sie den Karten, sich ohne feste Breiten natürlich zu vergrößern.

Seitenverhältnis von Bildern

Verwenden Sie ein einheitliches Seitenverhältnis für Vorschaubilder, um ein gleichmäßiges Layout zu erstellen.

Zum Beispiel:

• 16:9
• 4:3
• 1:1

Wenden Sie object-fit: cover an, damit Bilder den verfügbaren Bereich ohne Verzerrung ausfüllen.

Mobile Stapelung

Auf kleineren Bildschirmen:

• Verwenden Sie ein einspaltiges Layout.
• Platzieren Sie das Bild über dem Inhalt.
• Erhöhen Sie den Abstand zwischen News-Elementen für eine bessere Lesbarkeit.
• Stellen Sie sicher, dass Texte ohne horizontales Scrollen lesbar bleiben.

Fokus-Zustände

Interaktive Elemente sollten für Tastaturbenutzer weiterhin zugänglich sein.

Stellen Sie sichtbare Fokus-Stile bereit für:

• News-Detail-Links
• "Alle Nachrichten anzeigen" Link
• Alle interaktiven Schaltflächen

Vermeiden Sie das Entfernen des standardmäßigen Fokusrahmens des Browsers, außer er wird durch eine ebenso sichtbare Alternative ersetzt.

Feste Höhen vermeiden

Vermeiden Sie es, Karten oder Inhaltsbereiche mit festen Höhen zu versehen.

Ermöglichen Sie stattdessen, dass sich jedes News-Element entsprechend folgenden Faktoren natürlich erweitert:

• Länge des Titels
• Länge des Teaser-Texts
• Verfügbarkeit des Bildes

Dies verhindert, dass Inhalte abgeschnitten werden.

Layout-Verschiebungen verhindern

Um Layout-Verschiebungen während des Seitenladens zu reduzieren:

• Reservieren Sie Platz für Vorschaubilder mithilfe eines festen Seitenverhältnisses.
• Definieren Sie Bildabmessungen, wann immer möglich.
• Halten Sie konsistente Abstände zwischen Elementen ein.
• Laden Sie Bilder responsiv.

Diese Maßnahmen tragen zu einer reibungsloseren Benutzererfahrung bei und verbessern die Core Web Vitals.

Erwartetes Desktop-Ergebnis

Fügen Sie einen Screenshot des fertigen Neueste-Nachrichten-Blocks ein, der in einem mehrspaltigen Desktop-Layout dargestellt wird.

Vorgeschlagene Bildunterschrift:
Desktop-Ansicht des benutzerdefinierten Neueste-Nachrichten-Layouts mit responsiven Karten, Vorschaubildern, Veröffentlichungsdaten und Links zu den vollständigen Nachrichtenartikeln.

Erwartetes mobiles Ergebnis

Fügen Sie einen Screenshot des Neueste-Nachrichten-Blocks ein, der auf einem Mobilgerät mit gestapelten News-Karten dargestellt wird.

Vorgeschlagene Bildunterschrift:
Mobile Ansicht des neuesten Nachrichten-Layouts mit vertikal angeordneten Artikeln, responsiven Bildern und benutzerfreundlicher Navigation für Touch-Geräte.

Hinweis: Halten Sie wichtige Erklärungen, Bildunterschriften und Implementierungsdetails als HTML-Text bereit, anstatt sie nur in Screenshots einzubetten. Dadurch wird sichergestellt, dass Suchmaschinen und KI-gestützte Suchsysteme die Inhalte crawlen und verstehen können.

Schritt 8: Caches löschen und Ergebnis testen

Bevor Sie Ihre Implementierung veröffentlichen, überprüfen Sie, ob jeder Teil des benutzerdefinierten Neueste-Nachrichten-Layouts wie erwartet funktioniert.

Verwenden Sie die folgende Checkliste während des Tests:

• Löschen Sie alle TYPO3-Caches.
• Laden Sie das TYPO3-Backend neu.
• Bestätigen Sie, dass das Neueste Nachrichten-Layout im Template-Layout-Auswahlfeld angezeigt wird.
• Überprüfen Sie, dass News-Artikel vom neuesten zum ältesten sortiert sind.
• Stellen Sie sicher, dass die konfigurierte maximale Anzahl an News-Einträgen angezeigt wird.
• Überprüfen Sie, dass das benutzerdefinierte LatestNews.html Partial gerendert wird.
• Testen Sie, dass jeder News-Eintrag auf die richtige Detailseite verlinkt.
• Überprüfen Sie, dass die Meldung für den leeren Zustand angezeigt wird, wenn keine News-Datensätze verfügbar sind.
• Testen Sie das Layout auf Desktop-, Tablet- und Mobilgeräten.
• Stellen Sie sicher, dass das Standard-News-List-Layout weiterhin korrekt funktioniert, wenn das benutzerdefinierte Template-Layout nicht ausgewählt ist.

Durch diese Prüfungen stellen Sie sicher, dass Ihr benutzerdefiniertes EXT:news Template korrekt funktioniert, upgrade-sicher bleibt und eine konsistente Benutzererfahrung über verschiedene Geräte und Inhaltsszenarien hinweg bietet.

Häufige Probleme mit EXT:news Templates

Auch bei einer korrekten Implementierung können kleine Konfigurationsprobleme dazu führen, dass Ihr benutzerdefiniertes Latest News Template nicht wie erwartet funktioniert. Die folgende Fehlerbehebungsanleitung behandelt die häufigsten Probleme und deren Lösungen.

Template Layout ist nicht sichtbar

Direkte Lösung: Überprüfen Sie, ob das Page TSConfig für den aktuellen Seitenbaum geladen wurde, löschen Sie anschließend alle TYPO3-Caches und laden Sie das Backend neu.

Wenn das benutzerdefinierte Template-Layout nicht im Dropdown-Menü Template-Layout angezeigt wird:

• Stellen Sie sicher, dass das Page TSConfig mit tx_news.templateLayouts der richtigen Seite oder dem richtigen Site Package zugewiesen ist.
• Überprüfen Sie Ihr TSConfig auf Syntaxfehler.
• Löschen Sie alle TYPO3-Caches.
• Laden Sie das TYPO3-Backend neu und öffnen Sie das News-Inhaltselement erneut.

Warum passiert das:
Template-Layouts werden über Page TSConfig registriert, nicht über TypoScript Setup. Wenn das TSConfig nicht geladen wird, kann TYPO3 die Layout-Option im Backend nicht anzeigen.

Das Standard-News-Partial wird weiterhin angezeigt

Direkte Lösung: Überprüfen Sie, ob der ausgewählte Template-Layout-Bezeichner mit der Fluid-Bedingung übereinstimmt und ob TYPO3 Ihr Template-Override lädt.

Überprüfen Sie Folgendes:

• Der registrierte numerische Layout-Bezeichner (zum Beispiel 10) stimmt mit dem ausgewählten Wert im News-Plugin überein.
• Ihre Fluid-Bedingung vergleicht denselben numerischen Bezeichner.
• Template-, Partial- und Layout-Root-Pfade verweisen auf Ihr Site Package.
• TYPO3-Caches wurden nach den Änderungen geleert.

Warum passiert das:
Wenn TYPO3 Ihr benutzerdefiniertes Template nicht finden kann oder der Layout-Bezeichner nicht übereinstimmt, rendert es automatisch das Standard-Item.html Partial.

Die Latest News Liste ist leer

Direkte Lösung: Überprüfen Sie, ob das News-Plugin so konfiguriert ist, dass die richtigen Datensätze abgerufen werden.

Überprüfen Sie folgende Einstellungen:

• Storage PID (Starting Point)
• Ausgeblendete oder gelöschte Datensätze
• Start- und Endzeitbeschränkungen
• Sprach-Overlays
• Kategorie-Filter
• Rekursive Speichertiefe
• Zugriffsberechtigungen

Warum passiert das:
Wenn keine Datensätze den konfigurierten Filtern entsprechen oder der Speicherordner falsch ist, liefert das News-Plugin ein leeres Ergebnis zurück.

News wird nicht zuerst mit den neuesten Einträgen sortiert

Direkte Lösung: Konfigurieren Sie das News-Plugin so, dass nach dem News-Datum in absteigender Reihenfolge sortiert wird.

Überprüfen Sie, dass:

• Das Feld Datum (datetime) für die Sortierung verwendet wird.
• orderBy korrekt konfiguriert ist.
• Die Sortierrichtung Absteigend (desc) eingestellt ist.
• Plugin-Einstellungen die erwartete Reihenfolge nicht überschreiben.

Warum passiert das:
Ein falsches Sortierfeld oder eine aufsteigende Sortierung führt dazu, dass ältere News-Artikel vor neueren Artikeln angezeigt werden.

Detail-Links öffnen die falsche Seite

Direkte Lösung: Überprüfen Sie die konfigurierte Detail Page und detailPid.

Überprüfen Sie, dass:

• Die News-Detailseite vorhanden ist.
• Das News-Detail-Plugin auf dieser Seite platziert ist.
• detailPid auf die richtige Seite verweist.
• Site Routing und Route Enhancers korrekt konfiguriert sind.

Warum passiert das:
Wenn TYPO3 die richtige Detailseite nicht auflösen kann, können generierte Links auf die falsche Stelle verweisen oder 404-Fehler erzeugen.

Änderungen verschwinden nach einem EXT:news Update

Direkte Lösung: Speichern Sie alle benutzerdefinierten Templates in Ihrem Site Package.

Ändern Sie niemals Dateien innerhalb von:

EXT:news/Resources/Private/

Platzieren Sie stattdessen Ihre Overrides in Ihrem Projekt, zum Beispiel:

EXT:site_package/Resources/Private/

Warum passiert das:
Extension-Updates ersetzen die Originaldateien innerhalb von EXT:news und überschreiben dadurch direkte Änderungen.

Die gleiche News erscheint zweimal

Direkte Lösung: Aktivieren Sie excludeAlreadyDisplayedNews, wenn mehrere News-Plugins auf derselben Seite verwendet werden.

Dies ist besonders nützlich bei der Anzeige von:

• Featured News
• Latest News
• Kategorie-basierte News
• Sidebar News

auf einer einzigen Seite.

Warum passiert das:
Jedes News-Plugin führt eine eigene Abfrage aus. Ohne den Ausschluss bereits angezeigter Datensätze kann derselbe Artikel in mehreren Listen erscheinen.

Alternative Methode: Ein benutzerdefiniertes TypoScript Flag verwenden

Die Verwendung des Template-Layout-Selektors ist der benutzerfreundlichste Ansatz für Redakteure, aber nicht die einzige Möglichkeit. Wenn Entwickler das Rendering vollständig über die Konfiguration steuern möchten, kann ein benutzerdefiniertes TypoScript Setting verwendet werden.

Ein benutzerdefiniertes Setting definieren

Erstellen Sie ein benutzerdefiniertes TypoScript-Flag.

plugin.tx_news.settings {
   isLatest = 1
}

Das Setting in Fluid prüfen

Werten Sie das benutzerdefinierte Setting in Ihrem Fluid-Template aus.

<f:if condition="{settings.isLatest}">
   <f:then>
       <f:render partial="List/LatestNews" arguments="{news: news}" />
   </f:then>
   <f:else>
       <f:render partial="List/Item" arguments="{news: news}" />
   </f:else>
</f:if>

Wann sollten Sie diesen Ansatz verwenden?

Ein benutzerdefiniertes TypoScript-Flag wird empfohlen, wenn:

• Das Layout immer von Entwicklern gesteuert werden soll.
• Redakteure das Layout nicht ändern sollen.
• Mehrere Websites verwenden dieselbe Implementierung.
• Das Rendering von projektspezifischer Logik hängt ab.

Der Template-Layout-Selektor bleibt die bessere Wahl, wenn Redakteure die Flexibilität benötigen, verschiedene Layouts direkt aus dem TYPO3-Backend auszuwählen.

EXT:news Latest Template Checkliste

Bevor Sie Ihre Implementierung veröffentlichen, überprüfen Sie, ob jeder der folgenden Schritte abgeschlossen wurde.

Checkliste:

• Kompatible EXT:news Version ist installiert
• Benutzerdefiniertes Site Package ist aktiv
• Latest News Plugin ist korrekt konfiguriert
• Numerischer Template-Layout-Bezeichner ist registriert
• Benutzerdefiniertes Template-Layout ist im News-Plugin ausgewählt
• Template-, Partial- und Layout-Root-Pfade sind konfiguriert
• Fluid-Bedingung prüft das ausgewählte Layout
• LatestNews.html Partial wurde erstellt
• TYPO3-Caches wurden geleert
• Frontend wurde auf Desktop-, Tablet- und Mobilgeräten getestet
• Standard News List Layout funktioniert weiterhin korrekt

Das Abschließen dieser Checkliste stellt sicher, dass Ihr benutzerdefiniertes EXT:news Template wartbar, upgrade-sicher und für den produktiven Einsatz bereit ist.

Fazit

Sie haben erfolgreich ein benutzerdefiniertes Latest News Layout für EXT:news konfiguriert, indem Sie:

• Das News List Plugin konfiguriert haben.
• Ein benutzerdefiniertes Template-Layout registriert haben.
• Die Standard-Templates in einem Site Package überschrieben haben.
• Ein benutzerdefiniertes Fluid-Partial erstellt haben.

Ihre Website sollte nun einen responsiven Latest-News-Block mit den neuesten Artikeln, einem benutzerdefinierten Layout und Links zu den Detailseiten anzeigen.

Um eine langfristige Wartbarkeit sicherzustellen, bewahren Sie Ihre Template-Overrides immer im Site Package auf und testen Sie Ihre Implementierung nach größeren TYPO3- oder EXT:news-Upgrades erneut.

Weitere Informationen finden Sie in der offiziellen EXT:news-Dokumentation.

Thema: Wie man ein Template für die neuesten Nachrichten in TYPO3 EXT:news erstellt.