Widget-Tags für Layouts

Wann werden Includes verwendet?

Includes sind insbesondere dann nützlich, wenn Sie einen bestimmten Codeabschnitt mehrere Male an verschiedenen Stellen wiederholen oder aber nur unter bestimmten Umständen einschließen möchten.

Dazu fügen Sie den Content in b:includable ein. Anschließend verwenden Sie einfach b:include überall dort, wo der Code erscheinen soll.

Format

 

<b:includable id='main' var='thiswidget'>
  [beliebigen Content hier einfügen]
</b:includable>

 

Attribute

• id (erforderlich): Eine eindeutige, aus Buchstaben und Zahlen bestehende Kennung. Jedes Widget muss ein Includable mit id='main' enthalten.
• var (optional): Eine aus Buchstaben und Zahlen bestehende Kennung, um auf Daten innerhalb dieses Abschnitts zu verweisen.

Falls Sie mehrere Includables mit unterschiedlichen IDs erstellen, werden diese nicht automatisch angezeigt. Sollten Sie jedoch ein Includable mit id='new' erstellen, so können Sie in Ihrem Main-Includable mit <b:include name='new' /> darauf verweisen und es auf diese Weise anzeigen.

Das b:include-Tag kann folgende Attribute aufweisen:

• name (erforderlich): Eine aus Buchstaben und Zahlen bestehende Kennung. Diese Kennung muss mit der ID eines vorhandenen b:includable im selben Widget übereinstimmen.
• data (optional): Ein Ausdruck oder Datenelement, der bzw. das an den Includable-Abschnitt weitergeleitet wird. Dieser wird zum Wert des var-Attributs im Includable.
• cond (optional): Ein Ausdruck, der dafür sorgt, dass das Include nur dann ausgeführt wird, wenn sein Ergebnis wahr ist. Dies ist dasselbe, wie das cond-Attribut bei dem Tag b:if.

Beispiel

Das folgende Beispiel zeigt, wie b:includable und b:include verwendet werden.

Am Wichtigsten für das Verständnis ist, wie der Abschnitt "main" den Abschnitt "post" einschließt. Dieser gibt einen Post weiter, der als "p" bezeichnet wird. Vom eingeschlossenen Abschnitt wird darauf als var "post" verwiesen. Anschließend wird der Titel gedruckt.

Beachten Sie, dass das Include nur dann funktioniert, wenn der Index unter 10 liegt. Das bedeutet, dass in diesem Beispiel höchstens zehn Posts gerendert würden. Der Index beginnt mit Null.

 

<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Titel: <data:post.title/>
</b:includable>

 

Beispiele

• <data:title/> druckt den Titel eines Widgets aus.

• <data:photo.url/> – Größe: <data.photo.width /> x <data.photo.height /> druckt Attribute einer Fotokomponente aus. Ein Foto kann beispielsweise die Komponenten "url", "height" und "width" aufweisen. Die Angabe "." weist darauf hin, dass wir die URL dieses Fotos und nicht die URL eines anderen Objekts verwenden möcht.

Weitere Beispiele ansehen

In unserer umfassenden Liste finden Sie, welche Layouts-Daten-Tags unterstützt werden.

 

Wann wird b:loop verwendet?

Mit dem Tag b:loop können Sie einen Abschnitt mit Content mehrmals wiederholen. Dies wird meist zum Drucken jedes Posts in einer Liste von Posts für eine bestimmte Seite verwendet. Entsprechendes gilt für Kommentare, Labels usw.

Format

Loops weisen folgendes Format auf:

 

<b:loop var='identifier' values='set-of-data'>
  [wiederholten Content hier einfügen]
</b:loop>

 

Als Kennung "i" können Sie einen beliebigen Namen verwenden. Dieser wird für jeden neuen Artikel in der Liste durch die gesamte Loop verwendet. Bei den als Werte angegebenen Daten kann es sich um beliebige Datenelemente handeln, die im Daten-Tags-Artikel als eine Liste von Artikeln aufgeführt werden.

So ist beispielsweise im Blogposts-Widget posts eine Liste. Ein Code wie der folgende bildet eine Schleife durch jeden Post. Dabei wird für jeden Post der Titel von Header-Tags umgeben ausgedruckt.

 

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

 

Beachten Sie, dass die Kennung "i" den Wert des jeweiligen Posts annimmt. Auf diese Weise können Sie aus jedem Post den Titel ermitteln.

Zahlenbereich

Mit loop-Tags können Sie einen eingeschlossenen Zahlenbereich wiederholen, zum Beispiel "1 bis 3", "-3 bis -9", wobei der Wert der Variablen den Zahlenwert annimmt. Das folgende Beispiel würde eine ungeordnete Liste von 1, 2 und 3 erzeugen.

 

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>

 

Indexattribute

loop-Tags haben zudem ein optionales Indexattribut, das den nullbasierten Index der aktuellen Wiederholung durch die Loop angibt.

 

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Index: <data:index />, Anzahl: <data:number /></li>
  </b:loop>
</ul>

 

Dieses Beispiel würde folgende ungeordnete Liste erzeugen:

• Index: 0, Anzahl: 9
• Index: 1, Anzahl: 8
• Index: 2, Anzahl: 7

Wann werden if, elseif und else verwendet?

Mithilfe der Tags b:if, b:elseif und b:else können Sie bestimmten Content an bestimmten Stellen anzeigen und anderen Content an anderen Stellen. So können Sie zum Beispiel dafür sorgen, dass bestimmter Text nur auf der Homepage angezeigt wird, während bei der Ansicht der einzelnen Posts ein anderer Text angezeigt wird.

Format

 

<b:if cond='condition'>
  [anzuzeigender Content, wenn die Bedingung wahr ist]
