我可以在 css 中使用 liquid 标签让 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

这样做的简单方法？直接在 post 布局中使用内联样式设置图像，例如：

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

当然，虽然从语义的角度来看并不理想，但它确实意味着您可以为 post 创建背景图像，只需添加到您的前题而不是制作 css 补充也是如此。这正是我在 my site posts.

上所做的

Answer 2

与其使用内联样式，最好的方法是简单地添加一个空的 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 Variables Are Optional: If you want to use Liquid tags and variables but don’t need anything in your front matter, just leave it empty! The set of triple-dashed lines with nothing in between will still get Jekyll to process your file. (This is useful for things like CSS and RSS feeds!)" 来源：http://jekyllrb.com/docs/frontmatter/