Jekyll templates/snippits/shortcuts

Question

I've been playing around with Jekyll for a couple of days, I've got a working site, but on many pages I want to use templates/snippits/shortcuts to make it easy to re-use commonly-typed content.

In MediaWiki, this is what I would have done;

This is a test {{ iconSmileFace }}

Where {{ iconSmileFace }} obviously translates to something like <img src = "resources/images/smile.png" />

I've seen that Jekyll has includes, so I could do {{% include iconSmileFace.html %}} but this syntax seems kinda verbose, and maybe not quite the Jekyll-way of doing things. Is there another better way?

Answer 1

I would create a snippet to hold all of my icons whether they are images or svgs or font icons:

{% case include.icon %}
{% when 'smiley-face' %}
  Smiley face
{% when 'heart' %}
  Heart
{% when 'close' %}
  X
{% when 'next' %}
  >
{% endcase %}

Then include it where you need it {% include icon.html icon="smiley-face" %}

Answer 2

A good idea would be to define a liquid tag.

Create the _plugins directory and a file called smile.rb with this content:

module Jekyll
  class RenderSmileTag < Liquid::Tag

    def render(context)
      '<img src = "resources/images/smile.png" />'
    end
  end
end

Liquid::Template.register_tag('smile', Jekyll::RenderSmileTag)

Then every time you want to render the image just use: {% smile %} and it will generate <img src="resources/images/smile.png" />

Answer 3

If your intent is to output image tags with the shortcut, there's another way with a GitHub Pages supported plugin:

(Though I haven't tested this myself)

From the plugin jemoji's documentation, you can serve custom emojis by pointing to a custom source in your _config.yml:

emoji
  src: "/resources/images"

Then reference the emoji in your markdown document:

It's a beautiful day! :smile: