Configure categories page to use permalink and title?

Help
#1

Hi!
I’m new with Jekyll and am no Ruby developer so please bear with me :slight_smile:
I forked a Jekyll theme to use on my site but I’m not happy with the way it lists categories.

For categories, I have a bunch of .md files within the /category/ folder, with the following contents:

---
layout: posts_by_category
categories: my-category
title: My Category
permalink: /category/myCategory
---

Whenever I create a post, I use the “categories” value (which seems to be the category name). For instance, I’d use my-category to categorize a post.

My site also has a page to list all categories, and this is where it’s not working as I’d expect. I’d like to show the “title” value on the page, while using the “permalink” value to build the link url. Instead, this seems to be using the “categories” value for both:

{% for category in site.categories %}
    {% capture category_slug %}{{ category | first }}{% endcapture %}
    {% for c_slug in category_slug %}
        {% if c_slug == page.categories %}
            <button class="btn btn-sm btn-primary btn-raised">{{ c_slug }}</button>
        {% else %}
            <a href="{{ site.baseurl }}/category/{{ c_slug }}" class="btn btn-sm btn-default btn-raised">{{ c_slug }}</a>
        {% endif %}
    {% endfor %}
{% endfor %}

I understand that site.categories is a hashmap with each category name as key and an array of posts as a value. And by using the first filter I’m getting the keys (category names) only. This is what ends up being stored in the c_slug variable which is used to display on the page and to build the url in the above code, and this is what I’d like to change. However, I don’t know how to get the permalink or the title.

I need something that gets me the category title (the one I created in a category .md page) so I can show it like this:
<button class="btn btn-sm btn-primary btn-raised">{{ title }}</button>

And then the permalink to build the url, like this:
<a href="{{ site.baseurl }}/category/{{ permalink }}" class="btn btn-sm btn-default btn-raised">{{ title }}</a>

Any help is very welcome :slight_smile:

Thanks!

#2

are you trying to list all posts by category or just the category names?

So you created a page called animals.md for listing all posts with a category of animals and you want the title of that page to show on a page that lists all of the different categories?

how would the animals.md page be created? manually? maybe it could be part of a collection and you loop thru that to make the category list page?

#3

Hi, @rdyar, thanks for replying :slight_smile:
On this part of the code I’m only trying to list the category names (well, actually the “titles”, as they’re called in my category files), and whenever one of them is clicked it should navigate to a /category/[somecategory] page.
This is currently working. The problem is that it shows category names instead of “category titles”, so following the example from my first post, if I have 3 categories, then I’ll have 3 my-category.md files (where “my-category” is a different file name for each category) within the /category/ folder, each with this contents:

---
layout: posts_by_category
categories: my-category
title: My Category
permalink: /category/myCategory
---

Then I have the /_layouts/posts_by_category.html file with the following code (the one I showed in my first post was a snippet from this page, but here’s the whole thing):

---
layout: default
---
<div class="content well">
<header id="post-header">
    <h1 id="post-subtitle">Publicaciones por categoría: <em class="text-muted">{{ page.categories }}</em></h1>
</header>

<div id="post-content">
    <hr />
    {% for category in site.categories %}
        {% capture category_slug %}{{ category | first }}{% endcapture %}
        {% for c_slug in category_slug %}
            {% if c_slug == page.categories %}
                <button class="btn btn-sm btn-primary btn-raised">{{ c_slug }}</button>
            {% else %}
                <a href="{{ site.baseurl }}/category/{{ c_slug }}" class="btn btn-sm btn-default btn-raised">{{ c_slug }}</a>
            {% endif %}
        {% endfor %}
    {% endfor %}
    <hr />

    {% if site.categories[page.categories] %}
    <div class="list-group">
        {% for post in site.categories[page.categories] %}
        <div class="list-group-item">
            <div class="row-action-primary">
              <i class="fa fa-sticky-note"></i>
            </div>
            <div class="row-content">
            {% capture post_year %}{{ post.date | date: '%Y' }}{% endcapture %}
            {% if forloop.first %}
                <div class="least-content">{{ post_year }}</div>
            {% endif %}
            
            {% if forloop.first == false %}
                {% assign previous_index = forloop.index0 | minus: 1 %}
                {% capture previous_post_year %}{{ site.categories[page.categories][previous_index].date | date: '%Y' }}{% endcapture %}
                {% if post_year != previous_post_year %}
                <div class="least-content">{{ post_year }}</div>
                {% endif %}
            {% endif %}
            <div class="least-content">{{ post.date | date_to_string }}</div>
            <h4 class="list-group-item-heading"><a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a></h4>
            <p class="list-group-item-text">{{ post.content | strip_html | truncatewords: 20 }}</p>
            
            </div>
        </div>
        <div class="list-group-separator"></div>
        {% endfor %}
    </div>
    {% else %}
        <p>Select a category to list posts.</p>
    {% endif %}
</div>
</div>

From what I understand, this is using collections already, right? It seems to be using the default site.categories and page.categories.

My use case is that I have some category “titles” with special characters (like “My category #1”) and I don’t want these messing up with the url, so I give them a name and a permalink without these characters but I’d like to see them listed in my categories list.

Thanks again!

#4

problem is your page for each category is not going to be associated with the post categories so there will be no clear way to access the title.

If I understand correctly, the page for each category is a page not a post right? Jekyll’s site.categories only is for posts, so the categories front matter on a page is not in the site.categories I don’t think. I’m not sure it really has a purpose on those pages - if it does I would change it to a more obvious front matter variable so as not to confuse it with the semi reserved categories variable.

One way I have seen people do something similar is to use a data file to map the category to what you are calling the title. And then in the look you can check the data file to get the corresponding title and url. The way I saw this used was for someone working around the 2 word category issue where jekyll won’t slug a 2 word category url and instead just keeps the space which makes the url weird. So they had a data file and put used that to get a slugged cat name for the url. That sounds fairly close to what you want.