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

时间:2016-05-15 22:24:15

标签: php typo3 typoscript typo3-6.2.x typo3-6.1.x

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

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

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

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

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:3)

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

创建网格:

  1. 安装扩展程序Gridelements。
  2. create sysfolder存储gridelement模板的位置
  3. 使用gridelements sys文件夹中的列表,然后单击+符号(创建新记录)
  4. 从列表中选择Gridelements-> CE后端布局
  5. 转到配置选项卡并配置您的gridelement(网格配置字段,在其右侧,您将看到一个图标 - 单击它以进行动态配置)
  6. 选择gridelement的相关名称并保存。
  7. 将网格分配到页面:

    转到要放置gridelement部分的页面

    1. 点击"创建新的内容元素"按钮,在页面上,您可以转到Gridelements选项卡并选择gridelement。
    2. 保存内容元素并将内容添加到您的格子元素字段。
    3. 为网格创建模板:

      打开模板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
            }
         }
      }
      

      为我们的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配置-textarea,我的建议是在文件中创建flexform配置,而不是直接填写typo3后端。

      FLEXFORM CONFIGURATION示例:

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

      这就是整个竞争对手。