如何根据YAML前端物质设置背景颜色(Jekyll)

Question

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

这个主题是这样的:单页(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 %}

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

Answer 1

从该Jekyll主题的_config.yml 文件:

### 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前置码,可以使用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规则black- #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]指的是"键",它是黑色,白色,蓝色等,并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.

您看到的所有捕获标记都是用于获取变量的流动语法.使用这个文件为例:

请注意前端如何:

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

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

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

对于所有意图和目的,只是添加颜色到_config.yml使用的颜色相同的格式,然后RGB值文件,并添加自定义bg,fg在每个岗位价值,如果你的愿望.该模板将为您生成所有必需的CSS样式.