Noch als kleine Information am Rande: Die Inhalte besitzen eine gewisse Hierarchie. Innerhalb einer Seite kann es mehrere Artikel geben. Die Artikel wiederum sind in Elemente wie Überschriften, Listen, Absätze usw. unterteilt.

Artikel anlegen

Im Backend finden wir unter Inhalte den Punkt Artikel. In der Übersicht finden wir unsere Seitenstruktur wieder. Um nun einen neuen Artikel anzulegen klicken wir auf “Neuer Artikel”. Anschließend können wir durch Klick auf das Clipboard-Icon die Seite auswählen, in der der Artikel erstellt werden soll. Ich fange vorne an und wähle die Startseite. Die Reihenfolge ist jedoch beliebig .

Wir geben dem Artikel einen Titel, mit dem wir diesen in der Übersicht leichter wiederfinden. Außerdem soll der Artikel in der Hauptspalte angezeigt werden. Das sollte jedoch bereits ausgewählt sein. Sofern man mehrere Artikel auf einer Seite unterbringen möchte, kann man den Artikeln einen Teaser-Text geben. Unter der Rubrik “Veröffentlichung” setzen wir die Option “Artikel veröffentlichen”, damit der Artikel auch im Frontend zu sehen ist. Wir klicken auf Speichern und bearbeiten und kommen somit in die Übersicht der Artikelelemente.

Elemente

Wie den Artikel legen wir von hier aus einen Text an. Als Elementtyp wählen wir zunächst eine Überschrift, geben den Text für diese ein und wählen die Ordnung der Überschrift. Mit einem Klick auf “speichern und neu” wird dieses Element gespeichert und wir können das nächste anlegen. Diesmal einen Text. Texten kann man direkt eine Überschrift geben, jedoch empfehle ich jedes Textelement separat anzulegen – auf diese Weise ist man etwas flexibler.

Liste

Elemente

Formular

Der WYSIWYG-Editor bietet uns weitere Möglichkeiten den Text zu formatieren. Wir klicken nachdem wir den Text eingegeben haben auf “speichern und schließen” und kommen somit wieder zu der Übersicht mit den Artikelelementen. Von hier können wir bestehende Artikelelemente bearbeiten, löschen oder verschieben.

Wir haben nun den ersten Artikel angelegt. Für die restlichen Seiten legen wir auf gleicher Art und Weise die Artikel an. An sich wären wir damit schon am Ende, jedoch möchte ich noch auf die einzelnen Elemente eingehen, um diesen Teil etwas abzurunden.

Element-Typen

Überschrift

Überschriften erklären sich von selbst. Sie dienen dazu, eine Überschrift in den Artikel einzufügen. Dieses Element haben wir vor kurzem Kennen gelernt.

Text

Auch dieses Element wurde oben Beschrieben. Hiermit werden formatierte Texte in den Artikel eingefügt. Die Eingabe erfolgt dabei über einen Rich-Text-Editor, der ein paar Funktionen bietet, die man aus Textverarbeitungsprogrammen kennt und bestimmte Formatierungen auf Knopfdruck setzen.

HTML

Das Inhaltselement HTML dient in erster Linie dazu, Inhalte darzustellen, die sich nicht mit den anderen vorhandenen Elementen realisieren lassen. Man muss jedoch beachten, dass bestimmte HTML-Tags nicht erlaubt sind. Diese werden automatisch entfernt.

Welche Tags erlaubt sind, findet man in der “‘system/config/config.php”‘, bzw. lassen sich dort konfigurieren.

Code

Code-Snippets können mit diesem Inhaltselement dargestellt werden. Eine Ausführung des Codes findet nicht statt.

Bild

Auch dieses Element ist selbsterklärend.

Hyperlink

Hyperlink-Elemente fügen Text- oder Grafik-Links ein. Links lassen sich aber auch in Textelementen im Fließtext darstellen.

Für E-Mail-Adressen gibt man das ”mailto://-Protokoll an. TYPOlight wird automatisch die E-Mail-Adresse verschlüsseln, damit diese nicht ohne weiteres von SPAM-Bots ausgelesen werden können.

Liste

Hiermit lassen sich Aufzählungen in einen Artikel einfügen. Mittels JavaScript lässt sich die Liste erweitern.

Tabelle

Auch unter diesem Element wird sich jeder etwas vorstellen können. Hier hilft ebenfalls ein JavaScript die Tabelle um Zeilen und Spalten zu erweitern.

Download

Mit diesem Element kann man einen Link zu einer Datei einfügen. Beim Klick auf den Link wird der “Speichern unter”-Dialog geöffnet. Der integrierte Downloadmanager prüft zuvor, ob der Benutzer zum Download der Datei berechtigt ist.

Bildergalerie

Hiermit können eine Reihe von Bildern als Galerie dargestellt werden. Die Großansichten der Bilder werden mit dem mittlerweile bekannten Lightbox-Effekt dargestellt.

Top Link

Dieses Element fügt einen Link zum Seitenanfang ein und eignet sich bei recht langen Seiten.

Akkordeon

Dieses Inhaltselement fügt ein Feld eines mootools Akkordeons ein. Das Akkordeon-Element funktioniert wie das Text-Element, außer dass beim Akkordeon-Element eine Überschrift eingegeben werden muss, damit das Element geöffnet und geschlossen werden kann. Die Überschrift kann HTML-Code enthalten und somit auch ein Bild anstatt eines Textes sein.

Inhalt

Dieses Element dient dazu, ein bereits vorhandenes Inhaltselement noch einmal anzuzeigen. Auf diese Weise muss man Änderungen an einem mehrmals vorkommenden Inhaltselement nur einmal vornehmen. Die Frontend-Ausgabe ist identisch mit der Frontend-Ausgabe des original Inhaltselements. Eigenschaften wie Ausrichtung, Abstände und Stylesheet-ID können bei Bedarf überschrieben werden.

Formular

Dieses Element dient dazu, ein Formular in den Artikel einzufügen. Zu Formularen gibt es mehr im nächsten Tutorial.

Modul

Mit diesem Element lassen sich Module einbinden.

Schlußwort

Nun sollte es ein leichtes sein unseren Webauftritt mit Inhalten zu füllen. Im nächsten Teil werden wir uns den Formularen widmen und ein Kontaktformular erstellen.

Aber schauen wir uns erst einmal kurz das Templatesystem von TYPOlight an.

Das Templatesystem

TYPOlight hat einige Basis- bzw. Systemtemplates. Sofern kein eigenes Template definiert wurde, wird das entsprechende Systemtemplate – sofern vorhanden – verwendet. Unsere eigenen Templates liegen im gleichnamigen Verzeichnis der Installation.

Sofern nicht ein spezielles Template überschrieben werden soll, ist die Benennung im Grunde frei. Jedoch sollten Frontend-Templates mit einem fe_ beginnen, z.B. fe_startpage.tpl. In der Regel gibt es ein Frontend-Template, welches die Struktur der Seite beinhaltet. Soll die Startseite einen anderen Aufbau als die Folgeseiten haben, werden hierfür getrennte Templates erstellt.

Unter Umständen können spezielle Templates überschrieben werden. Beispielsweise das Template fe_news.tpl für einen Artikel aus einem Newsarchiv. Solche Templates beinhalten nicht die gesamte Seitenstruktur, sondern nur die Struktur des entsprechenden Elements und werden in das Basistemplate integriert.

Das Template

Beginnen wir mit dem Erstellen des Templates. Zunächst schauen wir uns das Layout an. Es besteht im wesentlichen aus dem Header, einer Hauptspalte auf der linken Seite, eine Seitenspalte rechts und dem Footer. Genau diese Bereiche – Header, Main, Right und Footer – stehen uns bereits zur Verfügung.

Wir erstellen nun eine Kopie der index.html und speichern diese im Verzeichnis /templates unter dem Namen fe_standard.tpl ab. Im Verzeichnis tl_files erstellen wir ein neues Verzeichnis bluebusiness. Hierein kopieren wir die Grafiken und Stylesheets des Layouts. Das Verzeichnis tl_files ist im Backend über die Dateiverwaltung pflegbar, weshalb es Sinn ergibt hier die im Template verwendeten Dateien unterzubringen. So kann später bequem eine Datei, z.B. die Headergrafik, ausgetauscht werden.

