5202

15.3.13

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

Starten wir heute damit, die 'Knochen' des Blogger Layouts anzuschauen, d.h. was sind die Vorraussetzungen für eine gültigen .xml Datei? Mit dieser kleinstmöglichen Struktur bauen wir eine statische 'hello world' Seite.

Die 'Knochen'

Euer Layout braucht zwingend bestimmte Grundelemente - das sind im einzelnen:

Dokumenttyp-Deklaration

Blogger akzeptiert nur XHTML5 Dokumente - ihr müsst also eine gültige Deklaration setzen.

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

Wurzelelement

Eine wohlgeformte .xml Datei braucht ein Wurzelelement, d.h. ein <html> Tag. Im Gegensatz zu früher, müsst ihr diesem Root Element keinen definierten Namensraum mehr geben - das macht der Blogger Editor automatisch.

<html>
</html>

Head

Innerhalb dieses Wurzelelements muss ein Kopfbereich existieren - darin liegen ein <title> Tag und ein <b:skin> Tag. Der Inhalt eines solchen <b:skin> Tags wird im Browser als Style Anweisung interpretiert.

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

Body

Der <body> Bereich von Blogger ist mit <b:section Tags in einzelne Bereich wie 'Header', 'Footer', 'Sidebar' whatever gegliedert. In einem gültigen Blogger Template muss mindestens ein <b:section Tag existieren.

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

Basis-Layout

Mit diesen notwendigen Grundelementen können wir nun ein Blogger Basis-Layout schreiben - folgendes ist die kleinstmögliche gültige .xml Datei in Blogger!

<?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

Probiert diese Basis-Layout in einem Test-Blog aus - ersetzt dazu unter Dashboard > Vorlage > HTML bearbeiten euer bestehendes Layout durch das Basis-Layout und speichert das ganze ab.

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.

Erweiterung des Namensraumes

Wenn ihr das Basis-Layout speichert, schreibt euch der Blogger Editor automatisch eine Erweiterung des Namensraum 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>

<: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

Hello World!

Falls ihr euren Blog nicht als Blog, sondern als statische One-Page-Site benützen wollt, ist das schon alles an Informationen, die ihr braucht. Ihr könnt mit dem Basis-Layout eine ganz normale Website schreiben - als Beispiel bauen wird uns eine 'hello world' Seite.

Zuerst die HTML:

<?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'/>
<p>hello world</p>
</body>
</html>

<?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[
p {color: red }
]]></b:skin>
</head>

<body>
<b:section class='main' id='main'/>
<p>hello world</p>
</body>
</html>

Veröffentlicht die Vorlage und ihr habt eure erste auf Blogger gehostete Webseite! Wenn alles klappt, könnt ihr'hello world' in roter Schriftfarbe auf dem Blog sehen - womit wir mit dem heutigen Post fertig wären.