Tips


Jekyll kann das

Tips, meist aus dem Netz zusammengetragen.

Symbolische Links im jekyll-Ordner sind ganz praktisch, bis Jekyll 3.2 wurden diese beim Generieren aufgelöst, d.h. in der generierten Seite waren keine symbolischen Links mehr. Das wurde in Jekyll 3.2 geändert, jetz werden die symbolischen Links übernommen.

Das kann man verhindern, indem man das Environment auf production setzt:

$> JEKYLL_ENV=production jekyll server
$> JEKYLL_ENV=production jekyll build

Liquid-Tags in Code-Blocks

Manchmal will man Liquid-Tags in Code-Blocks anzeigen. Oder man hat Code, der ein Liquid-Tag sein würde. Dann umklammert man den Code mit raw/endraw.

Zunächst der Code, den wir ausgeben wollen:

{% for page in pages_out %}
  <li><a href="{{ page.url }}">{{ page.title }}</a></li>
{% endfor %}

Würden wir das so schreiben, würden {% und {{ Probleme machen.

Also umklammern wir beide Problemfälle jeweils in eine raw-Klammer:

{% raw %}{%{% endraw %} for page in pages_out %}
  <li><a href="{% raw %}{{{% endraw %} page.url }}">{% raw %}{{{% endraw %} page.title }}</a></li>
{% raw %}{%{% endraw %} endfor %}

Das ist kompliziert, aber funktioniert.

Bilder einbinden

Bilder lassen sich eigentlich recht einfach einbinden:

![alt-Text](URL "Titel"){:class="Klassen" width="Breite" height="Höhe"}

Bis auf den alt-Text und die URL ist alles optional. Mir ist das zu viel zu merken, also habe ich ein kleines img-include geschrieben, dem ich beim Einbinden Parameter übergeben kann. Die Parameter sind:

  • src
  • alt
  • title
  • align
  • width
  • height

Alles kann ich weglassen, wenn ich auch die URL weglasse, wird ein Katzenbild eingefügt. Beispiele:

{% include img.html %}
{% include img.html src='/img/ekkart-kleinod.jpg' alt='Bild von Ekkart Kleinod.' %}
{% include img.html src='/img/ekkart-kleinod.jpg' alt='Bild von Ekkart Kleinod.' title='Ekkart Kleinod' align='right' %}

Meine Datei heißt img.html und liegt im _includes-Ordner, bei Umbenennungen oder einem anderen Ort muss das include entsprechend angepasst werden.

{% comment %}
  process arguments, fill missing information
{% endcomment %}

{% comment %}
  src
{% endcomment %}
  {% if include.src %}
	{% assign img_src = include.src %}
  {% else %}
	{% assign img_src = 'http://placekitten.com/100/150' %}
  {% endif %}
  {% if img_src contains '//' %}
  {% else %}
	{% assign img_src = img_src | prepend: site.baseurl %}
  {% endif %}


{% comment %}
  alt/title
{% endcomment %}
  {% if include.alt %}
	{% assign img_alt = include.alt %}
  {% else %}
	{% assign img_alt = '' %}
  {% endif %}

  {% if include.title %}
	{% assign img_title = include.title %}
  {% else %}
	{% assign img_title = '' %}
  {% endif %}

  {% if img_alt != '' and img_title == '' %}
	{% assign img_title = img_alt %}
  {% endif %}
  {% if img_title != '' and img_alt == '' %}
	{% assign img_alt = img_title %}
  {% endif %}

  {% if img_title != '' %}
	{% assign img_title = img_title | prepend: ' "' | append: '"' %}
  {% endif %}


{% comment %}
  alignment
{% endcomment %}
  {% if include.align %}
	{% assign img_align = include.align %}
  {% else %}
	{% assign img_align = '' %}
  {% endif %}
  {% if img_align != '' %}
	{% assign img_align = img_align | prepend: ' pull-' %}
  {% endif %}
  {% assign img_align = img_align | prepend: 'img-rounded' %}


{% comment %}
  width/height
{% endcomment %}
  {% if include.width %}
	{% assign img_width = include.width %}
  {% else %}
	{% assign img_width = '' %}
  {% endif %}
  {% if img_width != '' %}
	{% assign img_width = img_width | prepend: ' width="' | append: '"' %}
  {% endif %}
  {% if include.height %}
	{% assign img_height = include.height %}
  {% else %}
	{% assign img_height = '' %}
  {% endif %}
  {% if img_height != '' %}
	{% assign img_height = img_height | prepend: ' height="' | append: '"' %}
  {% endif %}


{% comment %}
  output image
{% endcomment %}
![{{img_alt}}]({{img_src}}{{img_title}}){:class="{{img_align}}"{{img_width}}{{img_height}}}