Backend
Als Backend verwende ich Textpattern in der Version 1.0rc1.
Folgende Erweiterungen bzw. Plugins sind installiert:

· glxImage von Johan Nilsson
· Trackback Plugin von Ralf Graf
· RSS Superarchive von Rob Sable
· Shortstat Backend Erweiterung

Zudem habe ich, um eine Clean-URL-Anzeige zu erhalten, eine Rewrite-Rule in meiner htacces-Datei. Die Anleitung dazu fand ich bei der Weblog-Werkstatt.

Layout

Superdeluxe.ch ist sehr einfach konzipiert. Das Ganze ist auf einem Drei-Spalten-Layout mit Header und Footer aufgebaut. Die Haupt-Navigation wird in die Linke Spalte geladen der Content in die mittlere Spalte, und die rechte Spalte ist gefüllt mit mit Links. CSS Layouts kann man sich, wenn man sie nicht selber machen möchte, generieren lassen. Bei Layoutomatic oder beim CSSCreator (sehr zu empfehlen).



1 Header
superdeluxe.ch hat im Header eine ganz normale Grafik drin. Die Grafik wird mittels CSS als Background geladen:

#kopf {
height: 70px;
background: url(../header_white.gif) no-repeat;
}


2 Linke Spalte
Die linke Spalte hat folgende Grundkonfiguration in CSS:

#links {
width:152px;
margin-top:10px;
float:left;
}

Hier drin befindet sich die Navigation. Die Hauptseiten-Links (mainstage) besteht aus ganz normalen Links. Die Kategorien werden als Liste <ul><li> mittels txpTag <txp:category_list wraptag="ul" break="li" /> ausgegeben. Damit die Links als "Balken" erscheinen, habe ich dem aTag display:block; angegeben, ebenso der Liste. Der Farbwechsel onMouseOver ist mittels a:hover geregelt. Damit der User sieht, auf welcher Seite er sich gerade befindet habe ich ein Higlight in die Links eingebaut. Das geht ganz einfach mit einer einfachen Klassen-Angabe:

.sub_on{
color: #fff;
margin-left: 20px;
background-color: #00CCFF;
}

3 Content Spalte
Der Inhalt der ContentSpalte, also die einzelnen Artikel aus verschiedenen Kategorien, werden mittel txpTag <txp:article limit="10" /> ausgegeben. Der genaue Aufbau (Struktur) eines Artikels ist in der txpForm <default> definiert und sieht in meinem Blog so aus:

<h3>
<txp:permlink>
<txp:title />
</txp:permlink>
</h3>
<txp:body />
<p>
<txp:posted /> - <txp:category1 /> - <txp:comments_invite /> - <txp:rpg_trackbackurl type="link" linktext="trackback"/>
<txp:rpg_trackbackrdf />
</p>
<div class="linie">&nbsp;</div>

Die CSS-Angaben der Content-Spalte sehen folgendermassen aus:

#inhalt {
width:420px;
margin:10px;
padding:10px 10px 0px 10px;
float:left;
background-color:#fff;
overflow: auto;
border:1px solid #EBEBEB;
}

Seitennavigation

Zusätzlich befindet sich am Ende der Artikelausgabe eine einfache Seitennavigation "nächste Seite" und "vorherige seite". Diese kleine Navi bindet man in die default Seite mittels txpTag <txp:newer> und <txp:older> ein.

Damit auch alles wie gewollt funktioniert, muss man auf folgendes Acht geben:

1. Die Hauptseite im Blog ist die default-Seite: Die gesamten Artikel werden in dieser Seite dargestellt. In meinem Fall immer nur 10Stück, danach kann man sich via "nächste Seite" zu den älteren Artikeln klicken. Diese Navigation ist nur hier enthalten!

2. Zudem braucht man eine zweite Seite, in der die einzelnen Artikel angezeigt werden. Dazu erstellt man eine weitere Section - bei mir heisst diese "news" - und erstellt eine neue Seite, mit exakt dem selben Inhalt wie in der default-Seite. Bis auf einen wichtigen Unterschied! --> Damit die Navigation in der Detail-Ansicht eines Artikels nicht angezeigt wird, löscht man die Tags txp:newer und txp:older aus der neu erstellten Seite!

3. Nun muss man, erstellt man einen neuen Artikel, nur die gewünschte Kategorie und dementsprechend eine Section zuweisen! Bei mir also die Section News. Wenn nun ein Artikel angeklickt wird, gelangt man automatisch von der default Seite auf die news Seite bzw. Section.

Ich habe das Ganze noch in eine div gepackt um die Navi besser stylen zu können. Das sieht dann so aus:

<div id="page_navi">
<txp:newer> << Vorherige Seite </txp:newer> - <txp:older>Naechste Seite >></txp:older>
</div>


4 Rechte Spalte
In der rechten Spalte habe ich verschiedene Links drin: Einerseits sind dies die letzten 10Artikel, andererseits die von mir in Textpattern erfassten Links zu externen Seiten. Die Permalinks zu den letzten zehn Artikeln werden ganz einfach via txpTag <txp:recent_articles limit="10" break="li" wraptag="ul" sortby="Posted" sortdir="desc" /> ausgegeben.

Das auflisten externer Links funktioniert auch so einfach. Man gibt beim erfassen eines Links in Textpattern eine Kategorie an, und kann sich dann im Frontend mittels txpTag <txp:linklist> die Links ausgeben lassen. Bei mir sieht das so aus.

<txp:linklist form="Links" category="lesenswert" sort="linksort" /> und <txp:linklist form="Links" category="sehenswert" sort="date desc" />

Ebenfalls in der rechten Spalte auf superdeluxe.ch befindet sich eine kleine Suchform, die man sich einfach mit z.B. <txp:search_input button="go!" size="15" /> ausgiebt, und ein Link auf eine Archiv-Seite. Das Archiv wird anstelle der Artikel auf einer zusätzlichen Seite mittels SuperachivePlugin ausgegeben. <txp:rss_suparchive_bycat />

5 Footer
Mein Footer ist leer. :o) Sehr oft finden sich in Footern verschiedene Hinweise und Links zum W3C Validator zum Beispiel, zum RSS Feed oder zu einer Sitemap. Ich sollte mich dringend auch mal daran setzen!

 

Abschliessend
Abschliessend ist zu sagen, dass man sehr viele nützlich Hinweise zur Gestaltung eines Layouts bzw. zum Aufbau eines Blogs im Netz findet. So z.B. diverse CSS-Tutorials