Configure categories page to use permalink and title?

Help
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!