Kostenloses TYPO3 Template (Musterprojekt) für TYPO3 9 LTS

Unser Hostingpaket buchen und sofort eine fertige Webseite nutzen. Wir haben in all unseren Hosting Tarifen eine aktuelle TYPO3 Webseite als Vorlage für eigene Inhalte installiert. Dazu gibt es noch eine 'leere' TYPO3 Installation für eigene Projekte sowie ein Template für weitere Webseiten.

Mit dem kostenlosen TYPO3 Template kann man sofort mit dem Erfassen von Inhalten beginnen, die Webseite ist in kürzester Zeit online. So muss man sich nicht um Design, Templates oder TypoScript für die eigene Seite kümmern.  

Hier Live-Version des Musterprojekts ansehen

Sie können die Vorlage individuell anpassen und mit weiteren Funktionen erweitern. 

Das Template bietet:

  • Responsive Webdesign, geeignet für Desktop, Smartphone und Tablet
  • optimiert für Suchmaschinen 
  • vorbereitet für Barrierefreiheit
  • Beispiele für alle Standard Inhaltselemente
  • optimiert für kurze Ladezeiten
  • aktueller Stand der Technik
  • optisch und funktional individuell anpassbar

Es kann als Grundlage für eine eigene Website verwendet werden und stellt ein "Best practice" dar, das zeigt, wie man ein TYPO3-Projekt aufsetzen kann. Es soll dabei keine Design-Vorlage sein, sondern eine Projektvorlage, bei der das Design beliebig an eigene Vorstellungen angepasst werden kann.

Wir haben das Musterprojekt bewusst sehr schlank gehalten und nur die am häufigsten verwendeten Funktionen vorinstalliert:

  • Anzeige von aktuellen Meldungen  (Extension: news)
  • suchmaschinenfreundliche, lesbare Web-Adressen
  • Unterstützung bei der Suchmaschinenoptimierung der Website
  • Lightbox-Effekt für das Klick-Vergrößern von Bildern

Das Musterprojekt basiert auf der TYPO3 LTS-Version 9.5. Dadurch ist bis mindestens Ende Oktober 2021 ein Betrieb ohne Relaunch möglich. Mit dem verlängerten Support (Extended Long Term Support, ELTS) gibt es Updates und Unterstützung bis Ende Oktober 2024.  

Einige Informationen zur Geschichte der Vorlage.

Was kostet das Musterprojekt?

Das Musterprojekt ist bei allen neuen TYPO3 Hosting-Paketen von jweiland.net im Preis enthalten und bereits vorinstalliert.

Wie sieht es mit Updates aus?

Das Projekt wird kontinuierlich weiter entwickelt.  Die aktuelle Version des Templates v9 vom 19. Dezember 2018 basiert auf TYPO3 Version 9.5.3 und steht im Hostingpaket automatisch zur Verfügung.

Beispielwebseiten auf der Basis unseres Musterprojektes

Übersicht, Funktionen, Unterschiede zu früheren Versionen

Wir haben das Musterprojekt seit Version 8 kontinuierlich weiterentwickelt.

  • Kapselung aller Dateien in einer eigenen Template-Extension (Sitepackage)
  • eigenes, schlankes Grid-CSS
  • verschiedene Navigations-Varianten, einfach im Backend umschaltbar
  • verschiedene Seitenlayouts
  • Lightbox-Effekt für Bilder
  • interne Suche (indexed_search)
  • Nutzung der neuen Funktionen von TYPO3 9 LTS, zum Beispiel lesbare URLs, SEO und Social Media-Funktionen

Allgemeiner Überblick

In diesem Video erhalten Sie einen Überblick über die Funktionen des Musterprojekts.

Navigationsvarianten

Das Musterprojekt für TYPO3 9 LTS bringt 3 Navigationsvarianten und 4 Farbschemata mit. Diese können ganz einfach per Konstanteneditor ausgewählt werden.

Seitenlayouts verwenden

