Exploring Jekyll layout

Jekyll works wonderfully with little knowledge beyond basic html/css to create _layout templates and then you’re free to write beautiful pages and posts in markdown. But adding more dynamic content, the kind of cool stuff avialable in so many wordpress plugins, tends to require a little understanding of the template formatting language, Liquid. Liquid is actually super simple and powerful way to build a dynamic website. The project’s wiki provides a great introduction, starting with

  • Liquid filters and tags.
  • Jekyll proves a few more useful extensions, though I’ve found the standard ones most useful.
  • Knowing the template names available in Jekyll comes in handy for this stuff. (like site.posts or page.content. Not sure why page.content comes in as rendered content for posts.
  • A lot of the more fancy stuff requires writing custom liquid functions, common in Jekyll plugins. See the Liquid extensions guide to learn the syntax for this.
  • These liquid extensions can be specified in a Ruby .rb script that can run arbitrary ruby commands.
  • Compatibility with github: anything that doesn’t require additional gems will work on Github.

Writing my own extension to parse feeds

I wanted a nice way to embed feeds on my Jekyll site – preferably at Jekyll-compile rather than in javascript, to maintain the fast static site ethos. As usual, this search begins with an SO question on parsing feeds. From this I learn about a nice Ruby library to do the parsing: feedrizza. Using a bit of knowledge from above (and a bit of hacking – probably would have been better served if I read those things first instead of after trying this), I have a plugin for feedrizza which displays feeds. This could probably be greatly improved. Fetching xml slows down jekyll compiling, may disable the plugin for the time being

Modifying layout of posts archive (lab notebook)

Can I add columns with post previews, like my Wordpress notebook? Mission accomplished.

I first considered using a plugin plugin to get the frist paragraph (based on nokogiri parsing the html/xml). While nokogiri is quite powerful, I often don’t have just the right length content in the first paragraph – some entries just launch into a list enviornment with no paragraphs to begin with.

Instead, it’s much easier to use built in liquid filters which can already grab first n characters or n words. Unfortunately pulls in formatted post content, not pure markdown, leaving open tags. Should probably look into some santize html filters, but don’t seem to be default. To avoid this, I ended up using the strip_html filter, rendering unformatted but more uniformly looking previews on pages.

Lastly, format the previews in justified columns in a smaller font-size using a little css.

Oh, it appears there is a nokogiri-based plugin which will truncate and close html tags appropriately.

Some liquid example code

Arrange site-posts into three columns, entries columnwise.


{% capture n  %}{{ site.posts | size | divided_by:3}}{% endcapture %}
{% capture m %} {{ n | times:2 }}{% endcapture %}


<div class="span3">

{% for post in site.posts limit:n %}
{{ post | content }}
{% endfor %}

</div>

<div class="span3">

{% for post in site.posts limit:n offset:n%}
{{ post | content }}
{% endfor %}

</div>

<div class="span3">

{% for post in site.posts limit:n offset:m %}
{{ post | content }}
{% endfor %}

</div>

Misc