< Mehr zum Smashing Book | My year in 12 cut-and-paste sentences (2009) >

18 Dez 2009 Unique article design mit s9y (Teil 2)

Nachdem die Grundlagen zum Thema geklärt sind, geht es nun um die technische Umsetzung mit s9y. Dazu zunächst ein paar generelle, eher „abstrakte“ Anmerkungen:

  1. Es soll hier weder um das Basis-Layout noch um die Umsetzung der Startseite gehen. Beides sind sehr individuelle Aspekte, eine Diskussion würde den Rahmen dieses Artikels sprengen.
  2. Die Kombination aus einem Basis-Stylesheet und je einem individuellen Artikel-Stylesheet, welche sich ergänzen bzw. überschreiben scheint mir die einzig sinnvolle Implementation, obwohl es theoretisch auch anders ginge.

Nun zur Umsetzung im Template.

Was soll generell erreicht werden?

Im Grunde ist das, was wir brauchen, relativ einfach: In der Einzelansicht eines Eintrages soll zusätzliches CSS eingebunden werden. „Übersetzt“ man das nach Smarty, heißt es einfach nur:

{if $view == 'entry'}
    {* hier Code zum einbinden der Styles *}
{/if}

Das müsste, da es (unabhängig davon, wie das CSS nun konkret eingebunden wird) im Kopfbereich des (X)HTML eingebunden werden muss, in der index.tpl nach dem Einbinden des standardmäßigen Stylesheets eines Templates stehen, damit Kaskade und Spezifität erwartungsgemäß funktionieren.

Exkurs: Wie bindet man CSS ein?

Grundsätzlich gibt es drei Arten, CSS in (X)HTML einzubinden: Das <style>-Element, Inline-Styles oder eine CSS-Datei.

Inline-Styles sind unschön, da sie nicht der Trennung von Auszeichnung und Gestaltung entsprechen. Leider sind sie mitunter – speziell in einer Blog- oder CMS-Umgebung – nicht zu umgehen.

Ob man hier nun zum <style>-Element oder zur CSS-Datei greift, hängt ein bisschen von der persönlichen Vorliebe oder vom eigenen Workflow ab.

Zwei Wege

Im Wesentlichen fallen mir zwei Arten ein, die konkreten individuellen Styles einzubinden – eine Methode funktioniert in s9y nur mit Bordmitteln, verlangt aber etwas mehr „Handarbeit“; die zweite Methode ist für einige Benutzer evtl. einfacher, erfordert jedoch ein Plugin.

Mit Bordmitteln: CSS-Datei

Rein mit Bordmitteln funktioniert es, soweit ich das bisher durchdacht habe, nur über die Einbindung einer zusätzlichen CSS-Datei, was nichts Schlechtes ist.

Man legt also im Template-Verzeichnis ein Unterverzeichnis, meinetwegen /templates/MEIN_TEMPLATE/articles/, an, in welchem man dann sowohl die individuellen CSS-Dateien als auch die evtl. zusätzlich benötigten Grafiken ablegt. (Wer es gerne ordentlich hat, kann natürlich die Grafiken ebenfalls noch in entsprechend benannte Unterverzeichnisse legen, muss dann aber bei den Pfadangaben in den individuellen CSS-Dateien aufpassen.)

Nun stellt sich die Frage, wie man diese CSS-Dateien sinnvoll benennen soll. Auch das ist letztlich eine Frage des persönlichen Geschmacks. Fakt ist: Um eine automatische Einbindung zu gewährleisten sollten die Dateinamen aus eindeutigen Template-Variablen ableitbar sein. Es bietet sich die (stets eindeutige) Nummer (ID) eines Artikels an, auf die man in s9y-Templates über {$entry.id} zugreifen kann. Der Code dafür sieht so aus:

{if $view == 'entry'}
    <link rel="stylesheet" type="text/css"
href="{$serendipityHTTPPath}templates/{$template}/
articles/{$entry.id}.css" />
{/if}

(Anmerkung: Die Zeile des <link>-Elementes sollte im konkreten Code nicht umgebrochen werden, das geschieht hier nur aus Darstellungsgründen.)

Problem: Artikel ohne Stylesheet

