在Shopify liquid框架中动态填充forloop数组

Question

我正试图在Shopify中创建自己的数组，这样我就可以轻松地填充一个光滑的滑块。我试过创建一个数字数组，然后用它来调用变量，但似乎不起作用。我只是不断得到"意想不到的角色"等

{% assign number_group = "1, 2, 3, 4, 5" | split: ','%}
{%- assign block_1_link = "/collections/col-1" %}
{%- assign block_1_title = "Title 1" %}
{%- assign block_1_img = "imglink" %}
{%- assign block_2_link = "/collections/col-2" %}
{%- assign block_2_title = "Title 2" %}
{%- assign block_2_img = "imglink" %}
<div class="slick-slider-row">
<div class="wrapper">
<h2><a href="x">MyCompants</a><h2>
{% for NUMBER in number_group %}
{%- assign this_link = "block_"{{NUMBER}}"_link" %}
{%- assign this_image = "block_"{{NUMBER}}"_img" %}
{%- assign this_title = "block_"{{NUMBER}}"_title" %}
<div class="responsive carousel  slider-mobile-hide">
<div class="slick-slide">
<a href="{{this_link}}">
<img class="lazyload" alt="{{ this_title}}" src="{{ 
this_image}}">
</a>
<p><a class="slider-collection-name-link" href="  
{{this_link}}">{{this_title}}</a></p>
</div> 
{% endfor %}

Answer 1

我假设您是液体语言的新手，所以我会尽可能清楚地描述它。

对于回路

液体中有两种类型的FOR回路。

1( 列出数组中所有项目的标准方法：

{% for product in collection.products %}

其中，collection.products是产品的数组。

2( 您试图构建的手动阵列

{% for i in (1..5) %}

其中1是起始索引，5是结束索引。

---

液体语法

液体语法有两种类型。

{{  }}

和

{%  %}

{{ }}用于内容输出，{% %}用于液体逻辑(if/assign/capture/for etc.(

代码中的错误

{%- assign this_link = "block_"{{NUMBER}}"_link" %}

这是一个无效语法。液体里面不能有液体。如果你想这样做，正确的方法是：

{%- assign this_link = "block_" | append: NUMBER | append: "_link" %}

或

{% capture this_link %}block_{{NUMBER}}_link{% endcapture %}

此外，此{{this_link}}将输出字符串"block_1_link"，而不是变量block_1_link。

为了输出变量，您需要像{{[this_link]}}一样将其括在方括号中，因为您要为其分配一个字符串

我想你正在学习，但这种语法可能永远不会出现在真正的项目中，因为你不应该有静态变量

你的代码应该是什么样子

{%- assign block_1_link = "/collections/col-1" %}
{%- assign block_1_title = "Title 1" %}
{%- assign block_1_img = "imglink" %}
{%- assign block_2_link = "/collections/col-2" %}
{%- assign block_2_title = "Title 2" %}
{%- assign block_2_img = "imglink" %}
<div class="slick-slider-row">
<div class="wrapper">
<h2><a href="x">MyCompants</a><h2>
{% for NUMBER in (1..5) %}
{%- assign this_link = "block_" | append: NUMBER | append: "_link" %}
{%- assign this_image = "block_" | append: NUMBER | append: "_img" %}
{%- assign this_title = "block_" | append: NUMBER | append: "_title" %}
<div class="responsive carousel  slider-mobile-hide">
<div class="slick-slide">
<a href="{{[this_link]}}">
<img class="lazyload" alt="{{ [this_title] }}" src="{{ [this_image] }}">
</a>
<p><a class="slider-collection-name-link" href="  
{{[this_link]}}">{{[this_title]}}</a></p>
</div> 
{% endfor %}