代码之家 › 专栏 › 技术社区 › rakete

如何在TYPO3中实现一个页面模板,并为节自定义元素?

typo3-6.1.x typo3-6.2.x typoscript typo3 php

rakete · 技术社区 · 8 年前

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

我想让用户可以添加或删除屏幕截图上的部分,就像他们想要的那样。我解决这个问题的第一个想法是创建内容元素。

我认为tt_content还不够。有必要为每个部分创建一个自己的表。还有别的办法吗?

如果用户能够在“section content element”中添加内容元素,那就太好了。这可能吗?嵌套内容元素?因此,用户可以在第二个屏幕截图上添加第三个功能。

1 回复 | 直到 7 年前

Andrei Todorut 8 年前

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

创建网格元素:

安装扩展Gridelements。
创建存储gridelement模板的sysfolder
在gridelements文件夹上打开列表,点击+号(创建新记录)
从列表中选择Gridelements->CE后端布局
转到configuration选项卡并配置网格元素(网格配置字段,在它的右侧,您将看到一个图标-单击它可进行动态配置)
为gridelement选择相关名称并保存。

将网格元素分配给页面:

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

点击“创建新内容元素”按钮,在页面上进入Gridelements选项卡并选择gridelement。
保存内容元素并将内容添加到网格元素字段。

为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
      }
   }
}

为网格元素创建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系统文件夹上列出,选择一个gridelement并转到配置选项卡,然后在Flexform配置文件的字段中添加您的Flexform文件。

在Flexform配置文件的上方,您将看到Flexformconfiguration-textarea,我的建议是在文件中创建Flexform配置,而不是直接填写后端的type3。

柔性模板配置示例:

 <!-- 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。

网格元素就这样了。