Kostenloses TYPO3 Template (Musterprojekt)

Unser Hostingpaket buchen und sofort eine fertige Webseite nutzen. Wir haben in all unseren Hosting Tarifen eine aktuelle TYPO3 Webseite als Vorlage für eine 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 um Design, Templates oder TypoScript für die eigene Seite kümmern.  

Hier Live-Version des Musterprojekts ansehen

Sie können die Vorlage individuell angepassen und mit weiteren Funktionen erweitern, dafür haben wir einfach verständliche Video Anleitungen erstellt. 

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 (Extension: realurl)
  • Unterstützung bei der Suchmaschinenoptimierung der Website (Extension: cs_seo)
  • Lightbox-Effekt für das Klick-Vergrößern von Bildern (Extension: cl_jquery_fancybox)

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

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 v8 vom 21. August 2018 basiert auf TYPO3 Version 8.7.19 steht im Hostingpaket automatisch zur Verfügung.

Beispielwebseiten auf der Basis unseres Musterprojektes

Übersicht, Funktionen, Unterschiede zu früheren Versionen

Wir haben das Musterprojekt grundlegend überarbeitet. Die wichtigsten Unterschiede und Neuerungen sind:

  • 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)

Weitere Infos dazu im folgenden Video:

Das Musterprojekt selbst installieren

In dem folgenden Video zeigen wir, wie Sie das Musterprojekt für TYPO3 8 LTS in wenigen Minuten selbst installieren können.

Voraussetzung dafür ist, dass Sie sich per SSH am Webserver anmelden. Wie das geht, zeigen wir in eigenen Videoanleitungen für Windows- (Putty, MobaXterm), Linux- und Mac-Anwender.

Online-Dokumentation im Backend

Die Videoanleitungen zum Musterprojekt können auch direkt im TYPO3-Backend angeschaut werden.

Navigationsvarianten

Das Musterprojekt für TYPO3 8 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.

Inhalte des Footers pflegen

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

Die Template-Extension im Überblick

Das Musterprojekt TYPO3 8 LTS ist als Template-Extension (Sitepackage) umgesetzt. In diesem Video sehen Sie, wie die Dateien in dieser Extension organisiert sind.

Das Hintergrundbild im Kopfbereich

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

Die Optionen im Konstanteneditor

Einige wichtige Einstellungen lassen sich im Musterprojekt TYPO3 8 LTS direkt im Konstanteneditor vornehmen. So kann man hier z.B. sehr einfach das Logo austauschen, den (Firmen)Namen für den Footer ändern oder zwischen verschiedenen Navigationsvarianten umschalten.

Welche Funktionen hat die Extension cs_seo

Im Musterprojekt TYPO3 8 LTS sind einige wenige Extensions bereits vorinstalliert, unter anderem cs_seo. Diese kann eine Hilfe bei der On Page-Suchmaschinenoptimierung der Website sein.

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.

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

  1. Im Projektverzeichnis Ihrer Website (z.B. typo3cms/muster-8lts/) sehen Sie die Datei robots.txt. Löschen Sie diese Datei (oder benennen Sie sie um, z.B. robots.txt_alt)
  2. Im gleichen Verzeichnis sehen Sie eine Datei allow_robots.txt
  3. Benennen Sie diese Datei in robots.txt um

Zum Bearbeiten der Dateien können Sie sich entweder per SSH mit der Webserver verbinden oder auch ein FTP-Programm wie FileZilla, CyberduckTransmit oder WinSCP nutzen.

Markierung einer Seite im Seitenbaum

Die Seite "Wichtige Infos - Bitte lesen" ist farblich im Seitenbaum des Backends hervorgehoben.

Diese Hervorhebung lässt sich per User-TSconfig einrichten. 

In der Datei EXT:jwmusterprojekt8/Configuration/TSconfig/User.txt finden Sie die entsprechende Passage in den Zeilen 11-13.
Die Farbe wird dabei als Hexadezimal-Code an die Seiten-ID übergeben, in unserem Fall die ID 28.

Tipp: Da sich die Farbangabe auch auf evtl. vorhandene Unterseiten vererbt, kann man so ganze Seitenbaumteilbereiche farblich markieren.

options {
  clearCache.system = 1
  ## TYPO3 8
  clearCache.all = 1
  pageTree.showPageIdWithTitle = 1
}

TCAdefaults.tt_content.filelink_size = 1

##Color for background in page tree "Wichtige Infos"
options.pageTree.backgroundColor {
  28 = #ff9696
}

 

Weitere Sprachen hinzufügen

Das Musterprojekt ist schon für Mehrsprachigkeit vorbereitet. Deutsch ist als Standardsprache definiert, Englisch als weitere Sprache.

Natürlich können weitere Sprachen beliebig hinzugefügt werden. Dazu sind 3 Schritte notwendig:

  1. Weitere Sprache im Backend anlegen
  2. Die TypoScript-Konfiguration der Sprache und des Sprachmenüs anpassen
  3. Die Konfiguration der Extension RealURL anpassen, um lesbare, suchmaschinenfreundliche URLs zu erzeugen.

Alle 3 Schritte sehen Sie in der folgenden Videoanleitung:

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 für Smartphones und Tablets erzeugt.

In diesem Video sehen Sie, wie Sie ein eigenes Icon in das Musterprojekt integrieren können.

Ergänzung

Sollten das Favicon oder die Touch-Icons trotz leeren der Caches nicht korrekt ausgegeben werden, hilft es wahrscheinlich, die Neuberechnung der Bilder zu erzwingen, indem man die bereits erstellen Bilder löscht.

Gehen Sie dazu in das Installtool -> "Clean up" -> "Clear processed files" und klicken dort die entsprechende Schaltfläche an.