我正在为我的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>【问题讨论】：
<head> 中，或者为每个页面使用 id，然后像往常一样使用样式。
链接样式表并不意味着特定于页面，因此这不是正确的方法。我也不会合并特定于页面和特定于网站的 CSS。在网站样式表中为您创建的每个页面（现在和将来）添加一个 id 似乎也不合逻辑。
我的建议是在 _layout 目录中创建一个名为 page.html 的布局文件。让它看起来像这样：
<html>
<head>
<!-- website-specific CSS goes here -->
<link rel=stylesheet href="style.css" type="text/css">
<style>
/* page-specific CSS goes here */
#splash {
background-color: {% if page.accent %}{{ page.accent }}{% else %}black{% endif %};
}
</style>
</head>
<body>
<div id="splash"></div>
</body>
</html>
将您的网站特定/普通 CSS 添加到您的样式表中。头部中特定于页面的 CSS 将覆盖它。然后像这样创建一个 index.md 文件：
---
accent: red
layout: page
---
content
请注意，设置默认值时不必在每个页面中设置布局，请参阅：front matter defaults。
【讨论】：
您需要在文件顶部添加 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%;
}
【讨论】：