Using liquid tempting in CSS on Jekyll to adjust background color of divs on a per page basis

问题

I'm using Jekyll and Liquid for my website.

I've been completely stuck on using liquid in the CSS to compile correctly. I'm trying to use different colors for the borders of each page, and have the default set to black.

I appreciate any insight y'all may have.

   #splash {width: 100%; height: 10%;}
   #splash background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %}

<div id= "splash"> </div>

回答1:

You need to 2 rows of --- at the top of your file for it to compile correctly.

Source: https://jekyllrb.com/docs/assets/

You also need to add { around your css code for the background-color.

---
---

#splash {
    width: 100%; height: 10%;
}

#splash {
    background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %};
}

Alternatively you can just merge the 2 CSS statements like so:

---
---

#splash {
    background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %};
    height: 10%;
    width: 100%;
}

回答2:

Linked stylesheets are not meant to be page-specific, so this is not the right way to go. I would also NOT merge page-specific and website-specific CSS. Adding an id in the websites stylesheet for every page you create (now and in the future) seems unlogical too.

My advice is to create a layout file in the _layout directory, called page.html. Make it look like this:

<html>
<head>
<!-- website-specific CSS goes here -->
<link rel=stylesheet href="style.css" type="text/css">
<style>
  /* page-specific CSS goes here */
  #splash {
    background-color: {% if page.accent %}{{ page.accent }}{% else %}black{% endif %};
  }
</style>
</head>
<body>
<div id="splash"></div>
</body>
</html>

Add your website-specific/normal CSS to your stylesheet. The page-specific CSS in the head will overwrite this. Then create a index.md file like this:

---
accent: red
layout: page
---
content

Note that you do not have to set the layout in every page when you set defaults, see: front matter defaults.

来源：https://stackoverflow.com/questions/42524517/using-liquid-tempting-in-css-on-jekyll-to-adjust-background-color-of-divs-on-a-p

标签

html

css

Jekyll

liquid