基于 _data 文件的条件 Jekyll Liquid class
Conditional Jekyll Liquid class based on _data file
我正在构建一个消息收件箱,每个收件箱消息都有不同的状态(活动、回复、新)。我想根据 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
以下应呈现与您的图形相似的标记..
{% 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 %}
我正在构建一个消息收件箱,每个收件箱消息都有不同的状态(活动、回复、新)。我想根据 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
以下应呈现与您的图形相似的标记..
{% 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 %}