Date de publication: le samedi 11 août 2007 à 00h29
Dernière modification: par Pascal BOYER le lundi 13 août 2007 à 15h06
« Article précédent: eZ Publish : installer ezwebin_classes.ezpkg à la main
» Article suivant: eZ Publish : ajouter et configurer les commentaires imbriqués
Objetctifs
Entre ce que je vois et dis,
entre ce que je dis et tais,
entre ce que je tais et rêve,
entre ce que je rêve et oublie:
la poésie
Elle glisse.
Cet article explique comment mettre en place un système qui affiche au bas (ou en haut) des articles deux liens, l'un vers l'article précédent s'il existe et l'autre vers l'article suivant s'il existe.
Le code utilisé pour réaliser cette fonction est tiré du code existant dans les templates de galerie d'images.
Le code
Voici le code que j'utilise et place au début du template de vue (full) de mes articles:
{let sort_order=$node.parent.sort_array[0][1] sort_column=$node.parent.sort_array[0][0] sort_column_value=cond( $sort_column|eq( 'published' ), $node.object.published, $sort_column|eq( 'modified' ), $node.object.modified, $sort_column|eq( 'name' ), $node.object.name, $sort_column|eq( 'priority' ), $node.priority, $sort_column|eq( 'modified_subnode' ), $node.modified_subnode, false() ) previous_article=fetch_alias( subtree, hash( parent_node_id, $node.parent_node_id, limit, 1, attribute_filter, array( and, array( $sort_column, $sort_order|choose( '>', '<' ), $sort_column_value ) ), sort_by, array( $sort_column, $sort_order|not ) ) ) next_article=fetch_alias( subtree, hash( parent_node_id, $node.parent_node_id, limit, 1, attribute_filter, array( and, array( $sort_column, $sort_order|choose( '<', '>' ), $sort_column_value ) ), sort_by, array( $sort_column, $sort_order ) ) )}
Il est possible d'ajouter un paramètre permettant de restreindre la recherche de la fonction fetch aux classes dont l'identifiant sera spécifier par le paramètre. Ces deux lignes sont à insérer juste au-dessous de la ligne limi, 1,:
class_filter_type, include, class_filter_array, array( 'classe_identifiant_1', 'classe_identifiant_2', 'classe_identifiant_3' ),
Une autre solution serait de remplacer ces deux lignes par les deux suivantes:
class_filter_type, include, class_filter_array, ezini( 'MesIdentifiantsDeClasses', 'MaListeIdentifiants', 'mesparametres.ini' ),
...qui implique la création d'un tableau MaListeIdentifiants d'une section MesIdentifiantsDeClasses d'un fichier mesparametres.ini.append.php d'un siteaccess. Voici ce que doit contenir ce nouveau fichier:
vi settings/siteaccess/<siteaccess_public>/mesparametres.ini.append.php
1 <?php /* #?ini charset="utf-8"? 2 3 [MesIdentifiantsDeClasses] 4 MaListeIdentifiants[] 5 MaListeIdentifiants[]=classe_identifiant_1 6 MaListeIdentifiants[]=classe_identifiant_2 7 MaListeIdentifiants[]=classe_identifiant_3 8 7 */ ?>
Suivant le fonctionnement que l'on souhaite obtenir, il peut être important de bien spécifier la profondeur de la recherche avec le paramètre depth:
limit, 1, depth, 1,
Ensuite, il faut placer, toujours dans le template de vue des articles, le code qui va afficher les deux liens.
Voici celui que je place au bas de mon template:
49 {if or($previous_article, $next_article)} 50 <div id="cadre_prec_suiv"> 51 {if $previous_article} 52 <div class="fleche_precedente"> 53 <div class="lien_precedent"> 54 <a href={$previous_article[0].url_alias|ezurl} title="{$previous_article[0].name|wash}">{$previous_article[0].name|wash}</a> 55 </div> 56 </div> 57 {else} 58 {* *} 59 {/if} 60 {if $next_article} 61 <div class="lien_suivant"> 62 <a href={$next_article[0].url_alias|ezurl} title="{$next_article[0].name|wash}">{$next_article[0].name|wash}</a> 63 <span class="fleche_suivante"> </span> 64 </div> 65 {else} 66 {* *} 67 {/if} 68 </div> {* cadre_prec_suiv *} 69 {/if}
:
La première structure de contrôle
IF
de la ligne 49 est une astuce (barbare ?!) qui me permet de ne pas afficher, lorsqu'il n'y a pas de lien à afficher, le cadre qui entoure les deux liens.
:
Le code original (issu du template de vue de la galerie d'images) est écrit avec la structure section qu'il ne faut plus utiliser car
dépréciée
. Je l'ai donc remplacée par une syntaxe faisant appel à la structure de contrôle if.
Ensuite il faut bien sûr vider les caches.
Les règles CSS
Si cela peut en aider quelques uns, voici les règles CSS liées à l'affichage des deux liens:
div#cadre_prec_suiv { display: block; width: 905px; height: 25px; margin: 15px 0 15px -10px; border: 1px solid black; padding: 8px 0 0 5px; } #cadre_prec_suiv .lien_precedent a { position: relative; left: 0; float: left; text-decoration: none; margin-left: 40px; } div#cadre_prec_suiv .fleche_precedente { background-image: url(../images/Liens_prec_suiv/precedent.jpg); background-repeat: no-repeat; float: left; } div#cadre_prec_suiv .lien_suivant a { display: block; width: 850px; height: 15px; text-align: right; text-decoration: none; vertical-align: bottom; } div#cadre_prec_suiv .fleche_suivante { width: 33px; background-image: url(../images/Liens_prec_suiv/suivant.jpg); background-repeat: no-repeat; float: right; margin: -15px 0 0 5px; }
Seconde possibilité
Si on souhaite que ce soient les flêches qui fassent office de liens et non les noms des articles, alors le code au bas du template devient:
{* AFFICHAGE DES LIENS Articles précédent ET/OU Article suivant *} {if or($previous_article, $next_article)} <div id="cadre_prec_suiv"> {if $previous_article} <div class="fleche_precedente"> <a href={$previous_article[0].url_alias|ezurl} title="{$previous_article[0].name|wash}"> <img src={"images/Liens_prec_suiv/precedent.jpg"|ezdesign} title="" alt="Lien vers l'article précédent" /></a> </div> <div class="texte_article_precedent">{$previous_article[0].name|wash}</div> {else} {* *} {/if} {if $next_article} <div class="texte_article_suivant"> {$next_article[0].name|wash} </div> <div class="fleche_suivante"> <a href={$next_article[0].url_alias|ezurl} title="{$next_article[0].name|wash}"> <img src={"images/Liens_prec_suiv/suivant.jpg"|ezdesign} title="" alt="Lien vers l'article suivant" /></a> </div> {else} {* *} {/if} </div> {* cadre_prec_suiv *} {/if}
Et les règles CSS deviennent:
div#cadre_prec_suiv { display: block; width: 905px; height: 25px; margin: 15px 0 15px -10px; border: 1px solid black; padding: 8px 0 0 5px; } div#cadre_prec_suiv .fleche_precedente a { background-repeat: no-repeat; float: left; } div#cadre_prec_suiv .texte_article_precedent { padding: 0 0 3px 10px; color: #74764f; float: left; } div#cadre_prec_suiv .texte_article_suivant { display: block; width: 855px; height: 15px; text-align: right; text-decoration: none; color: #74764f; } div#cadre_prec_suiv .fleche_suivante a { width: 33px; background-repeat: no-repeat; float: right; margin: -14px 5px 0 0; }
Petit piège
Si vous triez vos articles par priorité tout en leur assignant une même priorité à chacun alors le système n'affiche aucun lien.
Conclusion
Voilà un code simple et rapide à mettre en oeuvre qui rend la navigation entre les pages du site bien plus agréable aux visiteurs.
Commentaires