基于_data文件的条件Jekyll Liquid类

Question

我构建的邮件收件箱每个收件箱邮件都有不同的状态（活动，回复，新）。我想根据site.data.message-inbox.yml文件中的数据为这些消息卡添加一个类。例如，如果yml文件在参数中有活动：yes，我想在活动类中添加div。

如果yml文件状态回复，也希望包含条件div，如回复div：是的，这样就可以看到如下设计文件中的箭头指示符。

我尝试过以下方法：

{% for data in site.data.message-inbox %} 
{% if site.data.message-inbox.active == no %}
<div class="message-card__content">
    {% endif %}
<div class="message-card__content active">

    <div class="message-card__avatar">
        <img src="" alt="">
    </div>
    <ul class="message-card__info">
        <li class="message-card__name">{{data.name}}</li>
        <li class="message-card__subject">{{data.subject}}</li>
        <li class="message-card__preview">{{data.message | truncate: 100 }}</li>
    </ul>
    <img class="message-card__reply" src="../images/icons/reply.svg" alt="">
</div>
</a>
{% endfor %}

这是我的/_data/message-inbox.yml文件的片段：

- name: John Smith
  subject: JLG 6TS Lift
  message: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quidem id dolor tempora reprehenderit dignissimos velit distinctio sed eum, at culpa laborum, eius, laudantium consequuntur architecto debitis? Alias, repellat, illo.
  active: yes
  replied: yes
  new: no

- name: John Smith
  subject: JLG 6TS Lift
  message: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quidem id dolor tempora reprehenderit dignissimos velit distinctio sed eum, at culpa laborum, eius, laudantium consequuntur architecto debitis? Alias, repellat, illo.
  active: no
  replied: yes
  new: no

Answer 1

以下应该呈现与您的图形类似的标记..

{% for message in site.data.message-inbox %}
  <div class="message-card__content {% if message.active == 'yes' %}active{% endif %}">
    <div class="message-card__meta">
      <div class="message-card__avatar">
        <img src="{{ message.avatar }}" alt="{{ message.name }}">
      </div>

      {% if message.new == 'yes' %}
        <img class="message-card__new" src="{{ 'images/icons/new.svg' | relative_url }}" alt="New Message">
      {% elsif message.replied == 'yes' %}
        <img class="message-card__reply" src="{{ 'images/icons/reply.svg' | relative_url }}" alt="Replied">
      {% endif %}
    </div>

    <div class="message-card__info">
      <ul>
        <li class="message-card__name">{{ message.name }}</li>
        <li class="message-card__subject">{{ message.subject }}</li>
        <li class="message-card__preview">{{ message.message | truncate: 100 }}</li>
      </ul>
    </div>
  </div>
{% endfor %}