Nun bearbeiten wir die fe_standard.tpl und passen zunächst den head-Bereich an. Hier erstmal der Original Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>BlueBusiness by christian-pansch.de</title>
        <meta http-equiv="Content-Language" content="English" />
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <meta name="author" content="Christian Pansch (www.christian-pansch.de)" />
        <meta name="description" content="Design by christian-pansch.de" />
        <meta name="keywords" content="xhtml,css,template,webdesign" />
        <meta name="Robots" content="index,follow" />
        <link href="bluebusiness.css" rel="stylesheet" type="text/css" />
   </head>

Folgendens werden wir anpassen:

• Hinzufügen des base-Tags, da dieser von TYPOlight benötigt wird,
• den Titel der Seite mit Platzhaltern ersetzen,
• den Pfad zur CSS-Datei korrigieren und
• Platzhalter für Sprache und Zeichensatz einfügen.

Nachfolgend der angepasste Quelltext.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>" xml:lang="<?php echo $this->language; ?>">
    <head>
        <base href="<?php echo $this->base; ?>"></base>
        <title><?php echo $this->mainTitle; ?> | <?php echo $this->pageTitle; ?></title>
        <meta http-equiv="content-type" content="text/html; charset=<?php echo $this->charset; ?>" />
        <meta name="author" content="Christian Pansch (www.christian-pansch.de)" />
        <meta name="description" content="<?php echo $this->description; ?>" />
        <meta name="keywords" content="<?php echo $this->keywords; ?>" />
        <meta name="Robots" content="index,follow" />
        <link href="tl_files/bluebusiness/bluebusiness.css" rel="stylesheet" type="text/css" />
   </head>

Folgende Platzhalter wurden benutzt:

• $this->language
  Dies wird durch die Sprache einer Seite ersetzt, z.B. de für Deutsch oder en für Englisch.
• $this->base
  Dieser Platzhalter wird mit der BASE-URL ersetzt, in unserem Beispiel http://example.org/
• $this->mainTitle
  Dieser Platzhalter steht für den allgemeinen Seitentitel, der bei dem Startpunkt für unsere Website vergeben wurde.
• $this->pageTitle
  Titel der aktuellen Seite, z.B. Startseite.
• $this->charset
  Fügt den zu verwendenden Zeichensatz in das Template ein.
• $this->description und $this->keywords
  Diese beiden Platzhalter sind für die Meta-Beschreibung und Keywords. Sie dienen vor allem der Suchmaschinenoptimierung.

Wer den vollen Umfang von TYPOlight wie Lightbox oder Tablesort nutzen will, fügt noch die folgenden Zeilen in den head-Bereich ein:

<?php echo $this->robots; ?>
<script type="text/javascript" src="plugins/tablesort/js/tablesort.js"></script>
<script type="text/javascript" src="plugins/mootools/mootools.js"></script>
<script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
<script type="text/javascript" src="plugins/ufo/ufo.js"></script>
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="plugins/tablesort/css/tablesort.css" type="text/css" media="screen" />
<?php echo $this->head; ?>

Als nächstes kommt der body-Bereich. Als erstes ersetzen wird den body-Tag mit dieser Zeile:

<body <?php echo ($this->class ? ' class="' . $this->class . '"' : '') . ($this->onload ? ' onload="' . $this->onload . '"' : ''); ?>>

Nun können wir dem Body eine eigene CSS-Klasse zuweisen und zwar für jede einzelne Seite. Nun werden wir wieder ein paar Platzhalter im Template platzieren. Im div-Tag mit der ID container-header tragen wir unseren Slogan ein und ersetzen den Seitennamen mit $this->mainTitle. Das ganse sieht dann so aus:

<div id="container-header">
    <div id="container-name"><?php echo $this->mainTitle; ?></div>
    <div id="container-slogan"><span>"</span>Mein Slogan<span>"<div>
</div>

