Tips

Jekyll kann das
Ekkart Kleinod  • 
  1. ekkart.de
  2. Computer
  3. Jekyll
  4. Tips

Auf dieser Seite

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, jetzt werden die symbolischen Links übernommen, das ist z.B. blöd bei relativen Links.

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

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

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}}}