· 5 minute read

What's new in Jekyll 3.4

This was originally a guest post written for the Forestry.io blog

Jekyll 3.4.0 was release on the 27th of January 2017 with some noteworthy enhancements that I'd like to share with you.

So what's new?

Add connector param to ‘array_to_sentence_string’ filter

Still with me?

Here is a real world example. Our post has the following tags.

tags:
	- one
	- two
	- three

We can then create an _include file for our post tags using


{{ page.tags | array_to_sentence_string }}

This will output our tags

one, two, and three

Easy right?

Now Jekyll 3.4.0 allows you to change the default connector to use other terms such as "or” like so.


{{ page.tags | array_to_sentence_string: 'or' }}

This will output

one, two, or three

Group an array's items using a Liquid expression filter

Jekyll previously allowed you to group your content by a given property using the group_by filter. As an example let’s group all site members working for each company.

Our Jekyll site’s _config.yml includes the following members.

members:
  - name: "Scott"
    company: "Forestry"
  - name: "Jordan"
    company: "Forestry"
  - name: "Parker"
    company: "GitHub"

Jekyll can apply the group_by filter with company as the parameter using


{{ site.members | group_by:"company" }}

Site members names are collected into an array which outputs the following information

{"name"=>"Forestry", "items"=>[{"name"=>"Scott", "company"=>"Forestry"},{"name"=>"Jordan", "company"=>"Forestry"}], "size"=>2}
{"name"=>"Github", "items"=>[{"name"=>"Parker", "company"=>"Github"}], "size"=>1}

To make this information more useful, we can now create a list of members grouped by their company name


{% assign groups = site.members | group_by: "company" %}
{% for group in groups %}
    <h3>{{ group.name }}</h3>
    <ul>
    {% for item in group.items %}
        <li>{{item.name}}</li>
    {%endfor%}
    </ul>
{%endfor%}

This will output the following list of site members organised by the company they work for.

<h3>Forestry</h3>
<ul>
  <li>Scott</li>
  <li>Jordan</li>
</ul>
<h3>Github</h3>
<ul>
  <li>Parker</li>
</ul>

Jekyll 3.4.0 introduced the group_by_exp filter which allows you to group an array of items using a Liquid expression.

Now, we have the following data about our company software.

software:
  - name: "New shiny software"
    version: "0.4"
  - name: "ABC software"
    version: "1.2"
  - name: "XYZ software"
    version: "1.9"

We can apply the group_by_exp filter to group our software by major version number. For major version we are not concerned with the decimal places (just 1.x, 2.x, 3.x, etc). So our expression will use the slice filter. Like so:


{{ page.software | group_by_exp:"item", "item.version | slice: 0" }}

This outputs the following information

{"name"=>"0", "items"=>[{"name"=>"New shiny software", "version"=>"0.4"}], "size"=>1}
{"name"=>"1", "items"=>[{"name"=>"ABC software", "version"=>"1.2"},{"name"=>"XYZ software", "version"=>"1.9"}], "size"=>2}

We will group our software by version


{% assign groups = page.software | group_by_exp:"item", "item.version" | slice: 0" %}
{% for group in groups %}
  <h3>Major version number {{ group.name }}</h3>
    <ul>
    {% for item in group.items %}
      <li>{{item.name}}</li>
    {% endfo r%}
    </ul>
{% endfor %}

This gives us the following output

<h3>Major version number 0</h3>
<ul>
  <li>New shiny software</li>
</ul>

<h3>Major version number 1</h3>
<ul>
  <li>ABC software</li>
  <li>XYZ software</li>
</ul>

In conclusion we can also use the group_by_exp filter to output different information such as site members names by changing the Liquid expression.


{{ site.members | group_by_exp:"item", "item.name" }}

This will output

{"name"=>"Scott", "items"=>[{"name"=>"Scott", "company"=>"Forestry"}], "size"=>1}
{"name"=>"Jordan", "items"=>[{"name"=>"Jordan", "company"=>"Forestry"}], "size"=>1}
{"name"=>"Parker", "items"=>[{"name"=>"Parker", "company"=>"Github"}], "size"=>1}

We can create a list of site members names like so


{% assign groups = site.members | group_by_exp: "item", "item.name" %}
{% for group in groups %}
    <h3>{{ group.name }}</h3>
{%endfor%}

Output:

<h3>Scott</h3>
<h3>Jordan</h3>
<h3>Parker</h3>

Documentation updates

Jekyll warnings

Let me know if you found these tutorials helpful. Happy Jekylling!