Webdesign

Bausteine in Textpattern

Bausteine (engl. forms) sind neben den Seitenvorlagen (templates) die wichtigsten Gestaltungselemente in Textpattern. Dieser Artikel erklärt, wie Bausteine in Textpattern funktionieren und wie man sie flexibel einsetzen kann.

Was sind Bausteine in Textpattern?

Der Name „Baustein“ ist nur teilweise treffend, denn unter einem Baustein stellt man sich einen festen Gegenstand mit einer bestimmten Form und anderen festgelegten Eigenschaften vor. Man benutzt ihn dazu, zusammen mit anderen Bausteinen eine feste Struktur zu errichten.

Richtig an dieser Vorstellung ist, dass die Bausteine in Textpattern ebenfalls für die Struktur der Inhalte verantwortlich sind. Der Baustein default kann zum Beispiel festlegen, wie die Überschrift, der Textkörper (body) und das Veröffentlichungsdatum eines Artikels zueinander angeordnet werden. Er legt auch fest, in welche HTML Elemente diese drei Elemente „verpackt“ werden. Außerdem bestimmt der Baustein (über den Bausteintyp), in welchem Kontext (in welcher „Umgebung“) auf der Site bestimmte Inhalte überhaupt angezeigt werden.

Die Eigenschaften des Bausteins müssen aber nicht so stark fixiert sein, wie das z.B. bei einem Legostein der Fall ist. Dieser hat immer eine bestimmte Größe, Form, Farbe usw. Der Baustein in Textpattern kann so „starr“ sein (wenn er z.B. nur als „Codebehälter“ dient), er kann aber auch sehr viel flexibler sein.

Um die Metapher weiter zu benutzen: der oben genannte Baustein default hat zwar eine feste Form, seine übrigen Eigenschaften können aber unterschiedlich sein und werden mit immer anderen Inhalten „gefüllt“.

Bausteine werden so zu den grundlegenden Konstruktionseinheiten einer Webseite in Textpattern. Sie werden in Seitenvorlagen eingebettet und stellen dort entweder fixe Codeblöcke dar oder dienen als „Gussformen“, die dynamisch mit Inhalten „gefüllt“ werden, wenn man eine Seite aufruft.

Wenn das bisher alles noch ziemlich abstrakt klingt: Keine Sorge. Es wird durch die unten folgenden Beispiele klarer werden.

Typen von Bausteinen

Es gibt in Textpattern fünf verschiedene Bausteintypen:

  1. article
  2. comment
  3. link
  4. misc
  5. file

In dieser Reihenfolge sind die Typen im Dropdown-Menü unterhalb des Bearbeitungsfeldes im Tab Präsentation > Bausteine aufgelistet.

TXP Bausteine Tab

Textpattern Bausteine

Alle verwendeten Bausteine werden auf der rechten Seite im Tab Präsentation > Bausteine in einer Liste angezeigt. Sie ist nach Bausteintyp geordnet.

Nicht alle Typen von Bausteinen sind gleich wichtig. article und misc werden beim Aufbau einer Website mit Textpattern deutlich häufiger und flexibler eingesetzt als die anderen drei Typen. Wo kommen comment, link und file zum Einsatz?

Bausteintypen comment, link und file

Diese drei Baustein-Typen dienen also jeweils einem bestimmten, eng umrissenen Zweck.

article und misc hingegen sind in ihren Einsatzmöglichkeiten weitaus breiter gefächert. Daher werden wir diese im Folgenden näher betrachten.

Bausteintyp misc

misc steht für das englische Wort miscellaneous, was „Verschiedenes“ bedeutet. Demgemäß ist dieser Bausteintyp für die verschiedensten Zwecke zu gebrauchen. Im Grunde verwendet man ihn immer dann, wenn man keine Artikel (selbst geschriebene Texte etc.), sondern nur Code irgendwelcher Art auf der Seite darstellen möchte: sei es HTML Markup, PHP Code, reiner Text oder eine Mischung aus allem.

Man kann auch Textpattern Tags (z.B. <txp:section />) in diesem Bausteintyp speichern, und diese dann wiederum in anderen Bausteinen darstellen lassen. Das ist immer dann praktisch, wenn man ein Codeschnipsel mehrfach verwenden möchte. Packt man den Code-Schnipsel in einen misc Baustein und bindet diesen dann an verschiedenen Stellen ein, muss man bei Änderungen nur an einer Stelle ansetzen und kann sich darauf verlassen, dass die Änderung überall angewendet wird.

Beispiel 1: misc Bausteine in anderen Bausteinen

Auf der Website meiner Schule haben viele Artikel am Ende eine Box mit verschiedenen Meta-Daten, z.B. das Datum der Veröffentlichung, die thematische Einordnung, evtl. Stichwörter (tags) und weitere Daten.

misc-form-type-20080105-002001

Diese Daten werden durch einen ziemlich verschachtelten Wust von Textpattern Tags, Text und HTML dargestellt:

  1. <p class="meta">Ver&ouml;ffentlicht am&#160;<txp:posted /><txp:ob1_modified format="%d.%m.%Y" output="differs" starttext=", zuletzt ge&auml;ndert am&#160;" /> &bull;
  2.  
  3. <strong>KGN&#160;&raquo;&#160;<txp:section title="y"/><txp:if_article_category number="1">&#160;&raquo;&#160;<txp:category1 title="y" /></txp:if_article_category></strong>
  4.  
  5. <txp:if_custom_field name="Verantwortliche(r)"> &bull; <strong>Verantwortlich:</strong> <a href="/lehrer/#<txp:custom_field name="Verantwortliche(r)" />"><txp:custom_field name="Verantwortliche(r)" /></a></txp:if_custom_field>
  6.  
  7. <txp:tru_tags_if_has_tags>
  8. &bull; <strong>Stichw&ouml;rter:</strong> <txp:tru_tags_from_article />
  9. </txp:tru_tags_if_has_tags><br />
  10. <txp:if_custom_field name="Lizenz">Dieses Werk steht unter der <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/de/"><strong>Creative Commons Lizenz BY-NC-SA</strong></a>. </txp:if_custom_field>
  11. </p>
  12. Code-Download: /code/txp-forms-01.txt

Dieser Code muss in verschiedenen Bausteinen erscheinen, denn es gibt verschiedene Arten von Artikeln (z.B. „normale“ Textartikel und Fotobeiträge), welche diese Daten am Ende anzeigen sollen.

Grundsätzlich könnte man diesen Code natürlich per Kopieren-Einfügen in mehrere article Bausteine übertragen, z.B. in einen für die Textartikel und in einen für die Fotobeiträge. Dann hätte man dieses „Code-Monster“ aber verdoppelt und müsste künftig jede Änderung an mehreren Stellen durchführen. Das wäre aufgrund der unübersichtlichen Struktur des Codes eine große Fehlerquelle.

Einfacher geht es mit einem Baustein: man legt einen neuen Baustein vom Typ misc an, nennt ihn z.B. metaInfo und kopiert den Code hinein. Überall, wo dieser erscheinen soll, bindet man den Baustein mit einem Textpattern Tag ein:

<txp:output_form form="metaInfo" />

Der komplette article Baustein für die Textartikel könnte dann z.B. so aussehen:

  1. <div id="post<txp:article_id />" class="post">
  2. <h2><txp:title /></h2>
  3. <txp:output_form form="articleImage" />
  4. <txp:body />
  5. <txp:output_form form="metaInfo" />
  6. </div>
  7. Code-Download: /code/txp-forms-02.txt

Der article Baustein für die Fotodarstellung sieht hingegen so aus:

  1. <div>
  2. <h2><txp:title /></h2>
  3. <txp:title:output_form form="flickrSlideshowLink" />
  4. <txp:body />
  5. <txp:if_individual_article>
  6. <txp:output_form form="metaInfo" />
  7. </txp:if_individual_article>
  8. </div>
  9. Code-Download: /code/txp-forms-03.txt

Die Struktur ist anders, aber der Baustein metaInfo erscheint in identischer Form (siehe Zeile 6).

Textpattern führt bei der Darstellung einer Seite zunächst immer das Tag output_form aus. So wird dessen Inhalt eingebunden, bevor der Code weiter bearbeitet wird.

Mit dieser Methode muss man jeden Code-Schnipsel nur an einer Stelle aufbewahren und pflegen. Eine Änderung wird automatisch überall dort angewandt, wo man den Baustein darstellt.

Beispiel 2: misc Bausteine in Seitenvorlagen

In Seitenvorlagen können Bausteine vom Typ misc als „Code-Behälter“ eingesetzt werden, ähnlich wie man es mit Server Side Includes oder der PHP Funktion include()  machen kann.

