Color coded categories


I haven’t managed to find an answer to this question, so here is my first post on the forum ^^.
I would like to have multiple categories on the front page, and for each category, a different color in the title, so that it’s possible to quickly identify what articles belongs to what category.
Here is an example with Wordpress :

How can I achieve that with Hugo ?

Thanks in advance for the help =)


I think you need to look into taxonomies:

Then you can probably use the taxonomy to set the class name of your title and have it style it based on the css that matches the taxonomy name.

This might work, but I think that maybe “categories” here is really asking about site sections? At least that’s what I took from the WP theme you provided above…

In this case, you can range through the sections of the site with .Site.Sections. I would recommend searching the forums a bit more, or at least look at the following for some ideas…

Newspaper is a wellknown template for professional magazines.

You have to output each category as an article-block like the one in Newspaper.

One block has 2 columns made with bootstrap.
On the left side of the block you can output 1 article and a large photo and an introtext.
On the right side you can output maybe 4 articles. You only have to offset the second article.
Just use the same category in both columns.

With this technique you can create all kinds of Blocks with different articles.

To colorize everything you use something like that:

<div id="category-name"> </div>
as a wrapper.

Then you can adress every HTML-Element inside.

Hope this helps

In the HTML you can use different IDs.
Each ID gets a different CSS Color.