html - 在 Jekyll 的 CSS 中使用 liquid tempting 以每页为基础调整 div 的背景颜色

Question

我正在为我的 website 使用 Jekyll 和 Liquid .

我一直坚持在 CSS 中使用 liquid 来正确编译。我正在尝试为每个页面的边框使用不同的颜色，并将默认设置为黑色。

我很感激你们可能有的任何见解。

   #splash {width: 100%; height: 10%;}
   #splash background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %}

<div id= "splash"> </div>

Answer 1

您需要在文件顶部添加 2 行 --- 才能正确编译。

来源:https://jekyllrb.com/docs/assets/

您还需要在背景颜色的 css 代码周围添加 {。

---
---

#splash {
    width: 100%; height: 10%;
}

#splash {
    background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %};
}

或者，您可以像这样合并 2 个 CSS 语句:

---
---

#splash {
    background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %};
    height: 10%;
    width: 100%;
}