Translations
Info
All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

Da:Ts45min

From TYPO3Wiki
(Redirected from Da:ts45min)
Jump to: navigation, search
Extension detail information
doc_tut_ts45
Lær den fundamentale del af TypoScript på bare 45 minutter.
documentation state stable document state list
licence OCL
forgeproject
mailinglist
usergroups list of usergroups forAdmins, forBeginners, forIntermediates
author(s) Official Documentation
TER category doc
dependency

<< Back to Extension manuals page

[edit]


TypoScript på 45 minutter

Extension Key: doc_tut_ts45

Language: en

Keywords: forAdmins, forBeginners, forIntermediates

Copyright 2000-2010, Documentation Team, <documentation@typo3.org>

notice - Open Content License

This document is published under the Open Content License

The content is related to TYPO3 - a GNU/GPL CMS/Framework available from typo3.org


Officiel dokumentation

Dette dokument ses som en del af den officielle TYPO3 dokumentation. Det er godkendt af TYPO3 Dokumentations Team og efterfølgende en review process. Læserne kan forvente at informationen i dokumentet er korrekt - reporter venligst til Dokumentations Teamet hvis der skulle være uoverensstemmelse (documentation@typo3.org). Officiel dokumenter holdes opdateret så godt som muligt at Dokumentations Teamet.

Tutorial

Dette dokument er en vejledning. Vejledninger er designet specifikt til at give en nybegynder en step-by-step introduktion vedrørende en bestemt opgave fra A til Z. For at understøtte effektiv læring, benytter vejledningerne illustrationer omkring det emne de omhandler. Ud over dette giver vejledningen en guide over hvordan de typiske faldgrupper undgås og fremhæver nøglekoncepterne, som fremadrettet bør huskes.

Introduktion

Om dette dokument

Dette dokument har til hensigt at give en kort introduktion til hvordan TypoScript virker og hvad TypoScript i virkeligheden er. Det hjælper dig til at forstå koden i stedet for blot at kopiere og sætte ind.

Feedback

For generelle spørgsmål omkring dokumentationen kan du skrive til documentation@typo3.org

Hvis du finder fejl i manualen, rapporter venligst fejlen i manualens bug tracking: https://forge.typo3.org/projects/typo3cms-doc-typoscript-45-minutes/issues

Fastholdelse af kvaliteten i dokumentationen er hårdt arbejde, og Dokumentations Teamet er altid på udkig efter nye frivillige medhjælpere. Hvis du har lyst til at hjælpe, så registrer dig på dokumentations mailinglisten (typo3.projects.documentation på lists.typo3.org).

TypoScript - et hurtigt overblik

Introduktion

Målet med denne introduktion er ikke oplevelsen af "endelig virker det", men mere "endelig forstår jeg det". Med andre ord, denne introduktion er til for at give dig en forståelse for hvordan TypoScript virker. Normalt tilføjer man arbitrære egenskaber på objekterne; men for dem som kender TypoScript er det klart at det ikke virker sådan i praksis. Det sparer meget tid, hvis man ved hvad der sker. På den måde bliver det nemmere at fejlsøge, og derved tidsbesparende når man lærer TypoScript.

Målet med denne introduktion er altså ikke at have en avanceret TYPO3-installation efterfølgende, men at tilbyde en forklaring på hvordan TypoScript virker.

Backend Konfiguration

TypoScript har indflydelse mange forskellige steder. Hvis TypoScript bliver brugt i "Bruger"/"Brugergruppe" TypoScript-feltet eller på "Side Egenskaber" TypoScript-feltet, vil det ændre udseendet og udformningen af formularerne i backenden.

Frontend-visningen bliver defineret af TypoScript i en TypoScript-skabelon. Dette dokument omhandler kun frontend-visningen og gør kun brug af generel TypoScript.

Forudsætninger

Vi antager at læseren har et kørende TYPO3 system, og at læseren kender basisfunktionerne. Forskellen mellem sider og indholdselementer vil ikke blive uddybet her. Vi antager også at du ved at en sides indhold er sammensat af en række forskellige indholdselementer. For at være sikre, kan vi fortælle at disse indholdselementer er gemt i tabellen tt_content. Databasefeltet "CType" definerer hvilke indholdselementer vi har. Afhængig af "CType" bliver en bestemt skabelon indlæst.

For at få en bedre forståelse af TYPO3 og TypoScript, er et kig på databasen en hjælp. Extensionen phpmyadmin tillader adgang til databasen fra backenden på en simpel og komfortabel måde, og giver et overblik over relationerne mellem "pages", "tt_content" og backenden. PID (Page ID) står for ID'et på en side og et UID (Unique ID) står for et unikt elements id.

Hvorfor TypoScript?

Strengt taget er TypoScript et konfigurationssprog. Vi kan ikke programmere med det, men vi kan konfigurere mange ting med det på en meget forståelig måde. Med TypoScript kan vi definere visningen af en hjemmeside. Vi definerer vores navigation, noget indhold som står fast, men også hvordan individuelle indholdselementer vil bliver vist på en side.

TYPO3 er et Content Management System som har til hensigt at separere indhold og design. TypoScript er limen som binder det sammen igen. Indholdet fra databasen bliver læst og forberedt af TypoScript og vist i frontenden.

For at vise en hjemmeside, behøver vi kun at definere hvilket indhold og hvordan indholdet skal vises.

  • "Hvilket" er kontrolleret af backenden - det er her du opretter siderne og indholdet.
  • "Hvordan" er kontrolleret af TypoScript.
Med TypoScript kan vi definere hvordan individuelle indholdselementer skal vises i frontenden, hvis for eksempel et
HTML tag omkranser elementet eller hvis en overskrift <h1> vil være integreret.

TypoScript som definerer hvordan siderne bliver vist er oftest placeret i en "main"-skabelon. Heri er "Root level"-feltet også afkrydset.

Rootlevel.png

Når frontenden skal vise en side, søger TYPO3 langs sidetræet for at finde en "main"-skabelon. Normalt er der flere skabeloner end "main"-skabelonen. Hvordan disse arbejder sammen kan ses i "TypoScript Template Analyzer" under "Skabelon"-modulet. Nu antager vi at vi kun har en skabelon.

TypoScript syntaksen er meget let. På venstre side er objekter og deres egenskaber defineret som vil få visse værdier tildelt på højre side. Objekter og egenskaber (hvilket også kan indholde objekter) bliver adskilt af et punktum ".".

Terminologien skabelon

Terminologien skabelon har dobbelt betydning i TYPO3. På den ene side, er der HTML skabeloner som fungerer som skelet struktur hvori indholdet bliver vist. På den anden side, er der TypoScript skabeloner.

Typiske fejl som kan laves med TypoScript kan se sådan ud.

No template found.png

"No template found": Denne besked kommer hvis der ikke findes en skabelon som har "Root level" feltet krydset af i sidetræet.

The page is not configured.png

"The page is not configured": Denne advarsel kommer hvis "Root level" feltet er aktiveret men der ikke findes et "PAGE" objekt.

Følgende kode er nok til at omgå denne advarsel:

TS TypoScript:
page = PAGE
page.10 = TEXT
page.10.value = Hej Verden

TypoScript er blot et array

TypoScript er blot gemt i et intern PHP array. Det bliver brugt og evalueret af forskellige klasser afhængig af objekt typen.

TS TypoScript:
page = PAGE
page.10 = TEXT
page.10.value = Hej Verden!
page.10.wrap = <h2>|</h2>

Vil blive konverteret til følgende PHP array

PHP script:
$data['page'] = 'PAGE';
$data['page.'][10] = 'TEXT';
$data['page.']['10.']['value'] = 'Hej Verden!';
$data['page.']['10.']['wrap'] = '<h2>|</h2>';

Ved evaluering vil objektet "PAGE" blive oprettet først og parametrene $data['page.'] blive tildelt. Objektet "PAGE" vil derefter søge efter alle egenskaber som definere det. I dette tilfælde vil den kun finde en numerisk start "10" som skal evalueres. Et nyt objekt "TEXT" laves med parametrene $data['page.']['10.']. Objektet "TEXT" kender kun parameteren "value", så indholdet af "value" indsættes. Alle øvrige parametre vil blive sendt videre til stdWrap. (Det er sådan at "TEXT" er implementeret, hvilket bliver uddybet omkring stdWrap senere). Her er egenskaben 'wrap' kendt og teksten "Hello world" vil blive indsat istedet for pipen (|) imellem <h2> og </h2> og vist.

Forhold herimellem er vigtigt at forstår for at forstå TypoScripts adfærd i forskellige situationer. Hvis foreksempel TypoScript er udvidet med følgende linie:

