Shopify Liquid模板中如何打印指定样式的图案？

实现效果说明 #

你需要实现的是10行数字矩阵，第1行连续输出10个1，第2行连续输出10个2，依此类推直到第10行输出10个10。

现有代码问题 #

• 内层循环输出{{i}}时没有做空白控制，Liquid默认会在每个变量输出后加换行，导致所有数字纵向排列，没法实现同一行展示10个数字的效果
• 你手动加的{% assign i=i | plus : '1' %}属于冗余代码，外层for循环已经会自动对i做递增遍历，手动修改循环变量反而会打乱正常的循环计数

修正后代码 #

{% for i in (1..10) %}
  {%- for j in (1..10) -%}
    {{ i }} 
  {%- endfor -%}
  <br>
{% endfor %}

代码说明 #

• 给for循环标签加上-做Liquid空白控制，去掉渲染时自动插入的多余换行符，保证同一行的10个数字连续输出
• 每个数字后加 作为分隔符，你可以根据需求替换成其他分隔符，不需要分隔的话删掉即可
• 移除了冗余的循环变量修改代码，依托外层循环的自动迭代完成行号更新
• 如果是渲染纯文本场景，把代码里的<br>替换为换行符即可

内容的提问来源于stack exchange，提问作者Ashish