Typo3中的单页面布局

问题描述 投票：0回答：3

我已经有一个单页HTML模板，现在我想在里面显示Typo3的内容。如何只在一个页面上显示不同子页面的内容？

有什么例子吗？

谢谢你的帮助！

templates typo3 typoscript
3个回答
1
投票

如果你不喜欢Typoscript，你可以轻松地创建一个带有VHS扩展视图的onepager。

我用Typoscript做的唯一一件事是向pages添加Layouts。

TCEFORM.pages.layout {
    removeItems = 1,2,3
    altLabels.0 = None
    addItems {
        10 = Class 1
        20 = Class 2
        30 = Class 3
        40 = Class 4
    }
}

您可以使用此布局在onepager中创建不同的样式。

我在我的页面模板中使用了这样的东西：

<main>
    <v:page.menu pageUid="1" as="page">
        <f:for each="{page}" as="pageObject">
            <f:render partial="OnepagerContainer" section="Main" arguments="{pageObject:pageObject}"/>
        </f:for>
    </v:page.menu>
</main>

pageUid="1"是您的pagetree中的首页，子页面应该在onepager中呈现。

那里呈现的部分看起来像：

<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
      xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:section name="Main">

    <f:switch expression="{pageObject.layout}">
        <f:case value="10">
            <v:variable.set name="containerClass" value="container-class1"/>
        </f:case>
        <f:case value="20">
            <v:variable.set name="containerClass" value="container-class2"/>
        </f:case>
        .
        .
        .
    </f:switch>

    <div id="anchor-{pageObject.uid}" class="container{f:if(condition: containerClass, then:' {containerClass}')}">
        <div class="col-12">
            <v:content.render pageUid="{pageObject.uid}"/>
        </div>
    </div>
</f:section>

</html>

渲染后，看起来像：

<main>
    <div id="anchor-2" class="container container-tiles">
        <div class="col-12"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam</p></div>
    </div>
    <div id="anchor-3" class="container">
        <div class="col-12"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum</p></div>
    </div>
    <div id="anchor-4" class="container">
        <div class="col-12"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum</p></div>
    </div>
    <div id="anchor-5" class="container">
        <div class="col-12"></div>
    </div>
    <div id="anchor-6" class="container">
        <div class="col-12"></div>
    </div>
    <div id="anchor-7" class="container">
        <div class="col-12"></div>
    </div>
</main>

<div id="anchor-4" class="container"></div>中的ID是使用PID（anchor- [pid]）创建的。现在，您可以创建一个使用此锚点ID向下滚动的导航。

0
投票

最困难的方面可能是onepager的设置在TYPO3中并不常见。然而，TYPO3可能是实现您的请求的最佳系统之一，因为它可以很容易地从多个页面抓取和排序内容。

假设这样的设置：

page = PAGE
page {
    10 = CONTENT
    10 {
        table = tt_content
        select {
            where = colPos = 0
            pidInList = 10,11,12,13,14,15
            orderBy = crdate
        }
    }
}

像这样，你可以获得uid在10-15范围内的页面中的所有内容元素。使用命令orderBy和字段cr_date作为值进行排序。

我必须承认，这里的排序可能不是您需要的，并且所需的排序与您通过为所有页面添加单个排序字段所实现的不同。没有理由感到苦恼，只需逐步收集数据：

page = PAGE
page {
    10 = CONTENT
    10 {
        table = tt_content
        select {
            where = colPos = 0
            pidInList = 10
            orderBy = crdate
        }
    }

    20 = CONTENT
    20 {
        table = tt_content
        select {
            where = colPos = 0
            pidInList = 11
            orderBy = subheader
        }
    }

    30 = CONTENT
    30 {
        table = tt_content
        select {
            where = colPos = 0
            pidInList = 12
            orderBy = header
        }
    }
}

每个页面的记录上方按不同的字段排序，因此您可以看到可能存在更多变化。 如果这还不足以作为排序选项，那么仍然可以从数据库中检索单个记录的列表。我目前不是100％肯定，但我认为内容uid的排序决定了你得到的数据的排序：

page = PAGE
page {
    10 = CONTENT
    10 {
        table = tt_content
        select {
            where = colPos = 0
            uidInList = 33,34,355,556,789
        }
    }
}

所有要求都可以通过TypoScript解决，并且仍然可能包含更加困难的场景。 Here you find the reference for TypoScript.

获取数据后，通常会使用相同的设置呈现内容。但是可以使用不同的功能和使用不同的内容模板来呈现它。在this page上显示了一些非常基本的渲染选项，但如果你在TYPO3中深入挖掘，你可以单独渲染每个数据集。请注意，如果使用流体模板，渲染可能不再那么重要，因为可以在模板中完成许多工作。

-1
投票
temp.content = COA
temp.content {
    10 = CONTENT
    10 {
        table = pages
        select {
            pidInList.field = uid
            orderBy = sorting ASC
        }
        renderObj = COA
        renderObj {
            10 = CONTENT
            10 {
                table = tt_content
                select {
                    languageField = sys_language_uid
                    pidInList.field = uid
                    orderBy = sorting
                }
                stdWrap.wrap = |
            }
        }
    }
}

...但是根据你的问题我会说你开始使用TYPO3 ......

在这种情况下，我建议您使用以下扩展名：来自存储库的EXT:t3sbootstrap ...（这只是您的第一次挂断）

开箱即用它确实允许您的请求，您可以通过解析扩展程序慢慢弄清楚它是如何完成的！

大优势：

  1. 您可以立即启动并运行您的站点。
  2. 伟大的文件（如果你说德语...）Website
  3. 它是使用extbase进行编码的正确推荐方法

我知道它似乎是固执己见，但它确实是我能给你的最佳建议......（如果你的模板是bootstrap v3，那就去老版本，比如3.2.43（我更喜欢）

如果这不适合你，你将不得不建立一个自定义分布，这在TYPO3 docs中有很好的记录

古老但总是很好：PanadeEdu on Yoututbe（总是用德语）和the template上的特定电影

和另一个非常完整的系列：Wolfgang wagner on youtube，只需要你选择的主题（他也有一个视频课程出售）

据说TYPO3很有趣，一开始就让人头疼，但是你用它学到的东西会让你在编程的10％以上！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.