Daniela von datentupel.de fragte mich kürzlich per Mail, wie ich denn wohl meine TagCloud in der Seitenleiste gebaut habe.

Das war für mein selektives Gedächnis der Anlass mich darauf hinzuweisen, dass die TagCloud auf instant-thinking.de ja noch gar nicht mit Leerzeichen und Umlauten umgehen kann und beim Klick auf ein solches Tag den User auf die 404-Seite schickt.

Das konnte natürlich nicht so bleiben, das muss man fixen, wie sieht das denn aus, die Jungs reden schon…

TagCloud Installation

Ich habe die TagCloud im Prinzip schlicht von tedkulp.com kopiert. Das war gar nicht schwer und wird von Ted in diesem Kommentar zu seinem Octopress-Switch in zwei Sätzen erläutert:

Check out my tags plugins in my repo.

https://github.com/tedkulp/oct… (add tag_dir: tag to config.yml)
https://github.com/tedkulp/oct… (this can go right into the default_asides in
_config.yml)

That should be it. It’s pretty simple.

Ted

Das ganze ist also ziemlich straight forward zu machen…

Wie genau das funktioniert steht nun hier:

Man besorge sich die folgenden beiden Dateien aus Ted’s Octopress Repo:

• tag_generator.rb
• tag_cloud.rb

Und lege sie in das plugins-Verzeichnis der eigenen Octopress-Installation.

Um die TagCloud nun auch tatsächlich in der Seitenleiste anzeigen zu lassen, muss das tag_cloud.rb-Plugin dort verankert werden. Dazu habe ich das custom aside source/_includes/custom/asides/instant-tags.html mit dem Inhalt dieses Gists erstellt und in der _config.yml der Liste der default_asides hinzugefügt.

Ebenfalls in der _config.yml ist das Verzeichnis für die Tags zu vermerken:

1

tag_dir: tag

Jetzt fehlt nur noch ein bisschen Styling für die Cloud. Dazu kann man etwa das folgende CSS in seine sass/custom/_styles.scss einbauen¹:

1
2
3
4
5
6
7

// Style for the Tag Cloud
// TODO Think about the use of the font-weight css-option
.rank-1 { font-size: 2em; }
.rank-2 { font-size: 1.7em; }
.rank-3 { font-size: 1.4em; }
.rank-4 { font-size: 1.1em; }
.rank-5 { font-size: 0.9em; }

Damit die Tags auch in den Posts angezeigt werden, habe ich mir noch die include-Datei tags.html aus Ted’s Octopress Repo besorgt, in source/_includes/post/tags.html abgespeichert und sie in dem <footer>-Teil meines Post-Layout eingebaut. Den Inhalt dieser Datei findet ihr in diesem Gist.

TagCloud für Leerzeichen und Umlaute anpassen

In der von mir verwendeten Version aus dem Dezember 2011 waren, wie eingangs erwähnt, sowohl Leerzeichen als auch Umlaute problematisch. Seit diesem Commit von Christian Oestreich aus dem Januar 2012 sind die Leerzeichen in Tags gefixt.

Schon mal sehr einfach, danke Christian!

Um nun noch die deutschen Umlaute nicht in Bindestriche (-) umsetzen zu lassen, musste ich noch in tag_generator.rb und tag_cloud.rb vor den Ersetzungen für die Leerzeichen, solche für die Umlaute einbauen.

Das läuft darauf hinaus, jedes .gsub(/_|\W/, '-') in .gsub(/ä/i, 'ae').gsub(/ö/i, 'oe').gsub(/ü/i,'ue').gsub(/_|\W/, '-') zu ändern.

Damit Ruby nicht einen schmerzhaften Tod durch non-ASCII-Zeichen stirbt, ist beiden Dateien noch ein magisches # encoding: utf-8 in die erste Zeile zu pflanzen.

Meine Anpassungen herunterladen

Ich habe meine Änderungen bei Ted Kulp als Pull Request hinterlegt, er scheint diese aber nicht mergen zu wollen². Wer mag, kann sich die beiden Dateien in diesem Commit aus meinem Octopress-Fork besorgen.

Ich hoffe ich habe nichts vergessen, die ursprüngliche Erstellung ist einfach schon wieder so lange her…

(via: datentupel und tedkulp.com)