如何在TYPO3中实现一个带有自定义元素的页面模板?
How to realize one page template in TYPO3 with custom elements for sections?
这是我想与 TYPO3 一起使用的模板:http://www.shegy.nazwa.pl/themeforest/hype/ios/solid/
我想让用户可以根据需要添加或删除您在屏幕截图中看到的部分。我解决这个问题的第一个想法是创建内容元素。
我认为 tt_content 还不够。有必要为每个部分创建一个自己的 table。还有别的办法吗?
如果能让用户能够在 "section content element" 中添加内容元素,那就太好了。这可能吗?嵌套内容元素?所以用户可以在第二个屏幕截图上添加第三个功能。
您可以使用 Gridelements 创建它。检查这个 link https://typo3.org/extensions/repository/view/gridelements
创建 GRIDELEMENT:
- 安装扩展程序 Gridelements。
- 创建用于存储 gridelement 模板的 sysfolder
- 转到 gridelements sys 文件夹中的列表并单击 + 号(创建新记录)
- 从列表中选择 Gridelements->CE 后端布局
- 转到配置选项卡并配置您的gridelement(网格配置字段,在它的右侧您会看到一个图标 - 单击它进行动态配置)
- 为 gridelement 选择一个相关的名称并保存。
为页面分配网格:
转到要放置网格元素部分的页面
- 点击 "Create new content element" 按钮,在页面上转到 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
}
}
}
正在为我们的 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 配置示例:
<!-- 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。
这就是网格元素的全部内容。
这是我想与 TYPO3 一起使用的模板:http://www.shegy.nazwa.pl/themeforest/hype/ios/solid/
我想让用户可以根据需要添加或删除您在屏幕截图中看到的部分。我解决这个问题的第一个想法是创建内容元素。
我认为 tt_content 还不够。有必要为每个部分创建一个自己的 table。还有别的办法吗?
如果能让用户能够在 "section content element" 中添加内容元素,那就太好了。这可能吗?嵌套内容元素?所以用户可以在第二个屏幕截图上添加第三个功能。
您可以使用 Gridelements 创建它。检查这个 link https://typo3.org/extensions/repository/view/gridelements
创建 GRIDELEMENT:
- 安装扩展程序 Gridelements。
- 创建用于存储 gridelement 模板的 sysfolder
- 转到 gridelements sys 文件夹中的列表并单击 + 号(创建新记录)
- 从列表中选择 Gridelements->CE 后端布局
- 转到配置选项卡并配置您的gridelement(网格配置字段,在它的右侧您会看到一个图标 - 单击它进行动态配置)
- 为 gridelement 选择一个相关的名称并保存。
为页面分配网格:
转到要放置网格元素部分的页面
- 点击 "Create new content element" 按钮,在页面上转到 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
}
}
}
正在为我们的 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 配置示例:
<!-- 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。
这就是网格元素的全部内容。