Categories tags in post?

Hosting on Micro.blog
1

Is there a way to have your categories show as tags and the end of your post? I know some Themes have the ability to show tags. I am currently using Kiko (I know no matter how many others I try I come back to the same, for now). Is there a way to make this happen in Kiko?

2 Likes
2

Wherever you want the categories to show up, put this in your template:

{{ range .Params.categories }}{{ . }}{{ end }}
3 
would it be somewhere like `layouts/_default/list.html`
4

Actually I think it would be more in

layouts/post/single.html

5

That worked, is there a way to make them clickable at all?

6

probably something like:

{{ range .Params.categories }}
<a href="{{ .Site.BaseURL }}/categories/{{ . | urlize }} >}}"> {{ . }} </a>
{{ end }}
7

I will try this,

Thank you so much for your help

8

image
image876Ă—156 6.67 KB

I am presuming I did something wrong :sweat_smile:

9

My fault-- I forgot to remove a >}}.

{{ range .Params.categories }}
<a href="{{ .Site.BaseURL }}/categories/{{ . | urlize }}"> {{ . }} </a>
{{ end }}
10

Since you’re going to have more than one, you may want to do something like this:

<span class = "categories">
{{ range .Params.categories }}
<a href="{{ .Site.BaseURL }}/categories/{{ . | urlize }}"> {{ . }} </a>
{{ end }}
</span>

and add this to your CSS:

categories {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
11

Will try this

12

okay I get this

image
image867Ă—155 6.54 KB

This is what i have in the template:

{{ define "main" }}
<header class="masthead">
  <h1 class="masthead-title--small">
    <a href="/">{{ .Site.Title }}</a>
  </h1>
</header>
<div class="content post h-entry">
	{{ if .Title }}
		<h1 class="page-title">{{ .Title }}</h1>
	{{ end }}
  <div class="post-date">
    <time class="dt-published" datetime="{{ .Date.Format "2006-01-02 15:04:05 -0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
  </div>
  <div class="e-content">
  {{ .Content }}
{{ partial "reply-by-email.html" . }}
{{ range .Params.categories }}
<a href="{{ .Site.BaseURL }}/categories/{{ . | urlize }} >}}"> {{ . }} </a>
{{ end }}
</span>
  </div>
</div>

{{ if .Site.Params.include_conversation }}
<script type="text/javascript" src="https://micro.blog/conversation.js?url={{ .Permalink }}"></script>
{{ end }}

{{ end }}
13

You didn’t correct the code to match the post where I said “my fault”.

The problem is the extra >}} that I forgot to delete at the end of the opening <a> tag.

14

Ah! I see it, my bad, so far no errors! :grinning:

15

deleted the > {{

Now I get something different

Theme error: Error building site: failed to render pages: render of “page” failed: execute of template failed: html/template:post/single.html: “<” in attribute name: “\n”

16

Oh I removed the wrong thing , I think

17

Just to say this is working for me on Tufte template. Thankyou

1 Like
18

@Gaby - @amit had this working on his Musings theme. He sent me the link and I was able to get it working on my customized Marfa theme.

You just have to add the script to single.html.

Thanks again, Amit!

1 Like
19

Been perusing this today to add the categories onto my posts. @jsonbecker you’re a wizard! Adding this in with a bit of CSS ::before and ::after hackery, I’ve been able to form a nice, properly punctuated list of categories a post has.

.list-inline li:nth-of-type(n+3):last-child::before {
   content: ' & ';
}

.list-inline li:nth-of-type(2)::before {
  content: ' in ';
}

.list-inline li:nth-of-type(n+2):not(:last-child):not(:nth-last-child(2))::after {
   content: ', ';
}

Screenshot 2022-02-13 at 15.58.06

2 Likes
20

That is cool! Thanks for sharing that.

1 Like