首页 文章

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

提问于
浏览
5

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

我可以通过在_config.yml中放置 bgimage: whatever.jpg 来更改所有页面的背景图像,但是不能在页面的前面添加像 bgimage: otherimage.jpg 这样的行来让它使用otherimage.jpg而不是whatever.jpg作为背景图像 .

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

在此先感谢您的帮助 .

2 回答

  • 5

    最好的方法是简单地将空的YAML块添加到现有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: If you want to use Liquid tags and variables but don’t need anything in your front matter, just leave it empty! The set of triple-dashed lines with nothing in between will still get Jekyll to process your file. (This is useful for things like CSS and RSS feeds!)"来源:http://jekyllrb.com/docs/frontmatter/

  • 4

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

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

    当然,虽然从语义学的角度来看并不像声音那么'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'正是我在my site posts所做的 .

相关问题