Ich mag Fußnoten1. Ich mag es, Sie einfach schreiben zu können und sie hübsch sortiert am Ende meiner Texte zu wissen.
Ich mag es aber auch, sie schick und gut klick- und tapbar auf der Website zu sehen. Zu diesem Zweck kommt hier bigfoot.js2 zum Einsatz3.
Installation von bigfoot.js
Auf der bigfoot.js-Website kann man in einer sehr komfortablen Demo die verschiedenen Stile ausprobieren und herunterladen. Ich hatte hier ganz lange den Default mit den Instaper inspirierten drei Punkten benutzt, schwenkte nun aber auf den Numeric-Stil um. Die für den gewünschten Stil benötigten Dateien kann man sich dann direkt auf der Website herunterladen.
Auf dem folgenden Screenshot kann man die beiden Stile sehr schön betrachten4:
Wenn man dann den Download für den Numeric-Stil heruntergeladen und ausgepackt hat, findet man eine kleine Verzeichnisstruktur vor:
Was dann wo hin muss ist von Webseite zu Webseite unterschiedlich. Hier ist eine hübsch gemachte Anleitung für Jekyll-Blogs. Bei meiner5 auf Octopress basierenden Installation habe ich einfach bigfoot-number.css
und bigfoot.min.js
in die entsprechenden Verzeichnisse unter source/stylesheets/
und source/javascripts/
kopiert.
Das war es auch schon in Sachen Installation.
Konfiguration von bigfoot.js
Damit die beiden neuen Dateien auch berücksichtigt werden, müssen sie unter source/_includes/custom/head.html
noch eingebunden werden:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Nachdem die beiden Dateien in den Zeilen 2 und 3 dem restlichen System bekannt gemacht wurden folgt dann noch die Konfiguration für die Fußnoten:
- In Zeile 6 werden die Fußnoten am Ende eines Post ausgeblendet.
- In den Zeilen 7 und 8 wird festgelegt, dass es ausreicht mit dem Mauszeiger über einer Fußnote zu hovern damit sie angezeigt wird.
- Und in der Zeile 9 wird die Verzögerung dafür auf eine halbe Sekunde eingestellt.
Das habe ich so nahezu eins zu eins von Uwe Honekamp übernommen.
Hauptseiten-Fix
Ein Problem bleibt.
Gelegentlich schreibe ich eher längliche Posts. Für diese trenne ich durch ein <!-- more -->
Tag den Großteil ab, was dazu führt, dass man erst nach einem Klick auf den Weiterlesen → Button den ganzen Post sieht und auf der Hauptseite nur ein Teil des Posts zu sehen ist.
Das führt dann wiederum dazu, dass die Fußnoten für den zu sehenden Teil fehlen und/oder kaputt sind. Nicht so schön.
Anstelle den selben Weg wie Uwe Honekamp zu gehen und einfach immer alle Posts vollständig auf der Startseite anzeigen zu lassen, bin ich dank Syeong Gan dazu übergegangen, die sichtbaren Fußnotenmarker einfach als simple, hochgestellte Zahlen anzuzeigen, die dann eben keine Funktion haben.
Das wird durch das folgende footnotes.rb
Plugin erledigt, dass bei mir unter plugins/footnotes.rb
liegt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Ich habe es in Zeile 15 minimal angepasst, um meine fn
Notation für Fußnoten abzubilden.
Die so eingerichteten neuen Filter rename_footnote_link
und remove_footnote_link
müssen nun auch noch aufgerufen werden. Das geschieht in der Datei source/_includes/article.html
die bei mir nun wie folgt ausschaut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
Der Aufruf remove_footnote_link
erfolgt in der Zeile 21 für Fußnoten die ausgeblendet werden weil sie hinter einem <!-- more -->
Tag verschwunden sind.
Und in Zeile 26 wird der Link für die Fußnoten durch rename_footnote_link
durch eine Zufallszahl ergänzt, um möglichst eindeutige Fußnotenlinks für die vollständig auf der Hauptseite abgebildeten Posts zu haben6.
Und damit fahre ich nun schon seit Januar 20147 sehr gut. Zur Nachahmung empfohlen.
-
Das kommt ziemlich sicher daher, dass ich das Gesamtwerk von Adams und Pratchett verschlungen habe…↩
-
Laut eigener Aussage A jQuery plugin for empowering footnotes Inspired by Instapaper. Built for mobile devices and responsive designs. und es verspricht da wirklich nicht zu viel…↩
-
Und das bereits seit fast drei Jahren. Man kommt ja zu nichts…↩
-
Und es gibt noch einen dritten namens Bottom. Den fand ich aber noch nie sehr ansprechend…↩
-
Schon recht gut abgehangenen…↩
-
So eindeutig wie
rand(100)
eben sein kann…↩ -
Das ist ja nun wirklich schon eine ganze Weile…↩