Zum Inhalt springen

Anleitung: Movable Type 3.2 statische Seiten mit aktuellen Inhalten durch SSI

So sehr ich Movable Type auch schätze, es hat eine gewisse Schwäche in der Standardinstallation: Die statischen Artikelseiten, die erzeugt werden sind ziemlich leer. Es steht nicht viel mehr als der Artikel und ein Link auf die Startseite sowie die benachbarten Artikel drauf. Das komplette Menü mit den aktuellen Einträgen, Rubriken, etc. fehlt. Das muss so auch sein, denn schließlich kann nicht wegen jedem Eintrag einige hundert oder gar tausend statischen Seiten umgebaut werden.

Eine von Movable Type mitgelieferte Lösung ist der Einsatz des PHP-Skripts mtview.php. Dies halte ich aus zwei Gründen aber für keine gute Lösung. Zum einen werden die Seiten nun dynamisch erzeugt was eine zusätzliche Serverlast bedeutet. Und zum anderen unterstützen viele Movable-Type-Plugins PHP noch nicht, so dass diese Lösung diese Plugins ausschließt.

Es gibt aber eine ziemlich einfache Lösung: Die Server Side Includes (SSI) die der Apache Webserver anbietet. Diese Anleitung beschreibt, wie man mittels SSI die statischen Artikelseiten mit aktuellen Inhalten ergänzen kann.

Diese Anleitung bezieht sich auf Movable Type 3.2. Ich habe ein ähnliches Setup aber auch schon mit älteren Movable-Type-Versionen erstellt. Da müsst ihr nur ein bisschen bei den Templates anders vorgehen, weil die sich eben geändert haben.

Wichtig! Wenn ihr diese Anleitung nicht an einer Neuinstallation durchführt, müsst ihr unbedingt ein Backup machen! Wenn ihr eine Neuinstallation gemacht habt, legt zwei oder drei Testeinträge an, weil sonst haut das mit dem Testen nicht hin. Alle Angaben hier sind ohne Gewähr. Sollte sich in der Anleitung oder der Umsetzung ein Fehler einschleichen könnt ihr eure komplette Blog-Darstellung zerstören. Also fertigt das Backup wirklich an!

Zum Zeitaufwand: Auch wenn diese Anleitung recht lang aussieht, braucht ihr nur etwa 60 Minuten um das alles durchzuführen. Wer einen eigenen Root-Server sein Eigen nennt, wird etwas schneller sein, wer mittels FTP Verzeichnisse anlegen und Rechte ändern muss, wird etwas länger brauchen.

Voraussetzungen
Movable Type (ideal in Version 3.2, andere müssen leicht anders bearbeitet werden)
Apache Webserver mit SSI und XBitHack
Zugriff auf die Apache-Konfiguration für eure Domain

SSI aktivieren

Was ist SSI überhaupt? Mittels SSI kann man vereinfacht gesagt den Apache Webserver anweisen bestimmte Inhalte in die HTML-Dateien zu integrieren. In unserem Fall nutzen wir das um die aktuellen Einträge, Kategorien, etc. aus zwei anderen Dateien, die wie die Index-Datei bei jedem neuen Eintrag generiert werden. Mehr Informationen über SSI findet bei Bananajoe.

Um SSI zu aktivieren müsst ihr in der Apache-Konfigurationsdatei die Option „+Includes“ für das entsprechende Verzeichnis aktivieren. Zusätzlich empfehle ich den so genannten XBitHack zu aktivieren. Sonst müsst ihr den Dateien spezielle Endungen (z.B. .shtml) geben, damit diese per SSI verarbeitet werden können. Das Erschwert einen späteren Wechsel zurück zu statischen Seiten. (Aus welchen Gründen auch immer man das vielleicht mal will). Dazu müsst ihr in der Apache-Konfiguration noch die Zeile „XBitHack On“ eintragen. Damit reicht es die Dateien als „executable“ zu markieren (das X-Bit zu setzen, daher der Name), damit diese per SSI behandelt werden.

Bei mir sieht das so aus:

In der Datei default-server.conf steht außerhalb jedes Containers ganz am Anfang:
XBitHack On

In meiner Virtual-Host-Datei für theofel.de steht:
<Directory "/.../.../theofel.de/htdocs">
Options -Indexes SymLinksIfOwnerMatch -ExecCGI +Includes
Allow from all
</Directory>

SSI mit Movable Type vorbereiten

Auch Movable Type müssen wir noch ein wenig konfigurieren, damit das mit dem SSI klappt. Zunächst müssen wir Movable Type anweisen, unsere zukünftigen HTML-Dateien als ausführbar zu markieren, damit der XBitHack von oben zieht. Dazu tragen wir in der Konfigurationsdatei folgende Parameter ein: (Die sind schon als Kommentare da. Einfach reinnehmen und die Zeilen anpassen.)


