css - Liquid 和 Jekyll - 在数组中出现字符时添加 CSS 类

Question

在我的网站上，我有使用两种不同样式的列表项的列表。它们的出现是不均匀的。 现在我在 html 中手动编辑这些列表。我想将它们放在 YAML 前面的数组中，让 jekyll 生成适当的列表。

例子:

我的想法是将所有列表项放在 YAML 前端的一个数组中，并用像“ITALIC_”这样的字符串标记那些应该是斜体的:

列表:[ITALIC_Main、300 克西红柿、1 个马苏里拉奶酪球、ITALIC_Dressing、橄榄油、醋……]

是否可以不仅检查数组中的某个字符串，而且 数组项也是？

我如何过滤标记的数组项并通过 Jekyll 应用某个 css 类？

感谢您的帮助!

车牌

Answer 1

我认为您有建模问题 ;-) 您正在混合数据和样式:不好!

我提出了一个更分离的解决方案，在一个地方组织数据，在另一个地方展示。 它可以是这样的:

---
title: recipe
layout: default

recipe:
    ingredients:
        main:
            - ingredient1
            - ingredient2
        dressing:
            - ingredient3
            - ingredient4
        optional:
            - ingredient5

    operations:
        .... To be continued ...
---

<h2>Ingredients</h2>

{% for part in page.recipe.ingredients %}

    <h3>{{ part[0] }}</h3>
    <ul>
    {% for ingredient in part[1] %}
        <li>{{ ingredient }}</li>
    {% endfor %}
    </ul>

{% endfor %}

<h2>Operations</h2>

{% for part in page.recipe.operations %}

To be continued ...