嵌套Unless标签导致Liquid/Jekyll生成JSON末尾逗号异常

在使用Liquid生成JSON数据时，嵌套unless标签过滤当前页面项后，forloop.last无法正确识别实际输出的最后一项，导致JSON末尾多了逗号，触发格式错误。试过if语句、手动标记最后索引等方法都无效，最终通过预过滤数组+转义标签的方式解决了问题。

原代码 #

<script id="suggest-json" type="application/json">
[
    {%- for item in site[page.collection] -%}
    {%- unless item.url == page.url -%}

    {% assign images = item.media | where: "type", "image" %}
    {% assign image = images.first %}
    {
        "url": "{{site.baseurl}}{{ item.url }}",
        "title": "{{ item.title }}",
        "subject": "{{ item.game }}",
        "image": "{{ image.thumbnail }}",
        "alt": "{{ image.thumbnail_alt }}"
    } {%- unless forloop.last -%},{%- endunless -%}

    {%- endunless -%}
    {%- endfor -%}
]
</script>

无效输出（末尾逗号导致JSON失效） #

[
    
    {
        "url": "/portfolio/levels/low-life/",
        "title": "Low-Life",
        "subject": "Final Verdikt: Source",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    },
    {
        "url": "/portfolio/levels/prospekt/",
        "title": "Prospekt",
        "subject": "Final Verdikt: Source",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    },    
    {
        "url": "/portfolio/levels/station/",
        "title": "Station",
        "subject": "Half-Life 2: Opposition",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    },
    
    {
        "url": "/portfolio/levels/dredge/",
        "title": "Dredge",
        "subject": "Firearms: Source",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    },   
    {
        "url": "/portfolio/levels/gravitas/",
        "title": "Gravitas",
        "subject": "Firearms: Source",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    }, 
    {
        "url": "/portfolio/levels/navarro/",
        "title": "Navarro",
        "subject": "Firearms: Source",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    },
    {
        "url": "/portfolio/levels/deadlock/",
        "title": "Deadlock",
        "subject": "Half-Life 2: Opposition",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    },]

解决思路 #

原代码的问题在于：forloop.last是针对整个循环的所有项，而嵌套的unless跳过了当前页面项，实际输出的项的最后一个，并不是原循环的forloop.last项，导致逗号判断错误。

修复方案：

1. 先预过滤出需要输出的项：创建一个空数组，循环原集合时把不符合过滤条件（不是当前页面）的项push到新数组中
2. 循环这个预过滤后的数组，此时forloop.last就能正确对应实际输出的最后一项，从而准确控制逗号的添加
3. 使用{% raw %}标签转义JSON的大括号，避免Liquid误解析；同时用jsonify过滤器处理字符串内容，确保JSON格式的正确性（比如处理引号转义）

修复后代码 #

{% assign suggestions = "" | split: ',' %}
{%- for item in site[page.collection] -%}
{%- unless item.url == page.url -%}
{% assign suggestions = suggestions | push: item %}
{%- endunless -%}
{%- endfor -%}
<script id="suggest-json" type="application/json">
[
{%- for item in suggestions -%}
    {% assign images = item.media | where: "type", "image" %}
    {% assign image = images.first %}
    {% raw %}
    {
    {% endraw %}
        "url": "{{ site.baseurl }}{{ item.url }}",
        "title": {{ item.title | jsonify }},
        "subject": {{ item.game | jsonify }},
        "image": {{ image.thumbnail | jsonify }},
        "alt": {{ image.thumbnail_alt | jsonify }}
    {% raw %}
    }
    {% endraw %}
    {%- unless forloop.last -%},{%- endunless -%}
{%- endfor -%}
]
</script>

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