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

Question

我正在使用Jekyll和Liquid在GitHub页面上生成静态网站.我找到了templated.co的模板(特别是这个,我用于页面的布局).

我让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

这样做的简单方法？在帖子布局中直接使用内嵌样式设置图像,例如:

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

当然,虽然从语义角度来看并不是声音,但它并不理想,但它确实意味着你可以通过添加到你的前端而不是添加css来为帖子创建背景图像.这正是我在网站上发布的内容.

Answer 2

最好不要在现有CSS文件的开头添加一个空的YAML块，而不是使用内联样式，那样便可以处理液体。

---
---

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

“前项变量是可选的：如果您想使用Liquid标签和变量，但是不需要任何前题，只需将其留空！这组三点划线之间没有任何东西，仍然会使Jekyll处理您的文件。（这对于CSS和RSS提要很有用！）”来源：http : //jekyllrb.com/docs/frontmatter/