我可以在 css 中使用液体标签让 jekyll 在每页上使用不同的背景图像吗？

Question

我正在使用 Jekyll 和 Liquid 在 GitHub 页面上生成一个静态网站。我从 templated.co (this one, specifically) 找到了一个用于页面布局的模板。

我让 Jekyll 正确地提供了内容，但我想通过在 CSS 中使用 Liquid，在每个页面上使用不同的背景图片（代替现在的默认图片）。我让 Jekyll/Liquid 通过在 style.css 中添加一个空的前端部分来识别 CSS，但是我无法获得以下行来允许我根据需要调整背景图像：

    background: url(../images/{% if page.bgimage %}{{ page.bgimage }}{% else %}{{ site.bgimage }}{% endif %}) no-repeat bottom center;

我可以通过将bgimage: whatever.jpg 放入_config.yml 来更改所有页面的背景图像，但不能在页面的前面添加类似bgimage: otherimage.jpg 的行以使其使用otherimage.jpg 而不是whatever.jpg 作为背景图片。

我想做的事情是否可行，或者我只是遇到了一些语法问题？

提前感谢您的帮助。

Answer 1

最好的方法是简单地添加一个空的 YAML 块，而不是做内联样式 到您现有 CSS 文件的开头，这样将处理液体。

---
---

/* Your css containing liquid tags */
body {
background: url(../images/{% if page.bgimage %}{{ page.bgimage }}{% else %}{{ site.bgimage }}{% endif %}) no-repeat bottom center;
}

“Front Matter 变量是可选的：如果你想使用 Liquid 标签和变量，但在你的 Front Matter 中不需要任何东西，就让它空着吧！中间没有任何东西的三点划线集仍然会得到 Jekyll处理您的文件。（这对于 CSS 和 RSS 提要等内容很有用！）" 来源：http://jekyllrb.com/docs/frontmatter/

Answer 2

执行此操作的简单方法？直接在您的帖子布局中使用内联样式设置图像，例如：

<div class="page-background"
{% if page.bgimage %}style="background-image: url({{ page.bgimage }})"
{% endif %}>

当然，虽然从语义的角度来看它并不理想，但它确实意味着您可以通过仅添加到您的前端而不添加 css 来为帖子创建背景图像。这正是我在 my site posts 上所做的。