Beim nächsten div wird, mit Ausnahme der Grafik, der gesamte Inhalt ersetzt. Der folgende Quelltext-Part

<div id="container-eyecatcher">
    <div id="container-navigation">
        <ul id="navigation">
            <li><a href="#">home<></li>
            <li><a href="#">products</a></li>
            <li><a href="#">services<></li>
            <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>
            <li><a href="#">sitemap</a></li>
        </ul>
    </div>
    <img src="images/business_eyecatcher.jpg" alt="Business picture" />
</div>

wird wie folgt abgeändert:

<div id=“container-eyecatcher“>
    <?php echo $this->header; ?>
    <img src="tl_files/bluebusiness/images/business_eyecatcher.jpg" alt="Business picture" />
</div>

Auf gleiche Weise verfahren wir beim Inhaltsbereich. Im div mit der ID content-content gibt zwei divs – content und border. Der Inhalt von content wird mit $this->main, der von border mit $this->right ersetzt. Zum Schluss der Footer. Hier ersteze wir den Inhalt von footer-copyright mit $this->footer. Das gesamte Template sieht nun so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang=“<?php echo $this->language; ?>“ xml:lang="<?php echo $this->language; ?>">
    <head>
        <base href="<?php echo $this->base; ?>"></base>
        <title><?php echo $this->mainTitle; ?> | <?php echo $this->pageTitle; ?></title>
        <meta http-equiv="content-type" content="text/html; charset=<?php echo $this->charset; ?>" />
        <meta name="author" content="Christian Pansch (www.christian-pansch.de)" />
        <meta name="description" content="<?php echo $this->description; ?>" />
        <meta name="keywords" content="<?php echo $this->keywords; ?>" />
        <meta name="Robots" content="index,follow" />
        <link href="tl_files/bluebusiness/bluebusiness.css" rel="stylesheet" type="text/css" />
    </head> 

    <body <?php echo ($this->class ? ' class="' . $this->class . '"' : '') . ($this->onload ? ' onload="' . $this->onload . '"' : ''); ?>>
        <div id="container">
            <div id="container-header">
                <div id="container-name"><?php echo $this->mainTitle; ?></div>
                <div id="container-slogan"><span>"</span>Mein Slogan<span>"</span></div>
            </div>
            <div id="container-eyecatcher">
                <?php echo $this->header; ?>
            </div> 

            <div id="container-content">
                <div id="content">
                    <?php echo $this->main; ?>
                </div><!-- CONTENT END --> 

                <div id="border">
                    <?php echo $this->right; ?>
                </div>
            </div> 

            <div id="container-footer">
                <div id="footer">
                    <div id="footer-copyright">
                        © 2007 yourbusiness.com - all rights reserved. <a href="#">Terms of use</a><br />
                        <!--This theme is free for distriubtion,  so long as  link to openwebdesing.org and dubaiapartments.biz  stay on the theme-->
                        Courtesy <a href="http://www.openwebdesign.org" target="_blank">Open Web Design</a>
                        <a href="http://www.dubaiapartments.biz" target="_blank"><img src="tl_files/bluebusiness/spacer.gif" width="5" height="5" border="0"/></a>
                        Thanks to <a href="http://www.dubaiapartments.biz/" target="_blank">Dubai Hotels</a>
                    </div>
                    <div id="footer-meta">
                        <a href="http://validator.w3.org/check?uri=referer">XHTML</a> |
                        <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
                        <a href="http://www.christian-pansch.de" title="Webdesign Bremen">Design by christian-pansch.de</a>
                    </div>
                </div>
            </div>
        </div><!-- ENDE container -->
    </body>
</html>

Damit hätten wir das Template an sich erstellt. Fertig sind wir jedoch noch nicht. Es müssen nun noch im Backend Module und das Seitenlayout erstellt bzw. festgelegt werden.

Module