<b:elseif cond='another condition'/>
  [anzuzeigender Content, wenn keine vorhergehenden if- oder elseif-Bedingungen wahr waren und diese elseif-Bedingung wahr ist]
<b:else/>
  [anzuzeigender Content, wenn keine if- oder elseif-Bedingungen erfüllt sind]
</b:if>

 

Die Tags b:elseif und b:else sind optional. Ohne diese Tags ist das Ergebnis entweder der im Abschnitt "b:if enthaltene Content oder nichts. Das schließende Tag </b:if> wird jedoch in jedem Fall benötigt.

Als "condition" können Sie jeden Wert einsetzen, der als wahr oder falsch interpretiert werden kann. Manche Daten-Tags sind einfache Wahr-/Falsch-Werte, wie beispielsweise allowComments in einem Post. Bei anderen Datenelementen können diese mit bestimmten Werten verglichen werden, um eine Wahr- oder Falsch-Bedingung zu erhalten. Hier einige Beispiele:

• <b:if cond='data:post.showBacklinks'>
  Wahr, wenn der aktuelle Post für die Anzeige von Backlinks eingestellt ist.
• <b:if cond='data:blog.pageType == "item"'>
  Wahr, wenn die aktuelle Seite eine Artikelseite (Post-Seite) ist.
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  Wahr, wenn die aktuelle Seite eine Artikelseite (Post-Seite) und der aktuelle Post für die Anzeige von Backlinks eingestellt ist.
• <b:if cond='data:displayname != "Fred"'>
  Wahr, wenn dies nicht Freds Anzeigename ist.
• <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
  Wahr, wenn Fred der Anzeigename ist, oder wenn die aktuelle Seite eine statische Seite ist, und keine Post-Seite.
• <b:if cond='data:post.numComments > 1'>
  Wahr, wenn der aktuelle Post mehr als einen Kommentar aufweist.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  Wahr, wenn die aktuelle Seite ein bestimmter Post oder eine bestimmte Seite ist.

Wann werden Switches verwendet?

Sie können b:switch-Tags ähnlich wie b:if-Tags verwenden, die mehrere b:elseif-Tags haben. Der Vorteil einer Switch-Verzweigung besteht darin, dass Sie den Variablennamen nicht wiederholen müssen. Sie können aus den Tags leicht herauslesen, was für einen bestimmten Fall definiert wurde und was der Standardfall ist.

Formatieren

<b:switch var='[Datenausdruck]'>
<b:case value="[Wert 1]" />
 [Ausgabe, wenn die Auswertung von var dem Wert 1 entspricht]
<b:case value="[Wert 2]" />
 [Ausgabe, wenn die Auswertung von var dem Wert 2 entspricht]
[… und alle anderen Werte]
<b:default />
 [Ausgabe, wenn die Auswertung von var keinem anderen b:case entspricht]
</b:switch>

Beispiel

Das nachfolgende Beispiel zeigt, wie Sie eine andere Überschrift ausgeben können, je nachdem, welcher Seitentyp angezeigt wird.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Seite</h1>
<b:case value="item" />
  <h1>Post</h1>
<b:default />
  <h2>Blogposts</h2>
</b:switch>

Wann werden Ausdrücke verwendet?

Das Attribut "expr" können Sie verwenden, um Attributwerte festzulegen, die auf Werten im Datenwörterbuch basieren. 

Beispiele

• <a expr:href='data:blog.homepageUrl'>Homepage</a>
  Ein Link zur Homepage, der die URL der Homepage des Blogs enthält.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>
  Ein Link mit der URL zum RSS-Feed des Blogposts. Der Operator "+" verknüpft die beiden Strings.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Kommentar</a>
  Ein Link mit "comment", wenn Kommentare erlaubt sind, und "no-comment", wenn keine Kommentare erlaubt sind. Der ternäre Operator (?:) nimmt den gegebenen booleschen Wert und wählt den ersten Wert nach dem Fragezeichen aus. wenn der boolesche Wert wahr ist, oder den zweiten Wert (nach dem Doppelpunkt), wenn der boolesche Wert falsch ist.

Wann werden ausgewertete Ausdrücke verwendet?

Sie können b:eval-Tags verwenden, um Ausdrücke auszuwerten, die komplizierter als Standard-Daten-Tags sind.

Format

<b:eval expr='[Expression]' />

Beispiele

• min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
  Ausgabe einer berechneten relativen Höhe basierend auf einem neuen Breitenwert
• <b:eval expr="data:post.labels[0].url" />
  Ausgabe der URL des Labels des ersten Posts
• <b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
  Ausgabe von "Comment", wenn Kommentare erlaubt sind, und von "Comments Disabled", wenn keine Kommentare erlaubt sind. Beachten Sie, dass dieser Ausdruck den ternären Operator verwendet. the Expressions in layouts tags article.

Wann werden Variablen-Aliasse verwendet?

Sie können b:with-Tags verwenden, um den Wert eines berechneten Ausdrucks vorübergehend zu speichern und komplizierte Inline-Ausdrücke zu vermeiden.

Formatieren

<b:with var='myComputedValue' value='[Datenausdruck]' />

Beispiele

Komplizierte, auf Datenvariablen basierende Stilattribute können Sie vor dem Rest der HTML-Ausgabe berechnen, damit das verschachtelte HTML einfacher zu lesen ist.

<b:with var='style'
       value='"background-image: url(\"" + data:sourceUrl "\"); "
           + " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>Meine Überschrift</h1>
   </div>
 </div>
</b:with>

Beachten Sie, dass die Variable nur für die untergeordneten Knoten des b:with-Tags vorhanden ist.

In diesem Widget können Sie die beispielhafte Verwendung von b:widget-, b:includable- (und b:include-), b:if- (und b:else-) sowie von b:loop-Tags sehen.

 

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>