Ich mag Fußnoten¹. 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.js² zum Einsatz³.

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 betrachten⁴:

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 meiner⁵ 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

<!-- Add BigFoot Footnotes Javascript and CSS -->
<style>@import url("/stylesheets/bigfoot-number.css");</style>
<script type="text/javascript" src="/javascripts/bigfoot.min.js"></script>
<script type="text/javascript">
    jQuery.bigfoot({
    actionOriginalFN: "hide",
    activateOnHover: "true",
    deleteOnUnhover: "true",
    hoverDelay: "500"
    });
</script>
<!-- End BigFoot Footnotes Javascript and CSS -->

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

# Title: Footnote Liquid Filter
# Author: Syeong Gan
# Description: Liquid filters to modify footnote markup (useful for blog index
#     pages where the same footnote reference may be used multiple times as
#     articles are compiled)
#
# via: http://syeong.jcsg.com/2012/07/07/octopress-footnote-problem/

module FootnoteLiquidFilters
    # Appends a random integer to the footnote reference link
    #     Note, this is a hackish workaround (not foolproof if the same random
    #     happens to be generated twice)
    def rename_footnote_link(input)
        random = rand(100)
        input.gsub(/fn:fn\d+/, '\0-'+"#{random}").gsub(/fnref:fn\d+/, '\0-'+"#{random}")
    end

    # Removes footnote links entirely
    def remove_footnote_link(input)
        input.gsub(/<a .+ rel\=\"footnote\">(\d+)<\/a>/, '\1').gsub(/<a .+ rel\=\"reference\">.+<\/a>/, '')
    end
end

Liquid::Template.register_filter(FootnoteLiquidFilters)

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

{% unless page.no_header %}
  <header>
    {% if index %}
      <h1 class="entry-title"><a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a></h1>
    {% else %}
      <h1 class="entry-title">{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}</h1>
    {% endif %}
    {% unless page.meta == false %}
      <p class="meta">
        {% include post/date.html %}{{ time }}
        {% if site.disqus_short_name and page.comments != false and site.disqus_show_comment_count == true %}
         | <a href="{% if index %}{{ root_url }}{{ post.url }}{% endif %}#disqus_thread">Kommentare</a>
        {% endif %}
      </p>
    {% endunless %}
  </header>
{% endunless %}
{% if index %}
  {% capture excerpted %}{{ content | has_excerpt }}{% endcapture %}
  {% if excerpted == 'true' %}
  <div class="entry-content">{{ content | excerpt | remove_footnote_link }}</div>
    <footer>
      <a rel="full-article" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a>
    </footer>
  {% else %}
  <div class="entry-content">{{ content | excerpt | rename_footnote_link }}</div>
  {% endif %}
{% else %}
<div class="entry-content">{{ content }}</div>
{% endif %}

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 haben⁶.

Und damit fahre ich nun schon seit Januar 2014⁷ sehr gut. Zur Nachahmung empfohlen.