Shopware 6博客列表图文自动交替布局实现方案咨询

针对你需要的首篇文章图片居左、后续交替左右的布局，以下是几种无需手动调整的自动化方案：

方案1：CSS 奇偶选择器（最简实现） #

直接通过CSS的:nth-child()选择器自动控制奇偶项的布局，新增文章会自动适配交替规则，无需修改模板逻辑。

假设你的博客列表项结构如下：

<div class="blog-list">
  <div class="blog-item">
    <div class="blog-image">...</div>
    <div class="blog-teaser">...</div>
  </div>
</div>

添加CSS样式：

/* 奇数项（第1、3、5...篇）图片居左 */
.blog-item:nth-child(odd) {
  display: flex;
  flex-direction: row;
}

/* 偶数项（第2、4、6...篇）图片居右 */
.blog-item:nth-child(even) {
  display: flex;
  flex-direction: row-reverse;
}

/* 可选：调整间距和响应式适配 */
.blog-image, .blog-teaser {
  flex: 1;
  padding: 0 1rem;
}

@media (max-width: 768px) {
  .blog-item:nth-child(odd),
  .blog-item:nth-child(even) {
    flex-direction: column;
  }
}

方案2：Twig 模板逻辑控制（更灵活） #

如果需要自定义交替起始规则（比如从第2篇开始交替），可以在Shopware的模板文件中通过循环索引判断，给不同项添加对应类。

修改@Storefront/storefront/component/blog/blog-list.html.twig（或你的自定义落地页模板）：

{% for blog in blogPosts %}
  <div class="blog-item {{ loop.index is odd ? 'image-left' : 'image-right' }}">
    <div class="blog-image">
      {% if blog.media %}
        {% sw_thumbnail blog.media 'medium' %}
      {% endif %}
    </div>
    <div class="blog-teaser">
      <h2>{{ blog.title }}</h2>
      <p>{{ blog.teaser }}</p>
    </div>
  </div>
{% endfor %}

配套CSS：

.blog-item.image-left {
  display: flex;
  flex-direction: row;
}

.blog-item.image-right {
  display: flex;
  flex-direction: row-reverse;
}

/* 响应式适配同方案1 */

方案3：自定义字段+自动化逻辑（兼顾灵活性） #

如果需要允许内容创作者偶尔打破交替规则（比如某篇文章强制图片居左/右），可以给博客文章添加自定义字段，默认仍用奇偶逻辑，手动设置时优先使用自定义值。

1. 在Shopware后台：进入设置 > 自定义字段，给Blog post实体添加一个单选字段image_position，选项为left、right、auto（默认选auto）。
2. 修改模板逻辑：

{% for blog in blogPosts %}
  {% set position = blog.customFields.image_position ?? 'auto' %}
  {% set finalPosition = position == 'auto' ? (loop.index is odd ? 'left' : 'right') : position %}
  
  <div class="blog-item image-{{ finalPosition }}">
    <!-- 图片和 teaser 内容 -->
  </div>
{% endfor %}

这样既实现了自动化交替，又给内容创作者留了手动调整的空间。

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