< s9y-Admin-Template: Freiwillige Beta-Tester vor | Wellenreiten >

02 Nov 2009 s9y mit jQuery zurechtbiegen

Wie ich bereits erwähnte, benutze ich im neuen Template YL 104 erstmals die Javascript-Bibliothek jQuery.

Neben einfachen Effekten wie dem Ein- und Ausblenden bestimmter Abschnitte oder der Vergrößerung von Grafiken setze ich jQuery stellenweise auch ein, um das DOM zu verbiegen. Stark vereinfacht gesagt kann man so mittels jQuery von s9y oder seinen Plugins generierten (X)HTML-Code verändern, ohne ihn im Kern oder Plugin bearbeiten zu müssen – natürlich nur für Besucher, die Javascript im Browser aktiviert haben.

Wofür genau setze ich das ein und warum?

Anmerkung für jQuery-Cracks: Ich beschäftige mich erst seit kurzem mit jQuery – es ist durchaus möglich, dass mein Code stellenweise nicht optimal ist. Sachdienliche Hinweise gerne in den Kommentaren.

Trennung von Struktur und Verhalten

Der „Dreisatz der Trennung im Frontend“ lautet: „Struktur, Gestaltung, Verhalten“ – Struktur mit XHTML, Gestaltung mit CSS, Verhalten mit Javascript. Diese drei Bereiche sollten (idealerweise, was in einem CMS oder einem Blogsystem leider oft nur bedingt möglich ist) klar voneinander getrennt sein.

So habe ich z.B. folgende Funktionen von Serendipity aus den Template-Dateien entfernt und in eine externe jQuery-Datei ausgelagert:

  • die Hinweisbox zur Trackback-URL
  • das Einfügen und Entfernen des Vorgabetextes im Suchformular

(Der jQuery-Code ist hier nur minimal anders als das standardmäßig verwendete Javascript, daher kein Code-Beispiel hierzu.)

Code-Korrekturen

Bei bestimmten Plugins ist der PHP-Code für einen PHP-Laien wie mich einfach zu kompliziert, um ihn den eigenen Vorstellungen entsprechend anzupassen. Zudem sind eigene Änderungen nicht updatesicher und gelegentlich nicht „konsensfähig“.

serendipity_event_entrypaging

Das entrypaging-Plugin benutzt standardmäßig die Zeichen für kleiner und größer (< und >) als Icons – ich wollte lieber „richtige“ Pfeilsymbole (← und →) verwenden. Da die Ausgabe des entrypaging-Plugins reichhaltig ausgezeichnet ist, ist der jQuery-Code dafür sehr simpel:

$('.epicon').remove();
$('.serendipity_entrypaging_left a').prepend('← ');
$('.serendipity_entrypaging_right a').append(' →');

Man entfernt zunächst alle Elemente mit der Klasse epicon und fügt dann vor bzw. hinter den Linktext der „Blätter“-Links das jeweilige Pfeilsymbol nebst einem trennenden Leerzeichen ein.

serendipity_event_freetag

Auch im freetag-Plugin hatte ich einige individuelle Änderungswünsche. Die jQuery-Umsetzung der ersten Änderung löst gar ein generelles Problem relativ elegant.

Überschriften statt divs

Lässt man sich etwa alle Artikel mit dem Tag jquery in diesem Blog anzeigen, sind dort die Texte „Artikel mit Tag jquery“ und „Verwandte Tags“ normalerweise als h2- und div-Element ausgezeichnet. Schöner wären natürlich semantisch passendere Elemente. Kein Problem mit jQuery:

$('.freetag_cloud h2').each(function() {
    $(this).replaceWith("<h1>" + $(this).text() + "</h1>");
});

$('.serendipity_freetag_taglist_related').each(function() {
    $(this).replaceWith("<h2>" + $(this).text() + "</h2>");
});

Diese Überschriften habe ich passend zur generellen Überschriften-Hierarchie des Templates gewählt – was im Plugin-Code nicht oder zumindest nicht mit vertretbarem Aufwand möglich wäre, denn es müsste ja irgendwie ermittelt werden, welche Elemente im jeweiligen Template die passenden wären.

Tags und ähnliche Artikel

Anmerkung: Ich verzichte an dieser Stelle auf konkrete Code-Schnippsel, um den Eintrag nicht noch länger zu machen. Bei Interesse klaube man sich die entsprechenden Stellen bitte einfach aus dem Quellcode.

In der Einzelansicht eines Artikels gibt das Template eine Liste der Tags zu einem Artikel sowie eine Liste ähnlicher Artikel im Blog, basierend auf diesen Tags, aus. Ein oft geäußerter Wunsch, der über die Plugin-Konfiguration (derzeit noch) nicht umsetzbar ist, ist es, in der Tagliste den Text „Tags für diesen Artikel“ zu ändern. Wie man (mit aktivem Javascript zumindest) sieht, ist auch das mit etwas jQuery möglich – ich „wickele“ hier den vom Plugin ausgegebenen Code in ein span, kopiere aus diesem die Tag-Links, füge sie hinter dem span neu ein und entferne sie innerhalb des span, um dann den verbleibenden Inhalt des span umzutexten.

Ganz ähnlich verfahre ich bei der Liste der ähnlichen Artikel – diese ist leider pluginseitig gar keine solche. Mit jQuery kann ich hier also den leider semantisch wenig korrekten Code, welchen das Plugin ausgibt, mit relativ geringem Aufwand so „zurechtbiegen“, wie es meiner Einschätzung nach sein sollte. Als zusätzliches „eye candy“ mache ich die Liste zudem ein- und ausklappbar, um ein wenig Platz in der Einzelansicht eines Eintrages einzusparen.

Ist das alles überhaupt sinnvoll?

Keine Frage: Schöner, eleganter wäre es, könnte man diese Code-Anpassungen direkt so ausliefern lassen, wie man es gerne hätte – auch für Besucher, die ohne Javascript unterwegs sind. Wenn die eigenen PHP-Kenntnisse dafür aber nicht ausreichen oder man die Verkomplizierungen beim Update des Kerns oder eines Plugins scheut, ist jQuery hier eine bequeme Alternative – wobei man natürlich bedenken muss, dass es evtl. vorkommen kann, dass Änderungen an Kern oder Plugins so ausfallen, dass der verwendete jQuery-Code nicht mehr greift.

0 Trackbacks

Trackback-URL

  1. Keine Trackbacks

2 Kommentare

RSS Feed (Kommentare) für diesen Eintrag

  1. * Michel Erp Lösungen (08.11.09, 09:13):

    Ist das nicht stellenwise ein bisschen: Programmierung für faule…
    ich denke optimal ist trotzdem eine Quellcodeveränderung aufgrund schnelleren Seitenaufbaus…

  2. * YellowLed (08.11.09, 12:07):

    DOM-Manipulation mit jQuery erschließt sich mir — PHP-Programmierung bestenfalls bedingt. Im Übrigen steht im Artikel, warum ich diesen Weg gewählt habe, obwohl mir bewusst ist, dass es einen besseren gäbe.

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.