我正在使用 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 作为背景图像。
我想做的事情是否可行,或者我只是遇到了一些语法问题?
预先感谢您的帮助。
最佳答案
与其使用内联样式,最好的方法是简单地添加一个空的 YAML block 到现有 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:如果你想使用 Liquid 标签和变量,但在你的 front matter 中不需要任何东西,就把它留空!中间没有任何东西的三重虚线组仍然会得到 Jekyll处理您的文件。(这对于 CSS 和 RSS 提要等内容很有用!)”来源:http://jekyllrb.com/docs/frontmatter/
关于css - 我可以在 css 中使用 liquid 标签让 jekyll 在每页的基础上使用不同的背景图像吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28329234/