在 jekyll 静态站点中使用 Liquid 显示 objects 的开始和结束范围

Question

我有一个列表 'products' 它们的结构如下：
他们有一个产品作为 parent："product 1"
然后他们有 parent "product 1-small", "product 1-medium", “产品 1-large” 等
但它们的变体数量各不相同，一个产品可能有 2 个变体，另一个可能有 5 个。

我想这样显示：

产品 1
小 - 大

产品 2
小 - 大

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

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

问题出在每个产品的价格和尺寸上parent。

这是我的例子 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 是按顺序执行的，则由您按顺序编写文件。要格外小心，您可以在读取变体数组之前对其进行排序。

Answer 2

免责声明：这是个坏主意。最好的解决方案是重构您的数据，但如果您无法编辑数据，这也行得通。

如果不重构 YAML 数据，您的应用应该在每次访问页面时进行更多处理。

{%- assign printartworks = site.data.products-prints -%}
{%- for printart in printartworks -%}
  {%- if printart.type == "variable" -%}
    {% assign variants = '' | split: '' %}
    {%- for variation in site.data.products-prints -%}
      {%- if variation.parent == printart.id -%}
        {% assign variants = variants | concat: variation %}
      {%- endif -%}
    {%- endfor -%}
    {% assign variants = variants | sort: "position" %}
  
    <h3>
      {{ printart.id }}
    </h3>
    <ul>
      <li>
        € {{ variants.first.price }}
      </li>
      <li>
        € {{ variants.last.price }}
      </li>
    </ul>
  {%- endif -%}
{%- endfor -%}

在 jekyll 静态站点中使用 Liquid 显示 objects 的开始和结束范围

Display START and END range of objects with Liquid in jekyll static site

loops

if-statement

jekyll

liquid

static-site