5202

ein Blog über technische Fragen zu Blogger

Blogger: Ein eigenes Template entsteht - Teil 9 - Blog Widget I

von

Heute gibts zwei Posts zum Preis von einem :D -- heißt, nachdem ich einen Einführungspost geschrieben hatte, warum ein eigenes Blog Widget sinnvoll ist, habe ich gemerkt, dass sich das ganze auf drei Punkte eindampfen lässt. Das war mir dann für einen ganzen Post doch zu mickrig.

Deshalb begeben wir uns nun auf einen kurzen Exkurs über Sinn oder Unsinn eines eigene Blog Widgets. Danach geht es straight weiter und wir schauen uns die Grundelemente des Blog-Widgets an.

Zum Abschuss basteln wir aus den Grundelementen Post-Überschrift und Post-Inhalt ein erstes Blog-Widget!

Der Sinn eines eigenes Blog-Widgets

Blogger besitzt ein funktionierendes Post-Widget. Warum sollten wir uns die Arbeit und Mühe machen, ein eigenes Widget zu bauen?

Dazu folgendes:

Mich nervt der Div-Brei des Blogger-Blog-Widgets seit jeher - das ist schlicht und einfach schlechtes Design und unprofessionell!

Das Gadget besteht jetzt aus 924 Zeilen Code --- davon sind [bei normalem Gebrauch] 800 Zeilen überflüssig! Guter Code ist immer so simpel wie möglich aufgebaut.

Last but not least: Wollt ihr das Blog-Widget auf eure persönlichen Wünsche anpassen, ist es einfacher, das Widget neu zu schreiben als umzubauen.

Mit anderen Worten: Ein eigenes Template fängt mit dem eigenen Blog-Widget an :D - bauen wir uns also so ein Widget!

Vorbereitung

Zum testen des Blog-Widgets braucht ihr Inhalt in eurem Test-Blog - falls ihr das noch nicht getan habt, veröffentlich doch drei, vier Posts mit Überschrift. Falls ihr einen Blind-Text braucht, könnt ihr euch mal diesen wunderschönen Blindtextgenerator anschauen.

Achtet darauf, das eure Posts unterschiedliche Veröffentlichungsdaten haben. Falls nötig, könnt ihr einen Post nachträglich noch mal in den Editor stellen und rechts außen unter Post-Einstellungen - Veröffentlicht am ein anderes Datum geben.

Das Blog Widget

Schauen wir uns nun die Grundstruktur des Blog-Widgets an.

Wir haben gesagt, dass jedes Widget bestimmte includable besitzt. Das Blog Widget - als größtes und komplexestes Widget - besitzt jetzt im Mai 2013 folgende includable:

  <b:widget id='Blog1' locked='false' title='Blogposts' type='Blog'>
    <b:includable id='main'/>
    <b:includable id='backlinkDeleteIcon'/>
    <b:includable id='backlinks'/>
    <b:includable id='comment-form'/>
    <b:includable id='commentDeleteIcon'/>
    <b:includable id='comment_count_picker'/>
    <b:includable id='comment_picker'/>
    <b:includable id='comments'/>
    <b:includable id='feedLinks'/>
    <b:includable id='feedLinksBody'/>
    <b:includable id='iframe_comments'/>
    <b:includable id='mobile-index-post'/>
    <b:includable id='mobile-main'/>
    <b:includable id='mobile-nextprev'/>
    <b:includable id='mobile-post'/>
    <b:includable id='nextprev'/>
    <b:includable id='post'/>
    <b:includable id='postQuickEdit'/>
    <b:includable id='shareButtons'/>
    <b:includable id='status-message'/>
    <b:includable id='threaded-comment-form'/>
    <b:includable id='threaded_comment_js'/>
    <b:includable id='threaded_comments'/>
  </b:widget>

Das ist die Nullform des Blog Widgets, d.h. alle notwendigen includable sind darin enthalten, aber leer.

Heads up! Blogger hat in der Vergangenheit gelegentlich neue includable in das Blog Widget eingebaut - falls euch so etwas auffällt, gebt doch kurz in den Kommentaren Bescheid!
Basis-Layout

Zum Testen könnt ihr die Nullform des Blog-Widgets in das Basis-Layout einbauen:

