在Jekyll的CSS中使用液体诱惑来调整每页div的背景颜色 [英] Using liquid tempting in CSS on Jekyll to adjust background color of divs on a per page basis
问题描述
我使用Jekyll和Liquid作为我的网站。
我一直坚持使用CSS中的液体来正确编译。我试图在每个页面的边框上使用不同的颜色，并且默认设置为黑色。
我很感谢你们可能拥有的任何洞察力。 p>
#splash {width：100％; height：10％;} #splash background-color：{％if page.accent％} {{page.accent}} {％else％} {{black}} {％endif％}
< div id =splash> < / div>
<链接样式表并不是专门针对页面的，所以这不是正确的方法。我也不会合并页面特定和网站特定的CSS。在网站样式表中为您创建的每个页面（现在和将来）添加一个id似乎也是不合逻辑的。
我的建议是在_layout目录中创建一个名为page.html的布局文件。使它看起来像这样：
< html>
< head>
<！ - 网站特定的CSS在这里 - >
< link rel = stylesheet href =style.csstype =text / css>
< style>
/ *特定页面的CSS去这里* /
#splash {
background-color：{％if page.accent％} {{page.accent}} {％else％} black {％ 万一 ％};
}
< / style>
< / head>
< body>
< div id =splash>< / div>
< / body>
< / html>
将您的网站特定/标准CSS添加到您的样式表中。头部中特定于页面的CSS将覆盖此内容。然后创建一个像这样的index.md文件：
---
重音：红色
布局：页面
---
内容
请注意，您不必设置当您设置默认值时，每个页面中的布局请参阅：前置事项默认值 。
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>
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.
这篇关于在Jekyll的CSS中使用液体诱惑来调整每页div的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
