5202

ein Blog über technische Fragen zu Blogger

Blogger: Ein eigenes Template entsteht - Teil 2 - Struktur und Aufbau der XML Datei

von

Wir schauen uns heute als erstes die Mindestvoraussetzungen für ein Blogger Layout an. Es muss bestimmte Grundelemente besitzen - wir untersuchen dazu die Elemente im Detail.

Das kleinstmögliche Layout nennen wir 'Basis-Layout' – in vielen weiteren Schritten wird daraus irgendwann ein vollständiges Template :).

Die 'Knochen'

Das kleinstmögliche Grundgerüst für ein Blogger Template schaut jetzt im März 2013 folgendermassen aus:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>

 <head>
     <title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
  <!-- eigene CSS -->
]]></b:skin>
</head>

<body>
<b:section class='main' id='main'/>
  <!-- eigenes HTML -->
</body>

</html>

Dieses Template nennen wir 'Basis-Layout'. Wenn ich später von Basis-Layout spreche, beziehe ich mich immer auf diese Datei.

Grundelemente

Werfen wir nun einen tieferen Blick auf das Basis-Layout und untersuchen dazu die Elemente des Layouts im Einzelnen:

Dokumenttypdeklaration

Die ersten beiden Zeilen sind die Dokumententypdeklaration.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>

Auf einer Website muss das Dokument immer mit einer Dokumenttypdeklaration beziehungsweise -definition anfangen.

Die Dokumenttypdefinition beschreibt für den Browser eine Folge von Regel, wie eine Seite dargestellt werden soll. Fehlt diese Deklaration (oder ist sie falsch gesetzt), fällt der Browser in den berühmt berüchtigten Quirks-Modus zurück - das funktioniert, sieht aber nicht besonders schön aus.

Bei Blogger beginnt die Deklaration mit einer XML-Präambel - Blogger Layouts sind also in xml geschrieben.

<?xml version="1.0" encoding="UTF-8" ?>

XML steht für "Extensible Markup Language", d.h. 'erweiterbare Auszeichnungssprache' und ist eine formale Sprache zur Strukturierung von Informationen in Dokumenten.

Grob gesagt ist XML eine umfassende und für Webverhältnisse relativ 'alte' Sprache - Blogger verwendet die Version 1.0.

Außerdem definiert Blogger in der XML-Präambel eine UTF-8-Kodierung. Das ist eine Zeichencodierung, mit der Unicode Zeichen eindeutig bestimmten Schriftzeichen zugeordnet werden. Die UTF-8-Kodierung ist quasi 'Webstandard'.

Doctype
Nach der Präambel kommt die eigentliche Dokumenttypdefinition - der DOCTYPE
<!DOCTYPE html>

Das ist die neuste Form der Dokumenttypdefinition und sagt, dass es sich hierbei um ein HTML5 Dokument handelt - falls das ein HTML Dokument wäre. Da wir in der Präambel aber gesagt haben, das es ein XML-Dokument ist, sprechen wir von einem XHTML5-Dokument.

Ein Blogger Template ist also nicht in HTML geschrieben - wie fälschlicherweise immer wieder behauptet wird - sondern in XHTML5.

Wohlgeformtheit

Wohlgeformtheit beschreibt eine Reihe von Bedingungen, die ein XML-Dokument mindestens erfüllen muss - wichtige Regeln für das Basis-Layout betreffen das Wurzelelement, den Kopfbereich und den Körper.

Wurzelelement

Eine wohlgeformte .xml Datei braucht ein Wurzelelement, oder Root Tag, die das gesamte Dokument umschließt. In einem Blogger Layout ist das der <html> Tag.

<html>
<!--Code-->
</html>

Der gesamte Code muss innerhalb dieses Wurzelelements liegen.

Erweiterung des Namensraumes

Wenn ihr das Basis-Layout speichert, schreibt euch der Blogger-Editor automatisch eine Erweiterung des Namensraumes in euer Wurzelelement.

Ihr braucht diesen Namensraum, um später Layout-Elemente eindeutig identifizieren zu können. Ein Namensraum ist wie die Vorwahl bei einer Telefonnummer: Um euch anzurufen, muss der Anrufer nicht nur eure Telefonnummer, sondern auch eure Vorwahl kennen.

Nach dem Speichern schaut das Basis-Layout so aus:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

 <head>
     <title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
  <!-- eigene CSS -->
]]></b:skin>
</head>

<body>
<b:section class='main' id='main'/>
  <!-- eigenes HTML -->