Man speichert ein Stück HTML Markup, PHP Code, Textpattern Markup etc. in einem Baustein und bindet es wie oben beschrieben mit dem Textpattern Tag <txp:output_form form="nameDesBausteins" /> ein.

In welchen Situationen ist das sinnvoll? Es ist immer dann sinnvoll, wenn man (wie oben) davon ausgeht, dass man den Code-Schnipsel mehrfach verwenden möchte. Denn wenn es möglich ist, sollte man ein Code-Schnipsel nie duplizieren — das bringt immer einen erhöhten Aufwand bei Überarbeitungen und mögliche Fehler mit sich.

Wenn man davon ausgeht, dass eine Textpattern-Site drei bis vier verschiedene Seitenvorlagen benutzt, kann man alle Elemente in Bausteine „packen“, die in allen Vorlagen gleich sind. Z.B. den Header, die Navigationsleiste, den Footer; außerdem Einiges im head der HTML Datei.

Das könnte dann z.B. so aussehen:

  1. <txp:output_form form="doctype" />
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  3. <head>
  4. <txp:output_form form="metaContentType" />
  5. <txp:output_form form="headTitle" />
  6. <txp:output_form form="headEveryPage" />
  7. <txp:output_form form="headCss" />
  8. <txp:output_form:output_form form="headMeta" />
  9. <txp:output_form form="headFeeds" />
  10. <!-- Stylesheet für den Bereich: <txp:section /> -->
  11. <link rel="stylesheet" type="text/css" href="<txp:site_url />css/<txp:section />.css" media="screen,projection" />
  12. </head>
  13. <body id="<txp:section />">
  14. ...
  15. </body>
  16. </html>
  17. Code-Download: /code/txp-forms-04.txt

Die verschiedenen Bereiche im head sind in sinnvolle Blöcke zusammen gefasst, von denen jeder einem Baustein entspricht. So ist jeder Baustein übersichtlich und damit leicht zu bearbeiten. In der geparsten Seite sieht das Ganze dann so aus:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  5. <head>
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <title>NN</title>
  8. <link rel="shortcut icon" href="/kgn.ico" />
  9. <link rel="stylesheet" type="text/css" href="/css/main.css" media="screen,projection" />
  10.  
  11. <!--[if IE]>
  12. <link href="/css/ie.css" rel="stylesheet" type="text/css" />
  13. <![endif]-->
  14. <!--[if lte IE 6]>
  15. <link href="/css/ie-lte-6.css" rel="stylesheet" type="text/css" />
  16. <![endif]-->
  17. <link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
  18.  
  19. <!-- Meta information -->
  20. <meta name="author" content="NN" />
  21. <meta http-equiv="content-language" content="de" />
  22. <meta name="revisit-after" content="5 days" />
  23. <meta name="robots" content="all" />
  24. <meta name="MSSmartTagsPreventParsing" content="true" />
  25. <meta name="description" content="Website des NN" />
  26.  
  27. <!-- RSS Feed -->
  28. <link rel="alternate" type="application/rss+xml" title="RSS-Feed" href="http://feeds.feedburner.com/nn" />
  29.  
  30. <!-- Stylesheet fuer den Bereich: default -->
  31. <link rel="stylesheet" type="text/css" href="http://www.domain.de/css/default.css" media="screen,projection" />
  32.  
  33. </head>
  34.  
  35. <body id="default">
  36. ...
  37. </body>
  38. </html>
  39. Code-Download: /code/txp-forms-05.txt

Wenn man diesen Wust von Code in jeder Seitenvorlage hätte, wäre die Fehlersuche oder das Anbringen einer Änderung um einiges aufwändiger.

Nachteil

Man muss allerdings erwähnen, dass die ausgiebige Verwendung von output_form den Server, auf dem die Website gehostet ist, mehr belastet, als wenn man den Code direkt einfügen würde. Das liegt daran, dass jedes Textpattern Tag zunächst „bearbeitet“ werden muss, um seinen Inhalt darzustellen. Mit jedem output_form fügt man daher eine zusätzliche Datenbank-Anfrage ein. Meiner Erfahrung nach, ist das bei Sites mit „normalem“ Traffic (im Bereich von einigen tausend bis zehntausend Seitenaurufen pro Tag) kein Problem.

Bausteintyp article

