5202

ein Blog über technische Fragen zu Blogger

Blogger: Ein eigenes Template entsteht - Teil 11 - Blog Widget II

von

Nach Kälteeinbruch, Hochwasser und Dauerregen :D komme ich heute endlich zum nächsten Teil von Ein eigenes Template entsteht .

Wie beim letzten mal angekündigt, geht es heute darum, das Blogger sehr mächtige Möglichkeiten besitzt, Posts unterschiedlich aufzubauen, je nachdem ob der Post auf einer Indexseite oder Startseite steht.

Wir schauen uns diese Möglichkeiten am Beispiel einer so genannten 'Suphero-Unit' an, d.h. eines besonders gestalteten 'neuesten' Post. Um dem ganzen a bisserl Style zu geben, benützen wir Bootstrap CSS.

Vorbereitung

Um meinen heutige Post in eurem Test-Blog nachzuvollziehen, braucht ihr mindestens ein Bild pro Post. Baut also ein oder mehrere Bilder an beliebiger Stelle im Post ein.

Wir starten heute mit diesem simplen Layout - im letzten Post habe ich das Template tiefer erklärt:

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

 <head>
    <link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css' rel='stylesheet'/>
     <title><data:blog.pageTitle/></title>
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
 <b:skin><![CDATA[*/
 ]]></b:skin>
</head>

<body>
<b:section class='main container' id='main'>
  <b:widget id='Blog1' locked='false' title='Blogposts' type='Blog'>
    <b:includable id='main'>
       <b:loop values='data:posts' var='i'>    
            <b:include data='i' name='post'/>
       </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' var='i'>
 <h2><data:i.dateHeader/></h2>
 <h3>
  <a expr:href='data:i.url'><data:i.title/></a>
 </h3>
 <span><data:i.body/></span>
    </b:includable>
    <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>
&lt;!-- </body> --&gt; &lt;/body&gt; 

</html>

Ladet das Template in eurem Test-Blog hoch und schaut euch das Ergebnis an - noch ist das ganze ein sehr simples Grund-Layout!

Heads up! In diesem Layout ist per Link die gesamte Bootstrap CSS enthalten. Was das genau bedeutet, werde ich in einem später Post erklären. Heute benützen wir nur einige Klassen von Bootstrap.

Index-Seite und Post-Seite

Bauen wir nun eine unterschiedliche Indexseite und Postseite. Wir benützen dazu ein konditionales Argument und zwar innerhalb dieses Snippets:

<b:includable id='post' var='i'>
   <h2><data:i.dateHeader/></h2>
   <h3>
      <a expr:href='data:i.url'><data:i.title/></a>
   </h3>
   <span><data:i.body/></span>
</b:includable>

Das konditionale Argument lautet: Wenn der Seitentyp 'Index' ist, dann schaut das Layout so und so aus ...

<b:includable id='post' var='i'>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <!-- Indexseite -->
 <b:else/>
 <h2><data:i.dateHeader/></h2>
 <h3>
  <a expr:href='data:i.url'><data:i.title/></a>
 </h3>
 <span><data:i.body/></span>
 </b:if>
</b:includable>

Beschreiben wir nun, wie die Indexseite aussehen soll. Wir wollen eine 'Magazin'-Ansicht mit dem ersten Bild aus dem Post erzeugen.

<b:includable id='post' var='i'>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
  <div class=''>
   <h3>
   <a expr:href='data:i.url'><data:i.title/></a>
  </h3>
  <a expr:href='data:i.url'>
     <img expr:src='data:i.firstImageUrl'/>
    </a>
  </div>
  <b:else/>
 <h2><data:i.dateHeader/></h2>
 <h3>
  <a expr:href='data:i.url'><data:i.title/></a>
 </h3>
 <span><data:i.body/></span>
 </b:if>
</b:includable>

Wir wollen den ersten Post besonders hervorheben - wir schreiben dazu eine weiteres konditionales Argument:

