Как создавать сложные {или} операторы в шаблоне JSON

Question

Я создал несколько операторов шаблонов JSON, которые извлекают миниатюры в настройках страницы в Squarespace. Он работает так же, как и должен, но у меня есть 3 раздела, которые извлекаются из списка блогов, элемента блога и обычной страницы.

Прямо сейчас код работает все три, когда вы идете на сайт, и я хотел бы вставить {or} заявления, таким образом, это организовано и функционирует правильно.

Меня сбивает с толку то, что у меня есть {.section} и {.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}

Меня сбивает с толку то, что у меня есть {.section} и {.main-image?} или же {.section mainImage} так что я не знаю, где разместить {or} и эти три секции кода сгруппированы как один.

Answer 1

Нашел ответ! Мне нужно обернуть весь раздел с

{.if items.0 || item} .. {или} .. {end}

Посмотреть здесь:

{.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}