Platinum sponsors
Tutorials
Tout au long de ce document vous auriez pu vous demander comment on change la couleur verte du fond ? Ou comment mettre son propre logo. Et les polices de caractères (Times, Arial, Verdana,...).
Avant de traiter ces questions vous devez comprendre quelque chose de fondamental sur le fonctionnement de la plupart des CMSs : ils séparent le contenu de la présentation. Cela signifie que les pages et leur contenu sont stockés dans la base de données sans aucune couleur ou polices de caractères ou d'images de fond attachés. Au lieu de cela, ces informations sont placées dans le gabarit et dans les feuilles de style qui s'appliquent normalement au site Web entier quand on affiche des pages. Ainsi un changement simple du modèle affectera la présentation de toutes les pages du site Web. C'est une fonction puissante et très importante dans un CMS! Demandez aux gens qui gèrent un site Web basé sur des fichiers HTML de plus de 100 pages et qui veulent changer la présentation...
Contenu statique et dynamique
Considérez le site Web "FC Bigfeet" :
Parties dynamiques : Sur ce site Web le menu (*1), les titres des pages (*2) et la section "Last update" [la Dernière mise à jour] (*4) sont indirectement les parties dynamiques de la page. Cela signifie qu'ils changent de page en page automatiquement. Nous ne pouvons pas affecter directement ces champs par page. Ce sont des parties programmées dynamiquement dans le gabarit.
Cependant le section de contenu (*3) est une partie dynamique de la page dans laquelle le contenu spécifique est inséré. Nous pouvons le modifier en ajoutant, supprimant et réarrangeant des éléments de contenu de la page! Cette section n'est pas un élément du modèle (excepté le formatage des couleurs et des polices de caractères) puisque nous la contrôlons directement avec les éléments de contenu.
Parties statiques : Mises à part les parties dynamiques le gabarit comporte toujours le même logo (*5), la même image de fond (*6) et la même couleur de fond (*7). Ces éléments font aussi partie du modèle (comme les parties indirectement dynamiques) mais ils ne changent jamais peu importe l'action. Toujours la même chose dans chaque page.
Les enregistrements de gabarit ?
Comment TYPO3 met en oeuvre ce principe ? Vous pouvez lire des informations approfondies dans le didacticiel recommandé pour la réalisation de sites Web professionnels Modern Template Building. Cependant il est écrit pour les professionnels de la conception Web dans des équipes avec des développeurs, des designers etc. Le niveau requis est un peu plus important que celui de ce didacticiel.
Mais le point principal c'est l'enregistrement du gabarit. C'est un élément de contrôle qui instruit TYPO3 dans la façon de manipuler une certaine branche de l'arborescence des pages. Si cela vous semble à une approche maladroite au premier abord alors soit – mais c'est cohérent avec ce que vous avez déjà appris. Plus tard ça deviendra parfaitement clair quand vous voudrez développer beaucoup de sites dans la même arborescence de pages incluant de multiples modèles etc.
Si vous regardez le site Web FC Bigfeet vous remarquez que la page racine du site Web contient un tel enregistrement de gabarit :
Réalisons quelques changements dans l'enregistrement du gabarit, "NEW SITE, based on standard". Editez le :
Pour des gabarits standards (based on standard) le champ "Constants" est souvent la place pour changer des valeurs. Les constantes sont ensuite insérées dans le champ Setup et peuvent être insérées dans beaucoup de champs. Donc le changement d'une constante peut signifier beaucoup de changements dans différentes places du TypoScript final de configuration du gabarit.
Dans notre cas, ajoutons une couleur de fond rouge dans le cadre du menu (voir ci-dessus).
Sauvegardez le gabarit, cliquez "Clear all cache" (Effacer tous les caches) dans le menu "Admin functions" :
Faites toujours cela si vous éditez directement les gabarits .
Ceci donne :
Vous pouvez jouer avec les autres valeurs aussi!
Le Constant editor
La meilleure façon de manipuler ces changements est d'utiliser la vue"Constant Editor" dans le module Gabarit :
Vous pouvez avoir accès à beaucoup d'options ici, il y a des explications visuelles pour la plupart d'entre elles et vous pouvez choisir diverses catégories. Vous retrouverez aussi le menu de la couleur d'arrière-plan du menu (catégorie "Basic") :
Remarquez que l'assistant ne fait qu'éditer la constante "menu.bgCol" précédente!
De même vous pouvez facilement changer et télécharger vers le serveur des images à utiliser comme logo ou comme image de fond de page :
Ici nous remplaçons l'image de fond actuelle par celle du logo (*1) et avec le bouton de "Parcourir..." (*2) vous pouvez prendre une image locale sur votre machine pour l'utiliser comme un nouveau logo
Maintenant, il n'y a plus aucune raison de vous en dire plus sur ces fonctions puisqu'elles sont assez évidentes et que vous savez comment faire pour les utiliser.
Configuration du dossier des utilisateurs du frontal ?
Rappelez-vous de la remarque à propos du changement requis sur le gabarit avant que l'identification des connexions des utilisateurs du frontal ne fonctionne? C'est le moment de le traiter.
Quand le formulaire de connexion est sollicité il a besoin de connaître la page (le dossier système) dans laquelle il recherche les utilisateurs pouvant se connecter. C'est fait en configurant une constante - "styles.content.loginform.pid" - à la valeur d'uid du dossier système "Users".
L'uid du dossier système est "14" :
Donc tout ce que nous devons faire est de placer le nombre "14" dans ce champ :
Ce champ se trouve parmi les 64 valeurs inscrites dans la catégorie CONTENT de l'éditeur de constantes (Constant Editor). Vous pouvez aussi créer la valeur manuellement dans le champ "Constants" bien sûr.
La meilleure façon d'éditer un gabarit, ou le champ Constants, c'est d'utiliser la vue "Info/Modify". Ici vous obtenez un accès direct aux champs du gabarit. C'est une aide pour les développeurs qui l'utiliseront beaucoup :
(Notez le lien (*1) au-dessous du bloc qui vous redirige directement vers une édition complète du gabarit si vous en avez besoin).
Dans le champ Setup vous trouvez ces quelques lignes :
C'est du code étrange et qui exige un manuel et un peu de connaissance de fond pour le gérer! Ne vous inquiétez pas.
La première ligne (*1) insère un plan de site alternatif à celui par défaut, ensuite une feuille de style est configurée pour la page (*2). C'est utilisé par le plug-in "mininews" qui gère tout son rendu par CSS (contrairement à d'autres parties de ce gabarit standards encore gérés par des tags <FONT>). Finalement nous trouvons la configuration du plug-in newsletter (*3). Ceci est nécessaire pour s'assurer que les gens ne vont pas recevoir un e-mail avec un lien avant qu'ils n'aient souscris. Puis la langue danoise est configurée (*4) et le suivi des connexions est activé (*5).
C'est une courte description. Rappelez-vous que ces options ne parlent pas d'elles même. Vous aurez besoin de plus de connaissance, de sources diverses (comme TSref) avant que vous ne les compreniez entièrement. Actuellement vous pouvez noter que le champ Setup est apparemment la place pour ajouter de telles choses, que l'on appelle leTypoScript!
Je donnerais une note finale au champ Setup en présentant le Navigateur d'Objet :
Cet outil montre visuellement l'arbre des objets TypoScript du champ Setup. Si vous avez remarqué la ligne TypoScript pour la configuration de la langue danoise ("page.config.language = dk") vous comprendrez la logique de cette vue d'arbre.
Notez que TypoScript n'est pas vraiment un langage de script avec des structures de commande, mais plutôt un langage de configuration qui créé une hiérarchie de l'information utilisée pour commander le moteur de gabarit - comme la Base de Registre sous Windows. Le langage de création de procédure de TYPO3 est PHP et TypoScript est un language de configuration pour lier ensemble des parties externes (comme le contenu, des gabarits, PHP et XML ou autre chose). Les professionnels devront l'apprendre, sachant que le niveau d'utilisation dépendra de vos besoins. Vous en connaîtrez plus avec d'autres didacticiels.
Si vous activez "Enable Objects Links" (en bas de la page) vous pouvez même changer les valeurs de cette grande vue d'ensemble :
Cliquez sur la propriété que vous voulez éditer :
Changez la valeur et la sauvegardez :
C'est aussi facile que cela!
Maintenant, comment pourriez-vous savoir ce que cette option signifie ? Et bien, vous aurez toujours besoin d'un peu plus de connaissances de fond, mais l'assistant TS vous aidera avec la syntaxe si vous savez quoi rechercher :
Pour l'objet "page.config" il y a des propriétés qui peuvent être affichées avec l'Assistant TSreference :
Dans la fenêtre qui surgit vous pouvez maintenant chercher l'objet dont vous recherchez les propriétés. C'est ici que vous devez savoir ce qui s'applique à votre page spécifique (dans notre cas "page.config") :
Et l'écran suivant vous montrera les propriétés de façon claire.
En fait cette information est tirée directement des manuels en ligne et peu aussi être trouvée sur typo3.org. Regardez CONFIG object in TSref.
Tsref
Le document TypoScript reference (TSref) est très connu dans la collection des documents qui appartiennent à TYPO3. Il contient la description de tous les objets TypoScript que vous pouvez utiliser pour créer des gabarits dans TYPO3. C'est le manuel des éléments que vouspouvez mettre dans le champ Setup des gabarits.
Avant que vous ne plongiez dans TSref remarquez que cela n'a de sens que si vous savez déjà ce que vous recherchez! C'est un manuel de référence décrivant toutes les propriétés. Ainsi si vous connaissez la propriété recherchée ce document est très utile - même indispensable!
Le TypoScript par l'exemple
La meilleure façon de procéder, si vous voulez tester cela vous même, est d'utiliser TypoScript by Example. Ce document contient beaucoup d'exemples organisés comme des mini-didacticiels sur des sujets relatifs au TypoScript.
Dans notre cas le gabarit FC Bigfeet est basé sur le gabarit standard appelé "BUSINESS". C'est de là que toute la configuration visible dans l'Object Browser provient!
Vous pouvez voir cette structure avec la vue "Template Analyser" dans le module Gabarit :
Tous les "éléments" de cet arbre représentent le contenu TypoScript préfabriqué pour le Gabarit! Ainsi quand vous regardez le champ Setup ou Constant du gabarit principal "NEW SITE, based on standard" (*1) et que vous vous demandez d'où provient tout cela, et bien la réponse a été pré incluse par l'analyseur syntaxique des gabarits statiques .
Si vous voulez voir le contenu de chaque élément, cliquez sur son titre.
Gabarits statiques
Le gabarit statique "styles.sitemap.gs" a été inclus pour obtenir un plan du site plus sympathique. Le fichier de gabarit statique "Ext:da_newsletter_subscript ..." a été inclus pour obtenir les droits de configuration pour l'abonnement de la newsletter (voir la vidéo précédente). Finalement le gabarit statique "BUSINESS" (standard template) est l'élément clef de l'apparence de notre site Web.
Tout est modifiable dans l'enregistrement du gabarit. Allez dans le module Liste et éditez-le :
Le champ "Include static" contient les modèles statiques (*1 et *2) et le champ "Include static (from extensions)" contient la référence au fichier de gabarit statique de l'extension newsletter (*3). Les cases à cocher "Clear" et "Rootlevel" devraient être activées (*4) pour des gabarits principaux.
Les gabarits statiques ne sont pas trop utilisés dans des sites Web professionnels faits avec TYPO3. La raison c'est que de tels sites Web résultent d'un travail personnalisé exigeant un TypoScript personnalisé. Les gabarits statiques contiennent du code TypoScript général, très utile, mais aussi limité à un certain degré.
Cependant dans presque n'importe quel gabarit, même dans des conceptions personnalisées, un modèle statique pour restituer les éléments de contenu de page est inclus. En effet, la création de gabarit et le code de rendu pour toutes les combinaisons d'éléments de contenu est un très grand travail; il est donc intéressant de réutiliser le code dans ce cas là.
Changer de Gabarit
Remplaçons le gabarit "BUSINESS". Dans le champ "Include static" supprimons le modèle BUSINESS et ajoutons le gabarit CANDIDATE :
Sauvegardez le résultat, cliquez sur "Effacer tous les caches" et vérifiez le site Web :
Comme vous pouvez le voir les éléments de contenu sont les mêmes, la couleur de l'arrière-plan est la même, la feuille de style utilisée pour les news est la même, mais le gabarit est différent! C'est à ça que servent les gabarits! Ils changent la structure complète du site Web! Il est aussi facile que cela de changer la charte d'un site de 10, 100 ou 1000 pages dans TYPO3 - un simple changement de gabarit affecte toutes les pages!
Dans ce nouveau modèle il semble y avoir une fonction que nous n'avions pas auparavant. C'est la colonne bordure dans laquelle nous pouvons mettre du contenu.
Page TSconfig
La première chose que nous devons faire est de changer l'option "Page TSconfig" qui limite TYPO3 à n'afficher que la colonne "Normale" dans le module Page. Éditez l'en-tête de la page racine "FC Bigfeet" :
Ajoutez ", 3" à la liste comme indiqué ici :
Cela commandera aumodule Page d'afficher la colonne Normal (0) et la colonne de contenu Bordure (3). Si vous voulez connaître les autres options possibles, cliquez sur le bouton de "TS" à droite. Dans la fenêtre qui surgit, trouvez "mod. SHARED" :
Cela vous présentera la propriété "colPos_list" incluant sa description. Il vous permet aussi de cliquer sur la propriété et il sera transféré en arrière dans le champ TSconfig.
Sauvegardez l'en-tête de page et allez sur le module Page - vous verrez maintenant une colonne supplémentaire :
Maintenant, essayez d'ajouter un élément de contenu ici. Cliquez sur l'icône "Créer un nouvel élément ..." :
Choisissez alors un élément de type "Texte" ordinaire et saisissez un certain contenu :
Remarquez le contenu du champ "Columns" parmi les options secondaires du champ "Type". Il a la valeur "Bordure", ce qui fera que cet élément de contenu apparaitra dans la colonne Bordure et non pas dans la colonne Normal! Ce champ a été défini d'avance avant la création de ce formulaire.
Appuyez sur le bouton "Sauvegarder et fermer le document". De retour dans le module Page vous verrez le nouveau contenu présenté dans la colonne Bordure :
Mais il devrait aussi être affiché sur le site Web à la bonne position! Vérifiez donc le frontal aussi :
Et c'est également le cas!
Comprendre la "Configuration TS de la page" [Page TS Config]
Le petit changement que nous avons fait dans le champ "TSconfig" de la page racine était tout à fait intéressant. C'était un morceau de code de configuration qui avait un certain effet sur le fonctionnement du backend. La "Page TSconfig" est ainsi un concept puissant qui vous permet de configurer finement le comportement des modules, de l'Éditeur de Texte Riche et d'autres éléments. La syntaxe du code que vous entrez est du TypoScript, le même que pour les gabarits. Mais il n'y aucun rapport avec les gabarits dans le frontal, seule la configuration de fonctions est identique.
Si vous voulez en connaître plus sur les propriétés de TSCONFIG vous pouvez trouver cela sur typo3.org. Cette option particulière peut être trouvée sur cette page (cherchez le titre "Shared options for modules (mod.SHARED)").
Vérification de la Configuration TS de la page
Pour voir les paramètres TSconfig de la page dans n'importe quel point dans l'arborescence utilisez le module Info avec la vue "Configuration TS de la page" :
Comme vous pouvez le voir, le même type de structure arborescente est montrée que pour le Navigateur d'Objets.
Annulez les changements dans le gabarit
Avant que nous ne continuions nous allons remettre le gabarit de type BUSINESS. Si vous n'avez pas fait de changements dans le gabarit entre-temps nous pouvons facilement le faire en cliquant juste sur le bouton Annuler - qui rétablira l'état précédent de l'enregistrement dans la base de données. Choisissez "Editer" pour le gabarit :
Après que l'écran soit affiché, contrôlez le résultat. La configuration précédente du champ Include static devrait être visible à nouveau :
( si ce n'est pas le cas pour vous faites le changement manuellement).
Vous pouvez aussi rétablir la couleur de fond de la constante de menu (menu.bgCol) à *007000.
Plus de renseignements sur la fonction Annuler/Rétablir la dernière opération sont disponibles ici.
TYPO3 a la capacité de créer non seulement un site Web, mais n'importe quel nombre de sites Web dans la même base de données! C'est une fonctionnalité puissante appelée "multi site". Le principe, c'est qu'un nouveau site Web peut commencer de n'importe quelle page de l'arborescence et on indique la page racine d'un nouveau site est y insérant un enregistrement de gabarit!
Si vous pensiez que les enregistrements de gabarit étaient une approche étrange à la création de gabarits alors vous devriez voir pourquoi ils sont une solution très efficace à ce problème maintenant.L'enregistrement de gabarit devient l'élément de contrôle que vous insérez à une page pour commencer un nouveau site.
Essayons cela en pratique maintenant :
Création d'une nouvelle branche
D'abord vous créez une nouvelle page sous l'actuelle, vous y ajoutez ensuite quelques sous-pages. Cela va être le début d'un site Web du club des fans :
"Fan club" est votre nouvelle page de racine pour ce site. Essayez de le visualiser :
Cela n'a pas l'air de fonctionner :
Pourquoi ? La réponse se trouve dans le principe expliqué précédemment, car nous n'avons pas encore créé d'enregistrement de gabarit afin de préciser à TYPO3 qu'il s'agit de la page racine! Pour cela, utilisez le Module Gabarit, choisissez la vue "Info/Modify" et utilisez l'assistant :
Trouvez le modèle standard que vous voulez utiliser comme base de votre nouveau site Web :
Confirmez la création du nouveau modèle et allez dans le module Liste pour vérifier l'existence d'un nouvel enregistrement de gabarit :
Le problème est-t'il résolu ? Retournez dans le frontal :
Oui! Mais les pages sont vides puisqu'aucun contenu n'existe encore. Et le gabarit doit encore être modifié avec le "Constant Editor" afin de modifier les couleurs etc. C'est l'étape suivante...
Ce n'est probablement pas une surprise de voir que l'id de la page renvoyée par le navigateur est "34" . Mais lequel des deux sites Web dans la base de données sera affiché si nous n'envoyons pas d'id ? La réponse est le premier, le site "FC Bigfeet".
Oui mais, comment feront les visiteurs pour arriver à visiter notre nouveau site ? Continuer de lire...
Quand vous voulez gérer des sites Web multiples à l'intérieur de votre base de données TYPO3 il suffit simplement de vous assurez qu'ils ont chacun un domaine séparé. Par exemple le site "FC Bigfeet" pourrait avoir le domaine "www.fc-bigfeet.com" et le site Web du fan club pourrait être "fanclub.fc-bigfeet.com" et aussi "www.fanclub.fc-bigfeet.com". Il faut maintenant s'assurer que les visiteurs voient le bon site s'ils utilisent le bon nom de domaine!
C'est un processus en trois étape :
Assurez-vous que les DNS de tous les domaines soient dirigés vers votre serveur web (indépendant de TYPO3)
Configurez votre serveur Web pour rediriger toutes les demandes des trois domaines vers le répertoire contenant TYPO3 (.../quickstart/) - maintenant une visite vers n'importe lequel des trois domaines finira sur le site principal "FC Bigfeet".
Créez un enregistrement de domaine pour chaque domaine que vous voulez afficher avec le site "Fan Club".
Ce se fait en ajoutant un nouvel élément à la page racine "Fan Club" :
Entrez alors le nom de domaine principal
Sauvegardez l'enregistrement.
Créez en un autre pour le domaine alternatif "www.fanclub.fc-bigfeet.com". C'est un domaine que nous utilisons pour "la sécurité" et nous souhaitons rediriger vers le domaine "fanclub.fc-bigfeet.com". C'est fait comme cela :
Sauvegardez et visualisez la page dans le module Liste :
Les deux enregistrements sont retrouvés dans l'affichage des éléments de la page "Fan Club" du module Liste . Si vous avez tout configuré correctement une visite sur "http://fanclub.fc-bigfeet.com" affichera le nouveau site Web et l'URL "http://www.fc-bigfeet.com" affichera l'ancien. Bien sûr ça me marchera que si vous avez achetez ces domaines récemment!
Que se passe-t-il : TYPO3 détecte le nom de domaine. Il essaye de chercher un enregistrement de domaine. S'il en trouve un (comme "fanclub.fc-bigfeet.com") alors TYPO3 se dirige et se limite à la branche de cette page racine! Cela signifie que n'importe quelle demande d'id de page doit être dans la branche où l'enregistrement de domaine a été trouvé! Si un id de page du site "FC Bigfeet" est demandé dans le domaine "fanclub.fc-bigfeet.com" alors TYPO3 affichera la première page du site Web "Fan Club"!
Utilisation de l'assistant nouveau gabarit
La fonction "Create template for a new site" de la vue "Info/Modify" est très pratique pour créer de nouveaux sites Web.
Si vous cliquez dessus sans choisir de gabarit standard vous créerez toujours un nouvel enregistrement de gabarit, mais sans aucun gabarit standard et avec quelques lignes de TypoScript pour commencer. C'est cette voie que prennent les pros pour commencer un nouveau site et ensuite ils utilisent leur connaissance du TypoScript etc. C'est le processus suggéré dans le didacticiel "Modern Template Building, Part 1".
Structure pour de nouveaux projets ?
Quand vous commencez de nouveaux sites Web vous le faites généralement avec une base de données vide. Si vous recherchez une base de données totalement vide sans pages, sans contenu et avec seulement un utilisateur "administrateur", téléchargez alors le kit Dummy de typo3.org. Celui-ci est conçu pour être la structure de départ pour de nouveaux projets.
Puisque vous êtes toujours un débutant avec TYPO3 - ou si vous êtes simplement paresseux - vous pourriez aussi mettre en oeuvre de nouveaux projets avec le kit "QuickStart" - celui que nous utilisons ici! Mais il contient déjà un ensemble d'utilisateurs, un modèle, un certain contenu déjà en place etc. Vous devriez juste supprimer le modèle, en faire un nouveau, réarranger des pages et ajouter le nouveau contenu en supprimant les parties dont vous n'avez pas besoin. C'est probablement la chose à faire si vous devez commencer rapidement.
Puisque le "gabarit" est le point critique de vos possibilités de mise en oeuvre avec un CMS il est très important de souligner que ce didacticiel ne fait que survoler les possibilité des gabarits dans TYPO3. Je n'ai utilisé qu'un gabarit standard très simple qui donne une apparence d'amateur. C'est volontaire afin de ne pas se perdre dans de trop nombreuses questions. Souvenez-vous, ce didacticiel doit vous apprendre les principes de TYPO3. Et ces principes sont également valables lors d'une utilisation professionnelle du produit. Mais la mise en oeuvre des gabarits sera très différente.
Remarquez que ce didacticiel est basé sur un site Web entièrement fonctionnel avec un modèle déjà en place! Vous n'avez pas appris, dans les détails au moins, comment mettre en oeuvre votre propre conception personnalisée. C'est ce que font tous les didacticiels restants (ou presque) – le site "FC Bigfeet" est conçu comme une introduction - la personnalisation des gabarits est un domaine non couvert ici!
Les faits et possibilités des gabarits
Quelques rappels et quelques faits concernant les gabarits dans TYPO3 :
Vous pouvez mettre en oeuvre n'importe quelle conception graphique, de la manière que vous voulez.
Vous pouvez avoir n'importe quel nombre de niveaux de menu.
Vous pouvez avoir des sites multiples, des gabarits multiples.
Vous pouvez avoir des pages dans n'importe quel langage.
Vous pouvez avoir des secteurs ou des colonnes de contenu multiples dans une page.
Vous pouvez intégrer toutes sortes de sources de données externes via des plug-in écrits en PHP.
Vous pouvez ajouter autant d'applications Web que vous voulez et les exécuter sur diverses pages dans TYPO3.
Vous pouvez tout améliorer avec PHP (avec une compatibilité arrière complète!).
Vous pouvez tout faire – certaines choses seront directes (choses typiques), d'autres choses sont plus compliquées (des choses moins typiques).
Une liste des fonctionnalités se trouve ici sur typo3.com.
Développer des sites Web professionnels avec TYPO3 ?
Le didacticiel "Modern Template Building, Part 1" est le prochain document à lire par le débutant voulant développer à un niveau professionnel.
