Могу ли я использовать жидкие теги в css, чтобы jekyll использовал другое фоновое изображение для каждой страницы?

Question

Я использую Jekyll и Liquid для создания статического веб-сайта на страницах GitHub. Я нашел шаблон из templated.co (именно этот), который я использую для макета страницы.

У меня есть Jekyll, доставляющий контент должным образом, но я хотел бы использовать различное фоновое изображение на каждой странице (вместо используемого по умолчанию), используя Liquid в CSS. У меня есть Jekyll/Liquid, распознающий CSS путем добавления пустого переднего раздела в style.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 вместо what.jpg в качестве фонового изображения.

Возможно ли то, что я хочу сделать, или у меня просто есть какие-то проблемы с синтаксисом?

Заранее спасибо за помощь.

Answer 1

Самый простой способ сделать это? Установите изображение с помощью встроенного стиля непосредственно в макете поста, например:

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

Конечно, хотя это и не так звучит с точки зрения семантики, это не идеальный вариант, но это означает, что вы можете создавать фоновые изображения для постов, только добавляя их в свой начальный материал и не добавляя также CSS. Это именно то, что я делаю на своем сайте сообщений.

Answer 2

Вместо использования встроенных стилей, лучший способ - просто добавить пустой блок 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 являются необязательными: если вы хотите использовать теги и переменные Liquid, но вам ничего не нужно, просто оставьте это пустым! Набор из трех пунктирных линий, между которыми ничего нет, все равно заставит Jekyll обрабатывать ваши файл. (Это полезно для таких вещей, как CSS и RSS-каналы!)"Источник: http://jekyllrb.com/docs/frontmatter/