Jekyll - 你能用液体来引用前物质变量吗答案

【问题标题】：Jekyll - can you use liquid to reference front matter variablesJekyll - 你能用液体来引用前物质变量吗
【发布时间】：2017-02-16 22:12:25
【问题描述】：

我想在 css 中使用前端变量来消除在 html 文件中使用内联样式，并且想知道这是否可能？这是我目前拥有的示例

页首事项：

---
section-1-color: #222222
---

HTML：

<section class="section-1" style="background-color: {% page.section-1-color %}">

我更喜欢用 CSS 做什么：

.section-1 {
    background-color: {% page.section-color %};
}

这可能吗？还是内联样式是最容易接受的方法？

【问题讨论】：

标签： jekyll

【解决方案1】：

内联样式是最容易接受的方法。您定义了一个特定于此页面的页面变量，因此它不属于全局样式表 (IMO)。你应该这样做：

像这样创建一个 .md 文件：

---
section-1-color: #222222
layout: default
---

Lorem ipsum

像这样创建一个布局文件（default.html）：

<section class="section-1" style="background-color: {% page.section-1-color %};">
{{ content }}
</section>

但是...回答您的问题：有可能，请参阅this answer。

【讨论】：

感谢您的回复，您提供的链接适用于标签，例如； {% include user-styles.css %} 但不包括对象，例如{{ page.background-color }} 我现在只使用内联样式，但谢谢大家！

【解决方案2】：

在 _settings.yml 中集中您的颜色数据

section-color:
 1: "yellow"
 2: "#ffffff"
 3: "#f00"

在你的页面前面，参考选择的颜色：

---
section-color: 1
---

在你的布局中：

<section class="section-{{ page.section-color }}>

在你的主 scss 文件（查找 assets/main.scss）的底部，已经有一个 front matter，然后由 jekyll 处理：

---
# Only the main Sass file needs front matter (the dashes are enough)
---
// a lot of scss here
// ...

{% for section in site.section-color %}
.section-{{ section[0] }} { background: {{ section[1] }}; } // toto
{% endfor %}

【讨论】：