Typo3 V6:如何创建内容元素容器?(不使用TV)

11

我正在使用Typo3 v6.0进行一个项目。我想创建嵌套内容元素或内容元素容器。我希望能够创建内联的两列布局,而不需要使用特定的模板。我希望在不使用templavoila的情况下实现这一点。

我尝试过的扩展包括gridelementskb_nescefebs_fcemulticolumn,但由于它们与Typo3 V6不兼容,因此无法使用。

我的目标是得到如附图所示的最终结果。内联的两列内容可以省略、使用一次或多次,包含任何其他内容元素。

我在寻找最简单的解决方案。我更喜欢不必花费很多时间学习像flux等解决方案(http://fedext.net/-看起来很酷,但现在也太耗时了)。

有什么想法吗?

example layout with inline two-column content


@cascaval 是的,没错 - Maurice
我明白了。在TYPO3 4.5.x中,创建一个作为其他元素容器的新内容元素(使用IRRE),并以2列呈现它们并不那么复杂。我不知道在TYPO3 6.0中是否仍然有效,因为我还没有尝试过这个版本。 - tmt
@cascaval,您能否解释一下您如何在4.5.x中实现这个功能?我习惯于使用TV,所以可能会有所遗漏。然后我可以在6上尝试一下。如果您将其添加为答案,如果有效,我就可以接受了。 - Maurice
请注意"multicolumn"扩展插件。 - Urs
@Maurice 可能是6.0兼容性问题。您是否将错误报告设置为E_ALL?您可以尝试使用TYPO3 4.5进行比较或询问开发人员。我会发布我使用的TS,但Stackoverflow会抱怨格式... - Urs
显示剩余4条评论
8个回答

15
我是Fluid扩展套件(flux、fluidcontent、fluidpages等)的作者,当然希望能帮助您学习如何使用FluidContent来制作FCE。它其实并没有想象中那么高级。至少,它比上面的例子要简洁得多。下面的代码可以在FluidContent中实现与您的示例相同的结果:

TypoScript(静态加载:css_styled_content,fluid_content)

plugin.tx_fed.fce.yourname {
    templateRootPath = fileadmin/Templates # if you don't want to use an extension (1)
    # partial and layout root paths not defined (2)
}

关于(1),你真的应该这样做。使用扩展可以将用户上传的媒体等与网站内容分开。如果你选择这样做,只需使用EXT:...路径到私有资源文件夹即可。而且关于(2),这些路径仅在您实际希望使用部分时才需要。
然后,模板文件本身(当添加文件所在路径的TS时自动检测):
{namespace flux=Tx_Flux_ViewHelpers}
<f:layout name="Content" />
<f:section name="Configuration">
    <flux:flexform id="columns" label="Columns" icon="path/to/iconfile.jpg">
        <flux:flexform.grid>
            <flux:flexform.grid.row>
                <flux:flexform.grid.column>
                    <flux:flexform.content name="left" label="Left content" />
                </flux:flexform.grid.column>
                <flux:flexform.grid.column>
                    <flux:flexform.content name="right" label="Right content" />
                </flux:flexform.grid.column>
            </flux:flexform.grid.row>
        </flux:flexform.grid>
    </flux:flexform>
</f:section>
<f:section name="Preview">
    <flux:widget.grid />
</f:section>
<f:section name="Main">
    <div class="row">
        <div class="span6">
            <flux:flexform.renderContent area="left" />
        </div>
        <div class="span6">
            <flux:flexform.renderContent area="right" />
        </div>
    </div>
</f:section>

如你所见,您完全可以添加任何你想要的HTML,使用任何ViewHelpers(甚至呈现TS对象,如果这是您的需求)。要添加其他内容元素,只需添加新的模板文件-它们将自动被识别。
但它与IRRE(您也可以使用Flux字段实现IRRE - 如果您希望看到演示,请告诉我)有所不同:它允许您使用TYPO3中的本地拖放来将子内容元素置于实际内容容器中-就像您以前在TV上做的那样。
因此,Fluid Content可能是最接近TV的。
关于Flux过度的问题,我想给您一个它所执行的实际情况:
- 缓存读取TS以了解路径 - 缓存有关检测到的模板的列表 - Flux仅使用Fluid存储配置,从而使其成为原生PHP - Flux本身会注册一个挂钩订阅者,以响应保存内容,这会使后端变慢(无法察觉) - Flux本身不会对FE产生负载,除了一种情况:当处于未缓存的插件(FluidContent已缓存!)时,Flux可能会调用本机PHP缓存代码以读取配置。 - FluidContent由一个极其简单的控制器组成;输出是完全缓存的。 - 您可能想添加VHS ViewHelper集合-它本身不会产生任何负载:它仅在您使用其ViewHelpers时使用资源。它包含大量的ViewHelpers,我相信您会发现它们非常有用。
一开始可能看起来有点压抑,但是我保证你需要了解和记住的内容比pibase、FlexForm XML、TS或本地Extbase插件要少得多。如果您想具备更多的安全保障,我强烈建议您在编辑器中使用XSD模式-这将为您提供特殊标签等自动完成功能。
但是:它将需要您学习Fluid的逻辑:哪些是Layouts和Partials(您很可能希望在某个时候使用它们),以及如何使用特殊标签和引用变量(这在其他用例中将是必需的,但不是手头的用例;它只需要简单的ViewHelper标签)。
希望这可以帮助您,并减轻您对Flux过度和太多要学习的恐惧感 ;)
祝好,Claus aka. NamelessCoder

