如何在TYPO3中实现带有自定义元素的页面模板？

Question

这是我想与 TYPO3 一起使用的模板：http : //www.shegy.nazwa.pl/themeforest/hype/ios/solid/

我想让用户可以根据需要添加或删除您在屏幕截图上看到的部分。我解决这个问题的第一个想法是创建内容元素。

我认为 tt_content 是不够的。有必要为每个部分创建一个自己的表。还有其他方法吗？

让用户可以在“部分内容元素”内添加内容元素将是非常好的。这可能吗？嵌套内容元素？所以用户可以在第二个屏幕截图上添加第三个功能。

Answer 1

您可以使用 Gridelements 来创建它。检查此链接https://typo3.org/extensions/repository/view/gridelements

创建网格：

1. 安装扩展 Gridelements。
2. 创建 sysfolder 存储网格元素模板的位置
3. 使用 gridelements sys 文件夹上的列表，然后单击 + 符号（创建新记录）
4. 从列表中选择 Gridelements->CE backend layout
5. 转到配置选项卡并配置您的网格元素（网格配置字段，在其右侧您会看到一个图标 - 单击它进行动态配置）
6. 为 gridelement 选择一个相关名称并保存。

将 GRIDELEMENT 分配给页面：

转到要放置网格元素部分的页面

1. 单击“创建新的内容元素”按钮，在页面上您将转到 Gridelements 选项卡并选择 gridelement。
2. 保存内容元素并将内容添加到您的网格元素字段。

为 GRIDELEMENT 创建模板：

打开您的模板排版文件并为每个网格元素添加语法。

# typoscript.ts
tt_content.gridelements_pi1.20.10.setup{ 
   # 1 is the gridelement id
   1 < lib.gridelements.defaultGridSetup
   1{
       columns{
         # 0 is the column id
         0 < .default
         0.wrap(
            <div class="column-div">|</div>
         )
      }
   }
}

流体模板

# typoscript.ts
tt_content.gridelements_pi1.20.10.setup {
   1 < lib.gridelements.defaultGridSetup
   1{
      cObject = FLUIDTEMPLATE
      cObject {
         file = gridtemplate.html #here source of fluid template
      }
   }
}

为我们的 gridelement 创建 html 模板：

<!-- gridtemplate.html -->

<div class="{data.flexform_yourfield}">
   <!-- data.tx_gridelements_view_column_{column id} -->
   {data.tx_gridelements_view_column_1->f:format.raw()}
</div>

使用 FLEXFORM 进行动态自定义：

我们回到带有 gridelements sysfolder 列表的后端，选择一个 gridelement 并转到配置选项卡和 Flexform 配置文件 - 字段 - 添加您的 flexform 文件。

在Flexform配置文件的上面你会看到Flexform configuration -textarea，我的建议是在文件中创建flexform配置，而不是直接填写typo3 backend。

FLEXFORM 配置示例：

 <!-- flexform.xml -->
    <?xml version="1.0" encoding="UTF-8"?>
    <T3DataStructure>
      <ROOT type="array">
        <type>array</type>
        <el type="array">
          <yourfield>
            <TCEforms type="array">
                <label>Label of your input</label>
                <config>
                    <type>input</type>
                </config>
            </TCEforms>
          </yourfield>
        </el>
      </ROOT>
    </T3DataStructure>

转到 gridtemplate.html 代码部分，看看如何在模板文件中处理 flexform。

这就是网格元素的全部内容。