5202

ein Blog über technische Fragen zu Blogger

Blogger: Ein eigenes Template entsteht - Teil 8 - Einführung in Widgets IV

von

Nach einigen Tagen Zwangspause geht es jetzt endlich mit der Reihe 'Ein eigenes Template entsteht' weiter :D.

Heute beschäftigen wir uns zum letzten Mal theoretisch mit Widgets und zwar mit konditionalen Argumenten.

Grob gesagt ist ein konditionales Argument eine Wenn - Dann Bedingung: Wenn diese oder jene Bedingung erfüllt ist, wird dieses oder jenes HTML-Element angezeigt oder verborgen.

Schauen wir uns eine konditionale Bedingung im Detail an.

Basis Widget

Wie schon öfter geschrieben [und öfter(s) falsch :D] - hier ist das Basis-Layout mit dem Widget:

<?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'>
       <b:include name='text'/>
       <b:include name='titel'/>
      </b:includable>
       <b:includable id='text'>
          <span>Mein Blog heißt:</span>
      </b:includable>
      <b:includable id='titel'>
          <data:blog.title />
      </b:includable>
  </b:widget>
</b:section>
</body>

</html>

Der Einfachheit halber diskutieren wir im folgenden nur das Widget an sich:

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

Konditionales Argument

Schauen wir uns die Wirkungsweise eines konditionales Arguments an einem Beispiel an. Wir wollen ein HTML Element nur auf der statische Seite 'Blumenkohl' anzeigen.

Geht dazu als erstes in euer Dashboard und legt eine neue Seite an und nennt diese Seite 'Blumenkohl' (or whatever you want :)).

Heads up! XML ist case sensitiv, d.h. 'Blumenkohl' und 'blumenkohl' sind zwei verschiedene Seitennamen.
Syntax

Ein konditionales Argument wird als <b:if cond> Tag geschrieben. Es braucht ein öffnendes und ein schließendes Tag und existiert ausschließlich in der langen Schreibweise:

<b:if cond=''>
</b:if>

Das Argument, also das 'was' die Bedingung ist, schreibt ihr innerhalb des cond=''> Teils von dem Tag. Wir haben gesagt, die Bedingung soll: 'Statische Seite Blumenkohl' sein.

Formulieren wir nun so einen Tag:

<b:if cond='data:blog.pageName == &quot;Blumenkohl&quot;'>
</b:if>
Heads up! Den Seitennamen Blumenkohl' müsstet ihr eigentlich in Anführungsstriche schreiben - die Maskierung mit dem &quot; ist wegen der XML Schreibweise nötig.

Bauen wir das ganze in das Widget ein:

  <b:widget id='Gadget1' type='Gadget' >
      <b:includable id='main'>
      <b:if cond='data:blog.pageName == &quot;Blumenkohl&quot;'>
      </b:if>
      </b:includable>
  </b:widget>

Rufen wir nun innerhalb dieses konditionalen Arguments ein <b:include/> mit dem name=text auf. Als includable definieren wir Das ist die Seite

  <b:widget id='Gadget1' type='Gadget' >
      <b:includable id='main'>
        <b:if cond='data:blog.pageName == &quot;Blumenkohl&quot;'>
          <b:include name='text'/>
        </b:if>
      </b:includable>
       <b:includable id='text'>
          <span>Das ist die Seite</span>
      </b:includable>
  </b:widget>

Schreiben wir ein weiteres <b:include/> nämlich pagename. Die dazugehörige includable ist ein Seitenlayout-Tag <data:blog.pageName/>

  <b:widget id='Gadget1' type='Gadget' >
      <b:includable id='main'>
        <b:if cond='data:blog.pageName == &quot;Blumenkohl&quot;'>
          <b:include name='text'/>
          <b:include name='pagename'/>
        </b:if>
      </b:includable>
       <b:includable id='text'>
          <span>Das ist die Seite</span>
      </b:includable>
      <b:includable id='pagename'>
          <data:blog.pageName/>
      </b:includable>
  </b:widget>
Test

Testen wir das ganze nun - baut das Widget in euren Test-Blog ein und ruft euren Blog auf. Ihr sehr logischerweise nichts, weil das konditionale Argument nur auf der Seite 'Blumenkohl' gültig ist. Verstanden?

Ruft nun die Seite 'Blumenkohl' auf - dazu hängt ihr an eure Blog-URL diesen Attribut dran: http://EuerBlog.blogspot.de/p/blumenkohl.html.

Wenn ihr alles richtig gemacht habt, bekommt ihr nun diese Meldung: Das ist die Seite Blumenkohl. Mission accomplished!

Else

Erweitern wir unser kleines Beispiel um eine <b:else/> Anweisung, d.h. was 'ansonsten' passiert, wenn das konditionale Argument nicht zutrifft.

Wir rufen mit dieser <b:else/> Anweisung ein weitere <b:include/> auf.

  <b:widget id='Gadget1' type='Gadget' >
      <b:includable id='main'>
        <b:if cond='data:blog.pageName == &quot;Blumenkohl&quot;'>
          <b:include name='text'/>
          <b:include name='pagename'/>
          <b:else/>
          <b:include name='normal'/>
        </b:if>
      </b:includable>
       <b:includable id='text'>
          <span>Das ist die Seite</span>
      </b:includable>
      <b:includable id='pagename'>
          <data:blog.pageName/>
      </b:includable>
     <b:includable id='normal'>
          <span>Das ist irgendeine Seite!</span>
      </b:includable>
  </b:widget>

Schaut euch an, was auf einer beliebigen Seite und was auf der Seite 'Blumenkohl' angezeigt wird.

Gültigkeit

Ihr merkt bestimmt schon an diesem kleinen Beispiel, wie mächtig konditionale Argumente sind. Sie lassen sich auf so viele verschiedene Arten anwenden, dass ich hier an der Stelle keinen allgemeinen Überblick gebe, das würde euch nur verwirren :D.

Wir werden uns später im Blog-Widget mit solchen Argumenten rumschlagen ... kommt alles noch früh genug!

Alle Posts der Reihe

Ausblick

Beenden wir heute unsere Sandkastenspiele, d.h. das rumbauen in einem Test-Gadget.

Der nächsten Post wird eine kurze Diskussion sein, warum wir überhaupt ein eigenes Blog-Widget bauen und nicht das Blog-Widget von Blogger nehmen.

Und dann fangen wir an, uns ein eigenes Widget zu braten, backen und bauen :D.