Utilisation de TYPO3 pour les petits projets, partie 2 - Contenu et modèles

Juste avant de terminer l'installation de TYPO3 dans la partie 1, l'outil d'installation nous a demandé si nous voulions créer une page d'accueil vide. En sélectionnant cette option, l'outil d'installation a ajouté une nouvelle page racine dans l'arborescence des pages.

Que sont les pages racines ? Une seule installation TYPO3 peut prendre en charge plusieurs sites web, chacun avec son propre domaine, ses propres modèles et son propre contenu. Chaque site dont vous disposez aura besoin de sa propre page racine à partir de laquelle vous ajouterez vos pages enfants et leur contenu. Notez qu'une page racine est toujours accompagnée d'une icône représentant un globe terrestre.

Dans notre exemple, nous avons donc un seul site web avec une seule page racine. Cependant, si nous souhaitions créer un deuxième site web à l'avenir, il nous suffirait de créer une deuxième page racine et de lui attribuer un domaine.

Pour créer une nouvelle page dans l'arborescence des pages, nous faisons glisser l'icône Page et la plaçons dans notre page racine.

• Nous devons lui donner un nom.
• Elle sera désactivée par défaut (icône rouge) et pourra être activée en cliquant avec le bouton droit de la souris et en sélectionnant Activer, une fois que vous serez prêt à la rendre publique.
• Si nous avons plusieurs pages dans l'arborescence, nous pouvons modifier leur ordre et même les imbriquer en faisant glisser chaque page à l'emplacement souhaité.

Dans mon exemple, j'ai trois pages au total. Ma page racine, que j'ai appelée Accueil, puis une page À propos et une page Contact.

Pour en savoir plus sur l'utilisation des pages, consultez la section Pages du guide de l'éditeur TYPO3.

Une fois que nous avons créé et configuré les pages de notre site, l'une des premières choses à faire est d'y ajouter du contenu.

Le contenu peut prendre différentes formes, qu'il s'agisse de paragraphes de texte, d'images, d'un formulaire web ou d'un plugin provenant d'une extension tierce.

Les éléments de contenu sont plus que de simples contenus, ce sont des objets que nous pouvons traduire, pour lesquels nous pouvons définir des dates de publication et d'expiration, et que nous pouvons même référencer à plusieurs endroits sur notre site TYPO3.

Pour ajouter du contenu à une page, sélectionnez d'abord la page dans l'arborescence, puis sélectionnez « Créer un nouveau contenu ». Une gamme d'éléments de contenu que nous pouvons ajouter à notre page s'affiche alors.

Dans mon exemple, je vais sélectionner l'élément « Texte normal » et ajouter un simple « Bonjour tout le monde ! ».

Si nous allons voir notre page dans le frontend (en cliquant dessus avec le bouton droit de la souris dans l'arborescence des pages et en sélectionnant Afficher), je crains que nous soyons très déçus.

En effet, nous n'avons encore installé aucun modèle de frontend. À la place, TYPO3 affiche le message d'accueil par défaut de TYPO3 avec mon élément de contenu Bonjour tout le monde en dessous.

Le package Bootstrap est une extension TYPO3 qui fournit un ensemble de modèles préconfigurés et réactifs, ainsi que des éléments de contenu améliorés tels que des diaporamas d'images, des groupes de cartes et bien plus encore.

Nous allons installer le package Bootstrap pour notre projet, puis modifier quelques paramètres de notre site, tels que la palette de couleurs et la police.

Pour commencer, nous devons installer l'extension en exécutant la commande suivante :

composer require bk2k/bootstrap-package

Ensuite, nous devons exécuter une autre commande,

vendor/bin/typo3 extension:setup

Le package Bootstrap doit modifier certaines tables existantes, la commande exécute les migrations de base de données requises.

Nous avons installé le package Bootstrap, mais nous devons maintenant le charger sur notre site.

Dans la partie gauche, sélectionnez :

TypoScript > Page racine > Modifier l'enregistrement TypoScript > Modifier l'ensemble de l'enregistrement TypoScript

Dans l'onglet Général, supprimez tout le TypoScript dans le champ Configuration. Il s'agit du TypoScript qui génère le message « Bienvenue dans TYPO3 », dont nous n'avons pas besoin.

Sélectionnez ensuite l'onglet Options avancées.

• Charger le package Bootstrap complet
• Assurez-vous que les éléments de contenu fluide et les éléments de contenu fluide CSS ne sont PAS sélectionnés.

Revenez au module Page, sélectionnez la page À propos, puis sélectionnez Modifier les propriétés de la page.

Sélectionnez l'onglet Apparence. Nous disposons désormais d'un large choix de mises en page backend. Pour en savoir plus sur les mises en page backend, consultez le guide des packages du site.

Mais pour l'instant, je vais sélectionner la mise en page backend par défaut et afficher à nouveau ma page dans le frontend.

Nous disposons désormais d'une interface fonctionnelle pour notre site et tout ce que nous voyons peut être modifié, voire supprimé.

• Le logo TYPO3 CMS Bootstrap Package peut être remplacé par votre propre logo ou supprimé.
• Nos deux pages, À propos et Contact, sont visibles (n'oubliez pas d'ajouter un lien « Accueil » afin que les utilisateurs puissent revenir à votre page d'accueil).
• Mon contenu Hello World est visible.
• La mention « English » apparaît dans le pied de page, car la langue par défaut de mon site est l'anglais. Si j'ajoute d'autres langues, je peux passer de l'une à l'autre à l'aide du sélecteur de langue situé dans le pied de page. Je peux également supprimer le sélecteur si je sais que je n'ajouterai pas d'autres langues.
• Le message « Running with TYPO3... » figurant dans le pied de page peut également être supprimé ou modifié.
• Enfin, la police peut également être modifiée.

Mais comment modifier ces valeurs ?

Revenez au module TypoScript sur le côté gauche.

TypoScript > Page racine > Éditeur de constantes

À partir de là, nous pouvons personnaliser le package Bootstrap et modifier un certain nombre d'éléments, notamment le logo, la palette de couleurs, la police et bien plus encore.

Chaque paramètre a une catégorie correspondante. Par exemple, si je souhaite modifier la palette de couleurs de mon site, je dois sélectionner « styling » dans le menu déroulant.

N'oubliez pas de sélectionner « Save » une fois que vous avez effectué toutes vos modifications.

Nous avons installé le package Bootstrap et disposons désormais d'une interface réactive pour notre site.