[TYPO3-german] Webseite nur per Typoscript aufbauen?
Marco Brüggemann
marco at schauart.de
Fri Mar 28 09:34:52 CET 2014
Hallo Martin,
der aufbau der Seite nur mit TS ist eigentlich kein Problem! Die Logik
von TS kann man auch in verschiedenen Leveln erlernen. Ich selbst Baue
meine Webseiten seit Jahren nur mit TS auf und würde sagen, dass ich mit
TS nur mittelmäßig umgehen kann.
was wichtig ist, Du musst den Code in einzelne Bausteine auslagern! Nur
so kannst Du eine Modulartige Struktur bekommen, die es Dir erleichtert
zukünftig Webseiten schneller aus schon vorhandenen Elementen zusammen
zu setzen.
Ich mache das so, dass ich TS nur über externe Dateien einbinde. Die
wichtigsten drei sind da bei mir:
a0_bezeichner_TEMP.ts
a1_bezeichner_CONST.ts
a2_bezeichner_CONF.ts
Man kann für eine Webseite mehrere Templates erstellen, daher ist das
"a" im Dateinamen eine hilfe, damit zusammengehörige Tamplates im
Dateiexplorer auch zusammenstehen. "1", "2" und "3" helfen mir, damit
die ordnung innerhalb der Dateinen immer gleich ist.
TEMP ist das eigentliche Template und wird im Setup der Seite (dort wo
der Code normalerweise eingetragen wird) so eingebunden:
<INCLUDE_TYPOSCRIPT: source="FILE:
fileadmin/template/inc/a0_startseite_TEMP.ts">
CONST enthält die Konstanten und wird bei mir so eingebunden:
<INCLUDE_TYPOSCRIPT: source="FILE:
fileadmin/template/inc/a1_startseite_CONST.ts">
und CONF enthält konfigurationen und wird in den Seiteneigenschaften
unter "Ressourcen" "TypoScript-Konfiguration" eingebunden.
<INCLUDE_TYPOSCRIPT: source="FILE:
fileadmin/template/inc/a2_startseite_CONF.ts">
in der TEMP-Datei steht bei mir das:
Am besten kann man die Datei TEMP (oder TS allegemein) von unten nach
oben lesen, da unterhalb die gesamte Seite zusammengebaut wird. Es wird
aber immer wieder auf "Bausteine" zurückgegriffen, welche schon vorher
definiert sein müssen!
Daher ist zum Beispiel einer der ersten Bausteine in der Datei das Menü
und andere kleinere Bestandteile der Seite.
Die eigentliche Seite wird durch das page-Objekt erstellt. Innerhalb
dieses Page-Objektes wird dann auf verschiedene Bausteine verlinkt: in
meinem Fall nur einer tmp.pagebuild
Gundaufbau:
Baustein-menü
Baustein-headerlogo
Baustein-contentelemente
Baustein-footermenü
Baustein-footerlogo
Baustein-header = Zusammenstellung aus Baustein-menü und Baustein-headerlogo
Baustein-content = Zusammenstellung aus Baustein-contentelemente
Baustein-footer = Zusammenstellung aus Baustein-footermenü und
Baustein-footerlogo
Webseite (PAGE) = Zusammenstellung aus Baustein-header und
Baustein-content und Baustein-footer + Pageeinstellungen
konkret:
#
-----------------------------------------------------------------------------------------------------------------------------------------------
# Baustein tmp.mainmenu; .. der einfachheit halber mal nur ein Text "Das
ist mein Menu" der von "<nav class="menu">[...]</nav>" umgeben wird:
Ausgabe ist dann: "<nav class="menu">Das ist mein Menu</nav>"
tmp.mainmenu = COA
tmp.mainmenu {
wrap = <nav class="menu">|</nav>
10 = TEXT
10.value = Das ist mein Menu
}
#
-----------------------------------------------------------------------------------------------------------------------------------------------
# Baustein tmp.headerbuild; alles was darin an elementen steht, nur das
Element 20, wird in die HTML-Box "<header class="siteheader scrollfix">
[hier kommt Element 20 rein; durch | gekennzeichnet]</header>"
eingepackt; Element "20" ist ein Verweis auf das Element Menu, welches
nur dann eingetragen wird, wenn es vorhanden ist und dann vorher in die
DIV-Box <div class="grid6">[tmp.mainmenu]</div> eingepackt wird.
Ausgabe ist bis jetzt:
"<header class="siteheader scrollfix"><div class="grid6"><nav
class="menu">Das ist mein Menu</nav></div></header>"
tmp.headerbuild = COA
tmp.headerbuild {
wrap = <header class="siteheader scrollfix">|</header>
20 < tmp.mainmenu
20 {
stdWrap.required = 1
stdWrap.wrap = <div class="grid6">|</div>
}
}
#
-----------------------------------------------------------------------------------------------------------------------------------------------
# Der Baustein tmp.pagebuild welcher mit den Bausteinen tmp.headerbuild,
tmp.contentbuild und tmp.footerbuild befüllt ist
tmp.pagebuild = COA
tmp.pagebuild {
10 < tmp.headerbuild
20 < tmp.contentbuild
30 < tmp.footerbuild
}
-> tmp.contentbuild und tmp.footerbuild werden genauso wie
tmp.headerbuild gebildet
#
-----------------------------------------------------------------------------------------------------------------------------------------------
# Einstellung der Webseite
config {
headerComment (
Diese Seite wurde erstellt von:
Marco Brüggemann
)
doctype=html5
htmlTag_setParams=none
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 8]> <html class="no-js ie7 oldie"
{register:tagEnd} <![endif]-->
20.wrap = |{register:newLine}
20.insertData = 1
30 < .20
30.value = <!--[if IE 8]> <html class="no-js ie8 oldie"
{register:tagEnd} <![endif]-->
40 < .20
40.value = <!--[if IE 9]> <html class="no-js ie9 oldie"
{register:tagEnd} <![endif]-->
50 < .20
50.value = <!--[if gt IE 9]> <!--><html
class="no-js"{register:tagEnd} <!--<![endif]-->
90 = RESTORE_REGISTER
}
}
}
#
-----------------------------------------------------------------------------------------------------------------------------------------------
# PAGE
page = PAGE
page {
10 < tmp.pagebuild
meta {
X-UA-Compatible = IE=edge,chrome=1
X-UA-Compatible.httpEquivalent = 1
keywords = {page:keywords}
keywords.insertData = 1
description = {page:description}
description.insertData = 1
viewport = width=device-width, initial-scale=1
autor = {$designerPerso.srg} - {$designerFirm.srg}
autor.insertData = 1
}
includeCSS {
normalize = fileadmin/template/css/normalize.css
main = fileadmin/template/css/main.css
lightbox = fileadmin/template/css/lightbox.css
slider = fileadmin/template/css/slider.css
}
includeJS {
# jQuery wird durch Powermail eingebunden
# googlejquery = {$jquery.srg}
# googlejquery.external = 1
# googlejqueryUI = {$jqueryUI.srg}
# googlejqueryUI.external = 1
modernizr = fileadmin/template/js/modernizr-2.6.2.min.js
modernizrcustom = fileadmin/template/js/modernizr.custom.js
}
includeJSFooter {
plugins = fileadmin/template/js/plugins.js
lightbox = fileadmin/template/js/lightbox.js
eigene = fileadmin/template/js/eigene.js
classie = fileadmin/template/js/classie.js
slider = fileadmin/template/js/slider.js
}
headerData {
10 = COA
10 {
10= TEXT
10.value = <script
type="text/javascript">WebFontConfig={google:{families:[
20= TEXT
20.value = {$GoogleFont.srg}
20.insertData = 1
30= TEXT
30.value = ]}};(function(){var
wf=document.createElement('script');wf.src=('https:'==document.location.protocol?'https':'http')+'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';wf.type='text/javascript';wf.async='true';var
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(wf,s);})();</script>
}
}
footerData {
10 = TEXT
10.value
=<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new
Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create',
'{$GoogleAnalyticsTrackingID.srg}',
'{$GoogleAnalyticsSite.srg}');ga('send', 'pageview');</script>
}
}
Erklärung:
in meta{} werden dann für den Header die Metadaten genannt. Dort steht
auch "keywords = {page:keywords}" was bedeutet, dass er aus der
Datenbank, Tabelle page, Feld "keywords" die keywords der Seite holt.
autor = {$designerPerso.srg} - {$designerFirm.srg} im meiner CONST Datei
habe ich doe Kontante {$designerPerso.srg} so gespeichert:
"designerPerso.srg = Marco Brüggemann"
in includeCSS{} werden alle CSS-Dateien eingetragen, die eingebunden
werden sollen
in includeJS{} werden alle JS-Dateien eingetragen, die ! im Header !
eingebunden werden sollen
in includeJSFooter{} werden alle JS-Dateien eingetragen, die ! im Footer
! eingebunden werden sollen
in headerData{} steht ein Handgeschriebenes Script welches
Google-Webfonts einbindet {$GoogleFont.srg} dies ist die Variable für
die Webfonts welche in der CONST-Datei stehen z.B. "GoogleFont.srg =
'Roboto:400,300,300italic,400italic,700,700italic,100,100italic:latin',
'Oxygen:400,300,700:latin,latin-ext'"
in footerDat{} wird GoogleAnalystics eingebungen ... auch mit Konstanten
welche in der CONST-Datei stehen.
Ich hoffe dass Dir das ein bisschen weiterhilft ein Verständnis zu
bekommen. Versuch erstmal einen Gundaufbau zu erstellen und frage dann
zu konkreten Problemen wie "wie erstelle ich ein Menü" oder "wie binde
ich Content ein".
Viel Erfolg!
Marco
More information about the TYPO3-german
mailing list