Insgesamt müssen 2 Module angelegt werden – Hauptnavigation und Adressblock. Das Modul für Artikel, also dem eigentlichen Content, steht bereits standardmäßig zu Verfügung. Nach aufrufen des Moduls “Module” klicken wir auf “Neues Modul”. Hier geben wir als Titel “Hauptnavigation” ein. Das Feld für die Überschrift bleibt leer und als Modultyp wählen wir “Navigationsmenü”. Unter dem Formular-Bereich “Experten-Einstellungen” geben wir noch die ID “container-navigation” ein. Klick auf “Speichern und neu” und wir können das zweite Modul anlegen. Als Titel tragen wir den Wert Adressblock ein und wählen unter Modultyp “Eigener HTML-Code” aus. Nach dem speichern bekommen wir ein Textfeld, in dem wir unseren HTML-Code einfügen können – hier als Beispiel:

<h4>Unsere Adresse</h4>
<address>
Example<br/>
Musterweg 2<br/>
12345 Musterstadt
</address>
<address>
Telefon: +49 123 456789<br/>
Fax: +49 123 456790
<br/><br/>
E-Mail: <a href="mailto:info@example.com">info@example.com</a>
</address>

Mit diesem Modul steht nun auf jeder Seite die Kontaktadresse. Nur noch speichern und wir haben erstmal unsere Module.

Seitenlayout

Als nächstes legen wir ein Seitenlayout an. Dazu klicken wir – wie gewohnt – unter “Seitenlayouts” auf “Neues Layout”. Als Titel geben wir “Standard” ein und markieren die darunter liegende Checkbox an. Durch diese Checkbox wird immer dieses Layout gewählt, wenn nicht ein anderes explizit beim Anlegen einer Seite ausgewählt wird.

Unter dem Abschnitt “Spaltenkonfiguration” wählen wir die dritte Option (Hauptspalte und rechte Spalte). Das Feld “Breite der rechten Spalte” belassen wir leer. Dies wird über die Stylesheet-Datei des Templates gesteuert.

Im Bereich “Frontend-Module” weisen wir nun die notwendigen Module dem Layout und ihrer Position im Layout zu. Als erstes wählen wir das Modul “Artikel” sowie die Spalte “Hauptspalte” und klicken auf das Plus-Icon. Diesen Schritt wiederholen wir mit den Modulen “Hauptnavigation” in der “Kopfzeile” und “Adressblock” in “Rechte Spalte”. Beim letzten Modul, das wir dem Layout zuweisen, brauchen wir nicht mehr auf das Plus-Icon klicken.

Unter “Experten-Einstellungen” versichern wir uns, das als Seitentemplate “fe_standard.tpl” ausgewählt ist. Hier können bei Bedarf noch die ID für Google Analytics, onload-Handler und zusätzliche Tags, die im head-Bereich des Templates stehen sollen, eingegeben werden. Mit “Speichern und schließen” schließen wir die Erstellung des Layouts ab.

Wer sich jetzt das Frontend ansieht, sollte schon das Template sehen. Wenn nicht sollte man prüfen ob die Rechte für das Template-File korrekt gesetzt sind. Weiter Hinweise erhält man, wenn in den Systemeinstellungen die Anzeige von Fehlermeldungen aktiviert wird.

Stylesheet-Datei

Als letzter Schritt müssen noch Anpassungen an den Styles vorgenommen werden. Zunächst ändern wir die Zeile

ul#navigation

in

#container-navigation ul

und alle Zeilen die mit #navigation beginnen in #container-navigation.

Ein erneuter Blick auf das Frontend lässt erkennen, dass das Template dem gewünschten Ergebnis zwar schon näher kommt, aber ein paar Kleinigkeiten angepasst werden müssen. Der aktive Navigationspunkt stimmt noch nicht ganz. Die Zeile #container-navigation li a wir wie folgt erweitert:

#container-navigation li a, #container-navigation li span

Dadurch reiht sich der aktive Menüpunkt optisch zu den anderen ein. Jetzt wird noch

#border p

in

#border p, #border address

geändert und folgende Angabe hinzugefügt:

font-style: normal;

Damit wird dann auch die Adresse in der rechten Spalte nicht mehr kursiv dargestellt.

Schlusswort

Unsere TYPOlight-Installation hat nun ein Template. Natürlich sieht die Seite noch sehr leer aus. Das wird sich mit dem Anlegen von Artikeln jedoch ändern . Damit beschäftigen wir uns allerdings erst im nächsten Teil.

