如何根据YAML front matter设置背景颜色（Jekyll）

Question

我希望能够根据 YAML 前言中定义的颜色设置 post 的背景颜色。

但我无法理解它是如何完成的。 CSS 文件中的这段代码是它发生的原因：

{% for c in site.colors %}
.border-{{c[0]}} { border-color: {{ c[1] }} !important; }
.text-{{c[0]}}   { color: {{ c[1] }}; }
.text-{{c[0]}} a { color: {{ c[1] }}; }
.bg-{{c[0]}}     { background-color: {{ c[1] }} !important; }
{% endfor %}

/* ----- per-post colors! ----- */
{% for node in site.posts %}
  {% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
  {% capture bg %}{% if site.colors[node.bg] %}{{ site.colors[node.bg] }}{% else %}{{ node.bg }}{% endif %}{% endcapture %}
  {% capture fg %}{% if site.colors[node.color] %}{{ site.colors[node.color] }}{% else %}{{ node.color }}{% endif %}{% endcapture %}
  nav .p-{{id}} { border-color: {{ bg }}; }
  #{{id}} { background-color: {{ bg }} !important; color: {{ fg }}; }
  #{{id}} a { color: {{ fg }}; }
  #{{id}} .sectiondivider { color: {{ bg }}; }
{% endfor %}

这个 Liquid 在 CSS 内吗？有人可以引导我完成代码吗？谢谢！

Answer 1

来自 _config.yml file 的 Jekyll 主题：

### template colors, used site-wide via css ###
colors:
  black:     '#111111'
  white:     '#f8f8f8'
  blue:      '#49a7e9'
  green:     '#9bcf2f'
  purple:    '#c869bf'
  orange:    '#fab125'
  turquoise: '#0fbfcf'

我们可以看到colors是一个键值数组。

是的，这是 CSS 中的 Liquid。

（请记住，可以让 Liquid 的模板引擎处理 Jekyll 中的任何文件，方法是添加 YAML frontmatter，即三个破折号、[Enter key] 和另外三个破折号。如果没有 front matter，Liquid 将忽略该文件引擎）

根据您设法缩小的 CSS 代码片段：

{% for c in site.colors %}
.border-{{c[0]}} { border-color: {{ c[1] }} !important; }
.text-{{c[0]}}   { color: {{ c[1] }}; }
.text-{{c[0]}} a { color: {{ c[1] }}; }
.bg-{{c[0]}}     { background-color: {{ c[1] }} !important; }
{% endfor %}

这是一个 for 循环，将遍历 colors 数组中的所有键值。

此示例输出为 black - #111111:

的 CSS 规则

.border-black { border-color:  #111111 !important; }
.text-black   { color: #111111; }
.text-black a { color:#111111; }
.bg-black     { background-color: {{ c[1] }} !important; }

由于c是colors数组中每种颜色的变量，c[0]指的是'key'，即黑色、白色、蓝色等，c[1]指的是'value'分别是RGB码。如果需要的话，如果你有另一个分号后跟一个值，你也可以做一个 c[3]。

对所有其他颜色重复此操作。

现在是第二个代码片段：

/* ----- per-post colors! ----- */
{% for node in site.posts %}
  {% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
  {% capture bg %}{% if site.colors[node.bg] %}{{ site.colors[node.bg] }}{% else %}{{ node.bg }}{% endif %}{% endcapture %}
  {% capture fg %}{% if site.colors[node.color] %}{{ site.colors[node.color] }}{% else %}{{ node.color }}{% endif %}{% endcapture %}
  nav .p-{{id}} { border-color: {{ bg }}; }
  #{{id}} { background-color: {{ bg }} !important; color: {{ fg }}; }
  #{{id}} a { color: {{ fg }}; }
  #{{id}} .sectiondivider { color: {{ bg }}; }
{% endfor %}

这是另一个for循环，遍历_posts中的所有post。

您看到的所有捕获标签都是用于获取变量的流式语法。以this file为例：

注意前面的内容是这样的：

---
title: "home"
bg: white
color: black
style: center
---

捕获变量，分别放入bg、fg。 id取自一个posts.id（我相信这是Jekyll中的一个特殊变量），之后变量只是插入到变量所在的位置。

它被包裹在 capture 和 if 语句中的原因是为了处理 posts 没有定义 bg,fg 的情况（例如当程序员忘记定义或者如果他们想要自定义颜色，请避免破损 CSS).

出于所有意图和目的，只需使用相同的颜色格式和 RGB 值将颜色添加到 _config.yml 文件中，然后添加自定义 bg, fg 每个值 post 如果你愿意的话。该模板将为您生成所有必需的 CSS 样式。

如何根据YAML front matter设置背景颜色（Jekyll）

How to set background color based on YAML front matter (Jekyll)

html

css

jekyll

现在是第二个代码片段：