tutoCMS.fr
- 07 juillet 2016
- Steeve
Pour ce tutoriel vous avez besoin d’avoir quelques notions de HTML.
Dans ce tutoriel vous allez créer votre première ressource. Mais aussi un modèle de page pour votre ressource. Découper ce modèle en petits morceaux dans des chunks que vous pourrez réutiliser par la suite. Créer une variable de modèle pour customiser notre interface de gestion. Créer un petit snippet pour afficher un message.
1. Créer votre première ressource
Comme vous pourrez le constater dans l’onglet « Ressources » de MODX fraichement installé, vous avez déjà une première ressource créée et nommée « Accueil ». Vous allez donc modifier cette ressource et non créer une nouvelle ressource.
Cliquez sur le lien « Accueil » pour modifier la ressource.
Je vais commencer par vous expliquer la plupart des champs de la ressource « Accueil ».
Avant tout vous verrez dans la suite du tutoriel que vous pourrez utiliser ces champs comme bon vous semble. Mais comme il me faut un exemple concret, j’indique à quoi pourraient servir ces champs.
- Le titre de votre ressource. Ce champ est obligatoire. Il servira dans mes futurs exemples à rempli la balise HTML « title ».
- Le titre long, lui servira pour la balise « h1 » par exemple.
- La description qui pourrait être utile pour la balise « méta description ».
- Je n’utilise pas très souvent le champ résumé mais ça peut être utile selon certain cas comme la création d’un blog. Elle servirait de résumé de l’article.
- Le contenu de la ressource, auquel on pourra rajouter une fonctionnalité avec une extension [Extra].
- Un menu essentiel à MODX pour enregistrer, dupliquer, supprimer, voir une ressource ou annuler des modifications en cours.
- Un menu déroulant vous laissant la possibilité de choisir parmi les modèles de page déjà créés.
- Titre de menu (tout est dans le nom !).
- Case à cocher pour cacher cette ressource ou pas dans notre futur menu.
- Pour signifié si la ressource est publiée ou pas, en gros si elle est accessible ou pas pour les internautes.
Modifiez votre ressource en ajoutant du contenu (Hello world !) comme sur l’image ci-dessous.
2. Modifier le modèle de base
Pour modifier le modèle déjà créé par MODX, cliquez sur l’onglet « Éléments » puis sur le sous-onglet « Modèles » et enfin sur le lien « Modèle de base ».
Comme vous pouvez le voir il y a déjà du code HTML en plus des quelques « tags » propre à MODX.
Le tag [[++site_name]] est une variable que je qualifierais de variable globale. Elle est unique pour tout le site. Elle peut se modifier en allant dans la partie « paramètre du système ». Mais vous n’avez pas besoin d’en savoir plus pour le moment. Il en va de même pour le tag [[++site_url]] qui renvoi l'URL du site.
Le tag [[*pagetitle]] est quant à elle une variable de ressource. Ça a pour effet de récupérer l’information que vous avez rentré dans le champ titre que nous avons vu précédemment. C’est la même chose pour le tag [[*content]] qui va lui récupérer ce que vous avez mis dans le champ « contenu » de votre ressource.
Vous allez simplement rajouter un des autres champs que vous avez rempli précédemment. Le champ titre long [[*longtitle]] et le champ description [[*description]]. Voir le code ci-dessous que vous pouvez copier / coller directement dans le modèle de base.
<html>
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<meta name="description" content="[[*description]]" />
<base href="[[++site_url]]" />
</head>
<body>
[[*longtitle]]
[[*content]]
</body>
</html>
Pour résumer on a ajouté une balise HTML méta description dans lequel on récupère la valeur rentrée dans le champ « description ». On a également rajouté un H1 pour le titre avec pour valeur ce que nous mis dans le champ « titre long »
Maintenant cliquez sur le menu de prévisualisation afin de visualiser le résultat.
Vous devriez voir ce qui se trouve sur l’image ci-dessous
Si vous analysé votre code généré par MODX (clique droit sur la page voir le code source de la page). Vous obtiendrez ceci.
Avec les balises qui étaient déjà dans le « HEAD », plus celle que vous avez ajouté, la balise « méta description » ayant pour valeur ce que vous avez renseigné.
3. Créer un chunk
Vous me direz « mais pourquoi découper le modèle ? ». La réponse est simple, admettons que vous créiez plus d’un seul modèle. Il y aura des parties de vos pages que vous risquez de répéter tel que l’entête de la page, le menu ou encore le pied de page.
Une fois tous vos modèles créés, disons cinq modèles, vous désirez modifier le pied de page pour tout le site, il faudra le modifier dans les cinq modèles alors que si vous l’avez mis dans un chunk et fait appel à ce chunk dans les cinq modèle, vous n’aurez qu’à le changer une seul fois !… dans le chunk !
Créez votre chunk avec l’entête de page (copiez de
à compris).
Pour créer le chunk vous pouvez cliquer en haut du menu élément ou sur le bouton « plus » en face de l’onglet chunk qui contiendra tous nos chunk ou encore de faire clique droit sur l’onglet chunk et créer un nouveau chunk. Pour moi MODX est très accessible !
Je suis sympa je vous donne le code (ci-dessous)
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<meta name="description" content="[[*description]]" />
<base href="[[++site_url]]" />
</head>
Maintenant que vous avez créé le chunk head avec le code ci-dessus on retourne dans notre modèle pour l’appeler.
Pour appeler un chunk il suffit d’écrire [[$nomduchunk]]. Deux crochets ouvrant, un dollar ($), le nom du chunk puis deux crochets fermant. Oui seulement ce tout petit bout de code ! Dans notre cas le chunk ce nomme head donc on l'appelle de cette façon [[$head]]
<html>
[[$head]]
<body>
[[*longtitle]]
[[*sousTitre]]
[[*content]]
</body>
</html>
Si vous voulez vérifier recharger la page d’accueil de votre site vous ne devrez voir aucune différence avec l’affichage de votre page tout à l’heure.
4. Créer une variable de modèle
Pour créer une variable de modèle vous pouvez cliquer en haut du menu élément ou sur le bouton « plus » en face de l’onglet variable de modèle qui contiendra toutes les variables de modèle ou encore de faire clique droit sur l’onglet variable de modèle et créer un nouveau variable de modèle (mauvaise traduction).
Remplissez comme dans mon exemple ci-dessous
Juste quelques renseignements sur la variable, son nom qui nous servira à la récupérer, une légende pour savoir à quoi elle correspond, une description pour plus de précision la concernant.
Maintenant nous allons passer aux choses sérieuses mais pas forcément plus compliquées !
Cliquez sur l’onglet « Option d’entrée ». Cet onglet permet de modifier la façon dont va s’afficher la variable de modèle dans la page de modification de la ressource. Mettez comme ci-dessous, texte comme type d’entrée.
Vous allez définir le type de sorti dans l’onglet « Options d’affichages ». En sommes comment MODX va renvoyer ce champ lors de l’affichage. Dans mon exemple j’ai mis « Texte ».
Vous allez à présent choisir sur quel modèle vat-être appliquer cette variable de modèle, dans l’onglet « Accès au modèles ». N’ayant qu’un modèle le choix est simple !
Cochez le modèle sur lequel s’applique cette variable de modèle (modèle de base dans mon exemple) puis cliquez sur enregistrer pour appliquer nos changement qui ont été mis dans tous les onglets.
Retournez dans la ressource « Accueil de ma première page » dans l’onglet variable de modèle pour remplir votre variable avec "Mon sous titre à l'aide d'un TV's".
Nous avions déjà mis le bout de code pour appeller notre variable de modèle [[*mavariable]] ou dans mon exemple [[*sousTitre]]. Et oui c'est identique à certain autre champs comme le titre ou le titre long [[*longtitle]].
<html>
[[$head]]
<body>
[[*longtitle]]
[[*sousTitre]]
[[*content]]
</body>
</html>
Si vous rafraichissez votre page d’accueil vous devriez obtenir comme ci-dessous.
5. Créer le premier snippet
Maintenant vous allez créer votre premier snippet, si vous n’avez pas de compétence dans le langage PHP, pas de problème, mon exemple est très simple.
Le code que je vais vous faire rajouter n’est qu’un renvoi de texte en PHP
Pour créer un snippet vous pouvez cliquer en haut du menu élément ou sur le bouton « plus » en face de l’onglet snippet qui contiendra tous les snippets ou encore de faire clique droit sur l’onglet snippets et créer un nouveau snippet.
Créez votre snippet comme dans mon exemple ci-dessous.
Copiez le code ci-dessous
<?php $output = "Je suis ton premier snippet !"; return $output; ?>
Allez modifier le modèle de base comme ce qui suit.
<html>
[[$head]]
<body>
[[*longtitle]]
[[*sousTitre]]
[[*content]]
[[premierSnippet]]
</body>
</html>
Recharger votre page web et la magie opère !
Ce tutoriel est maintenant fini. N’hésitez pas à commenter si vous avez des questions ou problèmes le concernant.
Partagez cet article
A propos de l'auteur
Passionné d’informatique, de Design, de développement d'application et du Web en général (participation au start-up weekend, hackathon, dev Var, formation Google...), j’ai créé ce site afin de partager mes connaissances sur mon système de gestion de contenu préféré MODX. En espérant participer au développement de la communauté.