Ich möchte nur ungern ein Tutorial schreiben, welches unter Umständen schon nach wenigen Wochen nicht mehr gültig ist. Ich bitte deshalb um Verständnis für die Unterbrechung der Serie. Sobald TYPOlight 2.7 in einer Version für den Produktivbetrieb vorliegt geht es weiter.

In diesem Teil der Serie zeige ich, wie man die Struktur der Website anlegt. Außerdem gehe ich noch kurz auf die Einstellungen ein.

Einstellungen

Zuerst loggen wir uns ins Backend ein, dass sich unter http://example.org/typolight/ befindet. Unter dem Punkt System finden wir die Einstellungen. Die einzelnen Optionen sind alle gut beschrieben, auf ein paar gehe ich dennoch ein.

Zum einen ändern wir hier den Titel der Website. Des weiteren können wir das Format festlegen, wie Datumsangaben erscheinen sollen. Ich belasse die Einstellungen auf dem internationalen Format Jahr-Monat-Tag und ändere lediglich die Zeitzone auf Europa/Berlin.

Wer seine TYPOlight-Installation in einem Unterverzeichnis erstellt hat – zum Beispiel example.org/cms/ – trägt unter “Relativer Pfad zum TYPOlight-Verzeichnis” den Wert /cms ein. Standardmäßig bietet uns das CMS fünf Layoutbereiche:

• header
• left
• main
• right und
• footer

Wer nun weitere Layoutbereiche benötigt kann unter “Eigene Layoutbereiche” seine gewünschten, mit Kommata separierten, Bereiche in das Feld einträgt.

Zu guter Letzt wählen wir noch die Option “URLs umschreiben”, dazu muss jedoch mod_rewrite auf dem Server zur Verfügung stehen. Mittlerweile wird TCPDF für den PDF-Druck verwendet. Wer lieber wieder DOMPDF verwenden will, kann dies ebenfalls hier einstellen. Mit “Speichern und schließen” werden unsere Einstellungen übernommen und wir landen wieder auf der Startseite des Backends.

Seitenstruktur

Als nächstes wollen wir unsere Seitenstruktur anlegen. Das geschieht unter Layout → Seitenstruktur. Wir klicken auf “Neue Seite” und bekommen einen Eintrag mit dem Titel unserer Website zu sehen. Dies ist noch keine Seite, sondern der Punkt an, oder besser gesagt in dem wir die Seite anlegen können. Wir klicken nun also auf das leicht blickende Clipboard-Icon und kommen zu dem Formular, mit dem wir die Seite anlegen.

Wir vergeben einen beliebigen Seitenname und wählen als Seitentyp den Eintrag “Startpunkt einer neuen Website”. Alle anderen Felder belassen wir wie sie sind und wählen nur noch die Option “Veröffentlicht”. Anschließend klicken wir auf “speichern und schließen”.

Startpunkt

Seite

Struktur

Als nächstes klicken wir wieder auf “Neue Seite” und klicken diesmal auf das Clipboard-Icon mit dem Pfeil nach rechts. Diesmal lassen wir die Einstellungen für den Seitentyp auf “Reguläre Seite”. Als Seitenname geben wir Startseite, als Alias index ein. Auch im Feld Seitentitel geben wir Startseite ein. Hier ebenfalls wieder die Option “Veröffentlicht” wählen, sonst erhält man unter Umständen später erneut die Meldung “No pages found”. Nun klicken wir auf “Speichern und neu” und legen direkt die nächsten Seiten an.

Bei der letzten Seite klicken wir auf “Speichern und schließen” und kommen somit auf die Übersicht mit der Struktur unserer Website. Ich habe unter anderem eine Seite Aktuelles angelegt und hier zusätzlich die Option “Seite im Menü verstecken” gesetzt. Diese Seite wird später nicht über die Hauptnavigation erreichbar sein.

Schlusswort

Wir haben in diesem Teil die ersten Einstellungen vorgenommen und eine Struktur für die Website festgelegt. Gehen wir jetzt auf das Frontend bzw. die Frontend-Vorschau, erhalten wir nicht mehr die Meldung “No pages found”, dafür aber “No layout specified”. Und mit dem Thema Layouts, also den Templates, wird sich der nächste Teil beschäftigen.

