自定义 yaml 语法

Question

我正在使用 Jekyll 和 liquid 语法，并且想为我主页上的每个项目添加自定义背景颜色和缩略图。如何使用 YAML frontmatter 实现此目的？

流式语法输出项目

{% for post in site.categories['project'] %}
    <div class="project">
            <h3 class="project__title">{{ post.title }}</h3>
            <p class="project__description">{{ post.description }}</p>
            <a class="project__link" href="{{ post.url}}">view project</a>
    </div>
{% endfor %}

Answer 1

在您的项目中 post 添加 background 和 thumbnail 变量

myprojectpage.html

---
front matter variables ...
background: #ffffff
thumbnail: images/myproject.jpg
---

然后您可以在循环中使用它们：

{% for post in site.categories['project'] %}
  <div class="project" style="background:{{post.background}};">
    <h3 class="project__title">{{ post.title }}</h3>
    <img src="{{ site.baseurl }}/{{ post.thumbnail }}" alt="post.title">
    <p class="project__description">{{ post.description }}</p>
    <a class="project__link" href="{{ post.url}}">view project</a>
  </div>
{% endfor %}

另一种选择是将 class 添加到 post 并在 css/scss/less 文件中管理样式。

自定义 yaml 语法

Custom yaml syntax

ruby

yaml

liquid

jekyll