json - 如何在 JSON 模板中创建复杂的 {or} 语句

Question

我创建了一些 JSON 模板语句，用于在 Squarespace 的页面设置中检索缩略图。它按原样工作，但我有 3 个部分来自博客列表、博客项目和常规页面。

现在，当您访问该站点并且我想插入{or}语句时，代码会运行所有三个代码，这样它就可以正确组织和运行。

让我绊倒的事情是我有 a{.section}和 a{.main-image?}左右，{.section mainImage}所以我不知道在哪里放置{or}并将这三个代码部分组合为一个。

我该怎么做呢？

<!--Displays Thumbnail image from first blog post in the blog list-->
{.section items.0}
{.main-image?}
            <div class="color-overlay"></div>
<figure class="content-fill main-image"><img {@|image-meta}></figure>
{.end} 
{.end}

<!--Displays Thumbnail image blog post-->       
{.section item}
{.main-image?}
            <div class="color-overlay"></div>
<figure class="content-fill main-image"><img {@|image-meta}></figure>
{.end} 
{.end}

<!--Displays Thumbnail image in a Page-->       
{.section collection}
{.section mainImage}
            <div class="color-overlay"></div>
<figure class="content-fill main-image"><img {@|image-meta}></figure>
{.end} 
{.end}

让我绊倒的事情是我有 a{.section}和 a{.main-image?}左右，{.section mainImage}所以我不知道在哪里放置{or}并将这三个代码部分组合为一个。

Answer 1

找到了答案！我需要用

{.if items.0 || 项目} .. {或} .. {结束}

看这里：

{.if items.0 || item}

        <!--Displays Thumbnail image from first blog post in the blog list-->
        {.section items.0}
        {.main-image?}
                    <div class="color-overlay"></div>
        <figure class="content-fill main-image"><img {@|image-meta}></figure>
        {.end} 
        {.end}

        <!--Displays Thumbnail image blog post--> 
        {.section item}
        {.main-image?}
                    <div class="color-overlay"></div>
        <figure class="content-fill main-image"><img {@|image-meta}></figure>
        {.end} 
        {.end}

        {.or}

        <!--Displays Thumbnail image in a Page--> 
        {.section collection}
        {.section mainImage}
                    <div class="color-overlay"></div>
        <figure class="content-fill main-image"><img {@|image-meta}></figure>
        {.end} 
        {.end}

        {.end}