Style-Lifting Teil IV: alphabetisch sortiertes Register von Blogartikeln

Ein automatisches alphabetisches Rezept-Register für unsere Homepage, das wäre praktisch, dachten wir uns. Nun ja, eigentlich kein Problem - mit ein wenig JavaScript-Programmierung!

In den vorangegangenen Artikeln übers Style-Lifting für eine Jimdo-Seite hatte ich ja schon beschrieben, wie man eine Bloganzeige auf ein übersichtlicheres Array-Format umstellen kann. Natürlich kann man dabei auch die Jimdo-interne alphabetische Sortierung der Artikel nach Anfangsbuchstaben anstatt der sonst eher üblichen Sortierung nach Datum einschalten - aber das gilt dann für die gesamte Jimdo-Homepage!

Was wir brauchten (und das gilt wahrscheinlich für viele andere auch) war aber eine alphabetisch geordnete Übersichtsanzeige unserer Blogartikel auf einer eigenen Seite, während auf anderen Seiten die Datums-Sortierung normal benutzt wird. Zusätzlich sollte bei der alphabetischen Sortierung immer groß der jeweilige Anfangsbuchstabe eingeblendet werden, damit das Ganze den Charakter eines Registers bekommt, in unserem Fall für unsere Rezepte. 

Nun ist es in Jimdo leider nicht möglich direkt auf die PHP-Datenbank zuzugreifen. Damit wäre es ein leichtes, die Artikel auf diese Art sortiert auszugeben und auch noch anderen Text dazwischen zu platzieren. Aber immerhin können wir nach dem Laden der Seite ein JavaScript-Programm ausführen lassen, das einzelne HTML-Blöcke untereinander vertauscht oder sortiert, und auch noch Text dazwischenschiebt. Und genauso habe ich die Register auf unserer Homepage dann programmiert, zum Beispiel für unsere Kochrezepte.

Im folgenden seht Ihr den Quelltext eines solchen Register-erzeugenden Programms auf unserer Seite des Kochrezept-A-Z-Registers. Auf dieser Seite befinden sich nacheinander nur eine Überschrift, dieses Programm in einer Widget/HTML-Box und danach eine Bloganzeige mit der Auswahl "kochen":

<div>

Gerichte sortiert nach Anfangsbuchstaben

</div>

 

<div id="register" style="margin-right: -20px; padding: 5px 0;">

</div>

 

<script type="text/javascript">

//<![CDATA[

$(document).ready(function () {

$("div.j-blogarticle").toggleClass("blog-az");

for (var i=0; i<26;i++){

c = String.fromCharCode(65+i);

$("#register").append("<div class=\"hr\" style=\"margin-right: 20px; padding: 5px 0;\"><\/div><div style=\"padding: 5px 0;\"><h1>"+c+":<\/h1><\/div><div id=\""+c+"\"><\/div>");

};

var a=$(".j-blogarticle").toArray();

for (var i = 0; i<a.length; i++) {

b =a[i].children[1].children[0].firstChild.nodeValue.charAt(0).toUpperCase();

if (b=="Ä") {b="A"};

if (b=="Ö") {b="O"};

if (b=="Ü") {b="U"};

$("#".concat(b)).append(a[i]);

};

});

//]]>

</script>

