如何在TYPO3中使用自定义元素来实现一个页面模板？

Question

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

我想给用户添加或像你在截图的许多人认为，他们希望删除部分的可能性。我的第一个想法是解决这个问题，就是创建内容元素。

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

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

Answer 1

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

CREATING GRIDELEMENT：

1. 安装扩展Gridelements。
2. 创建系统夹在哪里存储gridelement模板
3. 去与gridelements SYS文件夹列表中，点击+号（创建新的记录）
4. 从列表中选择Gridelements-> CE后端布局
5. 转至配置选项卡并配置你的gridelement（网格配置字段，在它的右边你会看到一个图标 - 点击它进行动态配置）
6. 为gridelement选择一个相关的名字并保存它。要放gridelement部分
   1. 点击“创建新的内容元素”按钮，在页面上，你开始去

      转到页：

   ASSIGN GRIDELEMENT到一个页面到Gridelements选项卡并选择gridelement。

7. 保存内容元素并将内容添加到gridelements字段。

FOR GRIDELEMENT创建模板：

打开模板的TypoScript文件，并为每个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> 
     ) 
     } 
    } 
} 

FLUID TEMPLATES

# 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模板，我们gridelement：

<!-- gridtemplate.html --> 

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

与柔性成型动态定制：

我们回到BAC在gridelements sysfolder上选择列表，选择gridelement并转到配置选项卡，然后在Flexform配置文件字段中添加您的Flexform文件。

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

柔性成型配置例子：

<!-- 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代码段，看看柔性成型是如何在模板文件来处理。

这就是所有的gridelements。