Solution 1 :

try this
You need to create CSS classes for all your categories

in css:

.background-<your category> {
  background: <color you want>
.background-ethical {
  background: red
.background-writeup {
  background: grey

inside loop :

<span class="cat background-{{ post.category }}">{{ post.category }}</span>

Problem :

I’m running Jekyll on my blog-style website. This is what I have displaying right now:


Each featured post with an excerpt is being displayed in a for-loop.

I am trying to find a way to present the underlined words above depending on the category. This is the code for displaying the category (the underlined text in the screenshot):

<span class="cat">{{ post.category }}</span>

Each should have a different colour background based on the category. Would it possible to implement an if statement in the HTML or CSS?

I have edited the page source to illustrate how I would like the span elements displayed to get an understanding of what I intend to do.



If (page.category == "ethical"): css background: red
If (page.category == "writeup"): css background: grey

Any advice or guidance would be extremely helpful.


Leave a Reply

Your email address will not be published. Required fields are marked *