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

标签 css jekyll liquid github-pages

我正在使用 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/

相关文章:

html - 如何将 div 放置在 box flex 容器的底部

ruby - 单个 Jekyll 网站中的多个博客

ruby - 如果指定的 YAML 字段丢失,在 Jekyll 构建期间引发异常?

html - 将非 float 元素置于具有 float 元素的元素内

html - CSS 网格 - 一个 block 与其他 block 不同

javascript - 在 TreeView 显示中只保持一个 li 节点打开

javascript - 此 JavaScript 文件在一个页面上运行,但在其他页面上不运行,这是为什么?

ruby-on-rails - 我如何在 Jekyll 中链接 if 语句?

jekyll - 在 Jekyll 中,我可以在前端传递对站点数据集的引用吗

jekyll - Jekyll-如果页面是帖子,则更改布局?