是否可以根据单词更改 Jekyll 变量 css

Question

我是运行 Jekyll 在我的博客风格的网站上。这是我现在显示的内容：

每个带有摘录的精选 post 都在 for 循环中显示。

我正在尝试根据类别找到一种方法来呈现上面带下划线的词。这是显示类别的代码（截图中带下划线的文字）：

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

每个都应该根据类别有不同的颜色背景。是否可以在 HTML 或 CSS 中实现 if 语句？

我已经编辑了页面源代码以说明我希望如何显示 span 元素以了解我打算做什么。

逻辑：

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

任何建议或指导都将非常有帮助。

Answer 1

试试这个您需要为所有类别创建 CSS 类

在css中：

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

内部循环：

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

是否可以根据单词更改 Jekyll 变量 css

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

html

css

jekyll