5202

ein Blog über technische Fragen zu Blogger

Blogger: Ein eigenes Template entsteht - Teil 4 - <b:section/>

von

Im letzten Teil haben wir Blogger als One-Page-Site benützt und statische Inhalte direkt in's XML geschrieben. Das ist spannend - trotzdem gehen wir diesen Weg jetzt erst mal nicht weiter.

Blogger ist ein 'kleines' Content Management System (kurz CMS), in dem wir Inhalte dynamisch aus einer Datenbank bekommen. Das geschieht über die bereits erwähnten Seiten-Elemente-Tags.

Sehen wir uns diese Tags genauer an - starten wir mit dem <b:section/> Tag.

Basis-Layout

Wir diskutieren den <b:section/> Tag anhand des Basis-Layout - wir haben gesagt, das in einem gültigen Blogger Template mindestens ein <b:section/> Tag existieren muss.

Hier in unserem Beispiel ist das der <b:section class='main' id='main'/> Tag mit der class='main'.

<?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'/>
</body>

</html>

Mit der class='main' bezeichnen wir den Hauptteil des Blogs. In diesem <b:section/> Tag könntet ihr etwa das Blog-Widget einbauen.

Syntax

Ein <b:section/> Tag braucht ein öffnendes und ein schließendes Tag - hier die lange Schreibweise

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

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

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

</html>

Die Langschreibweise des <b:section Tags wird verwendet, wenn das Tag einen Inhalt hat:

<b:section class='main' id='main'>
<!-- Widget -->
</b:section>

Die Kurzschreibweise steht bei einem Inhaltslosen Tag.

<b:section class='main' id='main'/>
Heads up! Der Blogger Editor kürzt die Langschreibweise des <b:section/> Tags automatisch zur Kurzschreibweise, sobald das Tag keinen Inhalt hat.

Aufgabe

Ein <b:section/> Tag hat drei Aufgaben: Es gliedert euer Layout. Es ist der 'Sockel' für die Widgets. Ihr braucht dieses Tag für die schematische Ansicht eueres Blogs unter Dashboard > Layout.

Layout

Ein Blog besteht aus verschiedenen Bereiche. Solche Bereiche sind Beispielsweise Header, Hauptteil, Sidebar oder Footer - die <b:section/> Tags markieren diese Bereiche.

Ihr könnt in einem Blogger Blog beliebig viele <b:section/> Tags setzen. Erweitern wir unser Basis-Layout um zwei weitere Abschnitte, nämlich Header und Footer.

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

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

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

</html>

Geht nun in's Dashboard zum Layout und schaut euch das Ergebnis an - ihr findet dort drei 'Sockel', in die ihr Widgets einbauen könntet.

Inhalt

Ein <b:section/> Tag ist der 'Sockel' oder die Basis für Widgets. Widgets dürfen nur innerhalb eines <b:section/> Tags liegen.

Heads up! Ein <b:section/> Tag kann nur Widgets enthalten, keine andere Art von Code - vor allem kein anderes <b:section/> Tag.

Geht zum Dashboard > Layout und probiert einmal aus, dort Widgets hineinzulegen. Das geht genauso wie in einem 'normalen' Blogger-Layout.

Ihr könnt Widgets aber auch manuell einbauen. Ein Beispiel - das ich später genauer erkläre - wäre ein HTML/Javascript Gadget im Header:

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

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

<body>
<b:section class='header' id='header'>
  <b:widget id='HTML1' type='HTML'/>
</b:section>
<b:section class='main' id='main'/>
<b:section class='footer' id='footer'/>
</body>

</html>

Beachtet die Langschreibweise vom <b:section/> Tag, in dem das HTML/Javascript Gadget liegt - probiert das ruhig auch mal mit den anderen <b:section/> Tags aus.

Heads up! Wir werden später eigene Widgets schreiben - die Blogger Widgets sind hier nur ein Beispiel.
Schematische Ansicht

Schaut euch im Dashboard den Punkt Layout an. Ihr seht dort eine schematisches Ansicht eures Blogs. Diese schematische Ansicht wird über die <b:section/> Tags erzeugt.

Löscht oder fügt zusätzlich <b:section/> Tags ein - beobachtet, wie sich die schematische Ansicht verändert.

Attribute

Ein <b:section/> Tag kann bestimmte Eigenschaften oder Attribute besitzen. Folgende Eigenschaften sind dokumentiert:

id
[erforderlich] Ein eindeutiger Name aus Buchstaben und Zahlen, den ihr nur einmal pro Layout vergeben dürft.
class
[optional] Ein beliebiger Name, der die Aufgabe des jeweiligen Tags beschreibt. Etwa 'footer', 'header' whatever.
maxwidgets
[optional] Ein numerische Zahl, die das Maximum an Widgets beschreibt, die ihr in dieses <b:section/> Tag einbauen könnt.
showaddelement
[optional] Kann die Eigenschaften 'yes' or 'no' besitzen - dieses Attribut legt fest, ob ihr über das Dashboard Widgets einbauen dürft oder nicht.
growth
[optional] Kann die Eigenschaft 'horizontal' or 'vertical' besitzen. Damit könnt ihr die Widgets innerhalb dieses <b:section/> Tags horizontal oder vertikal anordnen.
Beispiel

Formulieren wir ein Beispiel für ein <b:section/> Tag mit Attributen:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>

Im Basis-Layout:

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

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

<body>
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>
<b:section class='main' id='main'/>
<b:section class='footer' id='footer'/>
</body>

</html>

Schaut nun in das Dashboard > Layout. Ihr findet dort nur noch zwei Sockel - ihr dürft über das Dashboard einem <b:section/> Tag mit dem Attribut showaddelement="no" keine zusätzlichen Widgets einbauen.

Ändert nun das Attribut showaddelement="no" in showaddelement="yes".

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

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

<body>
<b:section id='header' class='header' maxwidgets="1" showaddelement="yes">
</b:section>
<b:section class='main' id='main'/>
<b:section class='footer' id='footer'/>
</body>

</html>

Ihr habt unter Dashboard > Layout nun wieder drei Sockel. Im obersten <b:section/> Tag könnt ihr maximal ein Widget einbauen - im Unterschied zu den anderen <b:section/> Tags, in die ihr beliebig viele Widgets legen könnt.

Wirklich Sinn machen diese Eigenschaften erst, wenn ihr Templates für Dritte entwickelt. Für euch selber hat das meiner Ansicht nach nur begrenzten Nutzen.

Entwicklertool

Schaut euch die Beispiele mit dem Entwicklertool an. Ihr werden feststellen, dass die <b:section/> Tags im Browser in <div> Container umgewandelt werden. Die Klassen und ID's werden beibehalten.

Behaltet das im Hinterkopf - wir werden später die <b:section/> Tags mit CSS gestalten und sie dazu über diese Klassen und ID's ansprechen.

Alle Posts der Reihe

Ausblick

Ende vierter Teil - im nächsten Post wird es um den Inhalt eines <b:section/> Tag gehen, nämlich den Widgets!

Bleibt am Ball!