Jekyll 从 CSS 访问页面变量答案

【问题标题】：Jekyll accessing page variables from CSSJekyll 从 CSS 访问页面变量
【发布时间】：2013-08-11 21:19:03
【问题描述】：

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

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

我也有这个：

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

Jekyll 仅处理带有 YAML 前端部分且扩展名为 .html、.markdown、.md 或 .textile 的文件。

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

【讨论】：

【解决方案3】：

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

---
---

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

【讨论】：