基于Jekyll _data文件的Liquid条件类：消息收件箱状态实现

看起来你正在用Jekyll（基于Liquid模板）构建消息收件箱，需要根据YAML数据给消息卡片添加对应状态类和指示器。我来帮你完善代码逻辑：

核心实现思路 #

先明确你的状态规则，结合Liquid的条件判断语法来处理：

• 当active: yes时，给消息卡片div追加active类
• 当replied: yes时，渲染带箭头的指示器div
• 同步处理new状态的类（如果需要视觉区分的话）

完整Liquid代码示例 #

{% for message in site.data.message-inbox %}
  <!-- 动态拼接状态类：active和new会自动追加 -->
  <div class="message-card 
    {% if message.active == 'yes' %}active{% endif %}
    {% if message.new == 'yes' %}new{% endif %}">
    
    <!-- 消息核心内容区域 -->
    <div class="message-content">
      <h4 class="message-title">{{ message.title }}</h4>
      <p class="message-body">{{ message.excerpt }}</p>
      <span class="message-time">{{ message.timestamp }}</span>
    </div>

    <!-- Replied状态的箭头指示器 -->
    {% if message.replied == 'yes' %}
      <div class="replied-indicator">
        <!-- 这里可以用SVG箭头或者字体图标，示例用极简SVG -->
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M15 18l-6-6 6-6"/>
        </svg>
      </div>
    {% endif %}
  </div>
{% endfor %}

配套CSS样式参考 #

为了让状态样式生效，给对应的类加上视觉标识：

.message-card {
  position: relative;
  padding: 1.2rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 1rem;
  transition: border-color 0.2s;
}

/* Active状态样式：突出显示 */
.message-card.active {
  border-color: #2563eb;
  background-color: #eff6ff;
}

/* New状态样式：左侧标识条 */
.message-card.new {
  border-left: 4px solid #10b981;
}

/* Replied箭头指示器样式：右上角放置 */
.replied-indicator {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #64748b;
}

注意事项 #

1. YAML数据格式：确保你的message-inbox.yml里的字段值格式统一，比如都是字符串yes，或者布尔值true。如果是布尔值，判断条件可以简化为{% if message.active %}
2. 状态组合兼容：如果一条消息同时满足多个状态（比如既是active又是replied），代码会自动处理类的拼接和指示器的渲染，不会冲突
3. 自定义扩展：可以根据需求调整指示器的位置、图标样式，或者给new状态添加更多视觉细节

内容的提问来源于stack exchange，提问作者whatsnewsaes