website_sporthotel

Kickstarter für SPOT-Websites

Installation

Laden Sie dieses Repository zunächst in Ihr typo3conf/ext-Verzeichnis herunter und ersetzen Sie alle porvext durch den Namen Ihrer Website. Zum Beispiel wird aus website_sporthotel website_stmoritz.

Knotenmodule

Für die Kompilierung von LESS und JS(ES6) benötigen wir einige verschiedene NodeJS-Module. Um diese zu installieren, kopieren Sie die Datei packages.json in den Stammordner Ihres Webs. Diese Datei enthält alle bisherigen Abhängigkeiten. Jetzt müssen Sie nur noch npm install ausführen.

Laube

Für die Installation aller benötigten Bibliotheken verwenden wir ab sofort Bower. Mit Bower können Sie in einer Datei definieren, welche Bibliotheken/Versionen Sie verwenden möchten und mit einem Befehl können Sie alle diese Bibliotheken installieren/aktualisieren. Ändern Sie zunächst die Datei bower.json im Stammverzeichnis des Erweiterungsordners und definieren Sie Ihre Abhängigkeiten. Geschehen dies können Sie den Befehl bower list ausführen, um alle Ihre Abhängigkeiten aufzulisten, um die verwendeten Bibliotheken zu steuern. Um die Bibliotheken zu installieren, führen Sie bower install aus. Wenn Sie evtl. nach Updates suchen müssen, können Sie bower update ausführen.

Typo3-Einstellungen

Um die Typo3-Installation einzurichten, müssen wir diese Erweiterungen installieren:

• vhs
• flussmittel
• flüssigkeitsgehalt
• fluidcontent_core
• fluidpages
• realurl
• aus der Quelle nehmen
• snowbabel
• l10nmgrgr
• nc_staticfilecache

Erstellen Sie nun eine Vorlage auf Ihrer Root-Seite, gehen Sie zu "Info/Modify" und "Edit the whole template record". Löschen Sie alle Inhalte im Inhalts- und Setup-Feld und fügen Sie im Tab "Includes" fluidcontent_core und Ihrer Website-Extension website_sporthotel hinzu. Abschließend fügen Sie die folgende Zeile zu den Einstellungen der Root-Page unter "Ressourcen" im Feld "Seite TSConfig" hinzu.

<INCLUDE_TYPOSCRIPT:source="FILE:EXT:website_sporthotel/Konfiguration/TsConfig/Page/config.ts">

Wie man sie benutzt

Templattieren

Alle Vorlagen der Website befinden sich im Ordner website_sporthotel/Ressourcen/Privat.

Privat
|-- Erweiterungen
| Fluidcontentcore - Fluidcontentcore - Fluidcontentcore
|-- Sprache
|-- Layouts
Inhalt | | | |- Inhalt
| |  ?- Seite
|-- Partials
Inhalt | | | |- Inhalt
| | | |- Seite
| |  ?- Eigenschaften
|-- Vorlagen
Inhalt | | | |- Inhalt
| |  ?- Seite

Erweiterungen

In diesem Ordner haben wir alle Vorlagen von Extesione abgelegt, die wir ändern würden. Standardmäßig gibt es nur die Fluidcontentcore Extension, damit können wir die Default-Elemente von Typo3 wie Text und Html anpassen.

Website-Vorlagen

Für die Basic Website-Templates existiert bereits eine gute Dokumentation auf http://fluidtypo3.org:

• Seitenvorlagen: https://fluidtypo3.org/documentation/templating-manual/templating/creating-templates/page-template.html
• Inhaltsvorlagen: https://fluidtypo3.org/documentation/templating-manual/templating/creating-templates/content-element.html
• Fluxfeld: https://fluidtypo3.org/documentation/templating-manual/templating/creating-templates/flux-fields.html
• Netz: https://fluidtypo3.org/documentation/templating-manual/templating/creating-templates/grid.html
• Sprache: https://fluidtypo3.org/documentation/templating-manual/templating/creating-templates/language-usage.html

Weniger

Die weniger Dateien befinden sich im Ordner website_sporthotel/Ressourcen/Public/Source/StyleSheets/Less und sind so aufgebaut:

Weniger
|-- ext
|-- int
|-- bericht
|-- Punkt
Inhalt | | | |- Inhalt
Schriften | | |- Schriften
| | | |- Layout
| Medienanfragen

• ext: Alle benutzerdefinierten Extesion-Stile
• int: Alle benutzerdefinierten Integrationsstile
• bericht: Alle benutzerdefinierten Berichtsstile
• punkt: Alle benutzerdefinierten Seiten-Stile

Kompilieren

Zur Kompilierung verwenden wir ab sofort GULP und dafür müssen wir zu Beginn unserer Arbeit nur noch gulp im Root-Verzeichnis der Website-Extension ausführen und jetzt hört GULP auf alle Änderungen, die wir in unseren weniger Dateien vornehmen. Bei Änderungen wird ein neues Stylesheet erstellt.

JavaScript

Im Progamming von JavaScript hat sich das am meisten geändert, von nun an verwenden wir das neue ES6.

• Hier sehen Sie, was es Neues gibt: https://babeljs.io/docs/learn-es2015/
• ES6-Dokumentation: https://leanpub.com/exploring-es6/read

Kompilieren

Die JavaScript-Dateien müssen auch kompiliert werden, da ES6 nicht von allen Browsern unterstützt wird. Das Kompilieren beginnt mit dem weniger kompilierten, so dass wir nichts tun müssen.