Shopware 6 中博客列表的自动图像-文本交替

Question

我正在尝试为 Shopware 6 中的登陆页面构建一个新的布局。它应该显示带有图像和预告文本的博客文章列表。第一篇博客文章的图像应位于左侧，下一篇文章的图像应位于右侧。

当然，我可以手动实现这一点。但是，当我决定在中间某处添加另一篇博客文章时，会发生什么情况，我需要更改以下所有博客条目的文本和图像框。这意味着内容创建者需要做很多工作。

我感谢任何有关如何解决此问题的意见。

Answer 1

如果您有一个包含所有博客条目的容器（在我的示例中为 .blogItems），您可以直接使用 CSS（使用 Flex-box 顺序https://developer.mozilla.org/en-US/docs/Web/ CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items）来实现这一点。

这个例子实际上并不能工作/渲染（CSS 是用 SCSS 编写的，我缺少一些类/样式），但总体思路应该可以。

.blogItems:nth-child(even) {
    .imgCol {
        order: 1;
    }
    .textCol {
        order: 2;
    }
}
.blogItems:nth-child(odd) {
    .imgCol {
        order: 2;
    }
    .textCol {
        order: 1;
    }
}

<div class="blogItems">
    <div class="blogItem row">
        <div class="imgCol col-5">
            <img src="https://picsum.photos/300/200" alt=""/>
        </div>
        <div class="textCol col-7">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis leo ac tristique. Integer a placerat elit.
                Phasellus fermentum lorem vel ipsum viverra bibendum. Suspendisse maximus magna et dolor lacinia aliquet.
                Ut euismod ornare luctus. Aenean porttitor id elit vel aliquam. Aenean id auctor odio</p>
        </div>
    </div>
    <div class="blogItem row">
        <div class="imgCol col-5">
            <img src="https://picsum.photos/300/200" alt=""/>
        </div>
        <div class="textCol col-7">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis leo ac tristique. Integer a placerat elit.
                Phasellus fermentum lorem vel ipsum viverra bibendum. Suspendisse maximus magna et dolor lacinia aliquet.
                Ut euismod ornare luctus. Aenean porttitor id elit vel aliquam. Aenean id auctor odio</p>
        </div>
    </div>
    <div class="blogItem row">
        <div class="imgCol col-5">
            <img src="https://picsum.photos/300/200" alt=""/>
        </div>
        <div class="textCol col-7">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis leo ac tristique. Integer a placerat elit.
                Phasellus fermentum lorem vel ipsum viverra bibendum. Suspendisse maximus magna et dolor lacinia aliquet.
                Ut euismod ornare luctus. Aenean porttitor id elit vel aliquam. Aenean id auctor odio</p>
        </div>
    </div>
    <div class="blogItem row">
        <div class="imgCol col-5">
            <img src="https://picsum.photos/300/200" alt=""/>
        </div>
        <div class="textCol col-7">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis leo ac tristique. Integer a placerat elit.
                Phasellus fermentum lorem vel ipsum viverra bibendum. Suspendisse maximus magna et dolor lacinia aliquet.
                Ut euismod ornare luctus. Aenean porttitor id elit vel aliquam. Aenean id auctor odio</p>
        </div>
    </div>
</div>