<!-- Hier den Titel einfügen -->T I T E L
mkberlin.com :: frühjahr 2018 :: progress in constructing
 

GetStarted:: TYPO3 - Seiten + Templates anlegen

Oops, an error occurred!

Nach der Installation von TYPO3 auf dem WebServer müssen einige Schritte erledigt werden, um statt dieser Fehlermeldung eine Ausgabe von Inhalten geliefert zu bekommen.

Im Folgenden werden diese hier Schritt für Schritt notiert.

Seite ID 0 ist der Ausgangspunkt

Der zentrale Punkt des TYPO3-CMS ist die Seite mit der ID 0.

  1. Die allererste Seite angelegen
    Mit Rechtsklick auf den Eintrag im Seiten-Modul kann im Kontextmenu Neu gewählt werden.
    Sie erhält den Titel Home und den Untertitel die Startseite, zudem muss unter Zugriff die Seite aktiviert und gespeichert werden.

  2. Verweis auf diese Seite angelegen
    Im oberen Bereich über dem Seitenbaum auf Neue Seite erstellen klicken.
    In der aufklappenden Liste der Seitentypen dann den Verweis greifen und zwischen ID 0 und ID 1 platzieren und ihr den Namen ROOT geben. Mit Rechtsklick im Auswahlmenu die Seite aktivieren und wiederum mit Rechtsklick bearbeiten.
    Unter Allgemein nun das Verweisziel definieren, in diesem Fall die Seite Home.
    Unter Verhalten den Eintrag Als Anfang der Website benutzen anhaken und abschließend die Änderungen speichern.

  3. Home-Seite als Unterseite der ROOT-Seite
    Nun die Home-Seite greifen und auf der ROOT-Seite fallen lassen.

Hintergrund ( Tipp von Wolfgang Wagner - TYPO3-Tutorial 2012-13 ) :
Später kann mit TypoScript die jeweils aktuelle Seite anders als die anderen Seiten formatiert werden. Die Home-Seite erscheint in diesem Zusammenhang nur dann anders formatiert, wenn man es auf diese Weise löst.

Hier verfolge ich den Ansatz von Wolfgang Wagner.

Unterhalb des fileadmin/ - Verzeichnisses wird ein Ordner templates angelegt.

Darin werden folgende weiteren Ordner angelegt :

  • css
  • images
  • js
  • yaml

html5-Template und YAML

Ebenfalls auf Basis des Tuorials von Wolfgang Wagner baue ich zwei HTML-Templates für die Verwendung in TYPO3 zusammen.

Dabei handelt es sich um ein einspaltiges und ein zweispaltiges Layout.

Zum Einsatz kommt das SuperFish-Menu, jQuery-Scrolleffekte und ein responsives YAML-Design.
Zudem werden Patches für ältere Internet-Explorer geladen, die Bildschirmgröße ermittelt und für Smartphones der ViewPort optimiert.

mk15-05.ubuntu.einspaltig.html

mk15-05.ubuntu.zweispaltig.html

Jetzt in das Template-Modul wechseln und die ROOT-Seite auswählen.

Dort dann Template für neue Website erstellen klicken.

Im rechten Bereich oben im Selectfeld Info/Bearbeiten wählen.

Nun folgende Anpassungen vornehmen:

  • Titel des Templates
    ROOT-Template

  • Titel der Website
    mk15-05-ubuntu

  • Beschreibung
    14. Mai 2015 TypoScript-Template basiert auf WoWa's TYPO3-Webtutorial 2012-16

Jetzt erscheint beim Seitenaufruf zumindest keine Fehlermeldung mehr, sondern standardmäßig helloWorld.

Da bei umfangreichen Seiten das Typoscript schnell ein paar hundert oder sogar tausende Zeilen Code enthält, bietet es sich an, das Ganze in verschiedene Blöcke aufzuteilen, damit man nicht die Übersicht verliert. Diese Blöcke werden in einem extra Ordner gespeichert und in das schon vorhandene ROOT-Template eingebunden.

Zunächst muss ein neuer Ordner TypoScript-Templates unterhalb der ROOT-Seite erzeugt und im Anschluss aktiviert werden.

Im Listen-Modul den neuen Ordner auswählen und im rechten Bereich oben auf Neuen Datensatz erstellen klicken und unter Systemdatensätze den Eintrag Template wählen.

Nun folgende Templates neu erstellen:

  • Titel: CONFIG
  • Titel: PAGE
  • Titel: NAVIGATIONS
  • Titel: EXTENSIONS
  • Titel: RESPONSIVE

bei allen Website-Titel: mk15-05-ubuntu

Diese müssen nun ins ROOT-Template integriert werden.
Dazu ins Template-Modul wechsel und das ROOT-Template auswählen.
Vollständigen Template-Datensatz bearbeiten klicken und im folgenden Fenster den Reiter Enthält öffnen.

Nun im unteren Bereich unter Basis-Template einschließen die zuvor erstellten Templates hinzufügen, in der Liste auf das dicke Pluszeichen klicken und nach Erledigung Fenster schließen.
Zudem muss hier noch unter Statische Templates einschließen das Objekt CSS Styled Content (css_styled_content) ausgewählt werden.

In der jetzigen Entwicklungsphase bearbeite ich die TypoScript-Blöcke jeden einzeln für sich. Diese Blöcke ( CONFIG, PAGE, NAVIGATIONS, EXTENSIONS, RESPONSIVE ) enthalten erstmal keine Zeilen, sondern sie enthalten die jeweils gewünschten Unter-Template-Blöcke für den jeweiligen Bereich.

