Struktur einer TYPO3 Layout Extension

of 26 /26
Ein Unternehmen der Finanz Informatik Aufbau und Struktur einer Template-Extension und Erstellung eigener Content-Elemente TYPO3 TEMPLATING

Embed Size (px)

Transcript of Struktur einer TYPO3 Layout Extension

Page 1: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Aufbau und Struktur einer Template-Extension und Erstellung

eigener Content-Elemente

TYPO3 TEMPLATING

Page 2: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz InformatikEin Unternehmen der Finanz Informatik

AGENDA

Aufgabe einer Template-Extension

Struktur einer (Template-)Extension

Extension-Templates überschreiben

BE-Layouts

Eigene Content-Elemente erstellen

Page 3: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Thorsten Griebenow,

TYPO3 Integratorfrontendentwickler

Star Finanz Software-Entwicklungs und Vertriebs GmbH

www.starfinanz.de

http://de.slideshare.net/StarFinanz

Eigene TYPO3-Projekte seit 2003

Festanstellung seit Mai 2008

Page 4: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Sinn und Zweck von Template Extensions

Die Template-Extension bestimmt das Layout

der gesamten Website incl. ihrer Extensions,

stellt Grundkonfigurationen zur Verfügung und ist

flexibel einsetzbar. Und sie ist versionierbar.

Page 5: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Die Ordner und ihr grundsätzlicher Inhalt

Configuration < TypoScript

Documentation.tmpl < ChangeLog/Index.rst

Resources

/Private < Templates & Language-Dateien

/Public < /Css, /Scripts, /Images ...

Page 6: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Die Herzstück-Datei: Die zentrale setup.txt/.ts

Hier wird in der gewünschten

Reihenfolge alles Setup der Website zentral

sortiert und eingebunden, das im Root der Instanz

zur Verfügung stehen soll. Sie befindet sich im

Ordner Configuration/TypoScript

Page 7: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Die TypoScript Datei

# Include the libraries

<INCLUDE_TYPOSCRIPT:

source="FILE:EXT:tx_thisTemplateExtension/Configuration/TypoScript/Libs.ts

">

# Include the navigation confix

<INCLUDE_TYPOSCRIPT:

source="FILE:EXT:tx_thisTemplateExtension/Configuration/TypoScript/Navs.ts

">

# Include the plugin confix

<INCLUDE_TYPOSCRIPT:

source=“FILE:EXT:tx_thisTemplateExtension/Configuration/TypoScript/PluginC

onfix.ts“>

# Main setup at last

<INCLUDE_TYPOSCRIPT:

source="FILE:EXT:tx_thisTemplateExtension/Configuration/TypoScript/MainSet

up.ts">

Page 8: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Bekanntgeben eines zusätzlichen Static Templates

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticF

ile($_EXTKEY, 'Configuration/TypoScript/ContactConfix',

'Contact Form Configuration');

Page 9: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Backend - Layouts

BE Layouts sind Optionen für das Erscheinungsbild der Seite,

die in den Seiteneigenschaften vom Redakteur

ausgewählt werden können. In der Template-Extension

verbinde ich sie mit HTML und Fluid, um die Frontend-Ausgabe

zu steuern.

Page 10: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Konfiguration der BE-Layouts in der Extension

# DEFAULT

{$plugin.tx_thisTemplateExtension.website.config.uidDefaultPageBELayout}= TEXT

{$plugin.tx_thisTemplateExtension.website.config.uidDefaultPageBELayout}.value =

EXT:{$templatePath.private}/Templates/Default.html

# HOME PAGE

{$plugin.tx_thisTemplateExtension.website.config.uidHomeBELayout}= TEXT

{$plugin.tx_thisTemplateExtension.website.config.uidHomeBELayout}.value =

EXT:{$templatePath.private}/Templates/Home.html

# EMPTY PAGE

{$plugin.tx_thisTemplateExtension.website.config.uidEmptyBELayout}= TEXT

{$plugin.tx_thisTemplateExtension.website.config.uidEmptyBELayout}.value =

EXT:{$templatePath.private}/Templates/Empty.html

Page 11: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Auszug aus der Constants.txt