TS TypoScript:
page.10.myFunction = Magi!

vil indgangen bliver taget med in i PHP array'et:

PHP script:
$data['page.']['10.']['myFunction'] = 'Magi!';

Men hverken objektet TEXT eller stdWrap funktionen kender egenskaben "myFunction". Derfor vil denne indgang ikke har nogle effekt.

Det bliver ikke udført nogle kode fejl tjek. Det skal især huskes ved fejlsøgning.

Første skridt

Ved oprettelse af en "main" skabelon bliver basis visningen defineret.

TypoScript indeholder udelukkende objekter som har specifikke egenskaber. Nogle af disse egenskaber kan acceptere andre objekter, andre henviser til bestemte funktioner eller definerer adfærden af objektet.

Objektet PAGE sørger for renderingen.

TS TypoScript:
 # Objektet "page" defineres som et "PAGE" objekt
 page = PAGE

 # Det har egenskaben "typeNum"
 page.typeNum = 0

 # og et objekt "10" af typen "TEXT"
 page.10 = TEXT

 # Objektet "10" har en egenskab ved navn "value".
 page.10.value = Hej Verden!

PAGE objektet tilbyder, udover talrige egenskaber, en uendelig række af objekter som kun kan identifiseres på deres nummer (et såkaldt indholds array). Det betyder at de kun indeholder numre og de vil blive sorteret i henhold til det nummer når de renderes. Først renderes objektet med det laveste nummer, og til sidst bliver objektet med det højeste nummer renderet. Rækkefølgen af TypoScript objekter, når du skriver din TypoScript kode, er irrelevant.

TS TypoScript:
 page.30 = TEXT
 page.30.value = Det her er sidst

 # Renderingen vil først vise 10, så 20 og 30. Et objekt med nummer 25 vil blive vist imellem 20 & 30  
 page.20 = TEXT
 page.20.value = Jeg er i midten

 # Her er det første objekt
 page.10 = TEXT
 page.10.value = Hej Verden!

 # Her opretter vi et andet objekt til brug ved print
 print = PAGE
 print.typeNum = 98
 print.10 = TEXT
 print.10.value = Her er det som en printer vil se

Enhver objekt (.10, .20 osv.) er gemt i et multidimensionel PHP array. Alle objekter og alle egenskaber er derfor unikke. Vi kan definere uendeligt antal "PAGE" objekter, men typeNum skal være unikt. For ethvert "typeNum" kan der kun være et "PAGE" objekt.

I eksemplet for

TS TypoScript:
 print = PAGE
 print.typeNum = 98

er en anden visning oprettet. Ved at bruge "typeNum" kan du definere forskellige måder at vise indhold på. Typisk vil "typeNum" 0 bruges til den almindelig HTML visninge. På den måde vil et hjemmeside besøg have adressen index.php?id=1 og index.php?id=1&type=98 for det print eksempel vi oprettede. Variablen "type" bestemmer hvilket "PAGE" objekt der vises. Det giver dig mulighed for at have print, HTML og tilmed PDF visninge i samme konfiguration!

Ved at gøre sådan kan din konfiguration kopieres og genbruges for hver side type, med ganske få ændringer. F.eks. kan en sides indhold vises på print siden, men ikke menuen

Note: Det vi viser er disse eksempler er ren tekst. Arbejder du med formater som WML bør den sendte HTTP Header ændres. Det emne gennemgåes ikke i dette dokument

Det forrige eksempel ville se således i et PHP array

PHP script:
 $TypoScript['page'] = 'PAGE';
 $TypoScript['page .']['typeNum'] = 0;
 $TypoScript['page .']['10'] = 'TEXT';
 $TypoScript['page .']['10.']['value'] = 'Hej verden!';
 $TypoScript['page .']['20'] = 'TEXT';
 $TypoScript['page .']['20.']['value'] = 'Jeg er i midten';
 $TypoScript['page .']['30'] = 'TEXT';
 $TypoScript['page .']['30.']['value'] = 'Det her er sidst';

Mellemrum i starten og slutningen bliver fjernet af TYPO3 (trim()).

Med lighedstegnet, "=" tildeler vi en værdi

TS TypoScript:
 # = en værdi er sat
 test = TEXT
 test.value = Holla
 
 # < Objekt bliver kopieret 
 # page.10 returnerer "Holla"
 page.10 < test

 # Det kopieret objekt ændres.
 # Ændringen har ingen inflydelse på page.10
 test.value = Hej verden

 # =< opretter en reference til et objekt (objektet er "sammenkoblet").
 test.value = Holla
 page.10 =< test
.
 # - Objektet der er refereret til ændres
 # - Ændringer HAR indflydelse på page.10
 # - page.10 vil nu returnere "Hej verden"
 test.value = Hej verden

Objekter skrives altid med store bogstaver. Egenskaber og funktioner typisk i "camel case" (første ord med små bogstaver, næste ord starter med store bogstager uden mellemrum imellem ordene). Der er nogle få sammenhæng, hvor det er anderledes.

Med punktum, ".", som separater kan egenskaber og under-objekter defineres med værdier

TS TypoScript:
page.10.wrap = <h1>|</h1>

En oversigt over hvilke egenskaber og funktioner du kan bruge for hvert objekt findes i TypoScript Reference (TSref)


Hvis nogle objekter er "pakket ind" i hinanden og mange egenskaber bliver defineret, kan det blive kompliceret.

TS TypoScript:
 page = PAGE
 page.typeNum = 0
 page.10 = TEXT
 page.10.value = Hej Verden
 page.10.typolink.parameter = http://www.typo3.org/
 page.10.typolink.additionalParams = &intet=intet

 # ATagParams gør ikke brug af almindelig "camelCase".
 page.10.typolink.ATagParams = class="eksternt-website"
 page.10.typolink.extTarget = _blank
 page.10.typolink.title = TYPO3 Hjemmeside
 page.10.postCObject = HTML
 page.10.postCObject.value = Den her tekst vises også i link teksten
 page.10.postCObject.value.wrap = |, fordi "postCobject" bliver renderet inden "typolink" funktionen

For at holde din TypoScript simpelt kan du bruge "krøllede" paranteser, "{}", til at definere dine objekter. Almindelige parenteser, "()" er til tekst som strækker sig over mere end én linie.

Eksemplet ovenover kan derfor omskrives til en simplere form


TS TypoScript:
 page = PAGE
 page {

   typeNum = 0

   10 = TEXT
   10 {

      value = Hej verden
      typolink {

         parameter = http://www.typo3.org/
         additionalParams = &intet=intet
         
         # ATagParams gør ikke brug af almindelig "camelCase".
         ATagParams = class="eksternt-website"

         extTarget = _blank
         title = TYPO3 Hjemmeside
      }

      postCObject = HTML
      postCObject {

         value = Den her tekst vises også i link teksten
         value {
            wrap (
             |, fordi "postCobject" bliver renderet inden "typolink" funktionen
             )
          }
       }
    }
 }

"Muligheden" for at lave stave/slå fejl er reduceret og din TypoScript er langt nemmere at læse. Og skulle du få lyst til at omdøbe "page" objektet til "minside", skal du kun ændre de to første linier og ikke hele TypoScript koden

Vise indholds elementer

notice - Note

De efterfølgende afsnit er eksempler, som giver bedre forståelse af TypoScript og hvordan det bruges i sammenhæng. Kodeeksemplerne er fra en kerne extension ("css_styled_content") og er derfor ikke nødvendige at skrive selv. De eksistere i kraft af "css_styled_content" . Hvis du dog vil have dine indholds elementer til at fremstå anderledes en TYPO3 som standard gør, er det vigtigt at du forstår sammenhænget.

Vi har ingen interesse i at skrive alt i TypoScript kode! Det vil være en trættende opgave og vi kan heller ikke forvente at en redaktør vil gøre det!

I stedet for, laver vi et objekt af typen "TEXT" og skriver den TypoScript som skal til, for at den automatisk indsamler indholdet. Eksemplet her, vil vise en side med en overskrift og tekst indholdet fra alle de indholdselementer på den aktuelle side.

Først skal vi bruge et PAGE objekt, ellers vil der ikke blive vist noget overhovedet. I vores PAGE objekt opretter vi et nyt objekt ved navn CONTENT. Det objekt kan vi styre med en række forskellige TypoScript parametrer.