In diesem Teil und den anderen Teilen der Serie nehme ich an, dass die Domain example.org lautet und das CMS direkt über diese Domain erreichbar sein soll. Möchte man TYPOlight in einem Unterverzeichnis betreiben – zum Beispiel example.org/cms/ – sind die Pfade natürlich entsprechend anzupassen.

Installation

Für TYPOlight müssen folgende Systembedingungen erfüllt sein:

• Apache Webserver oder IIS. Apache wird empfohlen.
• PHP in der Version 5.1 oder höher
• MySQL in Version 4.1 oder höher
• GDLib
• mcrypt (optional)

Zuerst laden wir uns TYPOlight von der Projektseite herunter, entpacken das Archiv und laden die Dateien auf unserem Server oder Webspace. Anschließend überprüfen wir, ob die Datei system/config/localconfig.php beschreibbar ist, sonst bekommen wir einen entsprechenden Hinweis bei der Installation. TYPOlight wird während der Installation versuchen, in die Datei zu schreiben.

Sollte noch keine Datenbank angelegt sein, holen wir das nun nach. Als nächstes rufen wir das Installtool auf, welches sich unter http://example.org/typolight/install.php befindet. Bei der Erstinstallation lautet das Passwort, nach dem wir gefragt werden, “typolight”.

Anschließend kann und sollte das Passwort für spätere Aufrufe – zum Beispiel für Updates – geändert werden. Als nächstes geben wir einen Encryption Key ein oder lassen es uns direkt generieren, indem wir das Feld einfach leer lassen. Mit diesem Schlüssel können Daten in verschlüsselter Form gespeichert werden. Den Hinweis, dass wir uns den Key notieren und – sofern es verschlüsselte Daten gibt – in Zukunft nicht ändern sollen beherzigen wir.

Nun geben wir die Daten für die Datenbankverbindung ein und führen im nächsten Schritt das Update auf die Datenbank aus. Dabei werden alle Tabellen für unsere TYPOlight-Installation angelegt.

Anschließend kann man eine Beispielwebsite importieren. Davon sehen wir aber ab und legen in einem der nächsten Teile dieser Serie die Seitenstruktur nach unseren Bedürfnissen an. Zu guter Letzt legen wir jetzt noch unseren Adminuser an.

Updates

Die Prozedur für Updates ist ähnlich einer Installation. Grundsätzlich sollte man vor einem Update eine Sicherung seiner Daten vornehmen. Darunter fallen die Dateien im Verzeichnis tl_files, templates sowie die Dateien system/config/localconfig.php, system/config/dcaconfig.php und – falls vorhanden – sitemap*.xml. Auch sollte man die Hinweise in der Datei CHANGELOG.txt beachten. Beispielsweise war beim Update auf Version 2.6.4 eine Änderung am Template fe_page notwendig.

Als nächstes laden wir uns die aktuelle Version von TYPOlight herunter, entpacken die Dateien und laden sie auf den Server. Bis auf die oben genannten Dateien können wir die bestehenden überschreiben. Anschließend rufen wir wieder unser Installtool unter http://example.org/typolight/install.php auf.

Hier geben wir das Passwort ein, dass wir bei der Installation vergeben haben. Wir brauchen im Grunde nur den Anweisungen des Tools folgen. Alle Daten, die bereits bei der Installation angegeben wurden, stehen uns direkt zur Verfügung. In einigen Fällen ist ein Update der Datenbank erforderlich. Nur noch auf den Button “Update database” klicken, das war es auch schon.

Wer das Nachrichtenmodul nutzt, sollte anschließend dieses Modul im Backend aufrufen, damit der Nachrichtenfeed wieder generiert wird.

Schlusswort

Wie man sieht ist sowohl die Installation als auch das Aktualisieren von TYPOlight recht einfach. Sollte es doch einmal irgendwo hapern, lohnt sich oft ein Blick in die Dokumentation und dem Forum auf der Projektseite.