基于数据文件的条件 Jekyll Liquid 类

Question

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

如果 yml 文件状态为“replyed:yes”，还希望包含条件 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 文件中的一个 sn-p：

- 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 %}