Liquid and Jekyll - Add CSS class on occurence of character in an array

Question

on my site i have lists using two different kinds of styles for list items. Their occurance is uneven. For now i edit these lists manually in html. I would like to put them inside an array in the YAML front matter and let jekyll generate the appropriate lists.

Example:

My idea is to put all list items in an array in the YAML front matter and tag those, which should be italic, with a string like 'ITALIC_':

list: [ITALIC_Main, 300g tomatoes, 1 mozzarella ball, ITALIC_Dressing, olive oil, vinegar, ...]

Is it possible to check not only the array for a certain string but the array items too?

How can i filter the tagged array items and apply a certain css class via Jekyll?

Thanks for your help!

Vin

Answer 1

I think you have a modeling problem ;-) You're mixing datas and style : No Goood !

I propose a more dissociated solution, with organized datas on one place and presentation in an other. It can be something like this :

---
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 ...

Answer 2

(Not tested) You can write it as: ITALIC_Main_ and in the template loop just remove the ITALIC with {{ site.list.item | remove_first: "ITALIC" }} {{ site.list.item | remove_first: "ITALIC" }} - this will leave you with _Main_ which is converted to italic style in markdown.