ModX Tutorial

Changing the net, one site at a time…

Template Import in ModX vornehmen
Erstellung  - Import  -  Implementierung  
  www-icon
1. Template in RapidWeaver erstellen  
 

Mit wenig Aufwand hat man in Rapid-Weaver ein  schönes Template gewählt, individualisiert und lokal gespeichert (Dazu bald auch ein Tutorial!). Diese Exportdatei enthält alles, was wir für die Implementierung brauchen: Eine Index-html mit den Header-Scripten und den Verweisen auf die .css-Dateien u nd einen Ordner namens "rw-common", der alle notendigen DAten enthält. So sind nur einige wenige Dateien zu bewegen, bzw. die Index-html ins ModX zu copy-pasten. Als letzter Schritt werden dann die statischen Inhalte gegen dynamischs ausgetauscht. Wenn man's kann eine Sache von 15 Minuten!

   
2. RapidWeaver Template importieren
   
Links sieht man nun den Ordnerinhalt, den RapidWeaver beim Exportieren erstellt hat.

Er enthält zwei Dateien: den Ordner "Meine Website" und das die Programmdatei "rw-website".
Der Ordner "meine Website" enthält die Index.html und einen Ordner namens "rw-common"

 

Im Ordner "rw-commomn" liegt der "themes-ordner" mit allen Dateien, die das Thema "fade" benötigt. Die Index-html, die 3 Ebenen höher liegt, verweist mit allen Links auf die css-Scripte, Images und alle weiteren im Ordner enthaltenen Dateien.

Diese logische und in sich geschlossene Struktur erleichtert den Import in ModX sehr.

 top-icon  
3. RapidWeaver Template in ModX implementieren

 
3.1 SourceCode der Index-html kopieren
 

RapidWeaver Templates lassen sich sehr einfach in ModX implementieren:

Die Index.html mit einem Web-Editor öffnen ( keinesfalls mit Word!!! ); den gesamten Code kopieren. Wer wissen will, wieso Word Mord ist, wenn man Code bearbeitet, der liest hier nach! (-> weiterlesen)

 

 rw-template-02

re-template-03
 

bare-bones-icon

 

textwrangler-icon

mac-os-icon

TextWrangler von Bare Bones ist ein Texteditor und der Nachfolger von BBEdit Lite, der abgespeckten Variante von BBEdit. Während die erste Version noch kostenpflichtig war (49$), ist das Programm seit Version 2.0 kostenlos herunterzuladen.



 top-icon  
3.2  Ins Backend einloggen und Elemente-Verwaltung öffnen. 
 
Den ModX-Manager öffnen (http://www.meineURL/modx/manager)
 
 
modx-manager-oeffnen   Dazu müssen Benutzername und Kennwort in die jeweiligen Felder eingegeben werden.
Nun klicken wir in "Elemente" und wählen hier die Option Elemente-Verwaltung aus.

Als nächstes wird die Option "Neues Template" aktiviert.
   
manage-elements-template
 top-icon
 3.3 Inhalt des RW-Templates einfügen
 
Wir setzen jetzt den Cursor ins Eingabefeld  unter der Option "Template-Code (HTML)" und fügen den Code unserer Index.html aus RapidWeaver hier ein.

Dann geben wir dem neuen Template einen Namen und fügen eine kurze Beschreibung hinzu.

Im Eingabefeld sehen wir nun den Quellcode der Seite mit allen dazugehörigen Links zu allen Dateien und Scripten, die im Ordner "rw-common" liegen.
Diese Aktion wird nun mit dem Befehl "Speichern" abgeschlossen.

speichern
 
insert-template
 top-icon  
 3.4 FTP-Upload des Ordners "rw_common"

upload01  upload02 
   

rw-commons-modxWenn der Client die Verbindung hergestellt hat, sieht man die oberste Ebene der Site.

Nun öffnet man den Ordner "html" .

Hier öffnen wir den Ordner "modx"  per Doppelklick und laden den Ordner "rw-common" in dieses Verzeichnis. 
 top-icon  
3.5 Zuweisen des Templates
 
Schließlich muss nun noch das neu erstellte Template den zu erstellenden Seiten zugewiesen werden:
 

template-zuweisen

geht man nun im Manager auf Vorschau / "Preview", erscheint das von uns erstellte Template - freilich noch ohne die Variablen.

in den nächsten Schrittten werden wir schrittweise den dynamischen Content ( -> mehr Informationen) und die Navigation hinzufügen ( -> mehr Informationen).

top-icon