5202

ein Blog über technische Fragen zu Blogger

Blogger: Ein eigenes Template entsteht - Teil 6 - Einführung in Widgets II

von

Wir angekündigt, geht es mit den Widgets weiter und zwar bauen wir heute unser erstes, einfaches Widget.

Basis-Layout

Als Erinnerung vom letzten Post - das hier ist das Basis-Layout, in der die Grundstruktur eines Widgets liegt.

<?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='main' class='main' >
   <b:widget id='Gadget1' type='Gadget' >
      <b:includable id='main'>
         <!--beliebiger Code-->
      </b:includable>
   </b:widget>
</b:section>
</body>

</html>

Um das ganze übersichtlich zu halten, diskutieren wir im folgenden nur den rot markierten Bereich:

   <b:widget id='Gadget1' type='Gadget' >
      <b:includable id='main'>
         <!--beliebiger Code-->
      </b:includable>
   </b:widget>

Includable

Wir haben gesagt, die Includable von Widgets sind als 'Blöcke' aufgebaut. In einem Includable könnt ihr HTML, CSS, Javascript, Layout-Seiten-Tags oder weitere Includable legen.

Beispiel

Schreiben wir uns nun unser erstes, eigenes Widget - und zwar wollen wir ein Widget, der uns den Namen unseres Blogs zurück gibt.

Fangen wir mit einem simplen HTML-Tag an - wir schreiben den Tag in das Includable:

  <b:widget id='Gadget1' type='Gadget' >
      <b:includable id='main'>
          <span>Mein Blog heißt:</span>
      </b:includable>
   </b:widget>

Nehmt euer Basis-Layout und schaut euch das Ergebnis im Blog an:

<?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='main' class='main' >
   <b:widget id='Gadget1' type='Gadget' >
      <b:includable id='main'>
          <span>Mein Blog heißt:</span>
      </b:includable>
   </b:widget>
</b:section>
</body>

</html>

Ihr habt auf eurem Blog nun einen einen Inhalt: Mein Blog heißt. Toll ... jetzt wollen wir diesen Ausdruck noch um euren Blog Namen erweitern.

Wir könnten natürlich den Namen unseres Blogs direkt in den Ausdruck schreiben. Mein Blog heißt 5202.de und so weiter.

Aber wir sind faul und wollen den Blog-Namen aus der Blogger Datenbank nehmen. Dazu müssen wir einem Layout-Data-Tag formulieren.

Aufbau eines Layout-Data-Tags

Schauen wir uns ein Layout-Data-Tag näher an. Ein solcher Tag besteht aus drei Teilen: Einem Präfix, einer Referenz und dem Tag-Namen.

Präfix

Ein Präfix ist so etwas wie eine Vorwahl bei einer Telefonnummer. Bei einem Layout-Data-Tag lautet der Präfix ausnahmslos <data:.

Referenz

Eine Referenz erklärt, auf welches Element sich ein bestimmter Tag bezieht. Ein Blog-Titel ist etwas anderes als ein Post-Titel. Es gibt zwei Arten von Referenzen:

Globale Referenz
Solche Referenzen sind überall gültig. Die globale Referenz lautet immer blog
Locale Referenz
Eine solche Referenz ist nur innerhalb eines Gadgets gültig! Damit werden wir uns in späteren Posts beschäftigen.
Tag-Name

Es gibt - analog zur Referenz - globale Tag-Namen und lokale Tag-Namen. Folgende dokumentierte globale Tag-Namen sind für uns zunächst einmal wichtig:

title
Der Blog Titel
pageType
Der Seitentyp - im einzelnen sind das 'index', 'item', 'static_page', 'archiv', label' und 'error_page'.
url
Die Adresse der aktuellen Seite.
homepageUrl
Die Adresse das Blogs.
pageTitle
Der Titel der aktuellen Seite.
Weitere Regel

Ein Layout-Data-Tag ist ein XML Tag und muss dementsprechend Wohlgeformt sein. Das bedeutet unter anderem, dass ihr für jedes öffnende Tag auch ein schließendes Tag schreiben müsst.

Versuchen wir uns nun an unser erstes Layout-Data-Tag und zwar für den Blog-Titel.

Präfix

<data:

plus Referenz

<data:blog

plus Tag-Name

<data:blog.title

Wohlgeformt

<data:blog.title></data:blog.title>

Kurzschreibweise

<data:blog.title />

Widget

Wir haben nun das Layout-Data-Tag fertig formuliert - bauen wir es in das Widget ein:

  <b:widget id='Gadget1' type='Gadget' >
      <b:includable id='main'>
          <span>Mein Blog heißt:</span>
          <data:blog.title />
      </b:includable>
   </b:widget>

Alles zusammen 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='main' class='main' >
    <b:widget id='Gadget1' type='Gadget' >
      <b:includable id='main'>
          <span>Mein Blog heißt:</span>
          <data:blog.title />
      </b:includable>
   </b:widget>
</b:section>
</body>

</html>

Fertig! Testet das nun in eurem Test-Blog. Falls alles geklappt hat, bekommt ihr als Ausdruck Mein Blog heißt: und dann der Name eures Blogs.

Alle Posts der Reihe

Mission accomplished!

Euer erstes Widget ist fertig, gratuliere! Das ist ein wichtiger Schritt auf dem Weg zum eigenen Layout.

Im nächsten Post werden wir das Widget komplexer aufbauen und zwar indem wir weitere Includable schreiben und ineinander verschachteln.

Ich würde mich freuen, wenn ihr wieder dabei seit!

Heads up! Für Fragen stehen die Kommentare und mein Forum zur Verfügung - dort könnt ihr HTML problemlos posten. Für HTML in den Kommentaren schaut euch bitte diesen Post an.