<b:includable id='post' var='i'>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <b:if cond='data:i.isFirstPost == &quot;true&quot;'>
   <div class='hero-unit'>
   <h3>
   <a expr:href='data:i.url'><data:i.title/></a>
  </h3>
  <a expr:href='data:i.url'>
     <img expr:src='data:i.firstImageUrl'/>
    </a>
  </div>
  <b:else/>
  <div class='thumb'>
   <h3>
   <a expr:href='data:i.url'><data:i.title/></a>
  </h3>
  <a expr:href='data:i.url'>
     <img expr:src='data:i.firstImageUrl'/>
    </a>
  </div>
  </b:if>
  <b:else/>
 <h2><data:i.dateHeader/></h2>
 <h3>
  <a expr:href='data:i.url'><data:i.title/></a>
 </h3>
 <span><data:i.body/></span>
 </b:if>
</b:includable>
Heads up! Achtet darauf, innerhalb eines konditionalen Argument ein weiteres konditionalen Argument mit </b:if> korrekt zu schließen!

Für die Hero-Unit wollen wir noch ein kleines Snippet aus den ersten hundert Zeilen des Textes erzeugen ...

<b:includable id='post' var='i'>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <b:if cond='data:i.isFirstPost == &quot;true&quot;'>
   <div class='hero-unit'>
   <h3>
   <a expr:href='data:i.url'><data:i.title/></a>
  </h3>
  <a expr:href='data:i.url'>
     <img  class="pull-right" expr:src='data:i.firstImageUrl'/>
    </a>
     <span><data:i.snippet/></span>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
  <b:else/>
  <div class='thumb'>
   <h3>
   <a expr:href='data:i.url'><data:i.title/></a>
  </h3>
  <a expr:href='data:i.url'>
     <img expr:src='data:i.firstImageUrl'/>
    </a>
  </div>
  </b:if>
  <b:else/>
 <h2><data:i.dateHeader/></h2>
 <h3>
  <a expr:href='data:i.url'><data:i.title/></a>
 </h3>
 <span><data:i.body/></span>
 </b:if>
</b:includable>

Die Klasse class="pull-right" ist übrigens einer dieser unvorstellbar coolen Bootstrap Tricks ... :D

Außerdem wäre es nett, die Möglichkeit zu haben, per Hand einen Jump-Break zu setzen, oder? Erweitern wir das Snippet also um ein weiteres konditionales Argument:

<b:includable id='post' var='i'>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <b:if cond='data:i.isFirstPost == &quot;true&quot;'>
   <div class='hero-unit'>
   <h3>
   <a expr:href='data:i.url'><data:i.title/></a>
  </h3>
  <a expr:href='data:i.url'>
     <img class="pull-right" expr:src='data:i.firstImageUrl'/>
    </a>
    <b:if cond='data:i.hasJumpLink'>
     <span><data:i.body/></span>
     <div class='jump-link'>
    <a expr:href='data:i.url' expr:title='data:i.title'>
     <data:i.jumpText/>
    </a>
    </div>
   <b:else/>
    <span><data:i.snippet/></span>
    </b:if>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
  <b:else/>
  <div class='thumb'>
   <h3>
   <a expr:href='data:i.url'><data:i.title/></a>
  </h3>
  <a expr:href='data:i.url'>
     <img expr:src='data:i.firstImageUrl'/>
    </a>
  </div>
  </b:if>
  <b:else/>
 <h2><data:i.dateHeader/></h2>
 <h3>
  <a expr:href='data:i.url'><data:i.title/></a>
 </h3>
 <span><data:i.body/></span>
 </b:if>
</b:includable>

In dem Beispiel seht ihr das ganze mal 'life'. Das ist nebenbei gesagt eine Lösung für ein Magazin-Style, ohne eine einzige Zeile Javascript!

Die Gestaltungsmöglichkeiten mit dieser Technik sind praktisch unendlich. Wen ihr euch dafür interessiert, experimentiert ruhig mit weiteren konditionalen Argumenten rum ... letztlich ist das nur Fleißarbeit!

Alle Posts der Reihe

Schluß

Auf unserem Weg zum eigenen Layout sind konditionale Argumente ein wichtiges Werkzeug. Im nächsten Post werden wir uns mit sozialen 'Knöpfen' beschäftigen und wie wir mit Hilfe von konditionalen Argumenten diese Knöpfe innerhalb des Layouts einbauen können.

Ich hoffe - auch wenn es hier langsamer als geplant vorwärts geht - dass noch ein paar von euch diese Serie verfolgen!