Макет одной страницы в Typo3 - PullRequest
0 голосов
/ 30 июня 2018

У меня уже есть шаблон Onepage HTML, и теперь я хочу показать содержимое из Typo3 внутри него. Как можно показать содержимое разных подстраниц только на одной странице?

Есть ли примеры?

Спасибо за вашу помощь!

Ответы [ 3 ]

0 голосов
/ 30 июня 2018

Самым сложным аспектом может быть то, что настройка для 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% в данный момент, но я предполагаю, что сортировка content-uids определяет сортировку данных, которые вы получаете:

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

Все требования могут быть решены с помощью TypoScript, и все еще возможно включить гораздо более сложные сценарии. Здесь вы найдете ссылку на TypoScript.

После получения данных содержимое обычно отображается всегда с одинаковыми настройками. Но можно было бы сделать это с разными функциями и с использованием разных контент-шаблонов. Некоторые очень элементарные параметры рендеринга показаны на этой странице , но если вы покопаетесь немного глубже в TYPO3, вы сможете отрисовывать каждый набор данных по отдельности. Имейте в виду, что рендеринг может быть не так важен, если вы работаете с шаблонами Fluid, так как в шаблонах можно многое сделать.

0 голосов
/ 01 июля 2018

Если вам не нравится Typoscript, вы можете легко создать одностраничный пейджер с помощниками просмотра расширения VHS.

Единственное, что я сделал с Typoscript, это добавление Layouts в pages.

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" - это верхняя страница вашего дерева страниц, подстраницы которой должны отображаться в одностраничной.

И частичное изображение там выглядит так:

<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> создается с помощью PID (anchor- [pid]). Теперь вы можете создать навигацию, которая использует эти идентификаторы привязки для прокрутки вниз.

0 голосов
/ 30 июня 2018
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. отличная документация (если вы говорите по-немецки ...) Веб-сайт
  3. это правильный рекомендуемый способ кодирования с помощью extbase

Я знаю, что это кажется самоуверенным, но это действительно лучшее предложение, которое я могу вам дать ... (если ваш шаблон - bootstrap v3, просто перейдите на более старые версии, например 3.2.43 (что я предпочитаю в любом случае))

Если это вас не устраивает, вам придется создать собственный дистрибутив, который хорошо документирован в TYPO3 документах

старый, но всегда хороший: PanadeEdu на Yoututbe (всегда на немецком языке) со специфическим фильмом на шаблон

и еще одна очень полная серия: Вольфганг Вагнер на YouTube , просто выберите предмет (у него тоже есть видео-курс на продажу)

Говорят, что TYPO3 - это весело, поначалу это головная боль, но то, что вы изучите с ее помощью, поможет вам в первых 10% программирования !!!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...