css - Jekyll 从 CSS 访问页面变量

Question

我试图background-img在我的css.liquid文件中设置一个，我需要在页面中获取 YAML 变量。我怎样才能做到这一点？这是我到目前为止所拥有的：

background-image: url({{ page.locales[page.default_locale][page.first_name] }});

我也有这个：

background-image: url('{{ page.first_name }}{{ page.last_name }}.jpg');

Answer 1

只需使用这些样式“内联”，而不是在您的 css.liquid 文件中。这是迄今为止最简单（也是最丑陋）的解决方案。

Answer 2

Jekyll只处理带有 YAML front matter 部分且带有扩展名.html、.markdown、.md或的文件。.textile

您可以通过使用其中一个扩展名保存您的 CSS 文件并包括 YAML 前端部分来破解它以使其正常工作。这似乎是一种非常笨拙的方法，它会产生一些丑陋的代码，但它可能会起作用。

Answer 3

您需要---\n---在 css 文件的顶部添加，如下所示：

---
---

.myClass {
   background-image: url('{{ page.first_name }}{{ page.last_name }}.jpg');
}

如此处所述：https ://stackoverflow.com/a/42528645/2235593