Ein Problem allerdings gibt es bei dieser Lösung: Es wird keine Prüfung vorgenommen, ob die referenzierte CSS-Datei überhaupt existiert. Man sollte also entweder:

  • sicherstellen, dass jeder Artikel ein individuelles Stylesheet erhält
  • für nicht individuell gestaltete Artikel eine leere CSS-Datei anlegen
  • den oben stehenden Code um eine Prüfung ergänzen (Hinweis: Den verlinkten Code habe ich noch nicht getestet!)

Ein weiterer Ansatz wäre, das Plugin „Erweiterte Eigenschaften von Einträgen“ einzubinden und die CSS-Datei darüber einzubinden. Den dafür notwendigen Code kann man sich aus Weg 2 ableiten.

Mit einem Plugin: <style>

Etwas komplizierter im Template-Code, dafür aber evtl. simpler in der Anwendung wäre die Umsetzung mittels <style>, da man nicht mit zusätzlichen CSS-Dateien hantieren muss. Dazu bräuchte es allerdings das Plugin „Erweiterte Eigenschaften von Einträgen“, genauer: Dessen Eigenschaft „Custom fields“.

Auf die genaue Anwendung des Plugins gehe ich hier aus Platzgründen nicht näher ein. Die Vorgehensweise wäre im Prinzip die, ein Custom field namens z.B. articleCSS anzulegen, in welches man dann die benötigten Styles schreibt (ohne <style>-Elemente!). Die Einbindung sähe hier wie folgt aus:

{if $view == 'entry'}
  {if $entry.properties.ep_articleCSS != ''}
    <style type="text/css">
    {$entry.properties.ep_articleCSS}
    </style>
  {/if}
{/if}

Übersetzt: „In der Einzelansicht: Wenn das Custom field articleCSS nicht leer ist, binde seinen Inhalt in ein <style>-Element ein.“

Vor- und Nachteile

Diese Lösung ist evtl. einfacher, zudem ist es hier (templateseitig) leichter, zu prüfen, ob überhaupt individuelle Styles vorliegen – aber dafür liegt der CSS-Code so in der Datenbank und bläst diese zusätzlich auf, was möglicherweise langfristig sogar das System zäher machen könnte. Außerdem muss man ohnehin immer noch ggf. nötige Grafiken irgendwo ablegen und im CSS korrekt referenzieren.

Mir scheint dieser Ansatz insgesamt wenig sinnvoll, es sei denn, man möchte wirklich nur ein paar minimale Änderungen pro Artikel vornehmen – dann aber gäbe es durchaus andere Lösungsansätze, etwa über eine via Template (nur in Einzelansicht) zugewiesene eindeutige ID für jeden Artikel (was man grundsätzlich natürlich auch generell als Lösungsansatz wählen könnte, auf Dauer aber das Stylesheet des Templates riesig und damit unübersichtlich machen dürfte).

Fazit

Unique article design in s9y geht, und die technische Einbindung ins Template ist nahezu trivial. Die eigentliche Arbeit, die es vom Blogger verlangt, beginnt nach der technischen Vorarbeit am Template.

Müsste ich einen Weg empfehlen, es umzusetzen, würde ich wohl den über zusätzliche CSS-Dateien bevorzugen, ganz unabhängig davon, wie man nun das Prüfungs-Problem löst.

Generell bin ich für meinen Teil derzeit ohnehin zu faul, so etwas überhaupt umzusetzen und vor allem mittel- bis langfristig durchzuziehen. Und wie immer: Bei Fragen fragen.

1 Trackback

Trackback-URL

  1. SilvioKunze: SilvioKunze via Twitter (18.12.09, 08:13)

0 Kommentare

RSS Feed (Kommentare) für diesen Eintrag

  1. Noch keine Kommentare

Kommentar schreiben

Bitte die Hinweise beachten.

Hinweise

Textile-Formatierung erlaubt
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Gravatar, Twitter, Identica, Favatar Autoren Bilder werden unterstützt.

Pflichtfelder sind mit * markiert.

Kommentare, die mindestens einen Link enthalten, werden moderiert. Kommentare, die mindestens 3 Links enthalten, werden abgewiesen. Sorry – Spamschutz.

Bei Emoticons, die mitten in Sätzen stehen, möglichst keine Nasen einsetzen [ :), ;) usw. ], da es ansonsten im Zusammenspiel mit Textile zu Merkwürdigkeiten kommen kann.