Условный класс Jekyll Liquid на основе файла _data

Question

Я создаю входящие сообщения, которые имеют разные состояния (активный, отвеченный, новый) для каждого входящего сообщения. Я хочу добавить класс к этим карточкам сообщений на основе данных в моем файле site.data.message-inbox.yml. Например, я хочу добавить div с активным классом, если в параметрах yml-файла установлено значение yes:

Также хотите включить условные div, например, отвечающий div, если состояния yml-файлов ответили: да, так что вы видите индикатор стрелки, как в файле дизайна ниже.

Я пробовал следующее:

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