如何在TYPO3中使用节的自定义元素来实现一页模板? [英] How to realize one page template in TYPO3 with custom elements for sections?

问题描述

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

This is the template I want to use with TYPO3: http://www.shegy.nazwa.pl/themeforest/hype/ios/solid/

我想让用户可以随意添加或删除屏幕快照中显示的部分.解决这个问题的第一个想法是创建内容元素.

I want to give the user the possibility to add or remove sections like you see on the screenshots as many as they want. My first idea to solve this, is to create content elements.

我认为tt_content还不够.必须为每个部分创建一个自己的表.还有另一种方法吗?

I think tt_content is not enough for this. It would be neccessary to create an own table for each sections. Is there another way?

给用户提供在部分内容元素"内添加内容元素的可能性非常好.这可能吗?嵌套的内容元素?因此，用户可以在第二个屏幕截图上添加第三个功能.

It would be very great to give the user the possibility to add content elments inside of the "section content element". Is this possible? Nested Content Elements? So the user could add a third features on the second screenshot.

推荐答案

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

You can create this with Gridelements. Check this link https://typo3.org/extensions/repository/view/gridelements

创建网格:

1. 安装扩展Gridelements.
2. 在sysfolder中创建存储网格元素模板的位置
3. 转到gridelements sys文件夹上的列表，然后单击+号(创建新记录)
4. 从列表Gridelements-> CE后端布局中选择
5. 转到配置"标签并配置网格元素(网格配置"字段，在它的右侧，您将看到一个图标-单击该图标可进行动态配置)
6. 为网格元素选择一个相关名称并保存.

为页面分配网格:

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

Go on page where you want to put gridelement section

1. 单击创建新的内容元素"按钮，在该页面上，转到网格元素"选项卡，然后选择网格元素".
2. 保存内容元素并将内容添加到网格元素字段.

创建网格模板:

打开您的模板拼写文件，并为每个网格元素添加语法.

Open your template typoscript file and add syntax for every 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模板:

Creating html template for our 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>

使用FLEXFORM动态定制:

我们返回到gridelements sysfolder上的后端列表，选择一个gridelement并转到配置"选项卡，然后在"Flexform配置文件-字段"中添加您的flexform文件.

We go back to the backend with list on gridelements sysfolder, choose a gridelement and go to configuration tab and on Flexform configuration file - field - add your flexform file.

在Flexform配置文件的上方，您将看到Flexform configuration -textarea，我的建议是在文件中创建Flexform配置，而不是直接填充typo3后端.

Above of Flexform configuration file you'll see Flexform configuration -textarea, my suggestion is to create flexform configuration in file, not directly fill in 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.

Go up on gridtemplate.html code section and see how flexform is handled in template file.

仅此而已.

这篇关于如何在TYPO3中使用节的自定义元素来实现一页模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！