</body>
</html>
Der Namensraum definiert drei Objekte - was das bedeutet, werden wir gleich an einem Beispiel im Kopfbereich des Basis-Layouts sehen.
<b:
Steht als Präfix für Seiten Elemente
<data:
Steht als Präfix für - Überraschung! - Layout Daten
<exp:
Bezeichnet dynamische Elemente, wie etwa eine Seiten URL
Head

Innerhalb des Wurzelelements muss ein Kopfbereich existieren - dieser Bereich liegt zwischen dem öffnenden <head> und dem schließenden </head> Tag.

<head>
     <!-- Kopfbereich -->
</head>
Titel Tag

Im Kopfbereichs liegt ein HTML5 <title> Tag für euren Blogtitel.

<head>
   <title><!-- Blogtitel --></title>
</head>

Ihr könnt euren Blogtitel mit einem Blogger-Layout-Data-Tag auslesen. In diesem speichert Blogger sämtliche Inhalte – unter anderem eben auch euren Blogtitel.

Ein Layout-Data-Tag wird mit dem Präfix <data: eingeleitet plus den Name des Tags - ihr müsst in xml zu jedem öffnenden auch ein schliessendes Tag schreiben!

<head>
   <title><data:blog.pageTitle></data:blog.pageTitle></title>
</head>
In Kurzschreibweise könnt ihr öffnenden und schließenden Tag zusammenfassen:
<head>
   <title><data:blog.pageTitle/></title>
</head>
Skin Tag

Außerdem braucht ihr im Kopfbereich ein <b:skin> Tag, d.h. ein Layout-Seiten-Tag.

Die Syntax ist gleich zum Layout-Data-Tag. Ein Layout-Seiten-Tag wird mit dem Präfix <b: eingeleitet und dann kommt der Name des Tags.

Die Aufgabe des <b:skin> Tags ist, eine Style Anweisung in eurem Dokument zu erzeugen. Eure CSS schreibt ihr also innerhalb dieses Tags.

<head>
   <b:skin>
   /* Eure CSS */
   </b:skin>
</head>

Der Inhalt des <b:skin> Tags soll nicht geparst werden. Das bedeutet, der entsprechende Abschnitt soll vom Browser als Text und nicht als XML interpretiert werden. Dazu benützt ihr einen CDATA-Abschnitt, d.h. ein codiertes 'Zeichendaten' innerhalb des Tags.

<head>
   <b:skin><![CDATA[
   /* Eure CSS */
   ]]></b:skin>
</head>
Body

In den Körper oder <body> Bereich kommt später euer Markup, d.h. die Struktur eures Layouts.

Mit dem <b:section Tag - einem weiteren Layout Seiten Tag - wird der Körper in einzelne Bereich wie 'Header', 'Footer', 'Sidebar' whatever gegliedert.

In einem gültigen Blogger Template muss mindestens ein <b:section Tag existieren.

Klassen und Id's sind in einem <b:section Tag optional - es ist aber sauberer, wenn man eine vergibt.

<body>
<b:section class='main' id='main'/>
</body>

Zusammenfassung

Fassen wir es noch mal zusammen - das ist das Basis-Layout:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>

 <head>
     <title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
  <!-- eigene CSS -->
]]></b:skin>
</head>

<body>
<b:section class='main' id='main'/>
  <!-- eigenes HTML -->
</body>

</html>

Test

Nach diesem reichlich theoretischen Teil kommen wir nun zu was praktischem - wir testen unser Basis-Layout..

Ihr ersetzt dazu unter Dashboard > Vorlage > HTML bearbeiten euer bestehendes Layout durch das Basis-Layout und speichert das ganze ab.

Heads up! Ihr bekommt nach dem Speichern eine Warnmeldung, dass ihr in Begriff seid Widgets zu löschen und ob ihr das wirklich wollt - ihr wollt :), also klickt ihr auf 'Widgets löschen'.

Wenn sich das Basis-Layout ohne Fehlermeldung speichern lässt, habt ihr alles richtig gemacht. Seht euch nun eueren Blog an - ihr seht: Nichts :)! Logisch, weil das Template bis jetzt keine Inhalte hat.

Alle Posts der Reihe

Ausblick

Damit sind wir am Ende des erstens Teils angelangt - wir haben jetzt ein stabiles Basis-Layout, auf dem wir in der nächsten Folge zunächst mal eine One-Page-Site aufbauen werden - noch ohne Blog. Außerdem werden wir einige Hacks anschauen, mit dem ihr unter anderem die gesamte Bloggereigene CSS ausschalten könnt.

Ich würde mich freuen, wenn ihr auch beim nächsten Teil wieder dabei seid!