Das Musterprojekt bringt 4 verschiedene Seiten-Layouts mit, die per Backend-Layout umgeschaltet werden können.

Das Logo im Kopfbereich austauschen

Im Kopfbereich des Templates kann das Logo beliebig ausgetauscht werden. Dieses Bild wird auch automatisch auf die Startseite verlinkt.

Um ein eigenes Bild zu verwenden, gehen Sie wie folgt vor:

  • Wechseln Sie in das "Template"-Backendmodul
  • Wählen Sie im Seitenbaum die "Home"-Seite an (die Seite mit der Weltkugel)
  • Im großen, rechten Bereich des Backends wechseln Sie über die obere Auswahl-Box in den "Konstanteneditor"
  • In der Auswahlbox bei "Kategorie" wählen Sie "JWEILAND.NET MUSTERPROJEKT"
  • Scrollen Sie nach unten bis zum Bereich "Layout"
  • Klicken Sie bei "Logo" auf das Stift-Symbol, um das Eingabefeld zu aktivieren
  • Geben Sie in das Eingabefeld den Pfad zur Bilddatei an. Diese kann unterhalb des Ordners fileadmin/ liegen, oder auch in einer eigenen Extension
    • Beispiel 1: fileadmin/meinverzeichnis/bilder/firmenlogo.png
    • Beispiel 2: EXT:meineextension/Resources/Public/Images/firmenlogo.png
  • Zum Abschluss klicken Sie oben auf "Speichern"

Tipp: Das Bild sollte nicht zu groß sein.

Inhalte des Footers pflegen

Der Fußbereich des Layouts kann mit beliebigen Inhaltselementen befüllt werden. Diese erscheinen automatisch auf jeder Seite.

Das Hintergrundbild im Kopfbereich

Über die Seiteneigenschaften kann ein Bild definiert werden, das im Kopfbereich der Seite ausgegeben wird. Wichtig ist, die Maße des Bildes korrekt über den Konstanteneditor zu hinterlegen. Optional kann auch eine Vererbung auf Unterseiten aktiviert werden.

Suchmaschinenoptimierung (SEO)

Seit TYPO3 9 LTS benötigt man keine zusätzliche Extension mehr für grundlegende SEO-Funktionen. So gehören die manuelle Anpassung des Seitentitels, die Steuerung der Indexierung durch Suchmaschinen sowie die Generierung des Canonical-Tags nun zu den Standardfunktionen.

In den Seiteneigenschaften finden Sie einen Tab "SEO"

  • Titel für Suchmaschinen: hier können Sie den automatisch generierten Seitentitel (<title>-Tag im HTML) manuell überschreiben
  • Robot-Anweisungen:
    • Index dieser Seite: steuert, ob Suchmaschinen die aktuelle Seite indexieren oder nicht (Meta-Tag robots="noindex" oder "index" im HTML)
    • Dieser Seite folgen: steuert, ob Suchmaschinen-Bots den Links auf der aktuellen Seite folgen oder nicht (Meta-Tag robots="follow" oder "nofollow" im HTML)
  • Kanonischer Link: gibt die Ursprungs-URL der aktuellen Seite an. Wird automatisch gesetzt, kann aber bei Bedarf manuell überschrieben werden. 

Social Media

TYPO3 9 LTS bringt ebenfalls die integrierte Unterstützung einiger Social Media-Funktionen mit.

In den Seiteneigenschaften jeder Seite kann man für Facebook und Twitter den Titel, die Beschreibung sowie ein Bild individuell anpassen. Dabei werden bestimmte Meta-Tags im HTML-Quellcode erzeugt (Open Graph und Twitter Cards). Dafür gibt es den neuen Bereich "Social Media" in den Seiteneigenschaften.

Wenn ein Besucher die Seite über Facebook oder Twitter teilt, werden diese Meta-Tags von diesen Plattformen ausgelesen und berücksichtigt. So kann man sehr genau steuern, was für Texte und Bilder in der Vorschau der beiden Plattformen angezeigt werden.

 

