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

【问题标题】：Liquid and Jekyll - Add CSS class on occurence of character in an arrayLiquid 和 Jekyll - 在数组中出现字符时添加 CSS 类
【发布时间】：2014-10-18 23:28:34
【问题描述】：

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

例子：

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

清单：[ITALIC_Main、300g 西红柿、1 个马苏里拉奶酪球、ITALIC_Dressing、橄榄油、醋……]

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

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

感谢您的帮助！

Vin

【问题讨论】：

标签： css arrays add jekyll liquid

【解决方案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 ...

【讨论】：

哇！这看起来非常优雅和干净 - 不知道可以级联这些哈希项目列表，谢谢！ :)
等待尝试您网站上的一些食谱 ;-) 也许我可以做出贡献。
酷 - 我很期待。 :) 网站上线后，我会尽快将地址发送给您。我希望在 11 月初推出博客。

【解决方案2】：

（未测试）您可以将其写为：ITALIC_Main_ 并在模板循环中删除 ITALIC 与 {{ site.list.item | remove_first: "ITALIC" }} - 这会给你留下_Main_，它在markdown中转换为斜体。

【讨论】：