O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Ein Unternehmen der Finanz Informatik
Aufbau und Struktur einer Template-Extension und Erstellung
eigener Content-Elemente...
Ein Unternehmen der Finanz InformatikEin Unternehmen der Finanz Informatik
AGENDA
Aufgabe einer Template-Extension
Struktu...
Ein Unternehmen der Finanz Informatik
Thorsten Griebenow,
TYPO3 Integratorfrontendentwickler
Star Finanz Software-Entwickl...
Ein Unternehmen der Finanz Informatik
Sinn und Zweck von Template Extensions
Die Template-Extension bestimmt das Layout
de...
Ein Unternehmen der Finanz Informatik
Die Ordner und ihr grundsätzlicher Inhalt
Configuration < TypoScript
Documentation.t...
Ein Unternehmen der Finanz Informatik
Die Herzstück-Datei: Die zentrale setup.txt/.ts
Hier wird in der gewünschten
Reihenf...
Ein Unternehmen der Finanz Informatik
Die TypoScript Datei
# Include the libraries
<INCLUDE_TYPOSCRIPT:
source="FILE:EXT:t...
Ein Unternehmen der Finanz Informatik
Bekanntgeben eines zusätzlichen Static Templates
TYPO3CMSCoreUtilityExtensionManagem...
Ein Unternehmen der Finanz Informatik
Backend - Layouts
BE Layouts sind Optionen für das Erscheinungsbild der Seite,
die i...
Ein Unternehmen der Finanz Informatik
Konfiguration der BE-Layouts in der Extension
# DEFAULT
{$plugin.tx_thisTemplateExte...
Ein Unternehmen der Finanz Informatik
Auszug aus der Constants.txt
plugin {
tx_thisTemplateExtension {
website {
config {
...
Ein Unternehmen der Finanz Informatik
Layouts, Templates, Partials ...
Im FLUIDTEMPLATE verknüpfen wir die BE-Layouts
mit ...
Ein Unternehmen der Finanz Informatik
Frontend-Layouts
Mit Hilfe von FE Layouts kann das gleiche
Content Element redaktion...
Ein Unternehmen der Finanz Informatik
Überschreiben von Extension-Templates
plugin.tx_faq.view {
partialRootPath >
partial...
Ein Unternehmen der Finanz Informatik
Ein Unternehmen der Finanz Informatik
Eigene Fluid-Styled-Content-Elemente erstellen
Neue Content-Elemente werden über Pag...
Ein Unternehmen der Finanz Informatik
Page-TS Config
mod.wizards.newContentElement.wizardItems.common {
elements {
sf_bgIm...
Ein Unternehmen der Finanz Informatik
ext_tables.php
// Add a flexform to the CType
// 1: sf_bgImgWText
TYPO3CMSCoreUtilit...
Ein Unternehmen der Finanz Informatik
TCA/Overrides/tt_content.php, Teil 1
// Add the CTypes "sf_bgImgWText, sf_twocolumns...
Ein Unternehmen der Finanz Informatik
TCA/Overrides/tt_contnet.php, Teil 2
// Define what fields to display
$GLOBALS['TCA'...
Ein Unternehmen der Finanz Informatik
Ein Unternehmen der Finanz Informatik
Die Backend-Ansicht
Ein Unternehmen der Finanz Informatik
Detaillierte Anleitung für eigene FSC
www.usetypo3.com/custom-fsc-element.html
Ein Unternehmen der Finanz Informatik
Strukturiertes SASS
Ähnlich wie in der Template-Extension gibt es hier
die eine Date...
Ein Unternehmen der Finanz Informatik
Je schneller, desto besser ...
• Komprimiere CSS im SASS Compiler:
Sass watch styles...
Ein Unternehmen der Finanz InformatikEin Unternehmen der Finanz Informatik
Für Aufmerksamkeit und Bühne. Und für Feedback:...
Próximos SlideShares
Carregando em…5
×

Struktur einer TYPO3 Layout Extension

1.478 visualizações

Publicada em

Eine kurze Übersicht zu technischen Aspekten einer TYPO3 Layout Extension. Session auf dem TYPO3Camp Berlin 2016.

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Struktur einer TYPO3 Layout Extension

  1. 1. Ein Unternehmen der Finanz Informatik Aufbau und Struktur einer Template-Extension und Erstellung eigener Content-Elemente TYPO3 TEMPLATING
  2. 2. 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
  3. 3. 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
  4. 4. 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.
  5. 5. 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 ...
  6. 6. 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
  7. 7. 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
  8. 8. Ein Unternehmen der Finanz Informatik Bekanntgeben eines zusätzlichen Static Templates TYPO3CMSCoreUtilityExtensionManagementUtility::addStaticF ile($_EXTKEY, 'Configuration/TypoScript/ContactConfix', 'Contact Form Configuration');
  9. 9. 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.
  10. 10. 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
  11. 11. 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 = } } }
  12. 12. 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" />
  13. 13. Ein Unternehmen der Finanz Informatik Frontend-Layouts Mit Hilfe von FE Layouts kann das gleiche Content Element redaktionell gesteuert ein anderes Aussehen bekommen.
  14. 14. 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/ } }
  15. 15. Ein Unternehmen der Finanz Informatik
  16. 16. 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.
  17. 17. 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, ...) }
  18. 18. Ein Unternehmen der Finanz Informatik ext_tables.php // Add a flexform to the CType // 1: sf_bgImgWText TYPO3CMSCoreUtilityExtensionManagementUtility::addPiFlexF ormValue( '', 'FILE:EXT:sf_apptemplate/Configuration/FlexForms/sf_bgImgWText .xml', 'sf_bgImgWText' );
  19. 19. Ein Unternehmen der Finanz Informatik TCA/Overrides/tt_content.php, Teil 1 // Add the CTypes "sf_bgImgWText, sf_twocolumns" TYPO3CMSCoreUtilityExtensionManagementUtility::addTcaSelectItem( 'tt_content', 'CType', [ 'LLL:EXT:sf_apptemplate/Resources/Private/Language/locallang_sfContentElements.xlf: wizard.title', 'sf_bgImgWText', 'content-image' ], 'textmedia', 'after' );
  20. 20. 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
  21. 21. Ein Unternehmen der Finanz Informatik
  22. 22. Ein Unternehmen der Finanz Informatik Die Backend-Ansicht
  23. 23. Ein Unternehmen der Finanz Informatik Detaillierte Anleitung für eigene FSC www.usetypo3.com/custom-fsc-element.html
  24. 24. 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.
  25. 25. 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
  26. 26. Ein Unternehmen der Finanz InformatikEin Unternehmen der Finanz Informatik Für Aufmerksamkeit und Bühne. Und für Feedback: thorsten.griebenow@starfinanz.de @thorgri, Xing, LinkedIn DANKE.

×