自定义 yaml 语法

Question

我使用 Jekyll 和流式语法，并希望在我的主页上为我的每个项目添加自定义背景颜色和缩略图。如何使用 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

在您的项目帖子中添加 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 %}

另一种选择是简单地在您的帖子中添加一个类并在您的 css/scss/less 文件中管理样式。