Jekyll und externe Links

Zum Hintergrund

Jekyll öffnet externe Links standardmäßig im gleichen Fenster wie die eigene Website. In den allermeisten Fällen ist dieses Verhalten genau das, was man als Website-Betreiber nicht will. Manche Jekyll-Themes nehmen sich dieses Problems an, mein ausgewähltes Theme leider nicht.

Manuelle Abhilfe

Anfangs habe ich versucht, dieses Verhalten manuell zu umgehen. In allen möglichen Templates meines Jekyll-Themes habe ich folgenden Code-Schnippsel eingefügt:

{% if page.header.caption_url contains 'http' %}target="_blank" {% endif %}

… was dann letztendlich zu folgendem HTML-Code für Links führt:

<a href="{{ page.header.caption_url }}" {% if page.header.caption_url contains 'http' %}target="_blank" {% endif %}>{{ page.header.caption }}</a>

Das Ganze hat soweit auch gut funktioniert. An je mehr Stellen ich diesen Code aber eingefügt hatte, an desto mehr andren Stellen ist mir aufgefallen, dass er noch fehlt und externe Links immer noch im selben Fenster geändert wurden.

Eine weitere Möglichkeit wäre gewesen, die externen Links in dem Markdown-Files immer folgendermaßen zu schreiben:

[External link](https://rubygems.org/gems/jekyll-target-blank){:target="_blank"}

Darauf bin ich aber gar nicht erst gekommen.

Das muss einfacher gehen

Immer, wenn mich ein Problem sehr nervt und ich gleichzeitig viel Zeit und Energie investieren müsste, um es zu lösen, hat höchstwahrscheinlich schon jemand anderes diese Problem für mich gelöst. So auch in diesem Fall!

Die Lösung des Problems heißt Jekyll Target Blank. Und mein Retter ist Keith Mifsud, der diese Jekyll-Extension programmiert hat.

Aufgabe dieser Jekyll-Extension ist es, sämtliche externen URLs (also alles, was mit http beginnt) in einem separaten Tab zu öffnen. Ein weiterer Vorteil dieser Extension soll auch nicht verschwiegen werden:
Die Erweiterung fügt zudem noch ein ‘rel=”noopener noreferrer”’ in den <a>-Tag ein, was eine theoretische Sicherheitslücke von externen Links schließt. Genaueres dazu siehe hier.

Installation

Die Installation ist schnell erledigt:

1. Die folgende Zeile zum Gemfile der Seite hinzufügen

   gem 'jekyll-target-blank'
   

2. Dann eine weitere Zeile in die ‘_config.yml’ der Seite kopieren (Jekyll-Version > 3.5)

   plugins:
     - jekyll-target-blank
   

3. Im Terminal einmal bundle install ausführen, um die Erweiterung für die eigene Seite zu installieren

Sämtliche Infos, wie man die Erweiterung konfigurieren kann, findet Ihr auf der Website von Jekyll Target Blank.