Die Optionen im Konstanteneditor

Einige wichtige Einstellungen lassen sich direkt im Konstanteneditor vornehmen. So kann man hier zum Beispiel sehr einfach das Logo austauschen, den (Firmen)Namen für den Footer ändern, zwischen verschiedenen Navigationsvarianten umschalten und vieles mehr.

Site Management

Neu in TYPO3 9 LTS ist das Backend-Modul "Sites".

Über dieses Backend-Modul lassen sich viele Funktionen steuern, die in früheren TYPO3-Versionen recht umständlich per TypoScript oder über das Install-Tool eingestellt werden mussten, zum Beispiel

  • die für die Website verwendete Domain
  • die in der Website verwendeten Sprachen
  • die Fehlerbehandlung, zum Beispiel für 404-Fehler ("Seite nicht gefunden")
  • Feste (statische) URLs für bestimmte Seiten.

Um die Konfiguration zu bearbeiten, wechseln Sie in das "Sites"-Backend-Modul und bearbeiten dort die vorhandene Konfiguration.

Den wichtigsten Parameter finden Sie dort im Bereich "Allgemein", den sogenannten "Entry Point". Hier sollte die URL stehen, unter der Ihre Website erreichbar ist.

Wichtig: Hier sollte wirklich die komplette URL stehen, inklusive http:// oder https://

Im Prinzip könnte man hier auch einfach ein / hineinschreiben, aber dann funktioniert die Fehlerbehandling für zum Beispiel 404-Fehlerseiten nicht mehr korrekt.

Diesen Parameter müssen Sie nur ändern, wenn

  • Sie die Website auf SSL umstellen und per https ausliefern lassen
  • Sie die Website auf eine andere Domain umziehen

Zu den weiteren Reitern folgt in Kürze noch eine ausführliche Videoanleitung.

In­de­xie­rung der Website durch Suchmaschinen erlauben

Sobald Ihre Seite online geht, sollte Sie natürlich auch für Suchmaschinen sichtbar und indexierbar sein.

Während der Entwicklung einer Seite ist das aber oft nicht gewollt. Deshalb haben wir über eine Datei namens robots.txt die In­de­xie­rung der Website durch Suchmaschinen wie z.B. Google, Bing & Co. standardmäßig deaktiviert.

Dabei handelts es sich aber nicht um eine "echte" Datei, sondern wir nutzen hier ein neues Feature von TYPO3 9: die "Static Routes".

Über diese "statischen URLs" ist es möglich, feste URLs zu definieren, die entweder auf ein bestimmtes Ziel zeigen, zum Beispiel eine Seite, oder die einen festen Inhalt (Text) ausliefern.

Die robots.txt haben wir über die Variante mit einem statischen Text realsiert.

Wenn Sie mit den Anpassungen am Musterprojekt fertig sind und die Website online geht, müssen Sie daher folgende Schritte durchführen.

  1. Gehen Sie in das Backend-Modules "Sites"
  2. Bearbeiten Sie die vorhandene Konfiguration durch Klick auf das Stift-Symbol
  3. Wechseln Sie in den Reiter "Static Routes" und klicken dann in den grauen Bereich bei "robots.txt"
  4. In dem Feld "Static Text" sehen Sie den Inhalt der robots.txt
  5. Über die folgenden Zeilen wird die Indexierung durch Suchmaschinen verhindert:
    User-agent: *
    Disallow: /
  6. Um die Indexierung zu gestatten, löschen Sie diese beiden Zeilen
  7. Anschließend entfernen Sie bei den Zeilen ab "#User-agent: *" das Raute-Symbol am Zeilenanfang. Dadurch wird die Indexierung, bis auf einige Ausnahmen, gestattet
  8. Zum Abschluss klicken Sie oben auf "Speichern" (Save)

Haben Sie den Text korrekt bearbeitet, sollte der Eintrag so aussehen:

