基于 _data 文件的条件 Jekyll Liquid class

Question

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

如果 yml 文件状态为 replied:yes，还希望包括条件 divs，如回复 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 %}

基于 _data 文件的条件 Jekyll Liquid class

Conditional Jekyll Liquid class based on _data file

yaml

liquid

static-site

jekyll