html - 如何根据YAML front matter设置背景颜色(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。

(请记住，可以让 Liquid 的模板引擎通过添加 YAML 前端来处理 Jekyll 中的任何文件，这是三个破折号、[Enter key] 和另外三个破折号。如果没有前端，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 的 CSS 规则 - #111111:

.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] 指的是黑色的“键” , white, blue etc 和 c[1] 指的是分别是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 %}

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

您看到的所有捕获标签都是用于获取变量的流式语法。使用 this file举个例子:

注意 frontmatter 是这样的:

---
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 样式。