我想看一下使用fluidcontent的IRRE演示。或者,我想了解如何在<flux:flexform.object>中使用enableFields。 - yunzen
有没有可能像<flux:form.section name="aboutsec" label="Container">这样拥有多个(动态)网格: <flux:form.object name="aboutobt" label="Add new"> <flux:field.input name="tabtitle" label="Tab Title" /> flux:grid flux:grid.row <flux:grid.column name="content" label="Content" /> </flux:grid.row> </flux:grid> </flux:form.object> </flux:form.section>? - Ghanshyam Gohel

5

有一个startnext项目,已经修复了grid_elements中的已知错误。据我所知,下一步就是使grid_elements与TYPO3 6兼容。但我猜,在发布之前需要几个星期的时间。不过,也许他们会从版本2开始(这个版本现在与TYPO3 6兼容...)。

看看forge项目


我看过这个,它似乎将完全符合我的需求。唯一的缺点是它还没有完成。我会给它点赞,因为这可能是未来谷歌搜索者的好答案。 - Maurice
1
"TYPO3 >= 6.0的2.0版本将在接下来的几天内发布。我相信这将是最佳解决方案。这些人曾经创建了后端网格,并将其整合到了核心中,还有一些核心开发人员参与其中。" - maholtz
谢谢您的更新。目前我有一个可行的解决方案。如果还有时间,我可能会考虑稍后切换。 - Maurice

4

好的,我已经有了半个解决方案。我选择使用WEC Content Elements插件来管理自定义内容元素。

然后我使用以下flexform:

<T3DataStructure>
    <ROOT>
        <type>array</type>
        <el>
            <leftColumn>
                <TCEforms type="array">
                    <label>Left column</label>
                    <config>
                        <type>inline</type>
                        <foreign_table>tt_content</foreign_table>
                        <maxitems>100</maxitems>
                        <appearance>
                            <showSynchronizationLink>0</showSynchronizationLink>
                            <showAllLocalizationLink>0</showAllLocalizationLink>
                            <showPossibleLocalizationRecords>0</showPossibleLocalizationRecords>
                            <showRemovedLocalizationRecords>0</showRemovedLocalizationRecords>
                            <expandSingle>1</expandSingle>
                        </appearance>
                    </config>
                </TCEforms>
            </leftColumn>
            <rightColumn>
                <TCEforms type="array">
                    <label>Right column</label>
                    <config>
                        <type>inline</type>
                        <foreign_table>tt_content</foreign_table>
                        <maxitems>100</maxitems>
                        <appearance>
                            <showSynchronizationLink>0</showSynchronizationLink>
                            <showAllLocalizationLink>0</showAllLocalizationLink>
                            <showPossibleLocalizationRecords>0</showPossibleLocalizationRecords>
                            <showRemovedLocalizationRecords>0</showRemovedLocalizationRecords>
                            <expandSingle>1</expandSingle>
                        </appearance>
                    </config>
                </TCEforms>
            </rightColumn>
        </el>
    </ROOT>
</T3DataStructure>

