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

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

Ü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">
}

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>  

lib.time_de = COA_INT
lib.time_de {
  10 = TEXT
  10 {
    value {
    data = date:U
    strftime = %A, %d.%m.%Y %H:%M:%S
    }
  wrap = | (D)
  }
}  
  

  
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 = | (GEO)
  }
}  

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 = | (GEO)
  }
}    

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.

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
}  

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
}  

Die News Extension gehört zu den beliebtesten Modulen, die man in eine TYPO3 Webseite einbinden kann.
Dieses Beispiel schildert die Konfiguration und Einbindung der News Extension in eine Webseite.

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

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

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 eines Suchformulars für die KE zur Darstellung in jeder Seite.
Es empfiehlt sich, die Einbindung über eine 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>
)

lib.aktion = RECORDS
lib.aktion {
  tables = tt_content
  source = 1407
}

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 eines Werbebanners

<div class="div_kasten">
  <f:cObject typoscriptObjectPath="lib.werbebanner" />
</div>

Einbindung der Sitemap

<f:cObject typoscriptObjectPath="lib.sitemap" />