如何设置基于 YAML 前端的背景颜色（Jekyll）

Question

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

这个主题做到了：Single Paged (github here)

但我无法理解它是如何完成的。 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 %}

这是 CSS 中的 Liquid 吗？有人可以引导我完成代码吗？ 谢谢！

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。

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

根据您设法缩小的 CSS 代码 sn-p：

{% 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] 指的是“键”，即黑色、白色、蓝色等，c[1] 指的是“值”，即RGB代码分别。如果您有另一个分号后跟一个值（如果需要），您也可以使用c[3]。

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

现在是第二个 sn-p 代码：

/* ----- 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 %}

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

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

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

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

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

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

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