TYPO3后台添加内容前端不显示，如何配置全行列展示？

1. 核对后端布局（web_layout.tsconfig）的colPos配置 #

先检查你的web_layout.tsconfig里的后端布局定义，必须保证每个行列对应的colPos值唯一——2列3行的布局需要6个不同的colPos（比如0、1、2、3、4、5）。正确的配置示例：

mod.web_layout.BackendLayouts {
  my_2col_3row {
    title = 2列3行布局
    config {
      backend_layout {
        colCount = 2
        rowCount = 3
        rows {
          1 {
            columns {
              1 {
                name = 第一行左列
                colPos = 0
              }
              2 {
                name = 第一行右列
                colPos = 1
              }
            }
          }
          2 {
            columns {
              1 {
                name = 第二行左列
                colPos = 2
              }
              2 {
                name = 第二行右列
                colPos = 3
              }
            }
          }
          3 {
            columns {
              1 {
                name = 第三行左列
                colPos = 4
              }
              2 {
                name = 第三行右列
                colPos = 5
              }
            }
          }
        }
      }
    }
  }
}

如果colPos重复，会导致内容被覆盖或无法渲染，这是新手常犯的错误。

2. 配置前端渲染逻辑（TypoScript + Fluid） #

后端布局只是给编辑人员提供内容录入区域，前端必须明确指定每个colPos的内容要在哪里渲染。

步骤1：用TypoScript获取各列内容 #

在站点根模板的TypoScript中，添加以下配置，把每个colPos的内容赋值给模板变量：

page.10 = FLUIDTEMPLATE
page.10 {
  templateName = YourPageTemplate
  variables {
    # 绑定各列内容
    contentRow1Col1 = CONTENT
    contentRow1Col1 {
      table = tt_content
      select {
        where = colPos = 0
        orderBy = sorting
      }
    }
    contentRow1Col2 = CONTENT
    contentRow1Col2 {
      table = tt_content
      select {
        where = colPos = 1
        orderBy = sorting
      }
    }
    contentRow2Col1 = CONTENT
    contentRow2Col1 {
      table = tt_content
      select {
        where = colPos = 2
        orderBy = sorting
      }
    }
    contentRow2Col2 = CONTENT
    contentRow2Col2 {
      table = tt_content
      select {
        where = colPos = 3
        orderBy = sorting
      }
    }
    contentRow3Col1 = CONTENT
    contentRow3Col1 {
      table = tt_content
      select {
        where = colPos = 4
        orderBy = sorting
      }
    }
    contentRow3Col2 = CONTENT
    contentRow3Col2 {
      table = tt_content
      select {
        where = colPos = 5
        orderBy = sorting
      }
    }
  }
}

注意把YourPageTemplate替换成你实际使用的模板名称。

步骤2：在Fluid模板中渲染内容 #

打开对应的Fluid模板文件（比如Resources/Private/Templates/Page/YourPageTemplate.html），在页面对应位置添加各列内容的渲染代码：

<!-- 第一行 -->
<div class="row">
  <div class="col-md-6">
    {contentRow1Col1 -> f:format.raw()}
  </div>
  <div class="col-md-6">
    {contentRow1Col2 -> f:format.raw()}
  </div>
</div>

<!-- 第二行 -->
<div class="row">
  <div class="col-md-6">
    {contentRow2Col1 -> f:format.raw()}
  </div>
  <div class="col-md-6">
    {contentRow2Col2 -> f:format.raw()}
  </div>
</div>

<!-- 第三行 -->
<div class="row">
  <div class="col-md-6">
    {contentRow3Col1 -> f:format.raw()}
  </div>
  <div class="col-md-6">
    {contentRow3Col2 -> f:format.raw()}
  </div>
</div>

这里用了Bootstrap的栅格类，你可以根据自己的CSS框架调整。

3. 清除缓存 #

最后去TYPO3后台的系统>清除缓存，点击“清除所有缓存”，确保新配置生效。

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