我可以在CSS中使用液体标签来让jekyll每页使用不同的背景图片吗? [英] Can I use liquid tags in css to have jekyll use a different background image on a per-page basis?

问题描述

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

I'm using Jekyll and Liquid to generate a static web site on GitHub pages. I have found a template from templated.co (this one, specifically) that I am using for the page's layout.

我让Jekyll正确交付了内容，但是我想通过在CSS中使用Liquid在每页上使用不同的背景图像(代替现在的默认图像).我让Jekyll/Liquid通过在style.css中添加一个空的前端部分来识别CSS，但是我无法获得以下行来允许我根据需要调整背景图像:

I have Jekyll delivering the content properly, but I would like to use a different background image on each page (in place of the default that's there now) by using Liquid in the CSS. I have Jekyll/Liquid recognizing the CSS by adding an empty front matter section to style.css, but I cannot get the following line to allow me to tweak the background image as I'd like:

    background: url(../images/{% if page.bgimage %}{{ page.bgimage }}{% else %}{{ site.bgimage }}{% endif %}) no-repeat bottom center;

我可以通过在_config.yml中放置bgimage: whatever.jpg来更改所有页面的背景图像，但是不能在页面的开头添加类似bgimage: otherimage.jpg的行，以使其使用otherimage.jpg而不是what.jpg作为背景图片.

I can change the background image across all pages by putting bgimage: whatever.jpg in _config.yml, but cannot add a line like bgimage: otherimage.jpg in a page's front matter to have it use otherimage.jpg instead of whatever.jpg as the background image.

我想做的还是可能的，还是只是语法上有问题?

Is what I want to do even possible, or do I just have some syntax problems going on?

预先感谢您的帮助.

推荐答案

简单的方法吗?直接在您的帖子布局中以嵌入式样式设置图片，例如:

The easy way to do this? Set the image with an inline style direct in your post layout, e.g:

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

当然，虽然从语义的角度来看并不理想，但这并不理想，但这确实意味着您可以仅通过添加到前端而不添加css来为帖子创建背景图像.这正是我在我的网站帖子上所做的事情.

Of course, while not as sound from a semantics standpoint it's not ideal but it does mean you can create background images for posts by only adding to your front-matter and not making css additions as well. It's exactly what I'm doing on my site posts.

这篇关于我可以在CSS中使用液体标签来让jekyll每页使用不同的背景图片吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！