Créer un blog avec MODx Révolution

Ce tutoriel vous aidera à réaliser un blog avec MODx Révolution.
Créer un blog avec MODx Révolution

Les extensions MODx nécessaires pour créer votre blog

Pour commencer vous allez devoir télécharger certaines extensions pour pouvoir créer votre blog. Vous pourrez les télécharger en vous rendant dans la rubrique "Système" > "Gestion des paquets" > "Télécharger des extras".

Les extensions obligatoires
  • getResources - Pour lister les articles, pages et autres ressources.
  • getPage - Pour paginer les listes d'éléments.
  • Quip - Pour gérer les commentaires.
  • Les extensions optionnelles
  • Archivist - Pour gérer les archives de votre blog.
  • tagLister - Pour gérer les tags de vos articles.
  • Breadcrumbs - Pour afficher un fil d'Ariane sur votre blog afin de faciliter la navigation.
  • Gallery - Pour gérer les galeries de photos.
  • SimpleSearch - Pour ajouter un champ de recherche sur votre blog.
  • getFeed - Si vous voulez ajouter d'autres éléments à votre blog comme un flux Twitter.
  • Login - Si vous souhaitez restreindre les commentaires aux seuls utilisateurs connectés.
  • Créer le template d'affichage de vos articles

    Le code ci-dessous est le résultat de tout ce qui vous sera expliqué ci-dessous concernant l'affichage de l'article. Je vous rappelle que ce sera un exemple parmi tant d'autres. Si vous comprenez l'explication ci-dessous, vous pourrez personnaliser l'affichage de votre article à souhait, en modifiant certaines parties ou même en en supprimant. Ce code suppose que vous avez déjà la structure de votre page dans un modèle MODx. Vous devrez l'insérer à l'endroit où vous souhaitez afficher les éléments de l'article.

    <div id="content" class="blog-post">
     <h2 class="title"><a href="[[~[[*id]]]]">[[*pagetitle]]</a></h2>
     <p class="post-info">
      Publié le [[*publishedon:strtotime:date=`%d/%m/%Y à %H:%M`]] |
      Tags: [[*tags:notempty=`[[!tolinks? &items=`[[*tags]]` &key=`tag` &target=`1`]]`]] |
      <a href="[[~[[*id]]]]#comments" class="comments">
      [[!QuipCount? &thread=`blog-post-[[*id]]`]] Commentaires
       </a>
     </p>
     <div class="entry">
      <p>[[*introtext]]</p>
      [[*content]]
     </div>
     <div class="postmeta">
      [[*tags:notempty=`<span class="tags">Tags: [[!tolinks? &items=`[[*tags]]` &key=`tag` &target=`1`]]</span>`]]
     </div>
     <div class="post-comments" id="comments">[[!Quip?
      &thread=`blog-post-[[*id]]`
      &replyResourceId=`123`
      ]]
    <br /><br />
      [[!QuipReply?
      &thread=`blog-post-[[*id]]`
      ¬ifyEmails=`my@email.com`
      &moderate=`1`
      &moderatorGroup=`Moderators`
      &closeAfter=`30`
    ]]
     </div>
    </div>
    Intégration des informations de l'article
     <p class="post-info">
      Publié le [[*publishedon:strtotime:date=`%d/%m/%Y à %H:%M`]] |
      Tags: [[*tags:notempty=`[[!tolinks? &items=`[[*tags]]` &target=`1` &key=`tag`]]`]] |
      <a href="[[~[[*id]]]]#comments" class="comments">
      [[!QuipCount? &thread=`blog-post-[[*id]]`]] Commentaires
       </a>
     </p>

    La première partie permet d'afficher la date de publication de l'article avec le format de votre choix. Si vous souhaitez afficher cette date en français, vous pouvez suivre l'article "Comment afficher la date en français avec MODx ?".

    La partie suivante affiche les tags de votre article. Cette partie n'est pas possible sans l'extension tagLister de MODx. Pour afficher cela, vous devez tout d'abord créer une variable de modèle nommé "tags".

    • - "tags:notempty" permet d'afficher ce qui suit seulement si la variable de modèle nommé "tags" n'est pas vide.
    • - L'appel du snippet tolinks permet d'afficher le tag avec un lien sur celui-ci.
    • - "items" permet de choisir la variable que l'on souhaite afficher.
    • - "target" permet de définir l'id de la ressource qui servira d'url pour ce tag.
    • - "key" permet d'ajouter un paramètre à cette url en méthode GET. L'url sur laquelle nous serons dirigé après avoir cliqué sur ce lien sera de la forme : http://url/?tag=nomdutag. Cela permettra d'afficher seulement les articles qui sont associés à ce tag. Nous verrons comment configurer cela par la suite.
    Comment ajouter la variable de modèle nommé "tags"

    Pour cela vous devez vous rendre dans l'onglet "Eléments" de la partie gauche de votre manager. Cliquez droit sur "Variables de modèle" et cliquez sur "Nouvelle variable de modèle". Nommé donc cette variable "tags", et donnez comme description de séparer les tags par des virgules. Dans l'onglet "Options d'entrée", choisissez le type "Texte" et dans l'onglet "Accès au Modèle", cochez les modèles sur lesquels vous voulez afficher des tags.

    La dernière partie consiste à afficher le nombre de commentaires qui ont été ajoutés pour cette article. "QuipCount" permet de compter rapidement le nombre de commentaires ajouté pour cet article. blog-post-[[*id]] est le nom donné aux commentaires ajoutés pour cet article. Nous verrons par la suite comment associer les commentaires ajoutés à ce nom. Pour utiliser "QuipCount", vous devez obligatoirement ajouter l'extension "Quip".

    Afficher le contenu de votre article

    Pour afficher le contenu de l'article, il suffit tout simplement de rajouter la variable [[*introtext]] à l'endroit où vous voulez afficher ce contenu.

    Afficher les commentaires de l'article et le formulaire pour en ajouter
     <div class="post-comments" id="comments">
    [[!Quip?
      &thread=`blog-post-[[*id]]`
      &replyResourceId=`123`
      ]]
    <br /><br />
      [[!QuipReply?
      &thread=`blog-post-[[*id]]`
      ¬ifyEmails=`my@email.com`
      &moderate=`1`
      &moderatorGroup=`Moderators`
      &closeAfter=`30`
    ]]
     </div>

    L'appel du snippet "Quip" permet d'afficher les commentaires de notre article. Pour cet exemple, nous avons utilisé les propriétés :

    • - "thread" qui permet d'afficher les commentaires qui sont associé à notre article
    • - "replyResourceId" permet d'indiquer l'id de la ressource dans laquelle se trouve le formulaire de réponse aux commentaires.

    L'appel du snippet "QuipReply" sert quand à lui à créer le formulaire pour ajouter un commentaire à notre article. Les paramètres utilisés dans notre exemple sont :

    • - "thread" qui permet de donner un nom au groupe de commentaires associés à cette article. C'est ce nom que vous devez indiquez dans le snippet Quip pour afficher les commentaires.
    • - "notifyEmail" permet d'indiquer l'adresse email sur laquelle vous recevrez une notification dès qu'un commentaire a été ajouté. Je rencontre certaines difficultés pour faire fonctionner cette notification. Si quelqu'un arrive à faire fonctionne cette option, merci de me faire parvenir la solution.
    • - "moderate" permet d'indiquer si vous souhaitez valider les commentaires avant de les afficher sur votre site, 1 pour les modérer sinon 0.
    • - "moderatorGroup" permet d'indiquer le groupe de modérateurs qui seront autorisés à valider ces commentaires. Pratique si vous souhaitez faire participer certains internautes fidèles dans la modération de vos commentaires.
    • - "closeAfter" permet de bloquer l'ajout de commentaires après 30 commentaires déjà affichés.

    Créer la liste des articles de votre blog

    Une fois le template pour les articles créé, il faut maintenant créer le template qui affichera la liste de ces articles. Pour cela vous devez donc créer un nouveau modèle pour cette liste. Dans ce modèle, vous ajouterez la structure de votre site et à l'endroit où vous le souhaitez, le code qui permet d'afficher cette liste. Voici ce code :

    [[!getResourcesTag?
     &element=`getResources`
     &elementClass=`modSnippet`
     &tpl=`blogArticle`
     &hideContainers=`1`
     &pageVarKey=`page`
     &parents=`[[*id]]`
     &includeTVs=`1`
     &includeContent=`1`
     &limit=`5`
    ]]
    [[!+page.nav:notempty=`
    <div class="pagination">
    <ul class="listPage">
     [[!+page.nav]]
    </ul>
    </div>
    `]]

    L'appel de "getResourcesTag" permet de lister les ressources selon les paramètres ajoutés et filtre les résultats en fonction de la variable de modèle "tags" si le paramètre "tag" est présent dans l'url de la page (?tag=nomTag). Cet appel est possible seulement si vous avez ajouté les extensions "getResources" et "getPage". Dans notre exemple nous avons utilisé les paramètres :

    • - "element" qui permet d'indiquer que nous voulons utiliser un getResources pour lister nos éléments
    • - "elementClass" permet d'indiquer que l'élément que nous voulons afficher avec le "getResourcesTag" est un snippet
    • - "tpl" permet de définir le chunk qui servira à afficher chaque article de notre liste
    • - "hideContainers" permet d'indiquer que nous ne voulons pas lister les ressources qui sont des répertoires
    • - "pageVarKey" permet de définir le nom du paramètre utilisé dans l'url pour la pagination
    • - "parents" permet de définir la ressource qui contiendra toutes les ressources que nous voulons lister
    • - "includeTVs" permet d'indiquer que nous souhaitons utiliser des variables de modèle dans le chunk qui affichera chaque article
    • - "includeContent" permet d'autoriser l'affichage du contenu des articles dans le chunk qui les affiche
    • - "limit" permet de limiter l'affichage à 5 articles. Les autres seront accessibles grâce à la pagination.

    [[!+page.nav]] permet quant à lui d'afficher les différents liens de la pagination de la liste des articles. Nous avons indiqué une limite de 5 articles. Cette pagination permet de pouvoir accéder à tous les autres articles.

    Créer le chunk qui affichera chaque article dans la liste

    Ce chunk portera le nom que vous avez indiqué dans le paramètre "tpl" du "getResourcesTag", il affichera chaque article de la liste en fonction du code que vous lui associez. Voici un exemple de code possible :

    <div class="article">
     <h2 class="titre"><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h2>
     <p class="info-article">Ecrit par [[+createdby:userinfo=`fullname`]]
      [[+tv.tags:notempty=` |
       <span class="tags">Tags: [[!tolinks? &items=`[[+tv.tags]]` &key=`tag` &target=`1`]]</span>
     `]]</p>
     <div class="resume">
      <p>[[+introtext]]</p>
     </div>
     <p class="liensarticles">
      <span class="liens">
       <a href="[[~[[+id]]]]" class="voirplus">En voir plus</a>
       | <a href="[[~[[+id]]]]#comments" class="commentaires">
        Commentaires ([[!QuipCount? &thread=`blog-post-[[+id]]`]])
       </a>
       | <span class="date">[[+publishedon:strtotime:date=`%d/%m/%Y à %H:%M`]]</span>
      </span>
     </p>
    </div>

    Ce chunk listera chacun des articles de notre liste. Comme le "getResourcesTag" utilise le "getResources" pour afficher ces éléments, chaque variable devra être appelé avec un "+" plutôt qu'une "*".
    Dans un premier temps, nous affichons le titre de l'article ([[+pagetitle]]) avec un lien pointant sur celui-ci([[~[[+id]]]]).
    Ensuite [[+createdby:userinfo=`fullname`]] permet d'afficher le Nom Complet de la personne qui a écrit l'article. Utile si plusieurs personne rédige des articles sur ce blog.
    On affiche après les tags de la même manière que précédemment.
    [[+introtext]] permet d'afficher un résumé de cet article. Ce texte doit être écrit dans le champ Résumé lors de la création de votre article.
    Comme précédemment nous allons également afficher le nombre de commentaires pour chaque article avec un lien pointant sur ces commentaires grâce à l'ancre #comments. Le conteneur des commentaires doit donc avoir comme id "comments".
    Pour finir on affiche la date de publication de l'article comme précédemment.

    Voici le résultat de notre exemple :

    article blog

    Créer les ressources qui vont composer votre blog

    Précédemment vous avez créé deux modèles, le premier est la structure de vos articles, le second permet de lister les différents articles. Vous devrez donc créer une ressource associée au second modèle créé pour lister tous les articles que vous allez écrire. Cette ressource sera le répertoire de tous vos articles. Dans cette ressource, vous pourrez donc écrire tous les articles de votre blog.
    Pour créer un article, ajoutez donc un article dans la ressource servant de répertoire, et renseignez tous les champs de cet article et son contenu. N'oubliez pas de renseigner les variables de modèle comme la variable "tags". Vous associerez donc ces articles au modèle servant de structure de vos articles.

    Toutes ces ressources formeront donc votre blog.

    Vous pouvez ajouter d'autres fonctionnalités sur votre blog, vous pourrez en trouvez certaines dans de prochains articles comme les archives pour votre blog, comme la possibilité d'afficher une liste des derniers articles publiés, etc.

    Sources
    Creating a Blog in MODx Revolution

0 commentaire(s)

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