plugin {

tx_thisTemplateExtension {

website {

config {

# cat=plugin.tx_thisTemplateExtension/website/config; type=int; label=PID where

backend layouts are stored

pidBELayout =

}

}

}

Page 12: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Layouts, Templates, Partials ...

Im FLUIDTEMPLATE verknüpfen wir die BE-Layouts

mit der Template-Struktur der Extension. In den Templates

weisen wir dem Inhalt das Layout zu. Die Partials sind

Bibliotheken.

<f:render partial="GoogleTagManager" />

<f:render partial="Header" />

<section>

<div class="container">

<!–TYPO3SEARCH_begin–>

<f:render section="Page" />

<!–TYPO3SEARCH_end–>

</div>

</section>

<f:render partial="Footer" />

Page 13: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Frontend-Layouts

Mit Hilfe von FE Layouts kann das gleiche

Content Element redaktionell gesteuert ein

anderes Aussehen bekommen.

Page 14: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Überschreiben von Extension-Templates

plugin.tx_faq.view {

partialRootPath >

partialRootPaths{

0 = EXT:faq/Resources/Private/Partials/

1 = EXT:tx_exampleExtension/Resources/Private/EXT/Faq/Partials/

}

layoutRootPath >

layoutRootPaths{

0 = EXT:faq/Resources/Private/Layouts/

1 = EXT:tx_exampleExtension/Resources/Private/EXT/Faq/Layouts/

}

templateRootPath >

templateRootPaths{

0 = EXT:faq/Resources/Private/Templates/

1 = EXT:tx_exampleExtension/Resources/Private/EXT/Faq/Templates/

}

}

Page 15: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Page 16: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Eigene Fluid-Styled-Content-Elemente erstellen

Neue Content-Elemente werden über PageTS in das

Backend integriert, in der ext_tables.php gesteuert,

in der Configuration/TCA/Overrides/tt_content.php für das

Backend aufbereitet und dann per TS

konfiguriert.

Page 17: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Page-TS Config

mod.wizards.newContentElement.wizardItems.common {

elements {

sf_bgImgWText {

iconIdentifier = content-textpic

title =

LLL:EXT:sf_apptemplate/Resources/Private/Language/locallang_sfContentElements.xlf:w

izard.title

description =

LLL:EXT:sf_apptemplate/Resources/Private/Language/locallang_sfContentElements.xlf:w

izard.description

tt_content_defValues {

CType = sf_bgImgWText

}

}

show := addToList(sf_bgImgWText, ...)

}

Page 18: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

ext_tables.php

// Add a flexform to the CType

// 1: sf_bgImgWText

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexF

ormValue(

'',

'FILE:EXT:sf_apptemplate/Configuration/FlexForms/sf_bgImgWText

.xml',

'sf_bgImgWText'

);

Page 19: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

TCA/Overrides/tt_content.php, Teil 1

// Add the CTypes "sf_bgImgWText, sf_twocolumns"

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(

'tt_content',

'CType',

[

'LLL:EXT:sf_apptemplate/Resources/Private/Language/locallang_sfContentElements.xlf:

wizard.title',

'sf_bgImgWText',

'content-image'

],

'textmedia',

'after'

);

Page 20: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

TCA/Overrides/tt_contnet.php, Teil 2

// Define what fields to display

$GLOBALS['TCA']['tt_content']['types']['sf_bgImgWText'] = [

'showitem‘ => '

--palette--;' . $frontendLanguageFilePrefix . 'palette.general;general,

--palette--;' . $frontendLanguageFilePrefix . 'palette.header;header,rowDescription,

pi_flexform, (...)

-> https://docs.typo3.org/typo3cms/TCAReference/ExtendingTca/Examples/Index.html

Page 21: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Page 22: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Die Backend-Ansicht

Page 23: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Detaillierte Anleitung für eigene FSC

www.usetypo3.com/custom-fsc-element.html

Page 24: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Strukturiertes SASS

Ähnlich wie in der Template-Extension gibt es hier

die eine Datei: styles.scss. Diese bündelt alles

Wichtige: Variablen, Mixins und die

responsiven Erweiterungsdateien

in der richtigen Reihenfolge.

Page 25: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz Informatik

Je schneller, desto besser ...

• Komprimiere CSS im SASS Compiler:

Sass watch styles.scss:styles.css --style compressed

• TYPO3

config.concatenateCss = 1

config.concatenateJs = 1

• Nutze Sprites, icon-fonts

Page 26: Struktur einer TYPO3 Layout Extension

Ein Unternehmen der Finanz InformatikEin Unternehmen der Finanz Informatik

Für Aufmerksamkeit und Bühne. Und für Feedback:

[email protected]

@thorgri, Xing, LinkedIn

DANKE.