TS TypoScript:
 page = PAGE
 page.typeNum = 0

 # CONTENT objektet udfører en database forespørgsel og henter tekst indholdet
 page.10 = CONTENT
 page.10.table = tt_content
 page.10.select {

      # "sorting" er et felt fra tt_content tabellen (den tabel som indeholder alle indholdselementer) 
      # og bestemmer sorteringen på indholdet, når du får det vist i din backend og frontend
      orderBy = sorting

      # normal kolonnen fra "Side" modulet er "0"
      where = colPos = 0
 }

 # For hvert eneste indholdselement fra vores database forespørgsel bliver renderObj afviklet
 # For hver gang, bliver et array fyldt med data fra den enkelte tabel række
 # og på den måde kan vi bruge parametert ".field" til at hente indhold fra "bodytext" feltet
 page.10.renderObj = COA
 page.10.renderObj {

   10 = TEXT

   # Feltet "header" i tt_content tabellen indeholder overskriftenn.
   10.field = header

   10.wrap = <h1>|</h1>

   20 = TEXT

   # Feltet "bodytext" indeholder tekst indholdet.
   20.field = bodytext

   20.wrap = <p>|</p>
 }

Objektet CONTENT sender en SQL forespørgsel til databasen. Forespørgsel håndteres af .select parametret. ".select" definerer (i det viste eksempel) at vi vil have vist alle indholdselementer fra kolonne "0", vist med colPos = 0. Kolonne 0 er den kolonne som fremstår med navnet "NORMAL" i TYPO3s "Side" modul. Indholdet sorteres efter "sorting" feltet, det bestemmes med "orderBy" parameteret. Hvis parameteret "pidInList" ikke er sat, eller slet ikke angivet, vil du kun få indholdselementer fra den aktuelle side. Har du tilgengæld skrevet ID 100 i "pidInList", vil du kun få indholdselementer fra siden med ID 100.

Parametret "renderObj" beskriver de data du får retur, skal vises. Derfor bruger vi objektet COA som kan indeholde et vilkårligt antal TypoScript objekter, som du bruger til din visning. I det viste eksempel bruger vi to TEXT objekter som bliver vist efter hinanden. Som beskrevet tidligere, afhænger visningen ikke af rækkefølgen de er skrevet i koden, men det nummer som hvert enkel objekt er defineret med. TEXT objektet "10" vil selvfølgelig blive vist før TEXT objekt "20", uanset hvilken rækkefølge de står i.

Udfordringen ligger i at vise samtlige former for indholds elementer, som web designeren har ønsket det. Derfor må man have en definition af hvert enkelt felt (billeder, billede størrelse, billede placering osv.)

Læs roligt videre, som beskrevet i noten øverst i afsnittet, er det allerede lavet for os. Du er her, for at forstå TypoScript og hvordan du bruger det.

De forskellige indholdselementer

Hvis du hellere vil vise et billede i stedet for text, er det nødvendigt at vælge andre felter fra tt_content tabellen - og også præsentere dem anderledes en almindelig tekst. Det samme gælder for indholdselementerne "Billede med tekst", "Overskrift" osv.

Alt afhængig af hvilket indholdselement du opretter, er elementets "type" gemt i feltet "CType". I eksemplet her, kan du se hvordan CASE objektet kan differentiere imellem de forskellige indholdselementer og hvordan de vises.

TS TypoScript:
 10.renderObj = CASE
 10.renderObj {

   # Feltet CType bliver brugt til at differentiere imellem elementerne.
   # Hvis du skriver din egen extension, kan du også bruge et felt fra din tabel
   key.field = CType

   # Indholdselementet "Overskrift" gemmes i variablen "header"
   header = TEXT
   header.field = header
   header.wrap = <h1>|</h1>

   # "text" bruges til indholdselementet "Tekst"
   text = COA
   text {

     10 = TEXT
     # Feltet "header" indeholder vores overskrift
     10.field = header
     10.wrap = <h1>|</h1>

     20 = TEXT
     # Og "bodytext" feltet indeholder teksten
     20.field = bodytext
     20.wrap = <p>|</p>

   }

   # og her følger definitioner for hver enkelt "CType". 
   # Kig i din tt_content tabel og bliv bekendt med de forskellige indholdselementers "type"
 }

css_styled_content

Det vil blive enormt kedsommeligt at skrive de samme definitioner for hver enkel TYPO3 installation! Især fordi at elementer er de samme og har meget identisk funktionalitet. Derfor følger extensionen "css_styled_content" med, når du installerer TYPO3. Den indeholder allerede beskrivelsen af hver enkelt defineret indholdselement, klar til brug.

Brugen af dem er enormt simpel, alle definitionerne er tilgængelige objekt navnet "tt_content"

TS TypoScript:
10.renderObj < tt_content

Ovenstående definition er også standard på CONTENT objektet. Hvis "css_styled_content" er tilgængelig, er der ingen grund til at bruge parametret "renderObj".

Alt i alt: For hvert eneste indholdselement i TYPO3, findes en definition i "css_styled_content". I TypoScript Object Browser (findes via "Template"/"Skabelon" modulet) vil det så sådan her ud:

Object browser tt content case.png

Det giver eT nemt overblik over, hvordan hver enkel indholdselement er konfigureret. Hvis du skulle have behov for at ændre den måde et indholdselement er konfigureret, bør det være klart at det gøres med "tt_content.[elementets type]. I tvivl? Her kan du se, hvordan definitionen af indholdselementet "header" kan overskrives:

TS TypoScript:
 # Fordi TYPO3 gemmer alting i ét stort array, bliver de parameterer som ikke er overskrevet, fortsat gemt.
 # Det kan give dig et uønsket/forvirrende resultat. Derfor starter vi med at slette alle definitioner af "header" indholds elementet
 tt_content.header >

 # Hver eneste "header" vil blive vist med et "h1" tag omkring sig. Uafhængigt af hvilken type indholdselement der er tale om
 tt_content.header = TEXT
 tt_content.header.wrap = <h1>|</h1>
 tt_content.header.field = header

Og takket være "css_styled_content", behøver vi ikke beskrive visningen med "renderObj" - den eksisterer allerede

styles.content.get

TS TypoScript:
 # Vores TypoScript indtil videre
 page.10 = CONTENT
 page.10.table = tt_content
 page.10.select {

     # Brug sorterings feltet fra backenden. Vi kunne ligeså godt bruge dato feltet (crdate) eller "header" feltet til sortering.
     orderBy = sorting

     # Normal kolonnen
     where = colPos = 0
 }

Takket være "css_styled_content" kan vi nøjes med at skrive den næste linie, men opnå nøjagtig det samme

TS TypoScript:
 # Den her linie returnere al indhold fra "normal" kolonnen (colPos = 0).
 page.10 < styles.content.get

For de andre kolonner er der også standard definitioner, som du kan gøre brug af

TS TypoScript:
 # Den her linie returnere al indhold fra "venstre" kolonnen (colPos = 1).
 page.10 < styles.content.getLeft

 # Den her linie returnere al indhold fra "højre" kolonnen (colPos = 2).
 page.10 < styles.content.getRight

 # Den her linie returnere al indhold fra "margin" kolonnen (colPos = 3).
 page.10 < styles.content.getBorder

I "css_styled_content" er "margin" kolonnen defineret på den her måde

TS TypoScript:
 # "normal" kolonnen er kopieret.
 styles.content.getBorder < styles.content.get

 # og bagefter ændrer vi "colPos" nummeret
 styles.content.getBorder.select.where = colPos=3

Opret en menu

Indtil videre har vi kigget på hvordan side indhold bliver renderet, men sidenavigationen mangler.

TYPO3 tilbyder et specielt menu objekt HMENU (H står for hirakisk) som nemt kan bruges til at lave forskellige typer af menuer.

Menuen skal bygges som en nested liste:

XML / HTML:
<ul>
   <li>first level</li>
   <li>first level
       <ul>
           <li>second level</li>
       </ul>
   </li>
   <li>first level</li>
</ul>

For at skabe overblik opretter vi en folder og e ny TypoScript-skabelon. Her definerer vi et nyt objekt som vi senere kan tilføje til vores 'main' skabelon. På den måde kan vi definere en række forskellige objekter seperat og sikre dem til fremtidige projekter. TypoScript-skabelonen kan tilføjes ved brug af "Include basic template" i din 'main' skabelon.

Normalt vil disse objekter være defineret som sub-objketer af "lib". Vi kan bruge enhver navngivning som ikke er blevet brugt endnu.