## Use the following lines to ALLOW robots the access to the website
## Remove the # at the beginning of each line
User-agent: *
Disallow: /fileadmin/_temp_/
Disallow: /t3lib/
Disallow: /typo3/
Disallow: /typo3_src/
Disallow: /clear.gif
Allow: /typo3/sysext/frontend/Resources/Public/*

 

Favicon austauschen

Favicons sind kleine Bilder, die z.B. in der Browsertitelzeile angezeigt werden. Üblicherweise wird hier ein Firmenlogo oder ähnliches verwendet.

Das Musterprojekt ist zur Verwendung individueller Favicons vorbereitet. Ausserdem werden dabei auch sogenannte Touch-Icons (App-Icons) für Smartphones und Tablets erzeugt.

Beide Arten von Icons können ganz einfach über den Konstanteneditor ausgetauscht werden.

Beachten:

  • Die Bilddatei für das Favicon und die Standard-Touch-Icons muss quadratisch sein
  • Die zweite Variante des Bildes, die v.a. für Windows-Phones nützlich ist, benötigt ein Seitenverhältnis von 31:15, zum Beispiel: Breite 310 px, Höhe 150 px

Um die Dateien anzupassen, gehen Sie wie folgt vor:

  • Wechseln Sie in das "Template"-Backendmodul
  • Wählen Sie im Seitenbaum die "Home"-Seite an (die Seite mit der Weltkugel)
  • Im großen, rechten Bereich des Backends wechseln Sie über die obere Auswahl-Box in den "Konstanteneditor"
  • In der Auswahlbox bei "Kategorie" wählen Sie "JWEILAND.NET MUSTERPROJEKT"
  • Scrollen Sie nach unten bis zum Bereich "Layout"
  • Klicken Sie auf das Stiftsymbol bei "App-/Favicon Quadratisch" bzw. "App-/Favicon Breit", um das Eingabefeld zu aktivieren
  • In das Eingabefeld tragen Sie den Pfad zu Ihrer Bilddatei ein. Diese kann unterhalb von fileadmin/ liegen, oder auch in einer eigenen Extension:
    • Beispiel für fileadmin: fileadmin/meinverzeichnis/bilder/appicon-square.png
    • Beispiel für eine Extension: EXT:meineextension/Resources/Public/Icons/appicon-square.png
  • Zum Abschluss klicken Sie oben auf "Speichern"
  • Sollte die Änderung nicht sofort sichtbar sein, müssen Sie eventuell den Frontend-Cache und vielleicht auch Ihren Browser-Cache löschen

Änderungsprotokoll

Hier dokumentieren wir alle Änderungen, die wir im Lauf der Zeit am TYPO3 Template vornehmen. So können Anwender ihre eigene Installation immer auf dem laufenden Stand halten. Künftige TYPO3 Updates werden so deutlich einfacher

Version 9.5.3

2018-12-18 [TASK] Remove static route to sitemap.xml due to a possible bug in TYPO3
2018-12-18 [TASK] Revert: Don't use .html as page suffix
2018-12-17 [TASK] Don't use .html as page suffix
2018-12-17 [BUGFIX] CKEditor was deactivated for an unknown reason
2018-12-14 [BUGFIX] Set correct language fallback
2018-12-14 [TASK] Update to 9.5.3
2018-12-12 [TASK] Update to TYPO3 9.5.2
2018-11-22 [TASK] Update application context naming
2018-11-15 [TASK] Set unifiedPageTranslationHandling to false (default value)
2018-11-15 [TASK] Add basic contact form.
2018-11-15 [TASK] Set base URL to / for more flexibility
2018-11-09 [TASK] CSS style expanded for make editing easier for the user.
2018-11-08 [TASK] Modernise TypoScript for background image in header
2018-11-07 Remove systemMaintainers array
2018-11-07 [TASK] Empty systemMaintainers array
2018-11-06 [TASK] Changed Readme
2018-11-06 [TASK] Set version to 9.5.1
2018-11-06 [TASK] Update news to version 7.0.8, fix language handling.
2018-10-26 [TASK] Add german language