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

GetStarted:: HTML-Vorlage in TYPO3 integrieren

Die Ausgabe der Seite muss per TypoScript konfiguriert werden.

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.

In das Template-Modul von TYPO3 wechseln.

Dort einen neuen Ordner TypoScript-Templates unterhalb des Root-Verzeichnisses anlegen und ihn anschließend aktivieren.

Nun in das Listen-Modul wechseln und dort folgende neuen Datensätze erstellen und Systemdatensätze / Template auswählen

  1. CONFIG
  2. PAGE
  3. NAVIGATIONS
  4. EXTENSIONS
  5. RESPONSIVE

Sind diese Templates erstellt, dann müssen sie im Root-Template bekanntgegeben werden.

Jetzt in das Template-Modul zurückwechseln und dort das Root-Verzeichnis auswählen, oben muss Info/Bearbeiten stehen, dann unten auf Vollständigen Template-Datensatz bearbeiten klicken.

Dort den Reiter Enthält hervorholen und im unteren Bereich unter Basis-Template einschließen die zuvor erstellten Templates durch Klick auf + hinzufügen.
Sicherstellen, dass unter statische Templates CSS-Styled Content ausgewählt ist.

 

 

Nun geht es um die grundlegende Konfiguration der Seitenausgabe. Zum Beispiel den korrekten Doctype einstellen und noch ein paar weitere Parameter anpassen, die bei der Erzeugung des HTML-Quelltextes wichtig sind.

Dabei arbeiten wir im sogenannten CONFIG-Objekt von Typoscript.
Eine Übersicht über alle Parameter und deren mögliche Werte findet ihr in der TSRef.

WoWa's Wiki liefert die erforderlichen Code-Bausteine. Dort im Suchfeld config eingeben und abschicken.
Den nun gezeigten Quellcode markieren und kopieren.

config  {
    admPanel = 0
    headerComment (
        Diese Seite wurde erstellt von:
        WOWA-WEBDESIGN
        Wolfgang Wagner
        Daimlerstr. 15
        88048 Friedrichshafen
        wowa-webdesign.de
    )
 
    doctype = html5
    htmlTag_setParams = none
  // Include Boilerplate handling for IE browsers 
  htmlTag_stdWrap {
    setContentToCurrent = 1
    cObject = COA
    cObject {
      10 = LOAD_REGISTER
      10 {
        newLine.char = 10
        tagEnd {
          current = 1
          split.max = 2
          split.token = <html
          split.returnKey = 1
        }
      }
 
      20 = TEXT
      20.value = <!--[if lt IE 7]> <html class="no-js ie6 oldie"{register:tagEnd} <![endif]-->
      20.wrap = |{register:newLine}
      20.insertData = 1
      30 < .20
      30.value = <!--[if IE 7]> <html class="no-js ie7 oldie"{register:tagEnd} <![endif]-->
      40 < .20
      40.value = <!--[if IE 8]> <html class="no-js ie8 oldie"{register:tagEnd} <![endif]-->
      50 < .20
      50.value = <!--[if gt IE 8]> <!--><html class="no-js"{register:tagEnd} <!--<![endif]-->
 
      90 = RESTORE_REGISTER
    }
  }
    compressCss = 1
    concatenateCss = 1
 
    // Cache settings
    cache_period = 43200
    sendCacheHeaders = 1
 
    renderCharset = utf-8
    metaCharset = utf-8
    disablePrefixComment = 1
    index_enable = 1
    baseURL = wowa-webdesign.de
    prefixLocalAnchors = all
 
    spamProtectEmailAddresses = ascii
    spamProtectEmailAddresses_atSubst = (at)  
 
    removeDefaultJS = external
    inlineStyle2TempFile = 1    
    noScaleUp = 1   
    meaningfulTempFilePrefix = 50 
 
    uniqueLinkVars = 1
    linkVars = L
    sys_language_uid = 0
    language = de
    locale_all = de_DE
    sys_language_overlay = 1
    sys_language_mode = content_fallback
}
 
// CoolURI aktivieren
config.tx_cooluri_enable = 1
config.redirectOldLinksToNew = 1

Abschnitt zur Optimierung der Bildschirmausgabe

Diese Zeilen werden dann im Head-Bereich des HTML-Dokuments ausgegeben

page.headerData.5 = TEXT
page.headerData.5.value (
  <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1" >
)

Abschnitt zur Einbindung eines CSS-Stylesheets

Diese Zeilen werden dann im Head-Bereich des HTML-Dokuments ausgegeben

page.includeCSS {
standard = {$publicPath}Stylesheets/MK13_WebServerMessage_ImkereiEW.css
}

Wobei {$publicPath} zuvor in den Konstanten zum Seitentemplate definiert werden musste, ansonsten den absoluten Pfad ab dem fileadmin-Verzeichnis angeben.

Abschnitt zum behandeln unterschiedlicher Browser (IE-Patches <=7)

Hier kommen im TypoScript sogenannte Conditions zum Einsatz, die Referenzseite zeigt alle auslesbaren Conditions.

[browser = ie] && [version = < 8]

page.includeCSS.lteie7 = {$publicPath}Stylesheets/patch_my_layout.css

[global]

Abschnitt zum Einbinden von jQuery

// jQuery einbinden
page.includeJSlibs {
 jquery = Pfad/zum/jQuery/jquery-x.y.z.min.js
}

Abschnitt zum Einbinden vom modernizr für IE <9

// modernizr.js für IE < 9
 [browser = ie] && [version = < 9]
  page.includeJS.modernizer = Pfad/zum/modernizr/modernizr.js

 [global]

Abschnitt zum Einbinden von JavaScripts im Footer

// JavaScripts im Footer einbinden
page.includeJSFooter {
  hoverIntent = Pfad/zum/hoverIntent.js
      superfish = Pfad/zum/superfish.js
    supersubs = Pfad/zum/supersubs.js
                init = Pfad/zum/initsf.js
}

Code-Block PAGE II

Logo-Bild und -Verknüpfung definieren

// Logo-Bild definieren
obj.logoIMG = IMAGE
obj.logoIMG.file = {$publicPath}Images/Biene_2014-01_530x600_autor.jpg
obj.logoIMG.file.width = 200
obj.logoIMG.params = id="Logo_IMG"
obj.logoIMG.altText = Bild einer Biene
#obj.logoIMG.titleText = Imkerverein Eberswalde
obj.logoIMG.stdWrap.typolink.parameter = 27 _blank Logo
obj.logoIMG.stdWrap.typolink.title = Bringt Sie zurück zur Startseite

Wobei derzeit bei id=27 kein Sprungziel eingefügt wird, bei anderen Domains schon. ??? Maybe CoolUri-Multidomain abschließend konfigurieren ?