Jekyll Categories

I have a category.html page that will loop through a certain category of posts.

{% for post in %}

What I want to display is from the index.html page, when the user clicks

{{ post.categories }}

Which is generated from a loop that displays all of the posts.

{% for post in site.posts %}

I need that {{ post.categories }} variable to replace the .tech in the categories.html like this

{% for category in site.categories.{{ post.categories }} %}

I don’t know how to pass the variable from index.html to categories.html

not sure I follow. Are you saying you want the category html page to dynamically display the category based on what you click on another page?

Yes, When I click the Tech category from the index page it will go to the category page that has all the tech category posts.

there is a gem that may do what you are looking for:

Not sure if it works with GH hosting.

I have a limited number of categories on one of my sites, and I just created a page for each one and then link to it like:
<a href="/categories/#{{ page.category | uri_escape | downcase}}">{{ page.category }}</a>

1 Like

ahh, I might do your second option. making a page for each of them. thanks for the information.

actually looking at mine - it is not a separate page for each cat, it is one page, then the link goes to an anchor for that cat. same idea though.

how to implement that to the one page by using the anchor?

the page is called categories, then the # is the anchor with the category name.

that page is this:

which is genereated with just this:

{% assign sorted_cats = site.categories | sort %}
{% for category in sorted_cats %}
{% assign sorted_posts = category[1] | reversed %}

  <h2 id="{{category[0] | uri_escape | downcase }}">{{ category[0] | capitalize }}</H2>
      {% for p in sorted_posts %}
     <a href="/{{p.type | downcase}}/"><img src="/assets/img/{{p.type |downcase }}.png" alt="{{p.type}}" title="{{p.type}}"/></a> <a href="{{ p.url }}">{{ p.title }}</a> ({{p.type}}/{{p.category}}) &raquo;  <span class="entry-date"><time datetime="{{ | date_to_xmlschema }}" itemprop="datePublished">{{ | date: "%B %d, %Y" }}</time></span>
     <br />
      {% endfor %} 
{% endfor %}

type is a page variable used on this page to show the little tiny icon.

I have the same kind of page for tags.

unfortunately that site is no longer really doing much, but I learned a lot about jekyll building it. It had been on a cms before.

Ah, so 1 page for all the categories. I already implemented a same thing before. But I wanted a different page for different categories. I will just do it the long way for now. It seems that jekyll has not feature for it yet aside from plugins. Thanks for the information and leading me to the right direction.

You can level-up this method by using Jekyll collections to help build each category page. This blog has a nice tutorial on how.

1 Like

Thanks for the info. Yea I looked into Collections before, but I would use it as a last resort if the methods I wanted would not work.