Yaml front matter loop error (?)


Hello jekyll-talk community!

Currently, I am trying to create a filter list that responds to some javascript. The js part is fine, I have some similar yet smaller loops that are working.
Basically, the idea is the got a working html-link that has a href-value different to the text displayed. As all my filter links are in lowercase and the the filter option contain more than one word, I wanted to create a nested (?) yaml front matter.

Here it it is:

   - category:
     - name: "All"
     - link: "all"
   - category:
     - name: "For Women"
     - link: "women"
   - category:
     - name: "For Men"
     - link: "men"
   - category:
     - name: "Accessories"
     - link: "accessories"
   - category:
     - name: "Others"
     - link: "others"

and there is my liquid loop:

<ul class="categories container">
  {% for item in page.filters %}
  {% for outcome in item.category %}

  <li><a href="#{{ link.category }}">{{ name.category }}</a></li>

  {% endfor %}
  {% endfor %}

After compiling, this is my html outcome.

    <ul class="categories container">
    <li><a href="#{"name"=>"All"}{"link"=>"all"}">{"name"=>"All"}{"link"=>"all"}</a></li>
    <li><a href="#{"name"=>"For Women"}{"link"=>"women"}">{"name"=>"For Women"}{"link"=>"women"}</a></li>
    <li><a href="#{"name"=>"For Men"}{"link"=>"men"}">{"name"=>"For Men"}{"link"=>"men"}</a></li>
    <li><a href="#{"name"=>"Accessories"}{"link"=>"accessories"}">{"name"=>"Accessories"}{"link"=>"accessories"}</a></li>
    <li><a href="#{"name"=>"Others"}{"link"=>"others"}">{"name"=>"Others"}{"link"=>"others"}</a></li>

I’ve tried many combinations/variations but this is by far the nearest I’ve come. My compilation log is also clear, no errors at this one.

Do you have any idea how I can get it to work? Thanks and greetings,



this page has some great yaml examples, link is to nested lists:

I think you could do:

- category
  - name: "All"
    link: "all"
   -name: "For Women"
    link: "women"

but it also depends on what all else you have under filters - if this is it, then I think you can drop the category part.

I think your liquid also needs help, you have 2 for loops - not sure why, your output isn’t what I would expect.

I think it would be more like:

<ul class="categories container">
  {% for item in page.filters.category %} 
  <li><a href="#{{ item.link }}">{{ item.name }}</a></li>
  {% endfor %}

that is untested, probably not perfect, and it also depends on what the yaml really is - is it filters, or category (careful with that word as it is a thing on its own).

The link above has great examples, and just about all use cases.


Hey rdyar,

thank you for your quick and useful reply! I’ve managed to get it to work and I’m happy with the result.
The cheatsheet really helped, thanks again! :slight_smile:

It is filters, but showing categories. That’s how I’d describe it.