Hier die Erklärung für die einzelnen Zeilen:

  • Der erste <div>-Block gibt nur einen Hinweistext aus.
  • Der zweite <div>-Block hat die id="register" und dient später als Container für das ganze Register. Die margin/padding-Angabe ist dazu da, auf unserer Seite drei Artikel nebeneinander zu erlauben. Das könnt Ihr natürlich an Eure Seite anpassen.
  • Dann geht's schon zum JavaScript: das Programm startet nach dem Laden der Seite ($(document).ready(function ()).
  • Es hängt als erstes der Bloganzeige auf der Seite mittels toggleClass die Klasse "blog-az" an, damit diese später umformatierbar wird. Diese Funktion ist aus der jquery-Bibliothek. Wenn Ihr wie wir dieses Paket schon für eine Slideshow im Head Eurer Seite vorgeladen habt, dann müsst Ihr hier nichts mehr extra tun. Ansonsten bitte vorher das Paket laden wie im Artikel Slideshow beschrieben.
  • Die folgende For-Schleife erzeugt im oben schon erwähnten zweiten <div>-Block mit der id="register" die Struktur des Verzeichnisses in HTML, mit den Buchstaben in <h1>-Größe und trennenden horizontalen Linien. Dies geschieht ebenfalls mit einem jquery-Befehl, nämlich append.
  • Danach werden mit einem einzigen Befehl toArray sämliche Blogartikel aus der Bloganzeige umgehängt in das Array a. Hier sind sie dann sehr elegant verfügbar für die nächste Sortierschleife.
  • Die letzte For-Schleife bestimmt für jeden der Artikel nun den Anfangsbuchstaben des Titels und wandelt ihn sicherheitshalber in einen Großbuchstaben um. Für Umlaute werden dabei jeweils die passenden Vokale eingesetzt. Dann wird der Artikel in die Registerstruktur unter dem Buchstaben eingehängt, der seinem Anfangsbuchstaben entspricht. Dazu wurde beim Erzeugen der Registerstruktur in der ersten For-Schleife weiter oben den jeweiligen Überschriftsbuchstaben immer eine passende ID zugeordnet, die jetzt referenziert wird.

Würden wir das allerdings jetzt so ganz alleine starten, dann würden einfach die angezeigten Blogartikel unter die Registerbuchstaben einsortiert werden, in der vollen Größe wie sie normal dargestellt werden. Das geht natürlich hier nicht, denn es soll ja ein Register werden. Also formatieren wir die Artikel noch um und fügen folgendes in den Head unserer Seite ein:

<style type="text/css">

/*<![CDATA[*/

div .blog-az {width: 283px !important; margin: 0 20px 20px 0px !important; padding: 5px 0 !important; overflow:hidden !important; display: inline-block !important;}

div .blog-az h1 {width: 100% !important; height: 2.8em !important; font-size: 1.2em !important; overflow: hidden !important;}

div .blog-az .datetime {display: none !important;}

div .blog-az .comment {display: none !important;}

div .blog-az .j-textWithImage {padding: 5px 0 !important;}

div .blog-az .j-textWithImage p {display: none !important;}

div .blog-az .j-textWithImage div {height: 215px !important; overflow:hidden !important;}

div .blog-az img {width: 283px !important; height: auto !important; min-height: 210px !important; vertical-align: middle !important;}

/*]]>*/

</style>

Solche Änderungen des Stylesheets hatte ich ja schon im ersten Teil der Serie besprochen, und sie sollten im Detail eigentlich klar sein. Sie sorgen hier dafür, dass von der normalen Bloganzeige nur das Bild, die Überschrift und der Link "mehr lesen" übrig bleiben. Damit das nicht bei allen Blogs auf der Webseite passiert, ist es hier nur für einen Blog mit class="blog-az" definiert.

Diese Klasse ist bei normalen Jimdo-Blogs nicht vorhanden, aber wir haben ja oben im Javascript-Programm schon genau diese Klasse den Blogartikeln auf dieser Seite mittels $("div.j-blogarticle").toggleClass("blog-az"); hinzugefügt. Tja, und das war's auch schon!

Für alle diese Umarbeitungen der Jimdo-Styles gilt das schon in den vorigen Artikeln gesagte über Kompendien für HTML-, Javascript- und CSS-Programmierung im Internet und das Vermeiden des Zerstörens der Seitenstruktur.

So, und jetzt viel Spaß bei Euren eigenen Versuchen!

Holger

Style-Lifting Teil IV: alphabetisch sortiertes Register von Blogartikeln
51
Print Friendly and PDF

Kommentar schreiben

Kommentare: 0

Kontakt & Empfehlung:

Follow on Bloglovin

Jetzt online zum Download:

Klein. Fantastischer Roman
Klein. Fantastischer Roman

Rezept-Übersichten: