yml配置跳转html,html – 如何根据YAML前面的内容设置背景颜色(Jekyll)

来自_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'

我们可以看到颜色是一组键值.

是的,这是CSS中的Liquid.

(请记住,通过添加YAML前置码,可以使用Liquid的模板引擎处理Jekyll中的任何文件,这是三个破折号,[Enter键],另外三个破折号.没有前面的内容,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数组中的所有Key-values.

一个示例输出是黑色的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是颜色数组中每种颜色的变量,c [0]指的是黑色,白色,蓝色等的“键”,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 %}

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

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

请注意前端如何：

---

title: "home"

bg: white

color: black

style: center

---

捕获变量并分别放入bg,fg. id取自posts.id(我相信这是Jekyll中的一个特殊变量),之后变量只是插入到变量放置的位置.

它被包装在capture和if语句中的原因是处理post没有bg,fg定义的情况(例如当程序员忘记定义或者他们想要一个自定义颜色,并避免破坏CSS).

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