以下是前端typoscript设置:
tt_content.twoColumnContainer = COA
tt_content.twoColumnContainer {
  10 = < lib.stdheader

  20 = COA
  20 {
    wrap = <div class="twocolumn-container"> | </div>

    10 = RECORDS
    10 {
        tables       = tt_content
        dontCheckPid = true
        source.data  = t3datastructure : pi_flexform->leftColumn
        wrap         = <div class="twocolumn-left"> | </div>
    }

    20 = RECORDS
    20 {
        tables       = tt_content
        dontCheckPid = true
        source.data  = t3datastructure : pi_flexform->rightColumn
        wrap         = <div class="twocolumn-right"> | </div>
    }
}

这导致了一个后端内容元素,使用IRRE编辑器添加/编辑内容元素。容器元素没有预览,而且两列是在彼此下方位置(而不是相邻)。总的来说,在经过多个小时的谷歌和尝试各种方法/插件后,这是我找到的唯一可行的解决方案。希望这能帮助到某些人。

4

谢谢您的建议。我尝试了DCE,但它对我没有起作用。有很多后端异常、后端注销等问题。我已经看过Fedext框架,但它看起来太过复杂了。我正在寻找一个简单的解决方案。 - Maurice
嘿,Maurice,我是DCE扩展的开发人员。如果您有问题,请在forge.typo3.org上创建工单,这样我就可以修复它们了。 - Armin
看起来你进行了更新?现在我没有收到任何错误。你认为我该如何创建一个可以容纳多个其他内容元素的容器? - Maurice
我无法让它起作用。无法将内容元素添加到显示的容器中(没有按钮和拖放)。不过,还是谢谢你的建议。 - Maurice

2

我会...

  1. tt_content 表中添加两个新字段(每个列一个)。您可以在 phpMyAdmin 中手动执行此操作,但是这样做可能会导致在进行数据库比较或其他操作时意外删除字段。因此最好为此创建一个非常简单的扩展 - 它只需要 2 个文件:ext_emconf.php 描述扩展和 ext_tables.sql 定义新字段。

  2. typo3conf/extTables.php 中定义新的内容元素类型(=容器)以及两个新字段(左侧列和右侧列各一个),它们都是IRRE 类型。

  3. 在根页面的TypoScript配置中设置 TCAdefaults.tt_content.pid = xxx,以便将左/右列元素存储在某个 sysfolder 中而不是页面本身上。

  4. 在模板设置中定义新的内容元素,以使其呈现为所需的样式。

更新

示例 IRRE 字段:

'user_2col_left' => array(
    'exclude' => 1,
    'label' => 'Left column',
    'config' => array(
        'type' => 'inline',
        'foreign_table' => 'tt_content',
        'maxitems' => '10',
        'appearance' => array(
            'collapseAll' => '1',
            'expandSingle' => '1',
            'newRecordLinkPosition' => 'bottom',
            'showAllLocalizationLink' => '1',
            'showPossibleLocalizationRecords' => '1',
            'showSynchronizationLink' => '1',
            'useSortable' => '1',
            'enabledControls' => array(
                'hide' => '0',
            ),
        ),
        'behaviour' => array(
            'disableMovingChildrenWithParent' => '1',
            'localizeChildrenAtParentLocalization' => '1',
        ),
    )
),

新的内容类型示例:
t3lib_div::loadTCA('tt_content');
$TCA['tt_content']['columns']['CType']['config']['items'][] = array(
    0 => '2 columns',
    1 => 'user_2cols',
    2 => '../fileadmin/user_2cols.gif',
);
t3lib_SpriteManager::addTcaTypeIcon('tt_content', 'user_2cols', '../fileadmin/user_2cols.gif');
$TCA['tt_content']['types']['user_2cols']['showitem'] = 'CType,header,--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.access,--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.visibility;visibility,--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.access;access,--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.appearance,--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.frames;frames,--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.textlayout;textlayout,--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.extended';

注意事项

  • 这是一个简单(有些粗糙)的解决方案,适用于您特定的情况。更好的解决方案将考虑在容器中动态设置列数的可能性。

  • 在处理左/右列元素时会有一些限制 - 您将无法轻松地将它们移动或复制到各种容器之间。


谢谢您的回答。我应该使用什么特定的 IRRE 设置吗?我已经尝试过 type=inline + foreign_table=tt_content。这显示了可以创建新元素的编辑器,但是它没有正确保存元素与 IRRE 的关系。(新元素已保存在数据库中,但在重新加载管理页面后没有显示在 IRRE 中) - Maurice
1
添加了一个IRRE示例。请记住,这些字段必须首先在数据库中创建为一些(足够长的)文本字段。将它们命名为user_2col_leftuser_2col_right之类的名称。这些字段将存储逗号分隔的内容UID列表。 - tmt
非常感谢。这对我也没有用,但是我目前正在使用插件来添加内容元素。希望我没有向您提出太多要求,您是否有一个定义新内容元素类型的extTables.php示例?(谷歌还没有帮助我) - Maurice
非常感谢您的回答和时间。我似乎无法让它工作。我正在尝试不同的实现方式,但是在后端没有任何内容元素显示出来。 - Maurice
欢迎。很抱歉我无法帮助您解决 TYPO3 6.x 的问题,因为我还没有使用过它。 - tmt
显示剩余2条评论

1
这是一场关于如何在不使用TemplaVoila的情况下制作FCEs的会议演示视频。很遗憾只有德语,但也许会有所帮助。

http://vimeo.com/29213790


0

尝试使用Fluid Powered TYPO3。使用新的预配置分发“site”

http://typo3.org/extensions/repository/view/site

来自Claus Due的屏幕录像

http://vimeo.com/110469200

别忘了添加 typo3conf/AdditionalConfiguration.php 我该如何安装它?


0
我建议您尝试使用“multicolumn”插件。它不像其他实现那样有依赖性(我几乎尝试了所有的FCE替代品),并且具有嵌套功能...总体而言,它与TYPO3相容性良好。最近已将其移植到TYPO3 v6上。我在多个网站上使用它,感到非常满意。(有一些错误,比如显示错误的“Lost elements”,但是在forge页面上有修复方法)
这里是TER文档的链接: http://typo3.org/extension-manuals/multicolumn/2.1.14/view/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接