HTMLPerms 0755
UploadPerms 0644

Dadurch werden alle HTML-Dateien mit x-Bit geschrieben. Alle Uploaddateien bekommen dieses Flag aus Sicherheitsgründen nicht.

Alle bereits existierenden HTML-Dateien müsst ihr noch manuell anpassen und dort auch die Rechte 755 (rwxr-xr-x) setzen.

Module für SSI vorbereiten

Nun legen wir die Template-Module an, die wir später auch für die SSI-Datei benötigen. Dazu gehen wir in der Movable-Type-Administration auf den Menüpunkt „Templates“ und dort dann auf „Modules“. Die Liste ist noch leer, wir legen ein neues Modul an. Dieses bekommt den Namen „head“ (im Feld „Template Name“ eintragen). Nun öffnen wir in einem zweiten Browserfenster parallel nochmal die Movable-Type-Administration, gehen dort auf die Templates und öffnen das Template „Main Index“. Dort schneiden wir alle Zeilen zwischen
<body class="layout-two-column-right">
und
<MTEntries>
aus (jeweils ohne diese Zeilen!).

Diese Zeilen fügen wir im anderen Browserfenster in unser neues Module „head“ ein und speichern dieses ab.

In dem Index-Template tragen wir in die entstandene Lücke folgenden Code ein:
<$MTInclude module="head"$>
Dieser sorgt dafür, dass an dieser Stelle das Modul „head“, welches wir soeben angelegt haben, eingebunden wird. Nun speichern wir auch dieses Template.

Auf dies selbe Art legen wir nun auch noch ein Module namens „foot“ an. Hierzu kopieren wir genau nach der soeben beschrieben Vorgehensweise aus dem Index-Template alle Zeilen, die nach dieser hier folgen (wieder ohne diese Zeile!):
</MTEntries>
Nicht wundern: Das ist ziemlich viel HTML-Code, den ihr hier kopieren müsst. (Etwas 2/3.)

Diese Zeilen in das „foot“-Module einfügen und dieses Speichern. Im Index-Template nun die entfernten Zeilen durch folgenden Code ersetzen und auch Abspeichern:
<$MTInclude module="foot"$>

Zeit für einen ersten Test: Einmal auf „Rebuild Site“ im Menü klicken und dann „Rebuild Indexes Only“ auswählen. Wenn ihr danach die Startseite eures Blogs aufruft, sollte sich dort nichts geändert haben. Wenn doch stimmt was nicht.

Einbindbare SSI-Dateien erzeugen

Jetzt legen wir ein Verzeichnis an, in dem alle SSI-Dateien angelegt werden sollen. Ich benenne dies sinnigerweise „ssi“ und lege es im Wurzelverzeichnis der Webseite ab. Das Verzeichnis muss für den Apache-Benutzer schreibbar sein.

Im nächsten Schritt legen wir die Dateien an, die wir später per SSI einbinden möchten. Dazu gehen wir wieder in die Templateverwaltung und legen ein neues Index-Template an. Dieses benennen wir „SSI head“ und legen es unter „ssi/head.html“ ab. In den Content-Body schreiben wir nur eine einzige Zeile rein, mit der wieder das bereits angelegte Modul geladen wird:
<$MTInclude module="head"$>
Die Option „Rebuild this template automatically when rebuilding index templates“ muss zwingend aktiviert bleiben.

Dann speichern wir dieses neue Template ab und wiederholen auch diesen Vorgang für den „foot“. Also ein weiteres neues Index-Template mit dem Namen „SSI foot“, der Datei „ssi/foot.html“ und dem folgenden Inhalt anlegen:
<$MTInclude module="foot"$>

Und schon sind wir bereit für den nächsten Test: Wieder über „Rebuild Site“ ein „Rebuild Indexes Only“ durchführen. Nun müssen im vorhin angelegten Verzeichnis ssi die Dateien head.html und foot.html geschrieben werden.

SSI-Dateien bzw. Module einbinden

So, nun können wir uns auch schon daran machen, dass wir die soeben erzeugten Dateien per SSI oder als Modul einzubinden. Die Unterscheidung wann wir was benötigen ist einfach: Das Modul können wir auf allen dynamisch erzeugten Seiten (wie z.B. die Kommentarvorschau) und auf allen Seiten, die mit jedem neuen Blogeintrag überarbeitet werden („Rebuild this template automatically when rebuilding index templates“) verwenden. In allen anderen Dateien kommt SSI zum Zug.