Bausteine vom Typ article sind das Herzstück von Textpattern, denn sie werden dazu benutzt, die eigentlichen Inhalte der Site darzustellen. Wenn man einen neuen Beitrag schreibt, gibt man ihm einen Titel, weist ihn einer Sektion und einer Kategorie zu, schreibt einen Text (body), evtl. auch einen Anreißtext (excerpt) und speichert ihn. All diese Elemente (Titel, Sektion, Kategorie, body, excerpt, Veröffentlichungsdatum, Autor etc.) können typischerweise in einem article Baustein verwendet werden und dienen dann als Gussform, die auf der jeweiligen Seite mit konkreten Inhalten gefüllt wird.

Mit dem article Baustein gebe ich z.B. vor, dass der Titel als HTML h2 Überschrift gestaltet werden soll:

<h2><txp:title /></h2>

Ich „mische“ also HML Tags und Textpattern Tags.

Wenn ich eine Liste von Artikeln anzeige, wird jeder einzelne Beitragstitel als h2 Element auzgezeichnet sein.

Ich kann hier auch schon eine Differenzierung entsprechend des Kontexts einbauen, in dem ein Artikel erscheint. Ich könnte z.B. den Titel verlinken, wenn er in einer Artikelliste steht und ohne Link gestalten, wenn der Artikel einzeln aufgerufen wurde:

  1. <txp:if_article_list>
  2.  
  3. <h2><txp:permlink><txp:title /></txp:permlink></h2>
  4.  
  5. <txp:else />
  6.  
  7. <h2><txp:title /></h2>
  8.  
  9. </txp:if_article_list>
  10. Code-Download: /code/txp-forms-06.txt

In einem article Baustein kann ich auch weitere Bausteine mit output_form einbinden. Diese Funktion wird dann zuerst ausgeführt, bevor die weiteren Tags innerhalb der eingebunden Bausteine bearbeitet werden. So kann ich sogar einen article Baustein in einen anderen einbinden. Im folgenden Beispiel ist das mit articleList so gemacht. Ein Bug in einem Plugin machte es notwendig, die Abfrage nach Artikelliste oder Einzelartikel in den article Baustein zu verlegen anstatt sie (wie üblich) in der Seitenvorlage durchzuführen.

  1. <txp:if_article_list>
  2.  
  3. <txp:output_form form="articleList" />
  4.  
  5. <txp:else />
  6.  
  7. <div id="post<txp:article_id />" class="post">
  8. <h2><txp:title /> <txp:output_form form="intraFlag" /></h2>
  9. <txp:output_form form="articleImage" />
  10. <txp:body />
  11. <txp:output_form form="metaInfo" />
  12. </div>
  13.  
  14. </txp:if_article_list>
  15. Code-Download: /code/txp-forms-07.txt

Das funktioniert problemlos: zunächst prüft Textpattern, ob der Kontext der Seite, die gerade aufgerufen wurde, eine Artikelliste oder ein einzelner Artikel ist.

Ist der Kontext ein einzelner Artikel (hier durch <txp:else /> in der Abfrage if_article_list angezeigt), wird der Code im unteren Teil des Bausteins ausgeführt, wobei auch hierbei wieder verschiedene Bausteine mit output_form eingebaut werden.

Im Fall der Artikelliste wird der Baustein articleList eingebunden, der den Code für die Listendarstellung enthält. Dieser sieht so aus:

  1. <div class="postExcerpt">
  2. <h2><txp:permlink><txp:title /></txp:permlink></h2>
  3. <p class="category">
  4. <txp:section title="y"/>
  5. <txp:if_article_category_article_category number="1">&#160;&raquo;&#160;<txp:category1 title="y" />
  6. </txp:if_article_category>(<txp:posted />)
  7. </p>
  8. <txp:rss_auto_excerpt words="30" excerptwraptag="p" linktext="Weiter lesen &raquo;" ending=" (...)" linkwraptag="p" linkclass="readOn" />
  9. </div>
  10. Code-Download: /code/txp-forms-08.txt

Fazit

Die beiden Bausteintypen misc und article sind das Herzstück einer Textpattern-Site und können sehr flexibel und kreativ eingesetzt werden. Vor allem der Typ misc in Zusammenhang mit dem Tag <txp:output_form form="nameDesBausteins" /> erleichtert die Pflege und Aktualisierung des Code-Gerüsts einer Site enorm.

Zuletzt geändert am 05.01.2008

1Alex schrieb am 26. Februar 2008, 13:36 h    # 

Für deutsche User gibt es ebenfalls eine deutsche Tag Referenz sowie 4 Screencasts zum Thema.