Nach der Konvertierung
Nachdem Sie die konvertierten Daten erhalten haben, folgen Sie dieser Anleitung um das Projekt abzuschließen:
- Erstellen Sie ein zweites komplettes Backup (Datenbank + Dateien)
- Importieren Sie die SQL Datei (zB. mit PHPMyAdmin)
- Laden Sie die Datei mask.json in den Ordner /typo3conf/ hoch
- Installieren Sie die aktuelle Mask Version
- Testen Sie das TYPO3-Backend. Sie müssen alle Inhaltselemente in allen Sprachen sehen und editieren können. Bei mehrsprachigen Websites beachten Sie besonders Elemente mit Spalten und Containern
- Fahren Sie mit dem TYPO3 upgrade fort (Extensionupdates usw.)
- Inkludieren Sie das Mask TypoScript Template (Template -> root page -> Edit the whole Template record -> Include). Beachten Sie, dass zuerst css_styled_content oder fluid_styled_content vor dem Mask Template eingebunden werden muss
- Passen Sie das TypoScript setup an (siehe untenstehend)
- Passen Sie das HTML Ihrer Seitenvorlagen und Inhaltselemente an (siehe untenstehend)
Wenn Sie Unterstützung benötigen oder diese Arbeiten nicht selbst durchführen möchten, nehmen Sie Kontakt mit uns auf. Wir senden Ihnen ein unverbindliches Angebot zu. Der Preis richtet sich nach der Projektgröße.
Perfektionieren Sie Ihr Projekt
- Verschieben Sie die Backend-Layouts von der Root Seite (uid=0) auf eine Seite oder einen Ordner. Benutzen Sie dafür das TYPO3 Listen-Modul.
- Machen Sie Feineinstellungen bei den Backend-Layouts. Ordnen Sie Inhaltsspalten und vergeben Sie sprechende Namen.
- Fügen Sie die Inhaltsspalte 9999 zu Ihren Backend-Layouts hinzu, wenn Sie die "nicht verwendeten Elemente" von TemplaVoila sehen möchten.
- Verwenden Sie das Mask-Backend-Modul um weitere Feineinstellungen bei den Inhaltselementen zu setzen.
- Erstellen Sie eine Backend-Vorschau für jedes Inhaltselement. Meist genügt es das HTML vom Ordner /content/ in den Ordner /backend/ zu kopieren.
TypoScript anpassen
Ändern Sie das PAGE Objekt von TemplaVoila zu:
page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
2 = TEXT
2.value = fileadmin/templates/subpage.html
default = TEXT
default.value = fileadmin/templates/index.html
}
}
Beachten Sie, dass '2' für das Backend-Layout mit der uid 2 steht. Passen Sie diese uid und den Pfad zur HTML Datei an und fügen Sie weitere Zeilen für alle Backend-Layouts hinzu.
Wenn TemplaVoila die HTML-Header eingebunden hat, übernehmen Sie dies nun per TypoScript. Beispiele:
page.includeCSS.myfile = fileadmin/css/myfile.css
page.includeJS.jquery = fileadmin/js/jquery.js
page.headerData.50 = TEXT
page.headerData.50.value (
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
)
HTML anpassen
Erstellen Sie eine HTML-Datei für jedes Backend-Layout und kopieren Sie den HTML code vom TemplaVoila HTML Template hinein. Natürlich können Sie auch die HTML-Datei von TemplaVoila direkt verwenden.
Ersetzen Sie alle HTML-Tags die in TemplaVoila gemappt wurden mit Fluid Tags. Bei Seitenvorlagen handelt es sich meistens um TypoScript-Felder oder Inhaltsspalten. Beides ersetzt man mit:
<f:cObject typoscriptObjectPath="lib.field_menu" />
Verwenden Sie bei lib.field_menu den gleichen TypoScript Pfad wie in Templavoila. Meist funktioniert alles auf Anhieb wie zuvor.
Für Inhaltsspalten verwendet man lib.content0, wobei 0 für die colPos des Backend-Layouts steht.
Im TypoScript Setup erstellt man nun für jede Inhaltsspalte folgende zwei Zeilen:
lib.content0 < styles.content.get
lib.content0.select.where = colPos=0
Für Inhaltselemente gilt nahezu der gleiche Ablauf. Erstellen Sie für jedes Inhaltselement eine HTML-Datei im Ordner /fileadmin/templates/content/. Als Dateiname wird der key des Inhaltselementes verwendet (werfen Sie dazu einen Blick ins Mask Backend-Modul).
Migrieren Sie nun das HTML von TemplaVoila mit den Fluid Tags von Mask in diese Dateien. Sie finden alle nötigen Fluid-Tags im Mask Backend-Modul.
Tipp: Wenn Sie noch Zugriff auf das alte TemplaVoila Projekt haben, schauen Sie ins TemplaVoila Backend-Modul und editieren Sie das jeweilige Template. Fahren Sie mit der Maus über die bunten Tag-Symbole und Sie sehen genau welcher HTML-Teil gemappt wurde. Ersetzen Sie diesen Teil mit den Fluid Tags.