In diesem Wiki können Sie Informationen lesen, die Sie zum Bau einer Webseite auf Basis des Redaktionssystems TYPO3 brauchen.

• TypoScript zur Konfiguration von TYPO3
• Aufbau einer Navigation mit TypoScript in 3 Ebenen für Bootstrap
• Setzen und Auslesen von Werten über Constants
• Libs zur Einbindung in TYPO3 Webseite
• Codeschnipsel für die Entwicklung von TYPO3 Extensions mit Extbase und Fluid, der Aufbau von Templates und Partials; die Logik mit Iterationen und Conditions
• Beispiele für Aktionen und Funktionen für Controller und Repository
• JavaScript: Mehrere beispielhafte Konfigurationen für den Slick Slider
• jQuery für slidende Elemente und den Tausch von Layouts bei MouseOver Effekten
• Beispiele für CSS: Pfeile rein mit CSS, verzögerte Effekte und Grundbegriffe des Flex Layout
• Mehrere Methoden für Umleitungen mit der .htaccess Datei

TYPO3 bietet uns die Möglichkeit, Backend Layouts nicht nur über die Datenbank zu konfigurieren, sondern auch auch über Page TsConfig anzubinden. In der neuen Seite Backend Layout beschreiben wir Vorteile und Umsetzung dieser Technologie.

Die Möglichkeiten von Fluid in TYPO3 sind gewachsen. Ein weiteres Beispiel dafür ist der Asset Viewhelper, mit dem die Konfiguration von HEAD Angaben in Fluid Templates und Partials erfolgen können.

Mit der TYPO3 Version 12 gibt es die Möglichkeit eine Content Security Policy (CSP) einzurichten. Was eine CSP ist, wie sie vor XSS schützt und wie man sie mit TYPO3 und PHP einrichtet, erfahren Sie in diesem Artikel zur Einrichtung einer CSP mit TYPO3.

Die Precompiler SASS und LESS erlauben strukturiertes und einfacher wartbares CSS für eine TYPO3 Webseite zu schreiben. SEO durch weniger Netzwerkzugriffe und Datenreduzierung ist ein weiterer Punkt, warum man SASS bei TYPO3 ins Auge fassen sollte.

Der MenuProcessor im TYPO3 Core bietet neue Möglichkeiten, eine NavBar Navigation im Header, eine statische Navigation im Footer oder einen Language Selector als Sprachumschalter aufzubauen: Navigation mit Fluid Templates

Wenn man Bilder in eine Webseite einbindet, kann man SEO damit forcieren, dass man dem Browser die Auswahl des richtigen Bildes überlässt. Denn ein Smartphone braucht ein anderes Bild als ein 27 Zoll Desktop Rechner. Das HTML-Element IMG SRCSET erlaubt uns diese Auswahl. Erfahren Sie, wie man ein Source Set mit TYPO3 umsetzt: IMG SRCSET im Partial

Für eine gute SEO kann man Google Fonts lokal und per Preload zum herunterladen einbinden. Eine TypoScript Vorlage, finden Sie hier: Fonts mit Preload einbinden

Die Extension Faceted Search wird sehr gerne zur Suche auf einer TYPO3 Webseite genutzt. Wir haben dazu einen eigenen Indexer geschrieben, um den Blog unserer Agenturwebseite durchsuchen zu lassen. Extension Faceted Search

Rich Text Snippets machen es Suchmaschinen einfacher: mit strukturierten Daten kann Google Informationen auf einer Webseite schneller erfassen. Zur SEO sollte man diese Technologie nutzen. Beispiele zur Suchmaschinenoptimierung finden Sie bei Rich Text Snippets!

Mit TYPO3 10.4 gibt es die Option, den Data Processor für ein Sprachmenu zu nutzen. Einen Language Selector können Sie nun per Fluid Template mit ein wenig TypoScript umsetzen. Source Code dazu haben wir im neuen Kapitel Fluid Navigation bereitgestellt.

Wir haben einige Arbeiten an unserem Blog vollzogen. Um Parameter im Link zu vermeiden, haben wir Einzel- und Listenansichten ein Routing mit der config.yaml eingerichtet. Hier gibt es Code Beispiele zum Routing.

Mehrere neue Code Snippets zu CSS in TYPO3: Font Awesome in TYPO3 einbinden. Zudem gibt es eine Extension für die Einbindung von Font Awesome in den CKEditor. Und die Möglichkeit, das CSS nur einmal für beide Zwecke zu laden.

Wichtig for SEO bei TYPO3: Wie kann ich den <TITLE>-Tag und die META Description aus den Daten einer Extension heraus füllen? Für den Blog unserer Agentur haben wir dies realisiert - Lesen Sie unser Beispiel.

Die Datenschutzgrundverordnung (DSGVO) und die Cookie Richtlinie sind zwei Dinge, die TYPO3 Entwickler in diesen Monaten in Atem halten. Es gibt zwei Extensions, die man zu diesem Zweck in eine TYPO3 Webseite einbauen kann. Wir schildern Ihnen eine beispielhafte Konfiguration von Cookieman und Cookie Consent für Ihre Webseite.

Wie lädt man Google Fonts so auf seiner Webseite, dass es keine Probleme mit dem Datenschutz gibt?
Mehr dazu hier: Google Fonts lokal einbinden mit Anleitung und Code Snippets.

Neues Jahr, neuer Code: Wir haben ein neues Kapitel zu Code Snippets für TYPO3 eröffnet!

Als erstes ein sehr aktuelles Thema: Wie bringe ich auf einer TYPO3 Webseite ein PopUp unter, auf dem der Besucher seine Zustimmung zu Cookies geben kann? Hier mehr zu unserer derzeit favorisierten Extension und deren Konfiguration.

Wir haben unser Kapitel zum Aufbau der Navigation mit TYPO3 massiv erweitert:

• Für Bootstrap 3 gibt es zum Aufbau der NavBar eine Vorlage für das TypoScript und das CSS Style Sheet zum Einbau in eine TYPO3 webseite
• Für Bootstrap 4 sind nun das TypoScript und das CSS hinzugekommen.

Bei Bootstrap 4 gibt es nun auch die Integration eines Mega Menu.

Das Kapitel Navigation ist um einige Beiträge gewachsen. Wir schildern Ihnen, wie man eine Breadcrumb-Navigation aufbaut.

Viel Neues im Frontend! Aus den Projekten der letzten Monate gibt es eine Tipps und Kniffe für die Gestaltung des Slick Slider. Wie mache ich die Pfeile sichtbar? Die gestalte ich Dots? Und wie schiebe ich Inhalte responsiv über das Bild im Hintergrund? Mehr dazu hier.

Das Kapitel Navigation in TypoScript ist um einige neue Beiträge ergänzt worden. Hier finden sich nun Vorlagen für einen Sprachumschalter mit Textlinks und eine Version mit Flaggen als Umschalter.

Die neue Version 9.5 von TYPO3 bietet einige Erleichterungen bei der Generation sprechender Links und er Erzeugung eine Sitemap. Beispiele dafür nun in der Navigation.

Die LTS Version 9 von TYPO3 steht in den Startlöchern. Damit einher geht eine veränderte Anbindung an die Datenbank. Für selbst geschriebene SQL Anfragen gibt es ab jetzt den ConnectionPool.

Einbindung von Libraries in TYPO3 Webseiten:
User Function zur Darstellung von Nachrichten aus der News Extension in jeder Webseiten. Incl. Zuweisung von Constants über Settings in der User Funktion.