MojoMotor: Anleitung Design einbauen

Dieser Artikel ist ursprünglich am 01. 06. 2011 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist wahrscheinlich nicht mehr aktuell.

Ein Design in MojoMotor einzubauen ist sehr einfach. Man kann eine HTML-Vorlage und das dazugehörige Stylesheet über eine Importfunktion in das CMS einlesen. Das passiert gleichzeitig mit der Installation von MojoMotor auf dem Server.
Wie das geht, möchte ich hier kurz erklären.

1. HTML-Vorlagen und CSS vorbereiten

MojoMotor arbeitet mit so genannten Regionen (regions).

  • Als Page Regions werden Bereiche im Layout markiert, die auf jeder Seite (page) anders sind.
  • Global Regions sind Bereiche, die auf Seiten, die dasselbe Layout benutzen, immer gleich bleiben.
  • Super Global Regions werden in einem eigenen Layout gespeichert. Sie können dann in jedes andere Layout eingebettet werden.

a. Markieren der Regionen

Page Region: Die Region wird durch eine id (empfohlen) und ihre eigene CSS-Klasse gekennzeichnet: class=“mojo_page_region“.

Aus:

<h1>Seiten-Titel</h1>
<h2>Unterzeile</h2>
<p>Dieser Absatz wird jetzt editierbar</p>

wird:

<h1>Seiten-Titel</h1>
<h2>Unterzeile</h2>
<div id="page_content" class="mojo_page_region">
<p>Dieser Absatz wird jetzt editierbar</p>
</div>

Global Regions werden genauso definiert. Die CSS-Klasse heißt in diesem Fall „mojo_global_region“.

b. Die Navigation einbauen

Für ein normales Menü genügt es, in der html-Vorlage anstelle des Menüs dieses Mojo-Tag einzufügen:

{mojo:site:page_list id="nav“ class=“menu“}

Das Tag erzeugt ein Menü, das so ausgegeben wird:

<ul id="nav" class="menu">
     <li id="mojo_page_list_about"><a href="http://example.com/index.php/page/about">About</a>
     <ul>
          <li id="mojo_page_list_subpage"><a href="http://example.com/index.php/page/subpage">subpage</a></li>
     </ul>
     </li>
     <li id="mojo_page_list_contact" class="mojo_active"><a href="http://example.com/index.php/page/Kontakt">Kontakt</a></li>
     <li id="mojo_page_list_index"><a href="http://example.com/index.php">Startseite</a></li>
</ul>

c. Stylesheet

Hier muss man lediglich darauf achten, dass nur relative Pfade benutzt werden. Die Pfade sollten dann beispielsweise so aussehen:

#header {background: url(images/background.jpg)};

2. Installation

MojoMotor sucht beim Import zunächst nach einer Datei namens index.html oder index.htm
Alternativ erkennt das System default.html oder home.html. Diese Datei wird benutzt, um das Haupt-Layout zu erzeugen. Dateien mit der Endung .php erkennt MojoMotor nicht.

Alle Verzeichnisse, die importiert werden sollen, verschiebe ich in das „import“-Verzeichnis von MojoMotor. Dort befindet sich bereits ein Verzeichnis „default“. Auf dieselbe Ebene lege ich mein Verzeichnis mit der Vorlage für die neue Website.

Wenn ich nun in das Verzeichnis “unsere_neue_website“ wechsle, finde ich dort diese Struktur:
MojoMotor Dateistruktur

Zur Installation lade ich die Verzeichnisse „system“, „import“ (inklusive unserer Änderungen!), „mm_uploads“ und die Datei „index.php“ aus dem MojoMotor-Paket auf den Server hoch.
Wenn ich jetzt im Browser die Website aufrufe: http://unsere-neue-website.de/index.php, sollte sich an dieser Stelle MojoMotor zu Wort melden.

Um die Installation durchzuführen, rufe ich die Adresse http://unsere-neue-website.de/index.php/setup auf. Hier muss ich die Daten für die Datenbank zur Hand haben. Sobald ich dem License Agreement zugestimmt habe, übernimmt der Setup-Wizard das Kommando und erledigt den Rest.

Hat Dir der Artikel weitergeholfen?