Kostenloses TYPO3 Template (Musterprojekt)

In unseren Hosting Tarifen ist bereits ein TYPO3 Template als Vorlage für eine eigene Webseite installiert. Dazu gibt es noch eine 'leere' TYPO3 Installation für eigene Projekte sowie ein Template für weitere Webseiten. Diese Version basiert auf TYPO3 8.7 LTS.

Einleitung

Layout Startseite
Layout Startseite

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 zunächst nicht um Design, Templates oder TypoScript für die eigene Seite kümmern. 

Einige Informationen zur Geschichte der Vorlage

Hier Live-Version des Musterprojekts ansehen

Die Vorlage kann dennoch individuell angepasst und mit weiteren Funktionen erweitert werden, dafür haben wir einfach verständliche Video Anleitungen erstellt. 

Das Template bietet diese Vorteile:

  • 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
  • CSS individuell anpassbar

Das TYPO3 Template steht unseren Kunden kostenlos zur Verfügung. 

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 auch nur wenige Extensions für die am häufigsten verwendeten Funktionen vorinstalliert:

  • news: zur Anzeige von aktuellen Meldungen, Blog-Artikeln etc.
  • realurl: zur Generierung suchmaschinenfreundlicher, lesbarer Web-Adressen (URL)
  • cs_seo: zur Unterstützung bei der Suchmaschinenoptimierung der Website
  • cl_jquery_fancybox: Lightbox-Effekt für das Klick-Vergrößern von Bildern

Bei Bedarf kann das Musterprojekt mit weiteren Extensions ergänzt werden. Wir empfehlen, nur unbedingt notwendige Erweiterungen zusätzlich zu installieren. Dadurch sind Updates auf künftige TYPO3 Versionen einfacher.

TYPO3 Version 8.7 LTS als Basis

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. 

Wie sieht es mit Updates aus?

Das Projekt wird kontinuierlich weiter entwickelt. Die aktuelle Version steht im Hostingpaket automatisch zur Verfügung. Sie kann als Vorlage für ein neues Projekt verwendet werden. Die aktuelle Version des Templates v8 vom Mai 2017 basiert auf TYPO3 Version 8.7.1.

Für die individuelle Anpassung des Muster Templates bieten wir Video Anleitungen an. Bei Bedarf führen wir die Änderungen auch im Auftrag des Kunden nach Zeitaufwand durch.

Was kostet das Musterprojekt?

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

Ü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:

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.

Horizontale Navigation
Horizontale Navigation
Vertikale Navigation
Vertikale Navigation
Honrizontale und vertikale Navigation
Honrizontale und vertikale Navigation

Seitenlayouts verwenden

Backendlayouts verwenden
Backendlayouts verwenden

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

Inhalte des Footers pflegen

Inhalte des Footers ändern
Inhalte des Footers ändern

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

Die Template-Extension im Überblick

Struktur der Template-Extension
Struktur der Template-Extension

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.

Hintergrundbild in den Seiteneigenschaften hinterlegen
Hintergrundbild in den Seiteneigenschaften hinterlegen
Korrekte Maße des Bildes ggf. in den Konstanten anpassen
Korrekte Maße des Bildes ggf. in den Konstanten anpassen
Optional Vererbung des Bildes auf Unterseiten aktivieren
Optional Vererbung des Bildes auf Unterseiten aktivieren

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.

Verschiedene Einstellungen über den Konstanteneditor
Verschiedene Einstellungen über den Konstanteneditor
Verschiedene Einstellungen über den Konstanteneditor
Verschiedene Einstellungen über den Konstanteneditor
Verschiedene Einstellungen über den Konstanteneditor

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.

Titel und Beschreibung mit Google-Vorschau
Titel und Beschreibung mit Google-Vorschau
Pflege von OpenGraph- und TwitterCards-Metatags
Pflege von OpenGraph- und TwitterCards-Metatags
Übersicht der Einstellungen im cs_seo-Backendmodul
Übersicht der Einstellungen im cs_seo-Backendmodul

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.

Online-Dokumentation im Backend

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

Videoanleitungen im Hilfe-Modul
Videoanleitungen im Hilfe-Modul
Gewünschte Anleitung auswählen
Gewünschte Anleitung auswählen

Markierung einer Seite im Seitenbaum

Farblich markierte Seite
Farblich markierte 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
}

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.

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:

Ä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.

  • [28.05.2017] Veröffentlichung Version 8.7.1