在Jekyll样式表中设置背景图片

Question

假设我在我的Jekyll网站上有以下标记：

<header>
  <hgroup>
    <h1>Page title</h1>
    <h2>Page subtitle</h2>
  </hgroup>
</header>

我正在尝试使用CSS应用背景图像，但是，我需要使用{{ site.baseurl }}变量，以便正确解析图像文件的位置。不幸的是，以下代码不起作用：

header {
  background-image: url('{{ site.baseurl }}/img/bicycle.jpg');
}

内联样式实际上可以在 {{ site.baseurl }} 中使用，下面的代码是可行的。

<header style="background-image: url('{{ site.baseurl }}/img/bicycle.jpg');">

但我真的不想使用内联样式。有什么方法可以将背景图片应用到Jekyll网站上？

- huijing

Answer 1

我通过在_config.yml文件中设置URL，成功让它工作：

# Site settings
url: "http://www.SITE_DOMAIN.com" 

背景图片属性现在可以设置为以下内容：

background-image: url('/images/IMAGE_NAME.jpg')

- huijing

Answer 2

在你的CSS文件中，添加一个空的YAML块，并且Jekyll会渲染它。

CSS文件：

---
---

header {
  background-image: url('{{ site.baseurl }}/img/bicycle.jpg');
}

- user2490676

---

这段代码在我将它添加到CSS文件时运行良好。然而，因为我使用的是SASS，破折号没有正确编译。这是否意味着我必须在SASS编译后手动添加破折号？有没有办法让它与SASS一起工作？ - huijing

也许你可以在config.rb中设置一个变量，并将其与YAML块一起编译？ - Jason