loops - 在 jekyll 静态站点中使用 Liquid 显示对象的 START 和 END 范围

Question

我有一个“产品”列表它们的结构如下:
他们有一个充当父级的产品:“产品 1”
然后他们有多个父版本“product 1-small”、“product 1-medium”、“product 1-large”等等
但它们的变体数量各不相同，一个产品可能有 2 个变体，另一个可能有 5 个。

我想这样显示它们:

产品 1
小 - 大

产品 2
小 - 大

我应该如何在 jekyll 静态站点上在液体中执行此操作？

您可以在此处查看我的网站和我所指的页面:
https://kostasgogas.com/shop/art/prints/new-media-vector/abstract/

问题在每个产品的价格和尺寸上很明显。

这是我的 data.yml 的一个例子:

- id: 'first-art'
  type: variable

- id: 'first-art-small'
  type: variation
  position: 1
  price: '10'
  parent: 'first-art'
- id: 'first-art-medium'
  type: variation
  position: 2
  price: '20'
  parent: 'first-art'
- id: 'first-art-large'
  type: variation
  position: 3
  price: '30'
  parent: 'first-art'


- id: 'second-art'
  type: variable

- id: 'second-art-small'
  type: variation
  position: 1
  price: '10'
  parent: 'second-art'
- id: 'second-art-medium'
  type: variation
  position: 2
  price: '20'
  parent: 'second-art'
- id: 'second-art-large'
  type: variation
  position: 3
  price: '30'
  parent: 'second-art'
- id: 'second-art-x-large'
  type: variation
  position: 4
  price: '40'
  parent: 'second-art'

液体如下(目前最多统计3种变化，因为我不知道怎么做):

{%- assign printartworks = site.data.products-prints -%}
{%- for printart in printartworks -%}
{%- if printart.type == "variable" -%}

  <h3>
  {{ printart.id }}
  </h3>
  <div>
    {%- for variation in site.data.products-prints -%}
      {%- if variation.parent == printart.id -%}
        {%- if variation.position == "1" -%}
          €{{ variation.price }}
        {%- endif -%}
      {%- endif -%}
    {%- endfor -%}
    —
    {%- for variation in site.data.products-prints -%}
      {%- if variation.parent == printart.id -%}
        {%- if variation.position == "3" -%}
          €{{ variation.price }}
        {%- endif -%}
      {%- endif -%}
    {%- endfor -%}
  </div>

{%- endif -%}
{%- endfor -%}

Answer 1

你的问题是变体和父级在同一级别，你应该修复在父级内部设置变体数组，之后你可以使用过滤器 first 和 last.

yaml 应该看起来像那样

products-prints:
  - id: 'first-art'
    type: variable
    name: 'add name and other data of the product'
    variants:
      - id: 'first-art-small'
        name: 'small'
        position: 1
        price: '10'
      - id: 'first-art-medium'
        name: 'medium'
        position: 2
        price: '20'
      - id: 'first-art-large'
        name: 'large'
        position: 3
        price: '30'
  - id: 'second-art'
    type: variable
    name: 'add name and other data of the product'
    variants:
      - id: 'second-art-small'
        name: 'small'
        position: 1
        price: '10'
      - id: 'second-art-medium'
        name: 'medium'
        position: 2
        price: '20'
      - id: 'second-art-large'
        name: 'large'
        position: 3
        price: '30'
      - id: 'second-art-x-large'
        name: 'x-large'
        position: 4
        price: '40'

现在液体将是:

{%- assign printartworks = site.data.products-prints -%}
{%- for printart in printartworks -%}
  <h3>
    {{ printart.id }}
  </h3>
  <div>
    <p>
      {{ printart.variants.first.name }} - {{ printart.variants.first.price }}
    </p>
    <p>
      {{ printart.variants.last.name }} - {{ printart.variants.last.price }}
    </p>
  </div>
{%- endfor -%}

现在代码将读取数组中的第一个和最后一个元素，如果 yaml 是按顺序执行的，则由您按顺序编写文件。要格外小心，您可以在读取变体数组之前对其进行排序。