| Customizing der Burda Fashion Blogs |
Einführung in technische Möglichkeiten, das Erscheinungsbild der Burda Fashion Blogs anzupassen. Anleitung als PDF downloaden
Autor: Tobias Braun
Inhaltsverzeichnis
1. Technischer Hintergrund
2. Fragen und Antworten
2.1. Wie finde ich heraus, welche Templates benutzt werden?
2.2. Wo finde ich die Templates und wie kann ich sie bearbeiten?
2.3. Kann ich eigene .css-Dateien einbinden und hochladen?
3. Beispiel
3.1. Anstelle der Überschrift ein Banner über dem eigenen Blog einblenden
3.2. Eigene Links zu z. B. YouTube-Videos in der Navigationsspalte einbinden
4. Erweiterung eines minimalen Templates
5. Weiterführende Links
|
1. Technischer Hintergrund
Die Burdafashion Weblogs basieren auf der Weblog-Software „Blojsom“ (http://wiki.blojsom.com). Die Webseiten, die von Blojsom ausgegeben werden, werden mit Hilfe von Velocity (http://velocity.apache.org/) formuliert und ausgewertet. Um Anpassungen an den Velocity-Vorlagen (=Templates) vornehmen zu können, sind Kenntnisse in HTML und CSS sehr hilfreich.
|
2. Fragen und Antworten
2.1. Wie finde ich heraus, welche Templates benutzt werden?
Blojsom bietet verschiedene Sichten (=Flavors) auf ein Blog. Diese Sichten umfassen sowohl die ganz normale HTML-Sicht, die als Standardsicht vom Browser angefordert wird, als auch ver-schiedene Syndication-Feeds (z.B. RSS) sowie die Admin-Sicht. Basis jeder Sicht ist immer ein spezifisches Einstiegstemplate. Welches das im Einzelnen ist, wird in „Weblog-Einstellungen“->“Flavors“ konfiguriert:
|
|
 |
| Das HTML-Flavor definiert die Gruppe der Templates, die für die Darstellung des Blogs im Brow-ser verwendet werden. In unserem Beispiel ist das Einstiegstemplate „asual.vm“: |
 |
2.2. Wo finde ich die Templates und wie kann ich sie bearbeiten?
Blojsom bietet in der Administrationsoberfläche unter Weblog-Einstellungen den Punkt „Templates“.
|
 |
| Nach einem Klick auf „Templates“ erscheinen alle Templates, die zur Zeit im Blog verfügbar sind. Tatsächlich benötigt wird davon – je nach Blog – nur eine kleine Untermenge. Üblicherweise be-ginnen zusammengehörige Templates mit dem gleichen Text, z.B. „asual“; |
 |
| Durch Klick auf „Bearbeiten“ kann man die einzelnen Templates in einem sehr einfach gehaltenen Editor bearbeiten (hier: „asual.vm“): |
 |
In den Templates findet man eine Mischung aus HTML-Code und Velocity-Kommandos (beginnen mit dem #-Zeichen). Solange man nicht wirklich sehr tief in das Blog-System eingreifen möchte, sind nur zwei Kommandos wichtig.
Mit #parse wird ein weiteres Velocity-Template eingebunden.
Mit #Resource kann eine Datei, die zuvor über „Weblog-Einstellungen“->“Dateien“ ins Blog hochgeladen wurde, eingebunden werden.
Änderungen an Templates werden sofort sichtbar, nachdem ein Template durch Klick auf „Aktua-lisiere Blog-Template“ gesichert wurde und die Blog-Seite (am besten in einem zweiten Fenster, damit man nicht immer zwischen Editor und Blog wechseln muss) neu geladen wurde.
|
2.3 Kann ich eigene .css-Dateien einbinden und hochladen?
Auch der Upload von eigenen CSS-Dateien wird vom Blojsom-Blogsystem jetzt unterstützt. Es kann also beispielsweise die bestehende CSS-Datei als Basis für ein neues Layout verwendet, modifiziert und überschrieben werden. Für Hoch- und Runterladen der CSS-Dateien kann die Shop-Funktion „Datei hochladen“ verwendet werden: |
 |
3. Beispiele
3.1. Anstelle der Überschrift ein Banner über dem eigenen Blog einblenden: |
 |
1. Das gewünschte Banner hochladen: |
 |
2. Herausfinden, welches Template geändert werden muss:
Beginnend mit dem Einstiegstemplate (in unserem Beispiel „asual.vm“) sucht man in allen per #parse eingebundenen Templates nach der entsprechenden Stelle. In unserem Fall finden wir die Blog-Überschrift in der Datei „asual-header.vm“: |
 |
| 3. HTML-Code in asual-header.vm ändern: |
 |
| Hierbei ersetzen wir den Block, der den Titel des Blogs bisher dargestellt hat, durch ein Bild. |
3.2. Eigene Links zu z. B. YouTube-Videos in der Navigationsspalte einbinden |
 |
1. Herausfinden, welches Template geändert werden muss: Beginnend mit dem Einstiegstemplate (in unserem Beispiel „asual.vm“) sucht man in allen per #parse eingebundenen Templates nach der entsprechenden Stelle. In unserem Fall finden wir die Elemente der rechte Spalte in der Datei „asual-column.vm“: |
 |
2. Eigenen HTML-Code einfügen: Wir wollen nach dem Punkt „Kategorien“ unsere YouTube-Videos einbauen und fügen deshalb nach dem schliessenden einen neuen HTML-Block ein: |
 |
4. Erweiterung eines minimalen Templates
Als Grundlage für komplette Neuentwicklungen eigener Templates gibt es ein Minimal-Template, das alle notwendigen Funktionen implementiert, aber keinerlei Gestaltung in Form von CSS oder Struktur der Inhalte mitbringt. Dieses Template ist Teil des „simple“-Themes, das wie folgt einge-richtet werden kann:
In der Admin-Oberfläche den Punkt „Plugin-Einstellungen->Verfügbare Plugins bearbeiten“ aus-wählen: |
 |
| Dann die Option „Theme Switcher Plugin” auswählen |
 |
| Und dort auf das „Simple”-Theme umstellen: |
 |
| Nach einem Klick auf „Theme wechseln“ erscheint das Blog in einer ungewohnt spartanischen Ansicht. Vorteil ist jedoch, dass man ohne unnötigen Styling-Ballast direkt mit dem Aufbau eines eigenen Themes beginnen kann. Die weitere Bearbeitung läuft wie in Kapitel 2.2 beschrieben über das Template „simple.vm“. Natürlich sind bei diesem Weg gute HTML- und CSS-Kenntnisse hilf-reich, um schnell zu guten Ergebnissen zu kommen. Zu beachten ist, dass beim Umschalten zu einem Theme vorangegangene Änderungen an diesem Theme verloren gehen! Deshalb kann aber auch gefahrlos an den Themes gebastelt werden – falls etwas nicht mehr funktioniert kann man mit dieser Funktion die Ursprungsversion eines Themes wiederherstellen |
5. Weiterführende Links
• SELFHTML (Einführung und Dokumentation von HTML): http://de.selfhtml.org/
• Blojsom (das Blog-System): http://wiki.blojsom.com
• Velocity (Template-Engine): http://velocity.apache.org/
|
|
