How do I access just the categories of a post?

[arpeasal]

First, I am new to 11ty and I am just developing this blog (using liquid), so there is nothing beautiful about this - yet.

How do I access just the categories of a post?

Each of my posts is in a post_name.md file in a directory /posts/some_year.

I have a file _includes/layouts/post.liquid that includes a line of code:
<p>Categories: {{ categories }} </p>
which, for a specific post, displays:
Categories: javascriptcats

This display is the two categories javascript and cats with no space between. This is ok, because I'll remove this line. I just wanted to see what {{ categories }} would display.

What I really want is:
Categories: javascript cats

Is there any easy way to do this?

[cfjedimaster]

It's most likely an array so you can do:

{% for cat in categories %}
    {{ cat }}{% if forloop.last == false %}, {% endif %}
{% endfor %}

I loop over the list of categories, and if this is NOT the last item, add a comma and space.

[arpeasal]

This seems to work, I'll test it more thoroughly later. But there is one problem. When I use it, it puts each category on a new line rather than all of them being on the same line. Any idea how to keep them all on the same line?

[cfjedimaster]

But that new line is in HTML, right? It shouldn't display as a newline. Perhaps you can share your entire file?

[arpeasal]

I think I solved it. For the original test, I put your code in the .md file of one of the posts. That's when I got each category on a separate line. I tested again by putting your code in the template file (post.liquid) and that displayed the categories in a single line as I want.

I guess that pretty much solves my problem.

Thanks so much for your help!

[pdehaan]

I think the issue is that you said post_name.md, so the Markdown is putting each category in a separate <p> tag (because Markdown and whitespace rules). You could rename the file to post_name.liquid if you aren't using Markdown, or another option might just be to use the LiquidJS join filter (LiquidJS since it's the default template engine for markdown files):

---
# src/post_name.md
title: foo
categories:
  - javascript
  - cats
---

# {{ title }}

{{ categories | join: ", " }}

OUTPUT

<!-- www/post_name/index.html -->
<h1>foo</h1>
<p>javascript, cats</p>

That should work if you just want a list of categories, but @cfjedimaster's solution of looping over the array of categories is better if you want to display each category as a link to an archive page or whatever.

If you want to keep the file as post_name.md AND use a {% for %} loop, I'm sure we can figure out a solution for that approach too.

[pdehaan]

This brings us to one of my favorite topics, and lesser known features of LiquidJS (and Nunjucks), whitespace control.

Let's look at your original code:

---
title: foo
categories:
  - javascript
  - cats
---

# {{ title }}

{% for cat in categories %}
  {{ cat }}{% if forloop.last == false %}, {% endif %}
{% endfor %}

OUTPUT

<h1>foo</h1>
<p>javascript,</p>
<p>cats</p>

Looking at the generated output, we can see that Markdown puts each category in it's own <p> tag, which isn't what you want.

But, by a bit of trial and error and well placed hyphens, we can tweak the output to allow for the categories to fit in the same, singular <p>.

---
title: foo
categories:
  - javascript
  - cats
---

# {{ title }}

{% for cat in categories -%}
  <a href="">{{ cat }}</a>{% if forloop.last == false %}, {% endif %}
{%- endfor %}

OUTPUT

<h1>foo</h1>
<p><a href="">javascript</a>, <a href="">cats</a></p>

The difference is very subtle -%} vs %} and {%- endfor %} vs {% endfor %}, but now Liquid will strip the whitespace from the right side of the for tag and the left side of the endfor tag and give you the output that you want on a single line. 🪄

[cfjedimaster]

Slick tip!

[arpeasal]

Well, that worked - as far as it went. But now on to the next step.
pdehaan suggested something else, but because he also said, "but @cfjedimaster's solution of looping over the array of categories is better if you want to display each category as a link", I'm sticking with your solution.
But now on to showing the categories as links to the category pages.

In the post template file, I have changed the code you suggested to the code below. This shows the category names as links, but I don't know what to replace the # with to generate the correct url for the appropriate category page.

Categories: {% for cat in categories %}
    <a href="{{cat.url}}">{{ cat }}</a>{% if forloop.last == false %}, {% endif %}
{% endfor %}<br/>

I know what the URL that links to each category page is. For example, the link to the page for the dogds category is:
http://localhost:5000/categories/dogs/
But again, I don't know how to code so the URL is dynamically created.

Can you help?

[arpeasal]

BTW, below is the code in the .eleventy.js file that creates the category pages:

	eleventyConfig.addCollection("categories", function(collectionApi) {
		let categories = new Set();
		let posts = collectionApi.getFilteredByTag('post');
		posts.forEach(p => {
			let cats = p.data.categories;
			cats.forEach(c => categories.add(c));
		});
		return Array.from(categories);
	});

	eleventyConfig.addFilter("filterByCategory", function(posts, cat) {
		/*
		case matters, so let's lowercase the desired category, cat
		and we will lowercase our posts categories
		*/
		cat = cat.toLowerCase();
		let result = posts.filter(p => {
			let cats = p.data.categories.map(s => s.toLowerCase());
			return cats.includes(cat);
		});

[cfjedimaster]

Given that you have a format of /categories/NAME, you can output it like so:

<a href="/categories{{cat | slug}}">{{ cat }}</a>

This will slugify the category name (ie, "cool cats" to "cool+cats", or some such, it may be "cool-cats") creating a URL safe version of the category name.

[arpeasal]

That ALMOST got it, but I had to add one tiny thing to get it to work.
When I inserted your code, it created a URL like http://localhost:5000/categoriesdogs/, with no / separating categories and dogs.
In the code you provided, I added a slash between categories and {{cat | slug}}. That solved the issue.

Thanks. Again

[cfjedimaster]

Doh! Sorry about that. :)

[arpeasal]

Thanks, Peter. I read both of your posts with interest. I don't know if I'll ever apply the information in your second comment, but who knows. In the future, I may have use for the information in your first comment, but since you said, " ***@***.***(https://github.com/cfjedimaster)'s solution of looping over the array ofcategoriesis better if you want to display each category as a link" and I DO want to display them as links, I'll stick to ***@***.***(https://github.com/cfjedimaster)'s solution in this case. Speaking of which, I don't know how to dynamically create the links to the category pages. Can you help? There is more information about this in my last response to ***@***.***(https://github.com/cfjedimaster). Randall Escolha o [ProtonMail](https://protonmail.com/) para apoiar a privacidade na internet e no e-mail.

[arpeasal]

No problem. You got me over the hump I couldn't get over myself. That's what mattered. Enviado via ProtonMail móvel

…

-------- Original Message --------

On Mar 27, 2022, 17:27, Raymond Camden wrote: Doh! Sorry about that. :) — Reply to this email directly, [view it on GitHub](#2291 (reply in thread)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/AYNYPCQVOKPMLWKL7QLWZ4LVCDACHANCNFSM5RYVVFDQ). You are receiving this because you authored the thread.Message ID: ***@***.***>