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文件中管理样式。

自定义yaml语法

1 个答案: