≪ View Page

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


Vorhergehende Überarbeitung
—typoscript_libraries [2024.01.09 16:53] (aktuell) – thomweb
Zeile 1: Zeile 1:
 +====== Typoscript Libraries ======
  
 +
 +
 +===== Verzeichnisstruktur =====
 +
 +
 +Aufbau des Verzeichnisses in der Provider Extension der Agenturwebseite und der Georgienseite (Auszug).
 +
 +  └── TypoScript
 +      └── lib
 +         ├── footer
 +         |   └── lib.copyright.ts
 +         ├── navigation
 +         |   ├── lib.navigation_banner.ts
 +         |   ├── lib.navigation_boot.ts        
 +         |   ├── lib.navigation_bread.ts
 +         |   └── lib.navigation_footer.ts                        
 +         ├── slider        
 +         |   ├── lib.slider1.ts
 +         |   ├── lib.slider2.ts
 +         |   └── lib.slider3.ts
 +         ├── time
 +         |   ├── lib.time.ts
 +         |   ├── lib.time_sommer.ts         
 +         |   └── lib.time_winter.ts
 +         ├── lib.ibkblog.ts
 +         ├── lib.news.ts         
 +         ├── lib.werbebanner.ts
 +         ├── lib.sitemap.ts
 +         └── lib.ke_search.ts
 +
 +===== Footer =====
 +
 +
 +==== Copyright ====
 +
 +Diese Funktion berechnet die aktuelle Jahreszahl für den Copyright Eintrag im Footer der Agenturseite.
 +
 +  lib.copyright = COA_INT
 +  lib.copyright {
 +    10 = TEXT
 +    10 {
 +      data = date:U
 +      strftime = %Y
 +      wrap = © 2015 - | Internetagentur Irma Berscheid-Kimeridze
 +    }
 +  }
 +  
 +  
 +===== Slider =====
 +
 +
 +
 +==== Slider Einbindung ====
 +
 +Über diese Library werden die Slider im Kopfbereich der Seite eingebunden, die in jeder Seite erscheinen.
 +\\ Die Funktion zur UL generiert die Liste, mit Hilfe derer der SlickSlider die Elemente anspricht. Das erste Element soll beim Aufruf der Seite erst dargestellt werden, wenn die gesamte Webseite incl. JavaScript geladen ist und der JS Code ausgeführt wird. Daher wird der erste Slider auf ''style="display: none;"'' gesetzt. Der SlickSlider schaltet den Slider dann sichtbar.
 +
 +  lib.slider = COA
 +  lib.slider {
 +    
 +    10 = COA
 +    10.20 = TEXT
 +    10.20.wrap = <ul style="display: none;"><li><a href="#slide1"></a></li><li><a href="#slide2"></a></li>[...]</ul>  
 +    
 +    <INCLUDE_TYPOSCRIPT: source="FILE:EXT:ibkprovider/Configuration/TypoScript/lib/slider/lib.slider1.ts">
 +    <INCLUDE_TYPOSCRIPT: source="FILE:EXT:ibkprovider/Configuration/TypoScript/lib/slider/lib.slider2.ts">
 +    <INCLUDE_TYPOSCRIPT: source="FILE:EXT:ibkprovider/Configuration/TypoScript/lib/slider/lib.slider3.ts">
 +    <INCLUDE_TYPOSCRIPT: source="FILE:EXT:ibkprovider/Configuration/TypoScript/lib/slider/lib.slider4.ts">
 +    <INCLUDE_TYPOSCRIPT: source="FILE:EXT:ibkprovider/Configuration/TypoScript/lib/slider/lib.slider5.ts">
 +  }
 +
 +==== Slider 1 ====
 +
 +
 +  10.100 = TEXT
 +  10.100.wrap = <div id="slide1">
 +  
 +  10.140 = IMAGE
 +  10.140.file = fileadmin/img/slider/fernsehturm-840x300-typo3-html-css-wordpress-seo-frontend.jpg
 +  
 +  10.140 {
 +    altText >
 +    altText = TEXT
 +    altText.data = field:description // title
 +  }
 +  10.140 {
 +    titleText >
 +    titleText = TEXT
 +    titleText.data = field:description // title
 +  }
 +    
 +  10.140.wrap = |
 +    
 +  10.150 = TEXT
 +  10.150.wrap = </div>  
 +  
 +  
 +===== Time =====
 +
 +
 +==== Aktuelle Zeit ====
 +  
 +  lib.time_de = COA_INT
 +  lib.time_de {
 +    10 = TEXT
 +    10 {
 +      value {
 +      data = date:U
 +      strftime = %A, %d.%m.%Y %H:%M:%S
 +      }
 +    wrap = |&nbsp;(D)
 +    }
 +  }  
 +    
 +==== Zeitunterschied DE-GEO Sommerzeit ====
 +    
 +  lib.time_geo_sommer = COA_INT
 +  lib.time_geo_sommer {
 +    10 = TEXT
 +    10 {
 +      value {
 +      current = 1
 +      setCurrent.data = date:U
 +      setCurrent.wrap = | + 7200
 +      prioriCalc = 1
 +      strftime = %A, %d.%m.%Y %H:%M:%S
 +      }
 +    wrap = |&nbsp;(GEO)
 +    }
 +  }  
 +  
 +==== Zeitunterschied DE-GEO Winter ====
 +  
 +  lib.time_geo_winter = COA_INT
 +  lib.time_geo_winter {
 +    10 = TEXT
 +    10 {
 +      value {
 +      current = 1
 +      setCurrent.data = date:U
 +      setCurrent.wrap = | + 10800
 +      prioriCalc = 1
 +      strftime = %A, %d.%m.%Y %H:%M:%S
 +      }
 +    wrap = |&nbsp;(GEO)
 +    }
 +  }    
 +===== IBK Blog Slider =====
 +
 +Diese Library fragt die neuesten 5 Beiträge aus dem Blog ab. Diese werden als HTML gerendert und über das Page Template als User Funktion dargestellt. Ein umgebender SlickSlider sorgt für die dynamische Steuerung des Sliders. Das TyopScript für eine User Function hat sich mit der Version 12 von TYPO3 geändert.
 +
 +==== TypoScript Code User Function ab TYPO3 12.4 ====
 +
 +In der Version 12 von TYPO3 sind die switchableControllerActions weggefallen, da sich diese über die Konfiguration der Plugins steuern lassen. Der Code für die Einbindung eines Plugins hat sich als nun vereinfacht:
 +
 +  lib.ibkblog = USER
 +  lib.ibkblog {
 +    userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
 +    extensionName = Ibkblog
 +    pluginName = Pagelist
 +    vendorName = Ibk
 +  
 +    settings < plugin.tx_ibkblog.settings
 +    persistence < plugin.tx_ibkblog.persistence
 +    view < plugin.tx_ibkblog.view
 +  }  
 +
 +
 +==== TypoScript Code User Function bis TYPO3 11.5 ====
 +
 +
 +  lib.ibkblog = USER
 +  lib.ibkblog {
 +    userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
 +    extensionName = Ibkblog
 +    pluginName = Pagelist
 +    vendorName = Ibk
 +    switchableControllerActions {
 +      Blog {
 +        1 = page
 +        2 = show
 +      }
 +    }
 +  
 +    settings < plugin.tx_ibkblog.settings
 +    persistence < plugin.tx_ibkblog.persistence
 +    view < plugin.tx_ibkblog.view
 +  }  
 +  
 +  
 +===== News Extension in jede Seite einbinden =====
 +
 +Die News Extension gehört zu den beliebtesten Modulen, die man in eine TYPO3 Webseite einbinden kann.
 +\\ **[[beispiel_news_extension|Dieses Beispiel]]** schildert die Konfiguration und Einbindung der News Extension in eine Webseite.
 +===== Sitemap =====
 +
 +Diese Library generiert eine Sitemap durch den Aufbau einer Navigation. 
 +
 +**Besonderheiten:**
 +  * Die Ebenen der Navigation werden geschachtelt eingerückt
 +  * Zu jedem Link gibt es innerhalb eines Span einen erklärenden Text, der beim Überfahren des Links mit der Mouse sichtbar wird
 +  * Die SEO-Texte zu den Links kommen aus den META-Angaben zur jeweiligen Seite und sind damit im TYPO3 Backend mit den Standard Tools pflegbar.
 +\\ Weitere Informationen zum Aufbau einer Navigation mit TypoScript finden sich **[[typoscript_navigation|hier]]**. 
 +
 +  lib.sitemap = COA
 +  lib.sitemap {
 +    20 = HMENU
 +    20.entryLevel = 0
 +    20 {
 +      wrap = <div class="row"><div class="col-md-12 col-sm-12"> | </div></div>
 +      1 = TMENU
 +      1 {
 +        NO = 1
 +        expAll = 1
 +        collapse = 0
 +        
 +        NO.ATagParams = class="sitemap"
 +        NO.stdWrap.title = IBK
 +        NO.stdWrap {
 +          replacement {
 +            10 {
 +              search = Nachrichten
 +              replace = News
 +            }
 +          }
 +          prepend = TEXT
 +          prepend {
 +            field = description // subtitle // title
 +            wrap = <span>|</span>
 +          }
 +        }
 +        NO.allWrap = <div class="div_sitemap sitemap_ebene_1">|</div> 
 +      }
 +      2 < .1
 +      2 {
 +        NO.allWrap = <div class="div_sitemap sitemap_ebene_2">|</div>
 +      }
 +      3 < .1
 +      3 {
 +        NO.allWrap = <div class="div_sitemap sitemap_ebene_3">|</div>
 +      }
 +    }
 +  }  
 +  
 +
 +
 +
 +===== Banner mit Slider =====
 +
 +Dieses Banner wird in jeder Seite der Georgienseite eingebunden. 
 +Besonderheiten:
 +  * Die Funktion wird als ''COA_INT'' und nicht als ''COA'' aufgerufen, um den Cache zu vermeiden.
 +  * Per Zufallszahl wird ein Bild aus einem Verzeichnis ausgewählt und dargestellt
 +
 +  lib.werbebanner = COA_INT
 +  lib.werbebanner {
 +      
 +    ## Umschliessendes <DIV> Anfang
 +    10 = TEXT
 +    10.wrap = <div class="georgisch-banner-div">
 +      
 +    ## Werbebanner 1
 +    100 = TEXT
 +    100.wrap = <div>
 +      
 +    110 = TEXT
 +    110.wrap (
 +      <div class="div_georgisch">
 +      <a class="text_link_small" 
 +        href="http://www.georgisch.com" target="_blank" 
 +        title="Irma Berscheid-Kimeridze" 
 +        alt="Irma Berscheid-Kimeridze">
 +      <strong>Irma Berscheid-Kimeridze</strong>
 +      </a>
 +      </div>
 +    )
 +    
 +    120 = IMAGE
 +    120 {
 +      file.import {
 +        filelist = fileadmin/img/georgisch/|jpg,png,gif|ext|r|1
 +        listNum = rand
 +      }
 +      altText = Irma Berscheid-Kimeridze
 +      border = 0
 +      titleText = Irma Berscheid-Kimeridze
 +      params = class="georgisch-img"
 +      wrap = <div><a href="http://www.georgisch.com" target="_blank">|</a></div>
 +    }
 +    
 +    130 = TEXT
 +    130.wrap (
 +      <div class="div_georgisch">
 +      <a class="text_link_small" 
 +        href="http://www.georgisch.com" 
 +        target="_blank" 
 +        title="Irma Berscheid-Kimeridze" 
 +        alt="Irma Berscheid-Kimeridze">
 +        Ermächtigte Übersetzerin und allgemein beeidigte Dolmetscherin</a>
 +      </div>
 +    )
 +    
 +    140 = TEXT
 +    140.wrap = </div>
 +      
 +    ## Umschliessendes <DIV> Ende
 +    1000 = TEXT
 +    1000.wrap = </div>
 +  }
 +
 +
 +===== Slider im Reisebericht =====
 +
 +
 +  10.20 = TEXT
 +  10.20.wrap = <div id="reise02" class="div_reise_slider_content">
 +  
 +  10.21 = IMAGE
 +  10.21.file = fileadmin/img/reise/reiseberichte/2001/200/Tbilissi-02-200x200.jpg
 +  10.21.params = class="img_slider"
 +  10.21.altText = Rustaweli-Prospekt in Tbilissi
 +  10.21.titleText = Rustaweli-Prospekt in Tbilissi
 +  10.21.wrap = |
 +  10.21.stdWrap.typolink.parameter = 98
 +  
 +  10.22 = TEXT
 +  10.22.value = Teil 2: Hochzeitsfieber
 +  10.22.wrap = <strong>|</strong>
 +  
 +  10.23 = TEXT
 +  10.23.value = Hier ist der erste Satz des Reiseberichts oben in der Seite
 +  10.23.wrap = <br/><br/>|<br/><br/>
 +  
 +  10.24 = TEXT
 +  10.24 {
 +    value = Zum Reisebericht...
 +    stdWrap.typolink {
 +      parameter = 98 _self strong  
 +      title = Klicken Sie hier zum Reisebericht
 +    }
 +    wrap = |</div>
 +  }
 +===== Einbindung KE Search =====
 +
 +Einbindung eines Suchformulars für die KE zur Darstellung in jeder Seite.
 +\\ Es empfiehlt sich, die Einbindung über eine [[globale_variablen|Global Abfrage]] für die Zielseite der Suche zu deaktivieren.
 +\\ Die ID der Zielseite kann auch über die Settings in Contstants.ts und Setup.ts übergeben werden.
 +
 +  lib.ke_search_boot = TEXT
 +  lib.ke_search_boot.value (
 +    <form method="get" id="form_kesearch_pi1" name="form_kesearch_pi1"  action="/index.php?id=44">    
 +      <input type="hidden" name="id" value="44" />
 +      <div class="ke-div-input">
 +        <input type="text" 
 +          id="ke_search_sword_box" 
 +          name="tx_kesearch_pi1[sword]" 
 +          value="" 
 +          placeholder="Suchbegriff" />
 +      </div>
 +      <div class="ke-div-button">
 +        <input class="button button_search" type="submit" value="Finden" />
 +      </div>
 +    </form>
 +  )
 +  
 +===== Einzelnes Inhaltselement einbinden =====
 +
 +
 +  lib.aktion = RECORDS
 +  lib.aktion {
 +    tables = tt_content
 +    source = 1407
 +  }
 +
 +===== CSS / JS ergänzen oder überschreiben =====
 +
 +
 +  page = PAGE
 +  page {
 +    includeCSS {
 +      css12 = EXT:ibkprovider/Resources/Public/css/slick/slick/slick.css
 +      css12.media = all
 +     
 +      css13 = EXT:ibkprovider/Resources/Public/css/slick/slick/slick-theme-geo.css
 +      css13.media = all
 +    }
 +    
 +    includeJSFooterlibs {
 +      a16 = EXT:ibkprovider/Resources/Public/css/slick/slick/slick.min.js  
 +    }
 +  }
 +===== Einbindung einer Libary im Page Template =====  
 +
 +Einbindung eines Werbebanners
 +
 +  <div class="div_kasten">
 +    <f:cObject typoscriptObjectPath="lib.werbebanner" />
 +  </div>
 +
 +Einbindung der Sitemap
 +  
 +  <f:cObject typoscriptObjectPath="lib.sitemap" />