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而不是任何内容.jpg作为背景图片。

我想做什么甚至可能，或者我只是遇到一些语法问题？

提前感谢您的帮助。

Answer 1

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

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

当然，虽然从语义学的角度来看并不像声音那样它并不理想，但它确实意味着你可以通过添加到你的前端而不是添加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;
}

“前置物质变量是可选的：如果你想使用液体标签和变量，但在前面的物质上不需要任何东西，只需将它留空！中间没有任何内容的三条虚线的集合仍然会得到Jekyll处理你的文件。（这对CSS和RSS feed很有用！）“来源：http://jekyllrb.com/docs/frontmatter/

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

2 个答案: