Как заставить Frontend Layout определять столбцы и бэкэнд-макет?

Совсем не запутанно, вот реальный пример:

page.10 = FLUIDTEMPLATE
page.10 {
  file.stdWrap.cObject = CASE
  file.stdWrap.cObject {
    key.data = pagelayout

    default = TEXT
    default.value = {$customPagesTemplatePath}/Standard.html

    1 = TEXT
    1.value = {$customPagesTemplatePath}/Home.html

    2 = TEXT
    2.value = {$customPagesTemplatePath}/Landing.html

    10 = TEXT
    10.value = {$customPagesTemplatePath}/NewsDetail.html

    11 = TEXT
    11.value = {$customPagesTemplatePath}/LandingMini.html

    12 = TEXT
    12.value = {$customPagesTemplatePath}/FullWidth.html
  }
  layoutRootPath = {$customPagesLayoutPath}
  partialRootPath = {$customPagesPartialPath}

}

Подумайте об этом так:

• Как вы говорите, забудьте о внешнем интерфейсе. Это наследие; be layout служит для BE и FE.

• Если бы страница была городом, colPos была бы улицей. Вернее, представьте, что Backend — это карта, которую вы рисуете, а Frontend — это LEGO City, который вы строите по этой карте :-)) Если вы не против, я буду придерживаться этой метафоры.

ColPos — это определенная часть страницы, на которой находится запись. Если можете, взгляните на таблицу tt_content в базе данных: вы увидите, что colPos — это просто столбец с числом. Итак, в городе «Страница 1» есть улица под названием «colPos 7», и на ней есть несколько записей (это могут быть дома). С помощью мастера be_layout в TYPO3 вы создадите административную карту этого города: как редактор должен видеть эти улицы.

В FLUIDTEMPLATE вы вызываете в зависимости от выбранного be_layout, вы будете создавать сам город; визуализированный интерфейс.

Вот еще один реальный пример такого гибкого шаблона (Home.html):

<f:render partial="Mobilenav" />
<f:render partial="Header"/>

<div class="row">
<f:cObject typoscriptObjectPath="lib.home-teaser" />
</div>

<aside>
  <div class="row">
    <div class="columns">
      <div class="row">
        <div class="fp-teaser-outer small-48 medium-24 large-12 columns">
          <div class="fp-teaser-box-wrapper">
            <f:cObject typoscriptObjectPath="lib.home-something" />
          </div>
        </div>
        <div class="fp-teaser-outer small-48 medium-24 large-12 columns">
          <div class="fp-teaser-box-wrapper">
            <f:cObject typoscriptObjectPath="lib.home-somethingelse" />
          </div>
        </div>
        <div class="fp-teaser-outer small-48 medium-24 large-12 columns">
          <div class="fp-teaser-box-wrapper">
            <div class="fp-teaser-box">
              <f:cObject typoscriptObjectPath="lib.home-news-plugin-title" />
              <div class="fp-teaser-hr"></div>
              <div class="fp-teaser-content">
                <f:cObject typoscriptObjectPath="lib.home-news" />
              </div>
            </div>
          </div>
        </div>
        <div class="fp-teaser-outer small-48 medium-24 large-12 columns">
          <div class="fp-teaser-box-wrapper">
            <div class="fp-teaser-box">
              <f:cObject typoscriptObjectPath="lib.home-blog-plugin-title" />
              <div class="fp-teaser-hr"></div>
              <div class="fp-teaser-content">
                <f:cObject typoscriptObjectPath="lib.home-blog" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</aside>

<f:render partial="Footer"/>

...ну а где корреляция с colPos? Еще нигде! Я (хотя и уверен, что есть другие подходы) делаю это в TypoScript:

lib.home-something < styles.content.get
lib.home-something {
  select.where = colPos = 7
}

Таким образом, мы подготавливаем содержимое для шаблона жидкости: получаем все содержимое столбца 7 этой страницы (используя расширение Fluid_styled_content) и помещаем его в объект содержимого «lib».

Затем это вставляется на страницу через f:cObject viewhelper:

<f:cObject typoscriptObjectPath="lib.home-something" />

Таким образом, все дома на 7-й улице помещаются в городе именно в этом месте и, таким образом, отображаются на вашей странице.