Demonstration de menu "CSS" pour l'extension dotclear "Simple Website"
Par Oaz, le 26 mars 2008, 23:28 - Amanèls
- Lien permanent
- 
Le principal avantage du plugin 'simpleWebsite' est de, simultanément, définir au niveau d'un blog une hiérarchie de sections et de fournir des éléments de template dotclear pour parcourir et présenter cette hiérarchie sans vraiment de limite sur la forme.
Par ailleurs, les feuilles de style en cascade, plus connues sous le nom de CSS permettent aujourd'hui d'avoir des affichages évolués sans rajout de code (javascript ou autre). Les menus déroulants en sont un exemple, comme on peut le voir sur cette page.
J'ai donc repris le CSS de cette page pour afficher dynamiquement un menu déroulant comprenant l'ensemble des sections définies sur "simpleWebsite". Voici le résultat pour mon blog :
Voilà donc un menu déroulant facile à inclure sur un blog dotclear.
On notera toutefois que l'affichage dépend du navigateur utilisé. Si, comme moi, vous utilisez Mozilla Firefox, pas de problème. De même avec la plupart des navigateurs respectant les standards du W3C. Finalement, le seul problème réside dans l'utilisation d'Internet Explorer (on s'en serait douté). Il faut au moins avoir la version 7 pour pouvoir profiter de ce menu déroulant.
Voici le texte de template à utiliser pour générer le menu :
<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/menu.css);
</style>
<tpl:swDefineBlock name="MenuEntries">
<li><a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a>
<ul>
<tpl:swMenuLevelEntries>
{{tpl:swReuseBlock name="MenuEntries"}}
</tpl:swMenuLevelEntries>
</ul>
</li>
</tpl:swDefineBlock>
<div class="skipnav"><a href="#nonav">Aller au contenu</a></div>
<ul id="nav">
<tpl:swMenuLevelEntries parent_id="home">
{{tpl:swReuseBlock name="MenuEntries"}}
</tpl:swMenuLevelEntries>
</ul>
<hr id="nonav">
Le fichier menu.css est celui de l'exemple chez http://denilsonsa.selfip.org/~denilson/.
Certains seront peut-être surpris par la présence du lien invisible <a href="#nonav">. Il sert en fait pour les affichages sans feuilles de style tels les navigateurs en mode texte. Dans un tel contexte, le menu est affiché comme une liste, qui peut être très longue et ce lien sert à aller au contenu de la page à la fin de la liste.
Pour s'en convaincre, il suffit de faire afficher la page actuelle à travers un visualisateur Lynx
Un dernier mot, enfin, pour expliquer la présence du menu en plein milieu de ce billet.
En fait, ce billet dispose d'un fichier template personnalisé (simpleWebsite permet cela sur tous les billets, pas seulement sur ceux représentant une section) où le menu est affiché entre l'extrait du billet et son contenu...
Commentaires
Existe t-il un endroit ou tu
liste les fonctions templates qu'il est possible d'appeler.
J'ai vu que tu avais fait un billet d'exemple sur ton blog mais si par exemple je veux faire un menu particulier avec une classe "sub" pour un premier sous niveau puis une classe sub2 et sub3 pour 2 autres sous niveau puis-je appeler chacun des niveau
dans leur contexte?
Si je suis ton exemple normalement, si je veux appeler mon premier niveau de menu j'insère :
///
<tpl:swDefineBlock name="MenuEntries">
<li><a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a></li>
</tpl:swDefineBlock>
///
Mais ça ne m'affiche rien...
Je n'ai pas compris la question.
Un tpl:swDefineBlock n'affiche rien. Il faut l'invoquer avec un tpl:swReuseBlock.
Bonjour,
J'ai dune suggestion et une question. La suggestion : j'ai remarqué que le code généré dans le menu était sous cette forme :
<ul>
<li>section 1</li>
<ul></ul>
<li>section 2</li>
<ul>
<li>section 2.1</li>
<ul></ul>
<ul></ul>
<li>section 2.2</li>
</ul>
</ul>
Une double balise vide <ul></ul> est générée quand il n'y a pas de sous-section. Je pense qu'il serait plus logique qu'elle ne soit pas générée.
Oui, Christophe. Ca serait mieux.
La version 1.2 introduit la balise tpl:swEntryIfHierarchyRef qui devrait permettre cela (cf le template de menu "local" fourni dans cette version)
Bonjour,
J'ai vraiment besoin d'aide, je suis une débutante, je n'arrive pas à faire les changements dont vous parler pour simple website. Je l'ai installé mais ça n'a pas l'air de marché. Merci d'avance. Marie.
@Marie,
C'est difficile de répondre de manière générale...
Qu'est-ce qui "n'a pas l'air de marcher" ? Ou plutôt qu'est ce qui marche ?
Bonjour,
Heu je crois que rien ne marche. En gros,j'ai juste ajouté l'extension mais apparement il y a des choses à faire en plus qui m'échappe. Pour l'instant, rien ne marche en tous les cas. Merci, Marie
Marie,
Pour être honnête, il vaut mieux avoir une très bonne connaissance de la mécanique des thèmes et templates de Dotclear pour se lancer dans ce plugin. Par ailleurs, simpleWebsite a été écrit alors que Dotclear 2 était encore en beta. Depuis, de nouvelles fonctionnalités, telles que la hiérarchie de catégories, sont apparues et le rendent (presque) obsolète.
Ce n'est pas encore finalisé mais je suis en train de voir comment reproduire le plugin simpleWebsite en utilisant un ensemble de plugins un peu plus génériques et sans avoir besoin d'aller faire des modifications dans l'existant.
Par exemple, si tu es venue ici dans l'idée de trouver un menu hiérarchique pour dotclear, je te conseille plutôt de définir cette hiérarchie avec les catégories de dotclear et d'utiliser mon plugin templateWidget. Il suffit de rajouter le fichier html de définition du menu (qui sera inclus dans la prochaine version) et d'y associer le css qui va bien (comme expliqué dans le billet).
Bonjour,
Je vais me pencher sur tout ça, merci beaucoup pour ta réponse ! Bonne journée, Marie
Bonjour,
J'ai installé la version 1.2 du plugin sur un dotclear2. Le menu se construit bien. En revanche, lorsque j'effectue une recherche avec le moteur interne, aucun de mes billets présents dans mes sections ne s'affichent. Cela dit, il me les trouve bien puisque qu'il m'indique '2' résultats !
Que dois-je mettre dans mon tpl search.html pour que les billets trouvés s'affichent effectivement ??? Idem pour ce qui est des tags, rien ne s'affiche !
Merci d'avance pour ton aide.