Search code examples
htmlcssjekyll

Is it possible to change Jekyll variable css depending on the word

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

screenshot

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.

idea

Logic:

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

Any advice or guidance would be extremely helpful.

Solution

  • 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>