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:
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:
COA_INT und nicht als COA aufgerufen, um den Cache zu vermeiden.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" />