• DE

vimeo.com/135352294
10 CSS und JavaScript einbinden

-< jetzt sollte alles für die Gestaltung der Website vorbereitet werden -> CSS-Dateien und JavaScript-Dateien
-> das wird mit diesem CSS-links bzw. diesem JA-Acript im head der initializr.com Webseite gemacht:

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>

-> die JavaScript Resourcen liegen hier: am_distrib01b/Resources/Public/JavaScript -> main.js ->jquery-1.11.min.js ->

modernizr2.8.3-respond.js
-> die CSS Resourcen liegen hier: am_distrib01b/Resources/Public/Css -> main.ss -> normalize.css -> normalize.min.js

-> JS und CSS werden über das page-Objekt eingebunden:

page.includeCSS {
    normalize = {$resDir}/Public/Css/normalize.min.css
    main =  {$resDir}/Public/Css/main.css
    }

->Dieses TS in die 2000_page.ts -> dort ist ja das page-Objekt
-> das ganze page-Objekt sieht jetzt so aus:

page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
    partialRootPath = {$resDir}/Private/Partials
    layoutRootPath = {$resDir}/Private/Layouts
     file = {$resDir}/Private/Templates/DefaultTemplate.html


# CSS-Dateien laden
}
page.includeCSS {
    normalize = {$resDir}/Public/Css/normalize.min.css
    main =  {$resDir}/Public/Css/main.css
}

-> jetzt mit dem CSS die root-Seite ausgeben

-> jetzt zunächst das JS für den head der Webseite

-> danach das JavaScript in das page-Objekt einbinden
-> JavaScript im Head läßt sich mit includeJS oder includeJSLibs machen
-> der modernizr ist eher eine Library -> also includeJSLibs

## JavaScript laden
    modernizr = {$resDir} = Public/JavaScript/vendor/modernizr-2.8.3-respond-1.4.2.min.js
    jquery = {$resDir} = Public/JavaScript/vendor/modernizr-2.8.3-respond-1.4.2.min.js

-> im Folgenden sind die Zeilen in der initializr.com-Webseite für das jquery im footer:

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

        <script src="js/main.js"></script>


-> im Folgenden ist das betreffende TS für das page-Objekt:

## JavaScript laden
page.includeJSlibs {
    modernizr = {$resDir}/Public/JavaScript/vendor/modernizr-2.8.3-respond-1.4.2.min.js
}

page.includeJSFooterlibs {
    jquery = {$resDir}/Public/JavaScript/vendor/jquery-1.11.2.min.js
}

page.includeJSFooter {
    main = {$resDir}/Public/JavaScript/main.js
}

-> Warum eine Trennung zwischen includeJSFooterLibs + includeJSFooter?
-> So muß die Reihenfolge der Einbindung (also nicht die Nennung in TS) stattfinden:
-> 1. jquery-1.11.2.min.js
-> 2. main.js
-> diese Reihenfolge ist mit includeJSFooterLibs + includeJSFooter gegeben
-> egal in welcher Reihenfolge includeJSFooterLibs + includeJSFooter im TypoScript stehen
-> es kann wichtig sein, dass bestimmte Dateien mit includeJSFooterLibs engebunden werden
-> und andere mit includeJSFooter
-> siehe dazu auch den ausgegebenen Quelltext!