CONFIG-Parameter { TSref: config }
  1. config_html5
    Diese Anweisungen definieren html5 als HTML-Typ der Website.

    config.doctype = html5
    config.htmlTag_setParams = none


  2. config_headerComment
    Diese Anweisung definiert einen Text, der im TYPO3-Kommentarbereich im Head der Website eingefügt wird.

    config.headerComment (
     Diese TYPO3-Installation wird erstellt und betreut von:
     MKberlin IT-Dienstleistungen & WebServices
     Matthias Kutzner
     Stierstraße 21
     12159 Berlin
     http://mkberlin.com
     )

  3. config_DEV
    Diese Anweisungen setzen einige Parameter, die während der Entwicklung einer Website hilfreich für den Programmierer sind.

    // Debug-Informationen innerhalb des TypoScript-Codes werden ausgegeben.
    debug = 1

    // Admin-Panel im FrontEnd einschalten
    admPanel = 1

    // CSS-Stylesheets nicht komprimieren
    compressCss = 0
    // CSS-Stylesheets nicht zu einer Datei zusammenfassen
    concatenateCss = 0
     
    // JavaScript-Dateien nicht komprimieren
    compressJs = 0
    // JavaScript-Dateien nicht zu einer Datei zusammenfassen
    concatenateJs = 0

    // TYPO3-HTML-Kommentare zu den Inhalten generieren
    disablePrefixComment = 0

  4. config_internalSearchOff
    Diese Anweisung schaltet die TYPO3-eigene Suchfunktion aus.

    config.index_enable = 0


  5. config_mk15-05-ubuntu
    Diese Anweisung definiert die BaseURL der Website.

    config.baseURL = http://mk15-05-ubuntu
PAGE-Parameter ( TSref: page )
  1. page_ScreenOptimization
    Diese Anweisungen fügen im Head des HTML-Dokuments einen Block zur optimierten Verarbeitung der Bildschirmgröße ein.

    // Optimierung der Bildschirmausgabe
    page.headerData.5 = TEXT
    page.headerData.5.value (

    <!-- Responsives Design: Speichern der Bildschirmauflösung in einem Cookie -->
    <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

    <!-- Mobilgeräte-Seitenerstaufruf-Optimierung - mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1" >

    )

  2. page_favicon_mk15-05-ubuntu
    Diese Anweisungen fügen im Head des HTML-Dokuments eine Zeile zum Laden des dazu definierten FavIcons ein.

    page.headerData.10 = TEXT
    page.headerData.10.value (

    <link rel="icon" href="fileadmin/templates/images/MKberlin_Favicon.ico" type="image/ico" /><!-- link -->

    )

  3. page_METAs
    Diese Anweisungen übernehmen die Meta-Angaben aus TYPO3 in den Head des HTML-Dokuments.

    // Ausgabe der Meta-Daten
    // www.typo3.net/forum/thematik/zeige/thema/107219/
    page.meta.description.field = description
    page.meta.description.ifEmpty = Eine WebPage von MKberlin WebServices
    page.meta.abstract.field = abstract
    page.meta.abstract.ifEmpty =
    page.meta.keywords.field = keywords
    page.meta.keywords.ifEmpty = MKberlin, IT-Dienstleistungen, WebServices

    http://page.meta.author.field page.meta.author.field = author

    off:
    // www.typo3-snippets.de/snippets/generelle-konfiguration/metatags-seitenspezifisch-setzen.html

    page.meta.author.data = author


  4. page_Titel
    Diese Anweisungen definieren die Zusammensetzung des Titels.

    // Aufbau des Seitentitels
    // typo3.fruit-lab.de/typo3-seo/typo3-core-tricks.html
    config.noPageTitle = 2
    page.headerData.15 = TEXT
    page.headerData.15.field = subtitle // title
    page.headerData.15.wrap = <title>| &nbsp; - @MKberlin</title>

  5. page_includeCSS
    Diese Anweisungen binden die erforderlichen CSS-Stylesheet-Dateien ein.

    # CSS-Dateien einbinden
    page.includeCSS {
       standard = fileadmin/templates/yaml/core/base.css
    }

    page.includeCSS {
       special = fileadmin/templates/css/mk15-06-ubuntu.css
    }

  6. page.includeJS
    Diese Anweisungen binden die erforderlichen JavaScript-Blöcke und -Bibliotheken ein.

    # jQuery einbinden
    page.includeJSlibs {
       jquery = fileadmin/templates/js/jquery-2.1.4.js
    }

    # modernizr für ältere Internet Explorer einbinden
    [browser = ie] && [version = < 9]

    page.includeJS {
        modernizr = fileadmin/templates/js/modernizr-latest.js
    }

    [global]

    # JavaSript im Footer einbinden
    # Superfish-Menü
    page.includeJSFooter {
        hoverIntent = fileadmin/templates/js/hoverIntent.js
            superfish = fileadmin/templates/js/superfish.js
          supersubs = fileadmin/templates/js/supersubs.js
                      init = fileadmin/templates/js/initsf.js
    }

FLUID-Template laden und Variablen übergeben

  1. page_FLUIDtemplate
    Diese Anweisungen definieren ein PAGE-Objekt und eine Fluid-Templatedatei, laden dieses Templates und übergeben die Variables { WP_SFmenu und WP_Inhalt }

    # Default PAGE object:
    page = PAGE

    page.10 = FLUIDTEMPLATE
    page.10 {
        file = fileadmin/templates/mk15-05-ubuntu.einspaltig.html
    variables {
       WP_SFmenu < obj.SFmenu
          WP_Inhalt < styles.content.get
     }
    }