Display language filtered posts by category in Jekyll

Question

I run a Jekyll blog in multiple languages using the setup making Jekyll multilingual by Sylvain Durand without use of any plugin.

All posts have the following markup:

---
title: Hello world!
lang: en
ref: hello
---

The posts are using the normal folder structure:

jekyll
|
 -- posts
   |
   --name-of-post
   --name-of-post-2
   --name-of-post-3

I have a page named en.md which have layout: home and lang: en markup, which displays English posts correctly with the following code in home.html

{% assign posts=site.posts | where:"lang", page.lang %}
<ul>
{% for post in posts %}
    <li>
        <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
{% endfor %}
</ul>

But I would like instead to display posts by category, filtered on the language.

Tried to achieve this with the following:

  {% assign posts=site.categories | where:"lang", page.lang %}
  <div class="categories">
  {% for category in site.categories %}
  <li><a name="{{ category | first }}">{{ category | first }}</a>
    <ul>
    {% for posts in category %}

        {% for post in posts %}
        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
      {% endfor %}
    {% endfor %}
    </ul>
  </li>
  {% endfor %}
  </div>

When I build, the following message is displayed

Liquid Exception: no implicit conversion of String into Integer in /_layouts/home.html

Tried many variants, but none seems to work.

Answer 1

This does the trick :

---
Title: English posts
lang: en
---
<ul>
{% for category in site.categories %}

  {% comment %}
  Here we have something like this
  category = Array[
    "category1",
    [doc1, doc2]
  ]
  {% endcomment %}

  {% assign name = category[0] %}
  {% assign posts = category[1] %}

  {% comment %}
    >> This also works
    {% assign name = category.first %}
    {% assign posts = category.last %}
  {% endcomment %}

  {% comment %}
    >> Filtering posts based on their `lang` variable
    >> and on the current `page.lang`
  {% endcomment %}
  {% assign selectedPosts = posts | where:"lang", page.lang %}

  {% comment %}
    >> Let's make sure that we need to print something
  {% endcomment %}
  {% if selectedPosts.size > 0 %}
    <li>
      Category {{ name }} :
      <ul>
        {% for post in selectedPosts %}
        <li><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>
        {% endfor %}
      </ul>
    </li>
  {% endif %}
{% endfor %}
</ul>

Short version :

<ul class="post-list">
{% for c in site.categories %}
  {% assign selectedPosts = c.last | where:"lang", page.lang %}
  {% if selectedPosts.size > 0 %}
    <li>Category {{ c.first }} :
      <ul>
        {% for post in selectedPosts %}
        <li><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }} - {{ post.lang }}</a></li>
        {% endfor %}
      </ul>
    </li>
  {% endif %}
{% endfor %}
</ul>

Answer 2

WITH the built-in category solution of Jekyll

I found this partial solution, just like you did...:

{% for category in site.categories %}
  <li><a name="{{ category | first }}">{{ category | first }}</a>
    <ul>
    {% for posts in category %}
      {% for post in posts %}
        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
      {% endfor %}
    {% endfor %}
    </ul>
  </li>
{% endfor %}

What you want to do/did is filter the 'posts' variable with the page language. This can indeed be done with assign using a where filter, but should look like this (as 'lang' is a attribute of the individual post and not of the category):

{% assign lang_posts = posts | where:"lang", page.lang %}

This leads to the following code:

{% for category in site.categories %}
  <li><a name="{{ category | first }}">{{ category | first }}</a>
    <ul>
    {% for posts in category %}
      {% assign lang_posts = posts | where:"lang", page.lang %}
      {% for post in lang_posts %}
        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
      {% endfor %}
    {% endfor %}
    </ul>
  </li>
{% endfor %}

---

WITHOUT the built-in category solution of Jekyll

If you have a random list of categories in your front matter, like this:

- categories:
  - web
  - css
  - internet

... and your sites _config.yml contains a similar (but more complete) list, like this:

- categories:
  - web
  - css
  - internet
  - html5
  - jekyll

You have a whole other problem. In that case you are NOT using the built-in category solution of Jekyll and this solution does not apply. A lot of the statements mean different things in that case, like this:

{% for category in site.categories %}
  {{ category | first }}

It means you loop over all existing categories from the _config.yml, and category | first should then be category. In this situation you probably want something like this:

<ul class="categories">
{% for category in site.categories %}
  <li><a name="{{ category }}">{{ category }}</a>
    <ul>
    {% assign posts=site.posts | where:"lang", page.lang %}      
    {% for post in posts %}
      {% if post.categories contains category %}
        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
      {% endif %}
    {% endfor %}
    </ul>
  </li>
{% endfor %}
</ul>

Note that this is just simple Jekyll/liquid array logic that overwrites the Jekyll category variables.