compose jekyll categories by url page

Question

I'm looking for how to compose jekyll page by categories.

Many example what I found on blog is just about 'category page'.

I don't want just listing category page.

like this

Design (category 1)
- what is UX/UI (post)
- Visual design (post)
Tech (category 2)
- about Smart Car (post)
- Smart phone (post)
Food (category 3)
- Japan food susi (post)
- Chinese (post)

I want to make header menu by categories and each page. like this

It is possible to make category url by page? Or please introduce sample page.

Thanks

marcanuy marcanuy · Accepted Answer · 2017-06-22T12:29:59

You can display each category's posts on their ownpage by taking the last level of the url as the current category, then filter posts with it, for example: suppose we have the url https://marcanuy.github.io/jekyll-skeleton/en/subcategory1/ then we can get subcategory1 with:

{% assign current_cat = page.dir | split: "/" | last%}

Then having the current category, we choose the posts that belong to this category:

{% assign posts = site.categories[current_cat] | where: 'lang',page.lang %}

Finally, we display posts. Here is the full example:

{% assign current_cat = page.dir | split: "/" | last%}
{% assign posts = site.categories[current_cat] | where: 'lang',page.lang %}
<ul>
{% for item in posts %}
<li><a href="{{item.url | absolute_url}}">{{item.title}}</a></li>
{% endfor %}
</ul>

You can see this working in this jekyll-skeleton example site, and its source code: https://github.com/marcanuy/jekyll-skeleton

compose jekyll categories by url page

1 Answers