11 étapes pour comprendre le fonctionnement de MODx

Tout savoir sur les ressources, variables de modèle, chunks, snippets et plugins
11 étapes pour comprendre le fonctionnement de MODx

Les Ressources

Les ressources MODx sont essentiellement les pages de votre site Internet. Plus précisément, ils peuvent être un document (contenu HTML, CSS, JavaScript, XML, texte, RSS), un lien vers une autre URL, un lien symbolique ou un fichier.

Les ressources seront donc l'arborescence de votre site Internet

Les Modèles

Les modèles MODx représentent les templates de votre site Internet. Ils vous permettent de mettre en place la structure de votre site (header, footer, etc...). Ce sont dans les modèles que vous allez mettre votre code html de base qui sera présent sur les différentes pages de votre site.

Les variables de modèles

Les variables de modèles sont des champs personnalisés pour un modèle qui permet à un utilisateur d'attribuer des valeurs dynamiques à une ressource. Un bon exemple serait d'utiliser une variable pour les keywords de chaque page. Vous insérez cette variable dans la balise keywords et à chaque fois que vous créez une page vous pourrez renseigner les mots clés. Vous pouvez utiliser un nombre infini de variables. Il faut également penser qu'il existe des variables déjà défini par MODx que vous n'aurez pas besoin de recréer. Par exemple la variable de titre de la page (pagetitle).

Les chunks

Les chunks sont des blocs de contenu dans lequel vous pouvez y insérer du code HTML, des variables de modèles, des snippets (décris ci-dessous) et même d'autres chunks. Ils sont appelés dans le modèle pour être affiché sur votre site.

Les snippets

Les snippets contiennent du code PHP qui est exécuté lors du chargement de la page. Il suffit donc d'insérer le snippet là où vous voulez qu'il soit interprété. Les snippets sont les points fort du CMS MODx, c'est un des seuls CMS qui permet d'ajouter aussi facilement du code PHP.

Les plugins

Les plugins sont similaires aux snippets. Ils sont des bouts de code qui ont accès à l'API de MODx, mais la grande différence est que les plugins sont associés à des événements spécifiques au système.

Comment associer ces différents éléments ?

Afin de mieux vous expliquer le fonctionnement de MODx et comment associer les différents éléments ci-dessous, je vais vous montrer les différentes étapes de création d'une page.

1. La Création d'un modéle

Pour créer un modèle, il vous suffit de cliquer sur l'onglet "Elements" dans la partie gauche de l'admin. Ensuite vous devez cliquer avec le bouton droit de la souris sur "Modèles" et sur "Nouveau modèle". Vous devez donc donner un nom à votre modèle et ensuite vous pouvez commencer à écrire votre code HTML

Dans un premier temps on va donc insérer les principales balises HTML5

<!DOCTYPE html> <html> <head>
</head>
<body>
</body> </html>

Ensuite on va ajouter tous les éléments que l'on souhaite.
Dans la balise head, nous allons ajouter un chunk qui contiendra toutes les balises metas.

2. Création du Chunk

Pour créer un chunk, il vous suffit de cliquer sur l'onglet "Elements" à gauche de l'administration et cliquez droit sur Chunk puis sur "Nouveau Chunk". Vous pourrez donc donner un nom au Chunk et écrire le code correspondant. Ici nous allons ajouter les différentes balises metas du site.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[[*pagetitle]] | [[++site_name]]</title> <meta name="robots" content="index, follow, noydir, noodp, all"/> <meta name="description" content="[[*introtext]]"/> <meta name="keywords" content="[[*keywords]]"/> <link rel="shortcut icon" href="icone.png" type="image/x-icon"> <link href="style.css" rel="stylesheet" type="text/css" />

Dans la balise title, nous avons ajouté la variable [[*pagetitle]] et [[++site_name]]. Ces deux variables sont des variables déjà défini par MODx, il ne faut pas les créer. [[*pagetitle]] affichera le titre de la page défini lors de la création de la ressource et [[++site_name]] affiche le nom du site défini dans les paramètres de MODx.

Dans la balise meta description nous avons inséré la balise [[*introtext]] qui est également une variable défini dans MODx, elle correspond au champ résumé lors de la création d'une ressource.

Dans la balise meta keywords, nous avons ajouté une variable [[*keywords]] qui n'existe pas de base dans MODx, il faut donc créer cette variable de modèle.

3. Créer une variable de modèle

Pour créer la variable de modèle keywords, il suffit de cliquer sur l'onglet "Elements" dans la partie gauche de MODx. Ensuite vous cliquez droit sur "Variables de modèle" et cliquer ensuite sur "Nouvelle variable de modèle". Vous devrez donc choisir un nom à cette variable, ici "keywords". Ensuite dans l'onglet "Options d'entrées", vous avez plusieurs possibilité d'entrées possibles pour la variable de modèle. Nous allons choisir le type "Texte". Nous pouvons également choisir une valeur par défaut, et donner une taille minimale ou maximale pour cette variable. Pour notre variable keywords nous n'allons pas renseigner ces différentes options. Il suffit ensuite d'enregistrer. Nous pourrons donc maintenant renseigner cette variable lors de la création de la ressource.

Maintenant que nous avons créer notre chunk et la variable affichée dans celui-ci, nous allons pouvoir ajouter le chunk dans notre modèle.

4. Insérer le chunk dans le modèle

Le Chunk est appelé de la manière suivante : [[$nomduchunk]]. Nous allons donc l'ajouter dans la balise head.

<!DOCTYPE html> <html> <head>
[[$metas]]
</head>
<body>
</body> </html>

Les balises metas sont donc maintenant ajouté sur notre page. Nous allons maintenant ajouter les balises header et footer.