<?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='Blog1' locked='false' title='Blogposts' type='Blog'>
    <b:includable id='main'/>
    <b:includable id='backlinkDeleteIcon'/>
    <b:includable id='backlinks'/>
    <b:includable id='comment-form'/>
    <b:includable id='commentDeleteIcon'/>
    <b:includable id='comment_count_picker'/>
    <b:includable id='comment_picker'/>
    <b:includable id='comments'/>
    <b:includable id='feedLinks'/>
    <b:includable id='feedLinksBody'/>
    <b:includable id='iframe_comments'/>
    <b:includable id='mobile-index-post'/>
    <b:includable id='mobile-main'/>
    <b:includable id='mobile-nextprev'/>
    <b:includable id='mobile-post'/>
    <b:includable id='nextprev'/>
    <b:includable id='post'/>
    <b:includable id='postQuickEdit'/>
    <b:includable id='shareButtons'/>
    <b:includable id='status-message'/>
    <b:includable id='threaded-comment-form'/>
    <b:includable id='threaded_comment_js'/>
    <b:includable id='threaded_comments'/>
  </b:widget>
</b:section>
</body>

</html>

Im Folgenden werden wir aus Gründen der Übersichtlichkeit nur das Blog-Widget selber diskutieren!

Schleifen

Ein Blog-Post besteht aus Überschrift, Inhalt, Datum ... whatever :). Diese Abschnitte wiederholen sich beispielsweise zehn Mal, wenn ihr etwa eine Reihe von zehn Posts auf der Hauptseite darstellen wollt.

Um solche sich wiederholende Abschnitte auszugeben, brauchen wir eine Schleife - der entsprechende Tag dazu ist b:loop.

Ein Schleife hat folgende Syntax:

<b:loop var='identifier' values='data Tag'>
  <!-- Inhalt -->
</b:loop>

Die Variable (identifier) oder Kennung kann dabei eine beliebige Zeichenfolge sein. Diese Kennung wird für jeden neuen Abschnitt durch die gesamte Schleife verwendet. In der Informatik ist es Tradition, so eine Kennung als "i" zu bezeichnen.

Der Wert in einer solchen Schleife kann ein beliebiges Datenelement sein, das als Abschnitt eine Liste bilden. Im Blog Post-Widget bildet beispielsweise das Daten-Element posts eine solche Liste.

Loop

Formulieren wir nun eine Schleife für die Daten-Elemente 'title' und 'body':

  <b:loop values='data:posts' var='i'>
        <h2><data:i.title/></h2>
        <div><data:i.body/></div>
   </b:loop>

Diese Schleife rufen wir nun in der includable main auf:

  <b:widget id='Blog1' locked='false' title='Blogposts' type='Blog'>
    <b:includable id='main'>
       <b:loop values='data:posts' var='i'>
          <h2><data:i.title/></h2>
          <div><data:i.body/></div>
       </b:loop>
    </b:includable>
    <b:includable id='backlinkDeleteIcon'/>
    <b:includable id='backlinks'/>
    <b:includable id='comment-form'/>
    <b:includable id='commentDeleteIcon'/>
    <b:includable id='comment_count_picker'/>
    <b:includable id='comment_picker'/>
    <b:includable id='comments'/>
    <b:includable id='feedLinks'/>
    <b:includable id='feedLinksBody'/>
    <b:includable id='iframe_comments'/>
    <b:includable id='mobile-index-post'/>
    <b:includable id='mobile-main'/>
    <b:includable id='mobile-nextprev'/>
    <b:includable id='mobile-post'/>
    <b:includable id='nextprev'/>
    <b:includable id='post'/>
    <b:includable id='postQuickEdit'/>
    <b:includable id='shareButtons'/>
    <b:includable id='status-message'/>
    <b:includable id='threaded-comment-form'/>
    <b:includable id='threaded_comment_js'/>
    <b:includable id='threaded_comments'/>
  </b:widget>
Heads up! Vergesst bei der includable id='main' den schließenden Tag nicht!
Test

Baut das ganze in euren Test-Blog ein und ruft den Blog auf. Ihr habt nun einen Blog mit Überschriften und Inhalt. Es sind somit die Grundformen erkennbar!

Alle Posts der Reihe

Fragen Anmerkungen

Ihr könnt euch jetzt schon mal überlegen, was für Elemente ihr in eurem Blog haben wollt. Also Überschrift, Datum, Kommentar ist klar - was braucht ihr sonst noch? Was ist unverzichtbar für euer Template?

Gebt Bescheid, was ihr für Wünsche habt - ich arbeite die dann mit in die Reihe ein.

Ansonsten geht es im nächsten Post weiter, wie wir die Schleife in eine includable auslagern und dabei Variablen übergeben.