TS TypoScript:
 lib.textmenu = HMENU
 lib.textmenu {

   # Vi definere de første niveau som tekst menu.
   1 = TMENU

   # Vi definere det ''NO''rmale stadie
   1.NO.allWrap = <li>|</li>

   # Vi definere det ''ACT''ive (aktive) stadie.
   1.ACT = 1
   1.ACT.wrapItemAndSub = <li>|</li>

   # Vi "Wrapper" hele menuen
   1.wrap = <ul class="level1">|</ul>

   # Det andet niveau skal konfigureres på præcis samme måde
   # I mellem de krøllede paranteser, kan objektet blive kopieret.
   # Med punktum ".", definere vi at objektet finde inden i paranteserne.
   2 < .1
   2.wrap = <ul class="level2">|</ul>
   3 < .1
   3.wrap = <ul class="level3">|</ul>
 }

Objektet HMENU tillader os at oprette en række forskellige menuer. For hvert menu niveau kan et vilkårligt menu objekt oprettes som rendere menuen. Det er muligt at oprette en GMENU på første niveau og bruge TMENU på 2. og 3. niveau.

Det første menu niveau bliver defineret som nummer et, det andet som nummer to, osv. Det er naturligvis ikke tilladt at springe numre over. (For eksempel, hvis det 3. menu niveau ikke er defineret, vil det 4. niveau ikke blive renderet.)

På alle menu niveauer kan vi konfigurere forskellige 'tilstande' for menuens elementer

  • NO = "Normal"
  • ACT = "sider i root linie"
    • Betyder aktive side og sider i niveauerne før
  • CUR = "den aktuelle side".

Ved at gøre det sådan skal du være opmærksom på at foruden det normale stadie ("NO"), skal alle stadier aktiveres færst (f.x. ACT = 1).


Fremover kan vi bruge menuen og implementere den på din side.

TS TypoScript:
page.5 < lib.textmenu

Indsæt indhold i en HTML skabelon

Vi ved hvordan vi renderer indhold, og hvordan vi opbygger en menu, men vi har statig ikke nogen hjemmeside.

Vi kan bruge en hjemmeside med COA's og oprette HTML skelet med TypoScript. Men dette vil blive meget komplekst og være tilbøjelig til at give fejl. Hvis HTML templaten er lavet af en template designer og leveret færdig, kan det blive kompliceret, specielt hvis der er små ændringer i layoutet senere.

Derfor har vi TEMLPLATE elementet hvorved vi kan vise en HTML skabelon og indsætte en menu, indhold osv. på de rigtige steder.

TS TypoScript:
 page.10 = TEMPLATE
 page.10 {
  template = FILE
 
  # Vi indlæser HTML templaten.
  template.file = fileadmin/test.tmpl
 
  # Tekst områder
  # <!-- ###MENU### begin -->
  # Her er et eksempel på indhold som placeholder. Alt mellem markeringerne vil 
  # blive erstattet af indhold fra sub-parts, i dette tilfælde menuen.
  # <!-- ###MENU### end -->
 
  subparts {
    MENU < lib.textmenu
    CONTENT < styles.content.get
    COLUMNRIGHT < styles.content.getRight
  }

  # Marks er en enkelt markeringer. Det betyder der er ingen start og slutning på markeren; 
  # istedet for bliver markeringen udskiftet direkte. ###LOGO### bliver
  # erstattet af logoet.
  marks {
    LOGO = IMAGE

    # Det grafiske logo*.gif bliver tilføjet til resource feltet i TypoScript templaten. 
    LOGO.file = logo*.gif

    # Logoet linker til siden med ID 1.
    LOGO.stdWrap.typolink.parameter = 1
  }
  workOnSubpart = DOCUMENT
 }

Et alternativ til denne løsning kan være extensionen automaketemplate, som gør det muligt at undgå markeringer fuldstændig. Istedet for bruger den IDs som referencer og derfor et bedre samarbejde med template designere.

Et andet alternativ kan være extensionen templavoila. Denne extension giver et visuel brugerinterface, dette er dog ikke anbefalet til begyndere.

Brug af css_styled_content

Vi har allerede set at vi selv kan definere de forskellige indholdselementer af TYPO3. Men css_styled_content reducere mængden af arbejde med omkring 2000 liniers TypoScript.

Det er givende - selv hvis det ikke giver menig i begyndelse - at have et grundigt kik på TypoScript. I TYPO3 skal vi være på siden som har setup templaten. Derefter i modulet "Template", vælger vi "Template Analyzer" fra select boksen i toppen af vinduet.

En list med aktivt og integreret TypoScript templates kommer frem. Disse er evalueret fra top til tå af TYPO3, og samlet i et konfigurations array.

Ved at klikke på "EXT:css_styled_content/static/", vil indholdet af denne tempalte blive vist. Først vil konstanterne vises og derefter setup TypoScripten.

Extensionen css_styled_content tilføjer mange klasser i HTML elementerne. Dette har sin fordel da det ikke er nødvendigt at tilføje alle klasse manuelt. Det er tilstrækkeligt til at finde ud af hvilke HTML elementer der har hvilke klasser og tilføje CSS styles til det.

Eksempel:
<div class="csc-textpic-imagewrap">...

Beskrivelse af klassen er meget simpel - og hvis TYPO3 kender den - intiutivt. Alle klasser starter med "csc"; dette står for "css_styled_content". I eksemplet er det efterfulgt af "textpic", som står for TypoScript elementet "textpic" (tekst med billede). "imagewrap" foreslår at DIV containeren bliver wrappet omkring et billede.

Hvad der sker i detaljer, kan undersøges ved at lave en tom side som kun indeholder et element og derefter tjekke den genereret source kode for denne side.

For eksempel er overskrifter normalt nummererede så den første overskrift kan håndteres specifikt. For HTML tabeller er klasserne "odd" (ulige) og "even" (lige) indsat så det er nemt at give rækkerne forskellige farver. På samme måde kan kolonnerne bliver håndteret individuelt.

For HTML entutiasterne betyder det mange css klasser der bliver indsat vil være forældede. For at få fjernet disse, skal der redigere meget i css_styled_content extensionen.

COA TypoScript Objects