5. Ajout des balises header et footer dans le modèle

Nous allons donc retourner dans notre modèle et ajouter les balises header et footer dans la balise body de notre code HTML. Nous allons également ajouter un chunk pour chacun d'eux.

<!DOCTYPE html> <html> <head>
[[$metas]]
</head>
<body> <header> [[$header]] </header> <footer> [[$footer]] </footer> </body> </html>

Il faut ensuite créer les chunks header et footer de la même manière que le chunk metas et insérer le code correspondant à chacun d'eux.

6. Code du chunk header

Dans le header nous allons afficher le nom du site et le logo du site.

<img src="logo.png" alt="[[++site_name]]"><h1>[[++site_name]]</h1>

7. Code du chunk footer

Dans le chunk nous allons simplement afficher le créateur du site avec un lien sur son site personnel

<a href="http://www.manuel-gobeaut.fr" title="Portfolio Manuel GOBEAUT"> Copyright Manuel GOBEAUT </a>

Maintenant que nous avons créé notre header et notre footer, nous allons afficher le contenu de la page.

8. Création du contenu de la page

Nous allons donc revenir sur le modèle que nous avons créé et y ajouter la balise div du contenu et insérer les balises pour afficher le titre de la page et son contenu.

<!DOCTYPE html> <html> <head>
[[$metas]]
</head>
<body> <header> [[$header]] </header> <div id="conteneur"> <h1> [[*pagetitle]] </h1> [[*content]] </div> <footer> [[$footer]] </footer> </body> </html>

La balise [[*pagetitle]] comme déjà dis précédemment affichera le titre de la page et la balise [[*content]] déjà intégré dans MODx affichera le contenu de la page écris lors de la création de la ressource.

Nous avons donc maintenant le contenu de notre site Internet. Pour vous expliquer comment fonctionne les snippets, nous allons donc ajouter un code php simple.

9. Création d'un snippet

Pour créer un snippet, il vous suffit de cliquer sur l'onglet "Elements" de la partie gauche de l'admin. Ensuite cliquez droit sur "Snippet" et ensuite sur "Nouveau snippet". Il vous faudra donc donner un nom à votre snippet, et ajouter le code. Nous allons pour l'exemple faire un simple echo.

<?php echo "Le snippet s'affiche ici !!!"; ?>

Le snippet est donc créé. Nous allons maintenant l'ajouter dans le modèle.

10. Ajouter le snippet dans le modèle

Pour ajouter le snippet dans le modèle, il suffit de l'écrire de cette manière : [[!nomdusnippet]].

<!DOCTYPE html> <html> <head>
[[$metas]]
</head>
<body> <header> [[$header]] </header> <div id="conteneur"> <h1> [[*pagetitle]] </h1> [[*content]] <p>[[!snippetEcho]]</p> </div> <footer> [[$footer]] </footer> </body> </html>

Maintenant que nous avons mis en place la structure de notre site, nous allons maintenant créer une ressource pour pouvoir afficher notre page.

11. Créer une ressource

Pour créer une ressource, il suffit d'être sur l'onglet "Ressources" dans la partie gauche de l'admin et de cliquer sur le bouton "Nouveau document" au dessus de l'arborescence.

Il faut maintenant remplir les différentes informations pour cette page. D'après la configuration que nous avons faite depuis le début, nous aurons donc besoin de renseigner le titre de la page, le résumé de la page, l'alias pour l'url de cette page et bien sur le contenu. Il faut également choisir le modèle que vous venez de créer.

Une fois la ressource créée, nous allons pouvoir renseigner les variables que l'on a créé précédemment. Pour cela il suffit de se rendre sur la page où l'on souhaite renseigner les variables et cliquer sur l'onglet "Variables de modèle".

Je vous ai donc montré comment utiliser MODx avec ces différents éléments. Si nous nous rendons maintenant sur cette page sur notre navigateur, nous obtiendrons le résultat ci-dessous. Il faut bien sur modifier par la suite le css pour afficher la page selon vos envies.

Si vous avez des questions sur le fonctionnement de MODx n'hésitez à m'en faire part.

4 commentaire(s)

  1. Merci beaucoup, une explication très claire et en plus dans la langue de Molière, bravo, bonne continuation et bon courage...

    • Merci, ça fait toujours plaisir. J'espère vous avoir convaincu d'utiliser MODx.
      Je reste à votre disposition si vous avez besoin d'aide.

  2. Super ce site m'a permis de sortir de la nuit...
    J'étais sur que modx était l'outil qu'il me fallait mais je n'arrivait pa s à comprendre le principe de fonctionnement. Très bonne explication très beau travail.

    J'ai une question : Je teste modx en local et j'aimerai savoir pourquoi en texte alternatif c'est "modx revolution" qui apparait ? je n'arrive pas à remonter le chemin de la varriable [[++site_name]]. et aussi où se trouve les images ?

    Ha oui j'oubliais je trouve tes sites très propres, beau design, je suis fan

    • Bonjour Polinux,

      Tout d'abord merci pour ton message, cela fait toujours plaisir de recevoir des compliments.

      Pour changer et afficher le nom de ton site, je te conseille cette article : http://toutsurmodx.fr/modifier-afficher-nom-site-modx.html

      Pour les images, le mieux est de les mettre dans un dossier images dans le répertoire assets/components.

      J'espère que je répond bien à tes questions.

      À bientôt sur toutsurmodx,
      Manuel Gobeaut

Laissez un commentaire


Tags autorisés : <b><i><br>Ajouter un nouveau commentaire :


En poursuivant votre navigation, vous acceptez l'utilisation des cookies pour disposer de services et d'offres adaptés à vos centres d'intérêts. Pour en savoir plus, cliquez ici.

x