Wie realisiert man eine Seitenvorlage in TYPO3 mit benutzerdefinierten Elementen für Abschnitte?

Question

Dies ist die Vorlage ich mit TYPO3 verwenden möchten: http://www.shegy.nazwa.pl/themeforest/hype/ios/solid/

Ich möchte dem Benutzer die Möglichkeit geben, Abschnitte hinzuzufügen oder zu entfernen, wie Sie auf den Screenshots sehen, so viele, wie sie wollen. Meine erste Idee, dies zu lösen, ist es, Inhaltselemente zu erstellen.

Ich denke tt_content ist nicht genug dafür. Es wäre notwendig, für jede Sektion eine eigene Tabelle anzulegen. Gibt es eine andere Art und Weise?

Es wäre sehr schön, dem Benutzer die Möglichkeit zu geben, Inhaltselemente innerhalb des "Abschnitts Inhaltselements" hinzuzufügen. Ist das möglich? Verschachtelte Inhaltselemente? So könnte der Nutzer auf dem zweiten Screenshot ein drittes Feature hinzufügen.

Answer 1

Sie können dies mit Gridelements erstellen. Überprüfen Sie den Link https://typo3.org/extensions/repository/view/gridelements

SCHAFFEN GRIDELEMENT:

1. die Erweiterung Gridelements installieren.
2. erstellen sysfolder wo mit der Liste auf gridelements sys Ordner gridelement Vorlagen
3. gehen zu speichern und auf + klicken (Erstellen neuer Rekord)
4. aus der Liste wählen Gridelements-> CE-Backend-Layout
5. Go Registerkarte zur Konfiguration und konfiguriere dein Gridelement (Grid-Konfigurationsfeld, rechts davon siehst du ein Icon - klicke darauf für die dynamische Konfiguration)
6. Wähle einen verwandten Namen für gridelement und speichere es.

ASSIGN GRIDELEMENT ZU EINER SEITE:

Go auf Seite, wo Sie gridelement Abschnitt

1. Klicken Sie auf "Neues Inhaltselement" Button auf der Seite, die Sie sich gehen setzen wollen zu Gridelements Registerkarte und wählen Sie gridelement.
2. Speichern Sie das Inhaltselement und fügen Sie Inhalte zu Ihren Feldern hinzu.

SCHAFFEN TEMPLATE FÜR GRIDELEMENT:

Vorlage typoscript Datei öffnen und fügen Sie Syntax für jeden 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> 
     ) 
     } 
    } 
} 

FLUID VORLAGEN

# 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 
     } 
    } 
} 

HTML-Vorlage erstellen für unsere gridelement:

<!-- gridtemplate.html --> 

<div class="{data.flexform_yourfield}"> 
    <!-- data.tx_gridelements_view_column_{column id} --> 
    {data.tx_gridelements_view_column_1->f:format.raw()} 
</div> 

DYNAMIC CUSTOMIZING MIT FLEXFORM:

Wir gehen zurück zum bac kend mit der Liste auf dem sysfolder "gridelements", wähle ein Konfigurationselement und gehe zur Konfigurations-Registerkarte und auf Flexform Konfigurationsdatei - field - füge deine flexform Datei hinzu.

Oberhalb der Flexform-Konfigurationsdatei wird die Flexform-Konfiguration -txtarea angezeigt. Ich empfehle, die Flexform-Konfiguration in der Datei zu erstellen, und nicht direkt das typo3-Backend.

FLEXFORM Konfigurationsbeispiel:

<!-- 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> 

gehen auf gridtemplate.html Code-Abschnitt und sehen, wie Flexform in Vorlagendatei behandelt wird.

Und das ist alles für Gridements.