TypoScript objekterne er implementeret i TYPO3 ved tilhørende klasser. På grund af forskellige krav ved rendering af en hjemmeside er der en række forskellige objekter. Disse objekter har en række egenskaber. For eksempel har objektet IMAGE én metode wrap og én metode titleText. I reference til TypoScript kan vi slå op hvilke værider dette objekt forventer. For wrap er en data type (wrap) forventet - dette betyder en tekst som er adskilt af en pipe (|). Du kan derfor ikke bruge flere funktioner samtidig (f.x. "wrap.crop = 100).

Objektet modtager parametrene (som beskrevet ovenfor) i et PHP array (f.x. $conf['wrap.']['crop']='100';). Dette array kan indeholde et vilkårligt antal af egenskaber. Det er dog Kun de egenskaber som er refereret til af objektet som vil blive brugt. (f.x., $conf['wrap'] eller $conf['titleText']).

I dette tilfælde "titleText" er data typen "string / stdWrap". Dette betyder at både tekst (string) og metoden af typen stdWrap er tilladt. Hvilken egenskaber som stdWrap evaluere kan slåes op i stdWrap. Derfor har vi lov at tilføje forskellige egenskaber fra stdWrap til metoden "titleText" (f.x., titleText.field = header). ved at gøre dette vil værdien af titleText blive udfyldt med standard tekst og derefter vil stdWrap funktionen blive udført.

Derfor er det ikke nødvendigt at gætte hvilket objekt som bliver manipuleret på den måde, det er nok at slå oplysningerne op i referencen.

For at rendere en hjemmeside, bliver mange flere objekter bliver brugt. Udfordringen er at kombinere dem alle stilfuldt.

I sektionen "Vise indholds elementer", viser vi hvordan vi kan bruge CONTENT objektet til at udføre en forespørgsel i databasen og returnere indholdet af en side. Dette objekt modtager en liste af indholdselementer som er oprettet en efter en (normalt i "sorting" feltets rækkefælge). Derfor bruger vi objektet CASE til at diffirentiere typen af elementer (CType) og rendere dem forskelligt.

Det er absolute nødvendigt at kende de forskellige TypoScript objekter og funktioner.

Objekt, eksekvering af database queries

  • CONTENT tilbyder funktionaliteten at tilgå vilkårlige tabeller i TYPO3. Ikke kun tt_content, men også tabeller fra extension osv. kan bruges. Funktionen select tillader os at generere komplekse SQL queries.
  • RECORDS tilbyder funktionaliteten at referere til et specifikt data element. Dette er meget brugbart, hvis den samme tekst skal bruges på alle sider. Ved at bruge RECORDS kan et enkelt indholdselement blive defineret og derved blive vist. Dette uden at en redaktør behøver at rette elementet og kopiere det mange gange. Objektet bliver også brugt hvis indholdselementer "insert record" bliver brugt.

I følgende eksempel, er email addressen, fra en addresse, renderet og lavet som email link på samme tid.

TS TypoScript:
  page.80 = RECORDS
  page.80 {
        source = 1
        tables = tt_address
        conf.tt_address = COA
        conf.tt_address {
                20 = TEXT
                20.field = email
                20.typolink.parameter.field = email
        }
  }
  • HMENU importere sidetræet og tilbyder komfortable måder at generere en side menu. Foruden menuen som rendere sidetræet, er der også nogle specielle menuer som kan bruges forskelligt. Objektet importere den interne struktur for menuen. Hvordan menuen vil blive renderet afhænger af menu objekter som TMENU (tekst-menu) or GMENU (grafisk menu). For et hvert menu niveau kan objektet ændres. På et hvert menu niveau kan de forskellige menu elementer, kan vi definere de forskellige stadier (NO = normal, ACT = Aktiv, etc.).

Objekter til rendering af indhold

  • IMAGE rendering af et billede
TS TypoScript:
lib.logo = IMAGE
lib.logo {
  file = fileadmin/logo.gif
  file.width = 200
  stdWrap.typolink.parameter = 1
}

lib.logo indholder logoet med en bredde på 200 pixel og der linkes til siden med PID 1.

  • HTML / TEXT er til at rendere standard tekst eller indholdsfelter. En fundamental forskel er at HTML objektet bruger stdWrap funktionaliten .value .
TS TypoScript:
lib.test1 = TEXT
lib.test1.field = uid

lib.test2 = HTML
lib.test2.value.field = uid
  • FILE importere indholdet af en fil direkte.
  • TEMPLATE erstatter en marker med indhold i en tempalte.
TS TypoScript:
page.10 = TEMPLATE
page.10 {
  template = FILE
  template.file = fileadmin/test.tmpl
  subparts {
    HELLO = TEXT
    HELLO.value = Erstatter indholdet mellem markerne ###HELLO### og ###HELLO###
  }
  marks {
    Test = TEXT
    Test.value = marker test vil blive erstatte af denne tekst.
  }
  workOnSubpart = DOCUMENT
}
  • IMGTEXT tillader os at generere billede inline med tekst. Dette blive brug af indholdselementet "tekst med billede".
  • FORM generere en HTML form.

Andre objekter

  • CASE objekter tillader forskelligheder. I css_styled_content, bliver objektet brugt til at rendere forskellige objekter afhængig af deres type.
  • COA - Content Object Array (Element Objekt Array) - tillader os at kombinere et vilkårligt antal af objekter.
  • COA_INT - ikke cachede. Dette element bliver genereret på alle kald. Dette er brugbart ved for eksempel dato, tid og brugerafhængigt data.
  • LOAD_REGISTER / RESTORE_REGISTER objekter tillader os at fylde indhold i det globale array $GLOBALS["TSFE"]->register[]. Dette objekt returnere ingenting. Enkelt værdier og komplette TypoScript objekter kan bruges. Ved at gøre dette kan registret bruges some en stack: Ved et hvert kald, bliver et ekstra element tilføjet. Med RESTORE_REGISTER bliver det øverste element fjernet.
  • USER or USER_INT er brugerdefineret funktioner. Et hvert plugin er sådan et objekt. USER_INT er den ikke cachede variant.
  • IMG_RESOURCE bliver brugt af IMAGE (billede). Resourcen bliver returneret (indholdet), hvilket normalt er SRC attributen på IMG tag'et. Hvis billeder er scaleret, bliver objektet leveret med en beregnet basis for de nye filer, som så bliver gemt i /typo3temp folderen.
  • EDITPANEL - Dette objekt bliver indsat hvis en backend bruger er logget ind og indstillingen "Display Edit Icons" er sat i fronend admin panellet. Hvis administrationspanellet er sat ind, vil siderne ikke længere blive cached . Ikoner for sortering, editering, sletning osv. vil blive vist.
  • GIFBUILDER bliver brugt til at generere GIF filer automatisk. Forskellig tekst og billeder kan kombineres m.m.. GIFBUILDER tilbyder nogle objekter som TEXT eller IMAGE, som ikke er relateret til standard TEXT eller IMAGE objekter. Når vi bruger GIFBUILDER skal vi være forsigtig med ikke at forvirrer objektet også selvom de har det samme navn.

Vi har ikke introduceret alle objekter som eksistere i TypoScript, men de vigtigste er nævnt.

TypoScript funktioner

TypoScript funktioner bliver brugt til at ændre og rette output på indholdelementer. Den mest populære funktioner er standard wrap, bedre kendt som stdWrap. Når et objekt implementere en bestemt funktion, eller ej, bliver det vist i TSref kolonnen data type.

Egenskab Data type Beskrivelse Standard
file imgResource
imageLinkWrap -> imageLinkWrap [...]
if ->if [...]
altText
titleText
String/stdWrap [...]

Eksempel:(cObject).IMAGE

Den første linie i eksemplet (egenskab = file) fortælles os at "file" er af typen imgResource. Dette betyder at vi kan bruge imgResource funktionerne på file egenskaberne.

Nogle gange er funktioner - for bedre genkendelighed - markeret med en pil ( så som -> if).

Hvis der er flere typer adskilt af en slash (/), betyder det at du har forskellige muligheder for at bruge elementet. I eksemplet ovenfor, kan du se at titleText or altText, begge kan være enten klar streng eller stdWrap. Så enten kan du indtaste en klar streng og ikke gøre mere, eller også kan du modificere eller ændre stringen ved at bruge stdWrap på strengen. Du kan også lade strengen være tom og generere indhold med stdWrap alene.

Nogle vigtige og hyppigt anvendte funktioner bliver præsenteret i de følgende underafsnit. Dette kapitel har til formål at introduksere disse funktioner og hvordan de kan bruges. Alle detaljerne omkring dem, kan du læse på TSref, og ikke i dette dokument.

imgResource

Funktionerne til data typen "imgResource" relatere til det at modificering af billeder som navnet antyder. Objektet IMAGE har egenskaben "file", som nedarves fra data typen "imgResource".

Dette tillader f.x. at et billede kan ændre størrelse:

TS TypoScript:
temp.myImage = IMAGE
temp.myImage {

        file = toplogo.gif
        file.width = 200
        file.height = 300

}

Indtast maksimum størrelse (eller minimums størrelse):

TS TypoScript:
temp.myImage = IMAGE
temp.myImage {

        file = toplogo.gif

        # maximum size
        file.maxW = 200
        file.maxH = 300

        # minimum size
        file.minW = 100
        file.minH = 120

}

og også direkte adgang til en ImageMagick funktion:

TS TypoScript:
temp.myImage = IMAGE
temp.myImage {

        file = toplogo.gif
        file.params = -rotate 90
}

En af de mest brugte og bedste eksempler på brug af imgResource er implementeringen af billeder dynamisk fra Media feltet på siden egenskaberne. Det har den fordel at redaktører har mulighed for at ændre billedet uden at brug af TypoScript. Det tillader os at ændre et topbillede på forskellige områder af hjemmesiden med kun et par liniers TypoScript.

TS TypoScript:
temp.dynamicHeader = IMAGE
temp.dynamicHeader { 
        file {

                # Definere stien til billederne.
                import = uploads/media/

                import {

                        # Hvis der ikke er nogle billeder på denne side, skal den søge rekursivt ned igennem sidetræet. 
                        data = level:-1, slide

                        # Skriv hvilket felt hvor billedet er angivet.
                        field = media

                        # Definere hvilket billeder som skal vises.
				# i dette tilfælde det første billede som findes.
                        listNum = 0

                }
}

Stien "uploads/media/ er placeringen på filerne som bliver insat på sidernes egenskaber under "files" sektionen. (For TYPO3 version 4.2.x, er dette i tab'en "Resources".) TypoScripten in parenteserne ved import, indholder udelukkende stdWrap funktioner, som bliver brugt til at definere hvor fra og hvilke billede der bliver importeret. Tilsidst returnere stdWrap filnavnet på billeder, som så vil blive importeret fra import stien (uploads/media).

imageLinkWrap

Ved at bruge "imageLinkWrap" kan vi wrappe et billede med et link til PHP scriptet "showpic.php". Scriptet åbner billedet i et nyt vindue med forud defineret parametre så som vindue background, billeder størrelse osv. Denne funktion kan bruges til at lave "klik-for-at-se-stort-billede" funktionaliteten. (Et lille billeder (thumbnail) kan klikkes på for at åbne billedet i nyt vindue og i billedets oprindelige størrelse.)

TS TypoScript:
temp.meinBild = IMAGE
temp.meinBild {
       
	  file = toplogo.gif

        imageLinkWrap = 1
        imageLinkWrap {

                # Aktivering ImageLinkWrap.
                enable = 1

                # Definere body-taget for det nye vindue.
                bodyTag = <body class="billede">

                # Wrapper billedet. (Lukker vinduet hvis der bliver klikket på billedet.)
                wrap = &lt;a href="javascript:close();"&gt; | </a>

                # Billedets bredde. (m tillader en proportional skalering)
                width = 800m

                # Billedets højde
                height = 600

                # Opretter et nyt vindue til billedet. 
                JSwindow = 1

                # Åbner et nyt vindue for et hvert billeder (i stedet for at bruge det samme vindue).
                JSwindow.newWindow = 1

                # padding på det nye vindue.
                JSwindow.expand = 17,20
        }

}

numRows

I TypoScript er der ikke kun store og mægtige funktioner, der er også små og mægtige. Et eksempel er funktionen numRows, hvis eneste formål er at returnere antallet af linier fra en select query. På samme måde som objektet CONTENT, bruger numRows select funktionen. Queryen bliver genereret på samme måde i begge tilfælde. Forskellen er kun om det er antallet af linier som returnes eller indholdet af de aktuelle linier.

I samarbejder med "if" funktionen er det muligt at gøre det lidt lækkert. Et eksempel er et stylesheet til indholdet af højre kolonnen i backenden, som kun bliver brugt hvis der rent faktisk er indhold i højre kolonnen.

TS TypoScript:
temp.headerdata = TEXT
temp.headerdata {
        value = <link rel="stylesheet" type="text/css" href="fileadmin/templates/style.css">

        # Hvis "select" returnerer mindst 1 linie bliver stylesheetet indsat.
        if.isTrue.numRows { 

                # Tjekker hvis denne side 
                pidInList = this

                # har indhold i tabellen tt_content.
                table = tt_content

                # SQL: WHERE colPos = 2
                select.where = colPos=2  
	}
}

# Kopiere temp.headerdata i over page.headerData.66 (og overskriver page.headerData.66).
page.headerData.66 < temp.headerdata

Eller brug en anden template hvis der er indhold i højre kolonnen:

TS TypoScript:
# Et COA (Content Object Array) tillader os at merge mange objekter.
temp.maintemplate= COA
temp.maintemplate {

        # 10 vil kun blive embedded, hvis "if" statementen returnere "true".
        10 = COA
        10 {
                # Vi bruger en kopi af selecten fra  css_styled_content.
                if.isTrue.numRows < styles.content.getRight

                10 = TEMPLATE
                10 { 
                        template = FILE
                        template.file = fileadmin/templates/template-2kolonner.html
                }
        }

        # 20 vil kun blive embedded, hvis "if" statementen returnere "true".
        20 = COA
        20 {
                if.isFalse.numRows < styles.content.getRight
                10 = TEMPLATE
                10 {     
                        template = FILE
                        template.file = fileadmin/templates/template.html
                }
        }
}

select

"Select" funktionen generere en SQL SELECT query, som bliver brugt til at læse poster fra databasen. Select funktonen tjekker automatisk om en post er "skjult" eller "slettet" eller om de har en "start og slut dato". Hvis pidInList bliver brugt (altså en række af sider bliver renderet), tjekker funktionen også om den pågældende bruger har lov til at se alle poster.

Med hjælp fra select funktionen er det muligt at vise indholdet af en side på alle sider, for eksempel.

TS TypoScript:
 temp.leftContent = CONTENT
 temp.leftContent {

     table = tt_content
     select {

         # Siden med ID = 123 er datakilden
         pidInList = 123

         # Sorteringen er ligesom i backenden
         orderBy = sorting

         # Indholdet fra den venstre kolonne.
         where = colPos=1

         # definerer feltet med sprog-ID i tt_content
         languageField = sys_language_uid
     }
 }

 # definerer feltet med sprog-ID i tt_content
 marks.LEFT < temp.leftContent

split

Split funktionen kan bruges til at opdele given data på et foruddefineret tegn og behandle den enkelte del bagefter. På alle iterationer vil den aktueller index nøgle "SPLIT-COUNT" blive gemt (startende med 0).

Ved at bruge "split" kan vi f.eks. læse et tabel felt og wrappe hver enkelt linie med bestemt kode (f.x. generere en HTML tabel som kan bruges til at vise det samme indhold på mere end én side):

TS TypoScript:
  # Eksempel
  20 = TEXT 

  # Indholdet af feltet "bodytext" er importeret (fra $cObj->data-array).
  20.field = bodytext 
  20.split { 

    # Adskillelses tegnet (char = 10 er ny linie) bliver defineret.
    token.char = 10 

    # Vi definerere hvilket element der skal bruges
    # Ved at bruge optionSplit, kan vi skelne mellem elementer.
    # Et matchende element med nummeret skal være defineret!
    # Her bliver option split egenskaben brugt.
    # Skiftevis bliver nummer 1 og 2 brugt til renderingen.
    # I dette eksempel bruges klasserne "odd" og "even", så vi kan style tabellen i zebra stil.
    cObjNum = 1 || 2

    # Det første element bliver defineret (hvilket bliver refereret til af cObjNum).
    # Indholdet bliver importeret ved brug af stdWrap->current .
    1.current = 1

    # Elementet wrappes.
    1.wrap = <TR class="odd"><TD valign="top"> | </TD></TR>

    # Det 2. element bestemmes og wrappes.
    2.current = 1
    2.wrap = <TR class="even"><TD valign="top"> | </TD></TR>
  }

  # En generel wrap som generere en gylde tabel markup. 
  20.wrap = <TABLE border="0" cellpadding="0" cellspacing="3" width="368"> | </TABLE>

if

Den måske vanskeligste TYPO3 funktioner er "if" funktionen, det skyldes at alle programmører som er bekendt med den instinktivt bruger den forkert. Derfor har vi nogle eksempler for at vise hvordan den virker. Generelt returnere funktionen "true" hvis alle forbehold er opfyldt. Det svare til en Boolean AND kombination. Hvis "false" skal returneres kan vi bruge "negation" for at "omvende" resultatet (!(true)).

TS TypoScript:
10 = TEXT
10 {

    # Indholdet af text-element
    value = The L parameter is passed as GET var

    # Resultere "true" og leder til renderingen af den øverste værdi hvis GET/POST 
    # parametrene passere med en værdi som ikke er 0.
    if.isTrue.data = GP:L
}

Med brugen af "if" er det også muligt at sammenligne værdier. Derfor kan vi bruge parameteren if.value.

TS TypoScript:
10 = TEXT
10 {

    # WARNING: denne værdi ligner værdien af tekst elementet, og ikke det fra "if"-en.
    value = 3 is bigger than 2

    # sammenlignings parametre af "if" funktionen
    if.value = 2

    # Noter venligst sorterings rækkefølgen er omvendt i dette eksempel.
    # returnere sætningen, "3 isGreaterThan 2".
    if.isGreaterThan = 3
}

På grund af egenskaben af "if" funktionen bruger stdWrap funktionen, kan alle typer af variabler sammenlignes.

TS TypoScript:
10 = TEXT
10 {
    # værdien af tekst elementet
    value = The record can be shown because the starting date has passed.

    # konditionen på if funktionen.
    if.value.data = date:U

    # konditionen omvendt igen, start time isLessThan date:U
    if.isLessThan.field = starttime
}

typolink

Typolink er TYPO3 funktionen som tillader os at generere alle typer af links. Hvis det er muligt, bør du bruge denne funktion til at generere links, links oprettet sådan vil blive "registreret" i TYPO3. Dette er en forudsætning, for eksempelvis, for RealURL, som generere SEO venlige stier, eller for anti-spam beskyttelsen på email adresser. Så hvis du føler behov for at bruge: <a href="..."> - lad være.

Funktionaliteten i typolink er basalt set meget nem. Typolink linker den specifikke tekst afhængigt at de definerede parametre, eksempelvis:

TS TypoScript:
 temp.link = TEXT
 temp.link {

     # Dette er den defineret tekst.
     value = Link tekst

     # Her er typolink funktionen.
     typolink {

         # Dette er linket
         parameter = http://www.example.com/

         # link target (_blank åbner i et nyt vindue),
         extTarget = _blank

         # og tilføjer en klasse (class) til linket så det kan styles.
         ATagParams = class="linkclass"
     }
 }

Eksemplet ovenfor generere følgende HTML kode: <a class="linkclass" target="_blank" href="http://www.example.com/" >Link tekst</a>

Typolink virker næsten på samme måde som wrap - indholdet som er defineret af værdien, for eksempel, vil blive wrapped af HTML anchor tag'et. Hvis der ikke er defineret noget indhold bliver det automatisk genereret. Med et link til en side, vil sidetitlen bliver brugt. Med et eksternt URL, bliver URL'en vist.

Man kan korte eksemplet ned fordi "parameter" tag'et fra typolink funktionen tænker selv. Her er et kort eksempel, som vil generere præcis den samme HTML kode.

TS TypoScript:
 temp.link2 = TEXT
 temp.link2 {

     # igen, den defineret tekst.
     value = Examplelink

     # parameter med resume af parametrene fra første eksempel (forklaring følger nedenfor)
     typolink.parameter = www.example.com _blank linkclass
 }

"Parameter" delen fra typolink funktionen analysere de specifikke tegn og konvertere de respektive sektioner. I første omgang bliver parametrene adskilt af tomme mellemrum. Hvis der står en prik "." (hvis det er tilfældet og det er før en slash "/"), vil et eksternt link blive genereret. Hvis prikken "." er efter en slash "/" vil et fil link blive genereret. Hvis der står et @ vil et e-mail link blive genereret. Hvis der står en integer som fx. "51" bliver der genereret et internt link til siden med id "51". Hvis det starter med en hash "#" bliver der linket til et specifikt indholdselement (for eksempel. et link til indholdselementet med ID #234 på det pågældende side. For at linke til siden med ID 51 og indholdselementet #234, skal man bruge 51#234).

Den anden del af parameter beskriver link target. Normalt vil det være - som i det første eksempel - defineret af extTarget (for ekstern links) eller target (for interne links); men det kan overskrives ved at bruge et andet parameter.

Den tredie del bliver konverteret til en "class" egenskab på linket.

Hvis det kun er "class" egenskab der er behov for og ikke noget target, må man udfylde target alligevel, fordi funktionen ikke genkender class'en som vil stå på den tredie plads. Så uden et target vil linien være følgende (med et minus tegn "-" som adskiller):

TS TypoScript:
typolink.parameter = www.example.com - linkclass

Med brugen af typolink funktionen og target egesnakeben, er det også muligt at åbne link i JavaScript-popups.

TS TypoScript:
temp.link = TEXT
temp.link {

     # Link teksten
     value = Åbner et popup vindue

     typolink {
          # 1. Parameter = side ID på target siden, 2. parameter = størrelsen på popupen.
          parameter = 10 500x400

          # title tag'et for linket
          title = Click here to open a popup window

          # Parametrene på popup vinduet.
          JSwindow_params = menubar=0, scrollbars=0, toolbar=0, resizable=1

     }
}

Det er vigtigt at notere at mange af egenskaberne på typolink er af typen stdWrap. Det betyder at værdierne kan beregnes eller læses fra databasen.

TS TypoScript:
lib.stdheader >
lib.stdheader = TEXT
lib.stdheader {
   field = header
   typolink.parameter.field = header_link
   wrap = <h2>|</h2>
}

Overskriften vil blive vist og et link vil blive indsat med target som er defineret i feltet header_link. Den første linie fjerner default indstillingerne fra css_styled_content.

encapsLines

EncapsLines er en forkortelse for "encapsulate line (indkapsling af linier)". Denne TypoScript funktion tillader os at definere hvordan en enkelt linie i indholdet skal wrappes. For eksempel, hvis der ikke er defineret noget vil en <p> eller en <div> wrappe omkring elementet. Et andet eksempel vil være automatisk at udskifte alle <b> tags med et <strong> tag.

Et simplet eksempel:

I RTE'en har vi følgende tekst:

XML / HTML:
 En simpel tekst, uden noget specielt
 &nbsp;
 <div class="tekst">Noget tekst pakkes ind i div-tags.</div>

I TypoScript har vi følgende:

TS TypoScript:
encapsLines {
       # defineret hvilket tags som vil blive genkendt som en wrapper
       encapsTagList = div,p
 
       # Linier som ikke allerede er pakket ind med tag fra 
       # encapsTagList bliver wrappet med <p>-tags         
       wrapNonWrappedLines = <p>|</p>
 
       # erstatter alle DIV tags med P tags
       remapTag.DIV = P

       # hvis en linie er tom indsættes et tomt tegn.
       innerStdWrap_all.ifEmpty = &nbsp;
}

Resultatet vil i HTML se ud som følgende:

XML / HTML:
 <p>En simpel tekst, uden noget specielt</p>
 <p>&nbsp;</p>
 <p class="tekst">Noget tekst pakkes ind i div-tags.</p>;

I de fleste TYPO3 projekter vil følgende kode ikke være nødvendig. Men i extensionen "css_styled_content" er nogle indstillinger defineret med denne funktion, dette kan ændres hvis det er nødvendigt. Derofr kommer det et eksempel fra standard konfigurationen fra "css_styled_content" for at synliggøre dets funktionalitet.

TS TypoScript:
lib.parseFunc_RTE {

        nonTypoTagStdWrap.encapsLines {
 
               # wrap tags
               encapsTagList = div,p,pre,h1,h2,h3,h4,h5,h6
 
               # erstatter alle DIV tags med P tags
               remapTag.DIV = P
 
               # Linier som ikke allerede er pakket ind med <p> tag.
               nonWrappedTag = P
 
               # Erstatter alle tomme linie med et tomt tegn.
               innerStdWrap_all.ifBlank = &nbsp;
 
               # Her bliver den  - berygtede - bodytext placeret.
               addAttributes.P.class = bodytext
 
               # Bruger addAttributes hvis ingen andre attributter er sat.
               addAttributes.P.class.setOnly=blank
       }
}

Ved sammenligning af det første eksempel med det andet, vil du måske opdage at der er 2 parametre som gør det samme: første eksempel, "wrapNonWrappedLines"; and andet eksempel "nonWrappedTag". Forskellen er at "nonWrappedTag" kan udvides, men "wrapNonWrappedLines" har brug for et omfattende wrapping tag. Hvis allerede wrappede linier som <p class="foo">|</p> er wrapped og "wrapNonWrappedLines" er defineret som <p>|</p>, vil resultatet være en mix af P-tags uden classer i stedet for en konsisten wrap.

For at demonstrere det nemt, for at slippe for den mest irriterende class="bodytext", behøver du ikke gøre andet end at indsætte følgende linie:

TS TypoScript:
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >

file link

Med funktionen "file link" kan vi generere - som navnet antyder - et fil link. Ved at gøre sådan, bliver ikke kun et link genereret, men "filelink" tillader os også at tilføjet et ikon og vise filstørrelsen.

TS TypoScript:
temp.example = TEXT
temp.example {
	
	# Link beskrivelse og filnavn på samme tid
	value = my_image.png

      filelink {

		# Stien til filen.
     		path = fileadmin/images/

		# Filen skal have et ikon
     		icon = 1
	
		# Ikonet vil blive wrappet.
     		icon.wrap = <span class="icon">|</span>

		# Ikonet skal være også være et link til filen.
     		icon_link = 1

		# Istedet fro et symbol for filtypen, vil filen blive vist 
                # som et ikon, hvis det er at typen png eller gif.
     		icon_image_ext_list = png,gif

		# Størrelsen bliver vist.
     		size = 1

		# Wrapper filstørrelsen (med hensyn til tomme mellemrum)
     		size.noTrimWrap = | (| Bytes) |

		# Renderingen af filstørrelsen vil være i bytes.
     		size.bytes = 1

		# Forkortelser for de forskellige filstørrelses enheder.
     		size.bytes.labels =  | K| M| G

		# Wrap hele elementet.
     		stdWrap.wrap = <div class="filelink">|</div>
      }
}

parseFunc

Denne funktion parser den primære det af indholdet f.x. indholdet som bliver indtastet i RTE (Rich Text Editor). Funktionen er ansvarlig for det faktum at indholdet ikke bliver renderet præcist som det er indtastet i RTE'en. Nogle standard parsing regler er implementeret i "css_styled_content" og nogle af dem forklarede vi i encapsLines afsnittet. Hvis vi ønsker at ændre hvordan TYPO3 wrapper noget, kan det i de fleste tilfælde gøres med en parseFunc instruktion. Vi kan også bruge parseFunc til at søge og erstatte en specifik streng.

I følgende eksempel, bliver alle forekomster af "COMP" erstattet af "My company name".

TS TypoScript:
page.stdWrap.parseFunc.short {
 COMP = My company name
 }

De forskellige muligheder for at ændre standard adfærdren kan nemt findes ved at bruge TypoScript obejkt browseren. Alle mulighederne for hvordan parseFunc kan ændre renderingen findes her: parseFunc .

tags

Funktionen "tags" bliver brugt i kombination med parseFunc for at få brugerdefineret tags. For eksempel i extensionen "css_styled_content", er det brugerdefineret tag <LINK> defineret for at lave simple links.

TS TypoScript:
tags {
        # Her bliver navnet af det nye tag defineret.
        link = TEXT

        # Her er hvordan tag'et bliver behandlet og parset.
        link {
                current = 1
                typolink {

                        parameter.data = parameters:allParams

                        extTarget = {$styles.content.links.extTarget}

                        target = {$styles.content.links.target}

                }

                parseFunc.constants=1
        }
}

Denne funktion er specielt brugbar, hvis en bestemt type af elementer bliver brugt ofte af redaktørerne, og vi kunne tænke os at gøre tingene lidt nemmere for dem. Vi har mulighed for at tilbyde en måde hvorpå redaktørerne ikke behøver at formattere det manuelt hver gang, de behøver kun at skrive tag'et og formatteringen sker automatisk.

HTMLparser

HTML parseren definere hvordan indhold bliver behandlet. Normalt bliver det brugt som en underfunktion til parseFunc. For eksempel, kan vi definere at alle links bliver sat med en absolute værdi (for eksempel, til et nyhedsbrev):

TS TypoScript:
page.stdWrap.HTMLparser = 1
page.stdWrap.HTMLparser {
      keepNonMatchedTags=1

	# Her definere vi domain som bliver placeret foran alle relative stier.
      tags.a.fixAttrib.href.prefixRelPathWith=http://www.example.com/

	# Alle links uden et target for et target = _blank . 
      tags.a.fixAttrib.target.default=_blank
}

Funktionen HTMLparser er ekstremt mægtig for et hvert indhold kan redigere før det er renderet. Vi kan definere brugerdefineret tags - f.x. interne links er gemt som følgende: <link http://www.typo3.org/>Linktext</link> således bruges et brugerdefineret tag. Det brugerdefineret tag kan defineres i all felter - også overskrifter - på hvilke en parser kan defineres.

Følgende eksempel tillader os <u> tag'et i overskrifter. Standard definitionen fra "css_styled_content" vil blive rettet. Funktionen htmlSpecialChars bliver deaktiveret så <u> forbliver uberørt. Herefter bruger vi parseFunc funktionen og definere at foruden "u" tag'et vil der ikke være andre tags som er tilladte. Så alle tags foruden <u> vil blive fjernet.

TS TypoScript:
# I overskriften skal <u> tag'et være tilladt.
# Udover det skal alle elementer parses som normalt. 
lib.stdheader.10.setCurrent.htmlSpecialChars = 0
lib.stdheader.10.setCurrent.parseFunc {
  allowTags = u
  denyTags = *
  constants=1
  nonTypoTagStdWrap.HTMLparser = 1
  nonTypoTagStdWrap.HTMLparser {
    keepNonMatchedTags=1
    htmlSpecialChars = 2
    allowTags = u
    removeTags = *
  }
}

Dette eksempel viser igen hvor vigtig stdWrap funktionen faktisk er. Funktionen setCurrent er af typen string/stdWrap og derfor tillades brugen af parseFunc.

Brug stdWrap korrekt

Funktionen stdWrap includere en række forskellige funktioner og parametere. Nogle er trivielle, og brugen af nogle er svære at finde. Her binder vi os selv til basis principperne og fremhæver få specielle funktioner og egenskaber.

stdWrap egenskaben kan kun bruges hvis den er defineret eksplicit. Hvis vi har en egenskab af typen "wrap" er der ikke nogen stdWrap egenskab. Som standard er egenskaben enten af typen stdWrap eller egenskaben tilbyder for eksemepl "string/stdWrap".

TS TypoScript:
 10 = IMAGE
 10.stdWrap.typolink...

Objektet har egenskaben stdWrap af typen stdWrap.

TS TypoScript:
 10 = HTML
 10.value = Hello World
 10.value.typolink 

I kontrast har HTML objektet egenskaben af typen string/stdWrap. Vi kan tilføje en streng og yderligere vi kan bruge stdWrap egenskaberne.

Læg mærke til rækkefølgen

En vigtig begrænsning bør fremhæves:

hver enkel funktion bliver udført i den rækkefølge specificeret af TSref referencen.

Hvis vi ikke holder dette faktum for øje bliver resultatet måske anderledes end forventet.

TS TypoScript:
 10 = TEXT
 10.value = Hello World
 10.case = upper
 10.field = header # antager at overskriften indholder "typo3" (små bogstaver)
 10.stdWrap.wrap = <strong>|</strong>

 # resultere i følgende:
 <STRONG>TYPO3</STRONG>

Følgende sker i eksemplet: Først bliver værdien af TEXT objektet sat til "Hello world". Vi ved at TypoScript konfigurationen er gemt i et array. Sorteringen af dette array is ikke som sorteringen i TypoScript. Sorteringen i arrayet er afhænger af definitionerne på rækkefølgende i stdWrap. Denne sortering afspejles i henvisningen. Efter et kort kig i TSref bør det står klart at det første "field" er behandlet herefter stdWrap (og så "stdWrap.wrap") og til sidst "case".

Brug stdWrap rekursivt

Fordi stdWrap funktionen kan kaldes rekursivt er det muligt at ændre eksekveringsrækkefølgende.

Funktionen "prioriCalc" tillader nemt matematiske udtryk. Hvis sat til 1, bliver indholdet beregnet; bemærk, beregningerne er lavet fra venstre mod højre (ingen matematiske regler som "*" før "+" osv.) Følgende eksempel ser ud som om at indholdet i feltet "width" får lagt 20 til værdien.

TS TypoScript:
 10 = TEXT
 10.field = width   # Antager: "width" er 100
 10.wrap = |+20
 10.prioriCalc = 1

Dette er ikke tilfældet. Resultatet som vil blive renderet er: "100+20". Funktionen "prioriCalc" bliver eksekveret før funktionen wrap bliver eksekveret, og derfor beregner den kun resultatet af "field" - udtrykket "100". For at få det forventet resultat skal vi sikre os at "field" og "wrap" bliver eksekveret før "prioriCalc". Det kan vi opnår ved at bruge følgende udtryk:

TS TypoScript:
 10.stdWrap.wrap = |+20

stdWrap funktionen bliver eksekveret efter "field", men før "prioriCalc", således bliver "100+20" wrapped og bagefter bliver funktioen "prioriCalc" eksekveret, og resulterer værdien "120".

Data typen

Når vi bruger TypoScript er det vigtigt at vide hvilken datatype vi har med at gøre. Specielt med stdWrap, vi har erfaret at det en normalt praksis at kombinere funktioner vilkårligt ind til forventet result bliver vist, ved en tilfældighed.

Kun hvis stdWrap funktionaliteten er nævnt eksplicit, kan stdWrap funktionerne som field, data og typelink blive brugt.

lang: flersproget funktionalitet

stdWrap tilbyder egenskaben "lang" hvormed det er muligt at oversætte simple tekster som bliver implementeret via TypoScript på en side.

TS TypoScript:
 10 = TEXT
 10.value = Imprint
 10.lang.de = Impressum
 10.typolink.parameter = 10

Det kan være svært at oversætte for eksterne redaktører. Specielt med ukendte sprog, dette kan være en udfordring.

I det tilfælde er det bedst at behandle oversættelser med konstanter. Disse kan placeret sammen på et specifikt sted og implementeres in i TypoScript.

TS TypoScript:
 # Konstanter
 text.imprint = Imprint
 text.de.imprint = Impressum

 # Setup
 10 = TEXT
 10.value = {$text.imprint}
 10.lang.en = {$text.en.imprint}
 10.typolink.parameter = 10

På den måde er oversættelsen ikke afhængig af elementets TS konfiguration.

cObject

Parameteren cObject kan bruges til at erstatte indhold med et TypoScript objekt. Det kan være et COA, et plugin eller tekst, som i dette eksempel:

TS TypoScript:
 10.typolink.title.cObject = TEXT
 10.typolink.title.cObject.value = Impressum
 10.typolink.title.cObject.lang.en = Imprint

Fremtiden

Manualen bliver stadig vedligeholdt i wiki'en. Ændringer laver her, vil løbende blive fusioneret ind i manualen. Hvis du ønsker at ændre noget, så brug wiki siden på https://wiki.typo3.org/Ts45min . Hvis du tror du har fundet en fejl og ønsker at reportere det, så brug issue trackeren på https://forge.typo3.org/projects/typo3cms-doc-typoscript-45-minutes/issues .