[TYPO3-german] Eigener Header wird zum Problem
Marco Brüggemann
marco at schauart.de
Thu Feb 13 16:17:57 CET 2014
Hallo,
@ André Sancken
vielen Dank für Deinen Einwurf.
Mit der Boilerplate-Extension war ich aber letztendlich nicht zufrieden,
weil diese etwas veraltet ist. Ich habe mir aber das Setup der Extensoin
genauer angesehen und so mein eigenes Boilerplate-template aufbauen können.
Hier kurz die einzelnen Elemente:
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
}
}
xmlprologue = none
xhtml_cleaning = all
disablePrefixComment = 1
inlineStyle2TempFile = 1
moveJsFromHeaderToFooter = 0
removeDefaultJS = 1
compressJs = 0
# Realurl Setup
simulateStaticDocuments=0
tx_realurl_enable=1
baseURL= {$BaseURL.srg}
### unterdrückt den automatisch erstellten Header
# disableAllHeaderCode=1
disableImgBorderAttr = 1
### unterdrückt die Comments in der HTML-Ausgabe
disablePrefixComment = 1
### Mehrsprachigkeit
linkVars = L, print
uniqueLinkVars = 1
language = de
locale_all = de_DE.UTF8
renderCharset = utf-8
sys_language_uid = 0
sys_language_mode = content_fallback
sys_language_overlay = hideNonTranslated
### Spam protection
spamProtectEmailAddresses = ascii
### Multidomain setup
typolinkCheckRootline = 1
typolinkEnableLinksAcrossDomains = 1
### Search. This should be disabled if you are not using Indexed
search!
index_enable = {$config.index_enable}
index_externals = {$config.index_externals}
### CoolURI aktivieren
tx_cooluri_enable = 1
redirectOldLinksToNew = 1
### CoolURI aktivieren
config.noPageTitle = 2
}
page = PAGE
page {
# Der eigentliche Seiteninhalt.
10 < tmp.pagebuild
meta {
# verschiedene Metadaten (X-UA-Compatible für Boilerplate)
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 {
# Einbinden von CSS-Dateien (Boilerplate) im Header
normalize = fileadmin/css/normalize.css
main = fileadmin/css/main.css
lightbox = fileadmin/css/lightbox.css
}
includeJS {
# Einbinden einer Javascript-Datei (Boilerplate) im Header
modernizr = fileadmin/js/modernizr-2.6.2.min.js
}
includeJSFooter {
# Zwei externe Javascript-Dateien von Google im Footer
googlejquery = {$jquery.srg}
googlejquery.external = 1
googlejqueryUI = {$jqueryUI.srg}
googlejqueryUI.external = 1
# Einbinden von Javascript-Dateien im Footer
plugins = fileadmin/js/plugins.js
boxheight = fileadmin/js/boxheight.js
lightbox = fileadmin/js/lightbox.js
main = fileadmin/js/main.js
eigene = fileadmin/js/eigene.js
}
headerData {
# Google Webfont im Header mit der Variablen {$GoogleFont.srg}
für den Font
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 {
# Google Analystic am ende der Webseite, mit den Variablen
{$GoogleAnalyticsTrackingID.srg} und {$GoogleAnalyticsSite.srg}
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>
}
}
Am 10.02.2014 08:40, schrieb André Sancken:
> es gibt doch eine extension html5boilerplate
>
> Mit freundlichem Gruß
>
> André Sancken
>
> Digitalartworx
> Uhlandstr. 3a
> 27576 Bremerhaven
>
> Tel: 0471/4835667
> http://www.digitalartworx.net
> a.sancken at digitalartworx.net
>
>
>
>> Am 10.02.2014 um 08:34 schrieb Marco Brüggemann <marco at schauart.de>:
>>
>> Guten Morgen,
>>
>> ich habe meine Webseite mit der "Boilerplate" [http://html5boilerplate.com/] aufgebaut, um eine möglichst eine optimale Verfügbarkeit für die unterschiedlichen Browser zu erreichen. Boilerplate hat Einträge im Header, hinter dem Body-tag und unterhalb der Webseite. Daher habe ich die automatische generierung des Headers ausgeschalten:
>>
>> config.disableAllHeaderCode=1
>>
>> Den neuen Header, das was direkt am Anfang unterhalb des Body-Start-Tag, und das was direkt ans Ende, oberhalb vom Body-End-Tag kommt, habe ich also in TypoScript geschrieben und hier zum Beispiel benötigte Javascript-Dateien und benötigte css-Dateien von Hand eingefügt. Das funktioniert auch.
>>
>> Das Problem: will ich dann doch eine Extension nutzen, dann muss ich erst die ganze Extension analysieren und benötigte JS- und CSS-Dateien von Hand and die richtigen Positionen eintragen, was natürlich aufwendig und unflexibel ist.
>>
>> Ich sehe zur Zeit zwei möglichkeiten:
>>
>> 1.) es muss doch ein bestehendes TS geben, welches den Header generiert. Kann ich den nicht so umschreiben, dass dieser mir letztentlich das Format der Boilerplate auswirft?
>>
>> 2.) Ich behalte meinen eigenen Header, füge aber das Skript ein, welches mir die Einbindung von JS- und CSS-Dateien so ermöglicht, wie es eigentlich mit TS gedacht ist (und vor allem, damit die Extensions wieder ihren Code einfügen können):
>>
>> includeJS {
>> file1 = fileadmin/helloworld.js
>> file1.type = application/x-javascript
>> file2 = javascript_uploaded_to_template*.js
>> }
>>
>> und
>>
>> includeCSS {
>> file1 = fileadmin/mystylesheet1.css
>> file2 = stylesheet_uploaded_to_template*.css
>> file2.title = High contrast
>> file2.media = print
>> }
>>
>>
>> Könnt Ihr mir sagen, wie ich 1) oder 2) umsetzen kann?
>>
>> Vielen Dank,
>> Marco.
>> _______________________________________________
>> TYPO3-german mailing list
>> TYPO3-german at lists.typo3.org
>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
More information about the TYPO3-german
mailing list