Platinum sponsors
Tutorials
A partir d'ici, encore plus d'exemples de TypoScript
Si vous voulez commencer un site Web à partir du tout début, vous devez créer un Gabarit à la première page du site Web. Cette page peut être référencée comme "racine du site Web" ou généralement “Page d'accueil”. La "page d'accueil" n'est pas automatiquement la toute première page dans l'arbre hiérarchique des pages (pagetree) de Typo3 mais peut être toute page de l'arbre que vous voulez voir se comporter en tant que point de départ d'un site Web !
Le Gabarit initial doit avoir les boîtes à cocher (checkboxes) "Clear constants and setup" et "Rootlevel" activées. Afin de comprendre le pourquoi, vous devez savoir que tous les Gabarits à partir de la racine du pagetree et en parcourant le pagetree sont lus et exécutés.Ceci s'appelle le "rootline" :
Dans cette image, sur la droite, le rootline (chemin à la racine) de la page "Experienced web...." (3) parcourt tout le chemin depuis la page "www.typo3.com" (zéro). Ceci parce qu' il y a un Gabarit enregistré à la page "www.typo3.com" avec l'indicateur de rootlevel activé (voir ci-dessous). Sur la gauche vous voyez comment le rootline est représenté à l'intérieur de la zone de données PHP (PHP-array .
Si vous vous posez une question comme "Est-ce que la page 730 est dans le rootline?" alors la réponse est oui dans ce cas-ci, parce que la page avec l'identification 730 ("Introduction") s'avère justement être la deuxième page dans le rootline (à index 1). Veuillez voir le TSref pour plus d'information
La case "Rootlevel" activée implique que le Gabarit annonce le début d'un nouveau site Web pour la page où le Gabarit se trouve mis en fonction. Si vous ne placez pas ce checkbox, le Gabarit agit en tant qu'extension à n'importe quel Gabarit dans le rootline avant lui.
La case "Clear constants" activée implique que toutes les constantes des Gabarits précédents dans le rootline sont effacés avant que le chargement du Gabarit activé sur cette page.
"Clear setup" activée implique que n'importe quel code de TypoScript des Gabarits précédents dans le rootline sont effacés avant que le chargement du Gabarit activé sur cette page.
Si vous essayez de regarder la page maintenant, un errormessage apparaîtra
Vous devez écriture quelques instances de TypoScript dans les champs "Constants" et "Setup". Normalement vous incluez certains des Gabarits statiques pour commencer, mais pour cet exemple nous faisons un petit Gabarit à partir de zéro. Écrivez donc les instances suivantes dans le champ "Constants" :
bgCol = red
Vous avez à présent défini une constante appelée - "bgCol" – avec la valeur "red". Nous allons insérer d'autres constantes dans le champ "setup" en insérant :
page = PAGE
page.typeNum = 0
page.bodyTag = <BODY bgColor="{$bgCol}">page.10 = HTML
page.10.value = Hello World
page.10.value.case = upper
Ceci ressemble à ceci dans votre browser
Cet exemple montre un certain nombre de points concernant TypoScript. Commençons avec les deux premières lignes. Ici "page" est définie pour être une “PAGE-object”. Une propriété exigée pour un “PAGE-object” est la valeur de 'typeNum” qui est spécialement utilisé quand un site Web utilise des cadres (frames) (dans ce cas, le typeNum identifierait les différents cadres). Si le typeNum est zéro, il correspond alors à une page sans la valeur de type, soit par exemple "?id=51". C'est le cas des sites Web sans cadres (frames)
Une autre propriété de PAGE-objet est "bodyTag". A partir d'ici, vous entrez dans le domaine des étiquettes qui concernent le corps de page. Veuillez noter que la couleur de fond est rouge parce que nous avons inséré la constante dans le champ "Constants".
Enfin, un “Content-objet” du type "HTML" est défini. La valeur est mise à "Hello World". Ceci est envoyé hors fonction Typo3 au site Web (fonction Php). Mais vous verrez que la restitution est faite en “haut de casse” (majuscule) par ce que la valeur et toutes les propriétés sont analysée par la fonction "stdWrap" (habillage standard). Une propriété de "stdWrap" est le "case" qui peut être "upper" ou "lower". Faites une conjecture de ce que peut faire "lower" …
Maintenant nous ajouterons un petit menu au site Web.Ce menu doit être situé au-dessus du texte "Hello World". Ajouter maintenant ceci au bas du champ "Setup"
page.5 = HMENU
page.5.1 = TMENU
page.5.1.wrap = | <BR><BR>
page.5.1.NO {linkWrap = <font color=yellow> | </font>
ATagBeforeWrap = 1
}
Et voici comment vous définissez un nouvel objet de contenu (contenu-objet) à la position 5 dans la “content-array” (structure d'information) de la page. Le type d'objet est HMENU. HMENU a une structure d'information numérique des objets “menu”. Ici nous utilisons "TMENU" comme menu-objet pour le premier niveau. Ceci nous donne un menu de type texte “textbased”. Pour le “TMENU-objet” nous avons placé la propriété "enveloppe" (wrap). Comme vous pouvez vous en rappeler, "a wrap” (enveloppe) signifiera qu'elle sera fractionnée par le caractère "|" et que les deux premières parties seront placées autour de "quelque chose". Dans ce cas-ci (page.5.1.wrap = | < BR><BR >) le menu entier est enveloppé de sorte que deux nouvelles lignes apparaissent après le menu.
Puis, quelques propriétés sont définies pour “.NO" sous TMENU. “.NO" signifiant l'installation des éléments de menu en condition “normale”. Une autre des conditions peut être "ACT" (Active) qui entraînerait que quand un menu-élément est quelque part dans le “chemin d'accès" (path), il est intégré dans le site Web. Par exemple vous pourriez changer la couleur de l'élément en blanc si vous voulez indiquer visuellement sur le menu-élément qu'un visiteur surfer a récemment écrit sur cette section du site.
Sous “.NO" vous définissez que chaque menu-élément est enveloppé dans une étiquette de police qui met en jaune le “lien”. "ATagBeforeWrap" est une option qui vous indique que l'étiquette de ”Lien” (< A >) doit être habillé dans le menu-élément avant l'application de l'étiquette de Police (ou bien la couleur jaune sera ignoré par l'étiquette-couleur normale).
Au lieu du menu textuel que vous avez juste défini, vous pourriez insérer le menu graphique du site Web Typo3. Ceci serait effectué en utilisant ce code en lieu et place du code précédent :
page.5 < temp.topmenu
Maintenant vous voudriez ajouter le contenu au site Web. Dans la solution standard de TypoScript le table de contenu principale est "tt_content". Ainsi vous ajoutez un nouvel objet contenu du type CONTENT. Vous avez mis la propriété "table" avec la valeur “tt_content”.
Pour configurer la requête du “sql-select” vous définissez la propriété "pidInList" de l'objet "select". Quand vous le mettez à "this" le pid correspondant à l'enregistrement du contenu (content-record) DOIT correspondre au “id” de la page actuelle ! "orderBy" est mis avec la valeur "sorting" qui correspond à la colonne dans la table tt_content qui va déterminer le tri des éléments
page.10 = CONTENT
page.10 {table = tt_content
select {pidInList = this
orderBy = sorting
}
}
Pour que cela fonctionne, vous devez définir comment chaque enregistrement de contenu va être disposé (layouted). Par défaut ceci est défini par le “root-object” l'objet racine "tt_content".
Voici un exemple court de TypoScript qui produirait du contenu pour l'en-tête et le texte de CType :
tt_content = CASE
tt_content.key.field = CType
tt_content.header {1 = TEXT
1.field = header
1.wrap = {$cHeaderWrap}1.space = 3 | 2
}
tt_content.text < tt_content.header
tt_content.text {3 = TEXT
3.field = bodytext
3.fontTag = {$cBodyTextWrap}3.br = 1
3.space = | 10
3.parseFunc {makelinks = 1
makelinks.http.keep = path
makelinks.http.wrap = <B>|</B>
makelinks.mailto.keep = path
makelinks.mailto.wrap = <FONT color="blue">|</FONT>
makelinks.mailto.ATagBeforeWrap = 1
}
}
Il y a deux constantes ici, cBodyTextWrap et cHeaderWrap Celles-ci doivent être alors définies dans le champ “Constantes” du Gabarit et avoir pour valeur i
cHeaderWrap = <FONT face="Verdana" size="3" color="#333333"><B>|</B></FONT>
cBodyTextWrap = <FONT face="verdana" size="2"> | </FONT><BR>
Maintenant, ceci nous donnerait une en-tête de taille 3, Verdana, en gris et gras. Le bodytext serait formaté également avec le Verdana mais en taille 2 et avec une étiquette < BR>- après la section
