Extension pour Dotclear 2 : site web simple avec menu arborescent
Par Olivier Azeau, le 16 mars 2008, 14:01 - Amanèls
- Lien permanent
- 
Dotclear fournit par défaut 2 fonctions d'organisation des billets, les catégories et les tags. C'est suffisant pour aménager un blog standard mais un peu limité si on veut donner à ce blog une allure de site web structuré en sections et sous-sections.
J'ai donc écrit une extension "Simple Website" qui permet de faire cela. Elle peut être utile pour découper un blog en parties relativement indépendantes (ce qui est fait ici même) ou, plus généralement, pour réaliser rapidement un site web avec dotclear sans avoir besoin de maîtriser un autre CMS.
L'extension "Simple Website" contient :
- Une évolution de l'interface d'administration pour définir une arborescence de sections ainsi que la possibilité d'associer une ou plusieurs sections à chaque billet. En pratique, chaque section est un billet qui a été identifié comme tel. Cela permet d'utiliser l'ensemble des fonctions existantes. Une section a ainsi un nom (le titre du billet), un résumé de sa description (l'extrait du billet), une description complète (le corps du billet), la possibilité d'être commentée, d'être rétroliée, etc.
- Un ensemble d'éléments de template permettant d'afficher, sur la page d'une section :
- les éléments de la section courante
- l'ensemble des sous-sections
- le chemin hiérarchique permettant d'atteindre la section courante
- l'ensemble des billets (navigable par pages) de la section et des sous-sections
- Les flux de billets et de commentaires relatifs à chaque section
- Un widget pour naviguer dans l'ensemble des sections
- Une page "plan de site" présentant la hiérarchie des sections et leur description
Pour avoir une meilleure vision de cela, le plus simple est de regarder un exemple. Puisque ce blog utilise le plugin en question, il suffit, par exemple, d'aller voir la section regroupant mes réalisations logicielles :
En tête de page, le chemin hiérarchique "Accueil » Informatique » Mes réalisations" permet de se positionner dans l'ensemble du site. Suivent le nom de la section, sa description et les liens vers les flux : fil des billets et fil des commentaires.
Au même niveau, mais sur la partie droite, sont listées les sous-sections avec un résumé de leur description. La suite de la page est occupée par la liste des billets de la section courante et de ses sous-sections sur le même modèle que les catégories ou les tags.
Sur la même page, dans le bandeau de gauche, le widget de navigation est positionné sur la section courante et il permet d'aller vers les sous-sections, vers la hiérarchie parente ainsi que les sections voisines de chaque élément de la hiérarchie.
Le plan de site est accessible à tout moment grace à un lien dans le même widget.
Côté administration, chaque billet dispose d'une section masquable "Site web simple". Si on n'y touche pas, le billet reste un billet standard. Lorsque la section est dépliée, on peut définir :
- Sa position dans la hiérarchie : en sélectionnant son parent
- Les billets qui y sont rattachés : en définissant un tag de regroupement
- La mise en page de la section : en donnant le nom d'un fichier template se trouvant dans le thème
- L'URL à présenter pour le flux des billets (utile si on veut gérer les abonnements à travers un système externe type feedburner)
Le rajout d'un billet standard dans une section se fait tout simplement en associant à ce billet le tag défini dans la section. On notera que, dans la section "Site web simple", la zone "Nom de fichier template" peut être utilisée sur les billets standards pour leur donner, au cas par cas, une mise en page personnalisée.
Ici se terminent les informations pour une utilisation courante mais la mise en place du plugin au sein d'un blog existant nécessite une étape supplémentaire : l'adaptation du thème d'affichage pour y rajouter le ou les formats d'affichage d'une section.
Un pré-requis écrire les templates relatifs à une utilisation de "Simple Website" est la modification du template "post.html" du thème utilisé. En effet, tous les affichages réalisés par cette extension (sections, plan de site) sont réalisés en prenant "post.html" comme base. Deux modification doivent y être apportées qui ne remettent pas en cause l'affichage des billets standards :
- Dans le
<head>HTML, les liens vers les flux doivent être adaptés pour permettre l'insertion des flux de section. En pratique, il suffit de remplacer lestpl:BlogFeedURL
tpl:swMenuFeedURL
- Il faut insérer un block
<tpl:swCustomPostContent>autour du contenu de la zone<div id="main">. Ce block permet de, simultanément, conserver l'affichage d'un billet standard ou de le remplacer par le contenu du fichier de template personnalisé de chaque billet lorsqu'un tel fichier est défini dans la boite "Site web simple" du billet.
Il faut ensuite définir au minimum un fichier template pour l'affichage des sections. Ce fichiers ne contient bien évidemment que la partie intérieure à la zone <div id="main">. A titre d'exemple, le fichier "post_menu.html" utilisé sur ce blog est joint à ce billet.
Les éléments de templates utilisables pour mettre en forme les pages de section sont :
- Block
<tpl:swMenuHierarchyEntries>: c'est un block qui fonctionne comme<tpl:Entries>mais qui itère sur les sections constituant le chemin hiérarchique permettant d'atteindre la section courante. - Block
<tpl:swMenuLevelEntries>: c'est également un block qui fonctionne comme<tpl:Entries>mais celui-ci itère sur les sous-sections de la section courante.
L'affichage du plan de site est réalisé à travers un fichier dédié "sitemap.html" qui, lui-aussi, ne contient que la partie de template intérieure à la zone <div id="main">.
Un fichier par défaut est intégré au plugin mais il est tout à fait possible de le rédéfinir dans le thème utilisé. Des éléments de templates additionnels sont nécessaires pour mettre en forme le plan de site :
- Valeur
tpl:swSitemapURL
- Block
<tpl:swDefineBlock name="XXX">: c'est un élément générique qui définit un block réutilisable en plusieurs endroits. En pratique, il définit une fonction PHP qui affiche le contenu du block. - Valeur
tpl:swReuseBlock name="XXX"
L'affichage du plan de site sans limitation de la profondeur de l'arbre est réalisé par un swDefineBlock/swReuseBlock récursif en bouclant à chaque niveau sur les section via un swMenuLevelEntries (si cette phrase n'est pas assez claire, le mieux est de jeter un coup d'oeil au fichier "sitemap.html" contenu dans l'extension).
Voilà pour la partie plus technique. Toutes les questions, remarques et suggestions sont, bien évidemment, les bienvenues et si jamais quelqu'un utilise cette extension sur son blog ou, encore mieux, pour réaliser un site, ça serait sympa de laisser un petit mot ici même !
Commentaires
Bonjour et merci, c'est exactement ce que je cherche!
Par contre impossible de l'installer dans mon dotclear2 en local .... "Erreurs :
* Le paquet n'est pas valide.
"
Déjà une personne intéressée le 1er jour de diffusion. C'est sympa.
Pour le problème du paquet non valide, il faudrait en savoir plus :
version de Dotclear ? Je n'ai testé que sur DC2 beta7
quel paquet ? J'ai utilisé le plugin packager pour créer les 2 packages mais je n'ai testé que le .pkg.gz
Ok au temps pour moi, j'ai été une grosse buse, j'avais utilisé l'url donnée par l'annexe et non l'url exacte, bien sûr l'installation fonctionne avec le pkg (le zip en local ne fonctionnait pas par contre). Je me plonge donc dans cette extension. Pour info je la mets en pratique pour un blog présentant l'ensemble de la ma collection de pièces de monnaies : il me fallait une structure chronologique du même type que http://www.vcoins.com/ancient/vaugh... Je sens que je vais avoir des questions :-) Donc si je comprends bien : les sections sont des billets? On peut hiérarchiser les billets. Donc si je veux commencer à fabriquer mon site, il faut que je fasse des billets vides pour faire mes sections? Je m'y attèle et modifie mes post.php, je risque de revenir vers vous. En tous les cas encore merci et bravo et désolé pour le 1er commz :-) a++
Re,
(désolé de monopoliser les commentaires!) Alors quelques remarques à chaud : j'ai tout fait comme préconisé dans votre how-to, dans l'ensemble tout marche très bien. Cependant:
* le widget menu est fermé quand on se trouve à la racine du site : il ne contient que les sections de premier niveau. Il faut cliquer sur une des sections de premier niveau pour voir ce qu'ele contient ou sur un billet pour voir où il se trouve. On aimerait pouvoir le définir "entièrement déplié" (comme chez vous) ou qu'il soit dépliable avec un système de "plus-moins".
* L'affichage de post_menu fourni ne semble pas optimal : je n'ai pas la liste des billets marqués du tag du menu ! de plus, la liste des sous-sections est affichée avant le titre de la section..
* Pourquoi ne pas avoir une sous partie dans l'administration du billet avec une liste déroulante où choisir de publier le billet?
Je serais ravi de vous mailer les écrans dont il est question,
bien cordialement,
++
ah, et le sitemap m'affiche une page grise où le HTML d'arrête après
<body class="dc-post">
<div id="page">
<div id="subItems">correspondant est flottant à droite. La liste des billets n'apparait probablement pas car ils sont affichés à travers l'inclusion d'un "post_entry.html" (chez moi j'ai mis l'affichage d'un billet individuel dans ce fichier template séparé que j'appelle par{{tpl:include}}. C'est un choix personnel pour gérer mon thème d'affichage. Je le répète, c'est juste le fichier template tiré de mon thème. Il n'est pas utilisable en l'état.Juste un petit mot pour dire que sur le papier (puisque je ne l'ai pas encore testé), ce plugin est particulièrement alléchant.
Je suis même prêt à parier sur un énorme succès auprès des utilisateurs DC2. ;-)
Re,
Merci pour tes réponses!
J'ai continué d'utiliser ton supa plugin bien sûr et me viennent deux questions :
* comment organiser les sous-sections? (elles ne sont pas par ordre alphabétique ni par ordre de création)
* oui, on choisit la section parente d'un billet mais si rien n'a été publié dans ladite section, on n'a pas le tag de cette section dans la liste des tags (est-ce clair?)? Après la première fois, c'est bon.
Merci
A++
Très très intéressant ce plugin ! Le genre de truc qui pourrait propulser DC2 vers les sommets ;-)
Je vais tester ça dès que je peux.
Merci pour les encouragements !
@bitox, normalement les sous-sections sont parcourues dans l'ordre de leur url. Je me suis dit que c'était le plus souple : celui qui veut un ordre alphabétique met des urls équivalentes aux titres, celui qui veut un ordre chronologique met des dates dans les urls et celui qui veut un ordre fait maison, il met autre chose.Pour la liste des tags tu as raison. Il faudra que je regarde si cette liste peut automatiquement contenir les tags de référence des sections déjà définies.