Premiers pas avec le CMS TYPO3

TYPO3 utilise le Fluid Templating Engine, qui agit comme une colle entre le contenu généré par l'utilisateur tel que les pages et les articles de blog et nos modèles de conception. Pour faciliter le positionnement et la structure du contenu dans le backend, TYPO3 utilise des mises en page de backend.

Pour gérer nos modèles de conception, TYPO3 utilise des Sitepackages.

Les « Sitepackages » existent en tant que paquet autonome qui est utilisé pour stocker les modèles html d'un projet, les fichiers css et javascript ainsi que d'autres actifs tels que les polices et les images.

Accéder au backend de TYPO3 :

• Ouvrez votre navigateur et naviguez vers votre domaine suivi de /typo3. Par exemple : www.yourdomain.com/typo3.
• Entrez votre nom d'utilisateur et votre mot de passe.
• Si l'option est activée, complétez toutes les étapes de sécurité supplémentaires pour l'authentification multifactorielle.

Le backend de TYPO3 est votre centre de contrôle, conçu pour la convivialité avec une navigation claire et des outils modulaires :

• Barre supérieure : Accès aux paramètres personnels, à la fonctionnalité de recherche et aux notifications.
• Menu des modules : Situé à gauche, ce menu permet d'accéder à des outils essentiels comme la liste de fichiers, les pages et les extensions.
• Espace de travail : La section principale où vous créez et modifiez du contenu.

La barre supérieure permet d'effectuer un certain nombre de tâches :

• Gérer notre profil d'utilisateur,
• Accéder aux notifications du système
• Consulter les informations du système
• Accéder à l'outil de recherche interne

Pour accéder au menu des paramètres de l'utilisateur, sélectionnez votre nom d'utilisateur dans le coin supérieur droit et, dans le menu, sélectionnez Paramètres de l'utilisateur.

Note : à partir de là, vous pouvez également basculer entre le mode clair et le mode sombre.

À ce stade, je peux modifier un certain nombre de choses, toutes liées à mon propre compte, par exemple mes données personnelles telles que mon nom, mon adresse électronique et mon avatar

Je peux également changer la langue du backend à partir de mon profil d'utilisateur. Mon installation comprend des langues supplémentaires, ce qui me permet de changer facilement de langue et de travailler dans une autre langue si nécessaire.

Vous pouvez changer votre mot de passe à partir de l'onglet Sécurité du compte.

L'outil de recherche, situé dans la barre supérieure, est utilisé pour rechercher des enregistrements dans votre site TYPO3. Cela inclut les pages, les éléments de contenu et d'autres enregistrements qui sont stockés dans la base de données de votre installation.

Vous pouvez également utiliser le raccourci clavier Cmd/Ctrl + K pour accéder à l'outil de recherche depuis n'importe quel endroit du backend.

Le module Liste de fichiers est votre centre d'organisation des actifs qui comprend des images, des documents et d'autres fichiers.

• Structurez les fichiers dans des dossiers pour en faciliter l'accès.
• Téléchargez, renommez et déplacez des fichiers directement dans le module Liste de fichiers.
• Prévisualisez les images à l'aide de la vue en mosaïque.

Dans l'exemple ci-dessous, j'ai deux montages de fichiers distincts. L'un est utilisé pour stocker les documents et l'autre est utilisé pour stocker les images.

La première chose que vous remarquerez en chargeant le module Page est l'arborescence des pages.

L'arborescence des pages est une liste hiérarchique de toutes les pages de notre site, elle sert également de conteneur pour les éléments, tels que les nouvelles, les articles de blog et dans cet exemple, les enregistrements des utilisateurs frontaux.

Vous remarquerez que j'ai cinq pages au niveau supérieur de mon site : À propos, Service, Contact, Rencontrer l'équipe et Connexion client.

Lorsque je consulte mon site dans l'interface utilisateur, je vois les cinq mêmes pages dans le même ordre. C'est parce que notre menu principal est configuré, par défaut, pour correspondre à la structure de notre arborescence de pages.

Pour créer ou ajouter une nouvelle page à mon arborescence, je fais glisser l'icône de création de page jusqu'à l'endroit où je souhaite que la nouvelle page existe. Dans mon exemple, je veux que la nouvelle page soit placée à côté de la page À propos de nous.

Si nous voulons déplacer une page et la placer ailleurs dans l'arborescence. Nous faisons glisser l'icône de notre page et la plaçons ailleurs dans l'arborescence.

Le contenu peut prendre plusieurs formes : un bloc de texte, une image ou un formulaire à remplir par vos visiteurs.

Chacun de ces différents types de contenu existe en tant qu'éléments de contenu dans TYPO3. Et si nous voulons ajouter du texte et des images à ma nouvelle page, je dois utiliser l'élément de contenu approprié.

Dans mon exemple, je veux coller du texte et utiliser une image que j'ai téléchargée dans mon dossier Images.

Pour ce faire, sélectionnez l'onglet « Texte » sur le côté gauche, puis l'élément de contenu « Texte et images ».

Je commence par ajouter un en-tête à mon élément de contenu.

Pour ajouter une image, sélectionnez l'onglet Images et cliquez sur le bouton Ajouter une image. Vous pouvez choisir de sélectionner une image existante qui a déjà été téléchargée dans la liste de fichiers ou dans le module, ou vous pouvez télécharger une nouvelle image directement.

Vous pouvez choisir de sélectionner une image existante qui a déjà été téléchargée dans le module Filelist ou vous pouvez télécharger une nouvelle image directement.

Une fois que vous avez sélectionné une image, vous pouvez choisir la position de l'image par rapport au texte.

Nous avons maintenant une nouvelle page de projets avec un seul élément de contenu « Texte et images ». Une fois que nous sommes satisfaits de notre travail :

• Cliquez avec le bouton droit de la souris sur l'icône de la page Projets et sélectionnez « Activer »
• Cliquez à nouveau avec le bouton droit de la souris sur la page et sélectionnez « Afficher ».