TYPO3 Fluid:设置页脚和标题的最佳方法是什么?

时间:2013-10-29 16:57:53

标签: typoscript fluid typo3-6.1.x fedext

我使用fedext.net工具集处理TYPO3 6.1和Fluid模板。我希望有一个标题包含自动生成的内容,如菜单,还有一些管理员定义的内容,如版权。在TYPO3后端的某个常见位置定义它是有意义的。

目前我的页面布局如下:

{namespace v=Tx_Vhs_ViewHelpers}
<f:layout name="Page"/>
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
     xmlns:f="http://fedext.net/ns/fluid/ViewHelpers">

    <div class="grid-container">
        <f:cObject typoscriptObjectPath="lib.my_custom_header" />

        <f:render section="Content"/>

        <f:cObject typoscriptObjectPath="lib.my_custom_footer" />
    </div>
</div>

在Typoscript中,我正在执行以下操作来抓取并呈现标题内容:

lib.my_custom_header = COA
lib.my_custom_header {
    10 = CONTENT
    10 {
        table = tt_content
        select.where = colPos = 0
        select.languageField = sys_language_uid
        select.orderBy = sorting
        select.pidInList = {$config.my_site.header_page_id}
    }
    20 = CONTENT 
    20 {
        table = tt_content
        select.where = colPos = 1
        select.languageField = sys_language_uid
        select.orderBy = sorting
        select.pidInList = {$config.my_site.header_page_id}
    }
}

这是我的FooterPage流体模板

{namespace v=Tx_Vhs_ViewHelpers}
{namespace flux=Tx_Flux_ViewHelpers}
<f:layout name="Page"/>
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
     xmlns:flux="http://fedext.net/ns/flux/ViewHelpers"
     xmlns:f="http://fedext.net/ns/fluid/ViewHelpers">

    <f:section name="Configuration">

        <flux:flexform id="mypageheader" label="Page Header">

            <!-- Grid displayed in the page module -->
            <flux:flexform.grid>
                <flux:flexform.grid.row>
                    <flux:flexform.grid.column colPos="0" name="Header Logo" />
                    <flux:flexform.grid.column colPos="1" name="Header Links" />
                </flux:flexform.grid.row>
            </flux:flexform.grid>
        </flux:flexform>
    </f:section>

    <f:section name="Resources"></f:section>

    <f:section name="Content">
        <div class="grid-100 mobile-grid-100 grid-parent header">
            <v:page.content.render column="0"/>
            <v:page.content.render column="1"/>
        </div>
    </f:section>
</div>

页脚代码几乎相同(变量名除外)。 这种方法有效,页眉和页脚来自他们的页面,但如果对我来说感觉有点难看。因为我只能从页脚页面而不是整个页面呈现内容元素。因此,我无法为页眉/页脚数据指定一些自定义包装器。

或者我可以在TypoScript中定义该包装器,但这会在标题代码中传播标头模板代码。我也可以在页面布局文件中定义它(见上文),但在这种情况下,它仍将与其余的标题模板代码(我想放在页眉/页脚流体页面模板中)分开。

那么如何以最好的方式做到这一点?

P.S。在此示例项目http://bootstrap.typo3cms.demo.typo3.org/页脚配置为从一些共享后端元素,但我无法在TYPO3后端打开该元素,当我尝试打开它时,TYPO3显示空白屏幕。我在该项目的本地副本中也是如此。

1 个答案:

答案 0 :(得分:0)

尽管我自己找到了解决方案,但我仍然愿意接受更好的解决方案。随意为此帖添加新答案,投票将显示更好的方法。我目前的解决方案如下:

我将partial定义为渲染整个标题布局,如下所示:

<f:section name="Header">
    <div id="header" class="some">
        <div class="custom">
            <div class="wrappers">
                <f:cObject typoscriptObjectPath="lib.my_header_links" />
            </div>
        </div>
        <div class="more">
            <div class="wrappers">
                <f:cObject typoscriptObjectPath="lib.my_main_menu" />
            </div>
            <div class="one-more">
                <f:cObject typoscriptObjectPath="lib.my_header_logo" />
            </div>
        </div>
    </div>
</f:section>

然后我为隐藏的后端页面创建了特殊模板:

<f:section name="Configuration">
    <flux:flexform id="myPageHeader" label="My Page Header">

        <!-- Grid displayed in the page module -->
        <flux:flexform.grid>
            <flux:flexform.grid.row>
                <flux:flexform.grid.column colPos="0" name="Header Links" />
                <flux:flexform.grid.column colPos="1" name="Header Logo" />
            </flux:flexform.grid.row>
        </flux:flexform.grid>
    </flux:flexform>
</f:section>

<f:section name="Content">
    <f:render partial="Header" section="Header" />
</f:section>

并在后端创建了一个隐藏页面。在外观设置中将上面的模板分配给它。

然后在我的TypoScript中:

lib.my_header_links = CONTENT
lib.my_header_links {
    table = tt_content
    select.where = colPos = 0
    select.languageField = sys_language_uid
    select.orderBy = sorting
    select.pidInList = #here goes my hidden page id, which feeds the content for header
}
lib.my_header_logo < lib.my_header_links
lib.my_header_logo {
    select.where = colPos = 1
}
lib.my_main_menu = HMENU
lib.my_main_menu {
    # here goes main menu config
}

最后我调整了页面模板以呈现Header部分。该模板应该分配给每个正常页面,这将呈现网站内容:

<f:section name="Content">
    <f:render partial="Header" section="Header" />

    <div id="content">
        <v:page.content.render column="0" />
    </div>
</f:section>

现在我的后端用户可以在后端的标题页面上自定义标题内容,并且所有使用我的页面模板的页面都会填充此内容。该解决方案有点复杂,但为后端用户提供了高级灵活性。