Als erstes nehmen wir uns das Template „Master Archive Index“ vor. Öffnet dieses in der Templateverwaltung. Wie ihr seht können wir hier die Integration über das Modul verwenden. dazu entfernen wir im Template alle Zeilen zwischen
<body class="layout-two-column-right">
und
<div class="archive-date-based archive">
und ersetzen diese wieder durch
<$MTInclude module="head"$>

Am Ende des Templates wird alles nach den folgenden Zeilen entfernt (diese Zeilen bleiben drin!):
</MTArchiveList>
</ul>
</div>
</div>

Und wir fügen wieder ein:
<$MTInclude module="foot"$>

Das template jetzt mit „Save and Rebuild“ abspeichern und danach die Index-Datei anschauen, ob alles stimmt. Alles ok? Gut, weiter:

Als nächstes nehmen wir uns das „Individual Entry Archive“ vor. Dieses findet ihr bei den Templates unter „Archives“. Einfach öffnen und wie folgt abändern:

Wir löschen hier die Zeilen zwischen
<body class="layout-one-column" onload="individualArchivesOnLoad(commenter_name)">
und
<p class="content-nav">
Dort setzen wir statt dessen ein:
<!--#include virtual="/ssi/head.html"-->

Zusätzlich ersetzen wir die Klasse im body-Tag durch layout-two-column-right. Die Zeile sieht also danach so aus:
<body class="layout-two-column-right" onload="individualArchivesOnLoad(commenter_name)">

Am Ende dieses Templates entfernt ihr alle Zeilen nach
</MTIfCommentsActive>
(diese befindet sich ziemlich am Ende des Templates) und ersetzt dies mit
<!--#include virtual="/ssi/foot.html"-->

Nun speichert ihr das Template ab und erzeugt über „Rebuild Site“ und „Rebuild Individual Archives Only“ die einzelnen Artikelseiten. Und nun das ganze mal anschauen. Gar nicht so übel, oder?

SSI- und Modul-Einbindung auf andere Seiten übertragen

Im Prinzip sollte jetzt klar sein, wie das mit den Template funktioniert. Die einzige Ausnahme ist das Suchtemplate, dazu komme ich gleich noch. Erst mal zu den anderen Templates. Ich schreibe hier immer nur noch den Blog, wie er nach der Ersetzung oben und unten im Template aussieht. Damit seht ihr die Zeilen auch jeweils davor und danach. (Vergesst bei der davor nicht die Klasse jeweils mit anzupassen!)

Im Template „Category Archive“ sieht es oben wie folgt aus:
<body class="layout-two-column-right">
<!--#include virtual="/ssi/head.html"-->
<p class="content-nav">

Und am Ende stehen diese Zeilen:
</MTEntries>
<!--#include virtual="/ssi/foot.html"-->

Das Template „Date-Based Archive“ ist exakt gleich wie das gerade beschrieben „Category Archive“ anzupassen.

Das Template „Comment Preview Template“ aus „System“ sieht oben wie folgt aus:
<body class="layout-two-column-right" onload="individualArchivesOnLoad(commenter_name)">
<$MTInclude module="head"$>
<h3>Previewing your Comment</h3>

Und unten sieht es dann so aus:
>/MTIfCommentsActive>
<$MTInclude module="foot"$>

Beim „Comment Pending Template“ sieht es wie folgt aus:
<body class="layout-two-column-right">
<$MTInclude module="head"$>
<h3>Thank you for commenting.</h3>

Und unten:
<p><a href="<MTEntryLink>">Return to the original entry</a></p>
&lt:$MTInclude module="foot"$>

Die Suche anpassen

Das Template der Suche wird nicht in der Datenbank gespeichert sondern befindet sich in der Datei search_templates/default.tmpl im CGI-Verzeichnis eures Webservers (wo ihr auch Movable Type hininstalliert habt). Dort müsst ihr wie folgt oben ändern:
<body class="layout-two-column-right">
<$MTInclude module="head"$>
<h2><MT_TRANS phrase="Search"></h2>

Unten sieht es nach der Änderung wie folgt aus:
</MTNoSearch>
-->
<$MTInclude module="foot"$>

Finale

Das war auch schon alles. Nun könnt ihr vorrangig in der CSS-Datei (findet ihr auch in den Templates) und den beiden Modulen „head“ und „foot“ eure Layout anpassen. Viel Spaß!

Wenn ihr diese Anleitung beim Einrichten/Anpassen eures Weblogs verwendet habt, würde ich mich über einen Kommentar mit einer URL zu eurem Weblog freuen. Danke!

Ein Kommentar

  1. Hallo Jan, muss ich eigentlich zwingend den ausgelagerten Teil des Templates zuerst in ein Modul packen und dieses dann in ein Index-Template einbinden, oder kann ich den Teil auch gleich in ein Index-Template packen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.