OutlineSite et NextPrev

Aides à la navigation

Le bon sens indique qu'offrir à vos lecteurs plusieurs options pour naviguer aisément et intuitivement dans votre site Web peut être crucial dans l'expérience qu'ils en feront.

Parmi les aides à la navigation les plus communes, il y a le plan du site (dans lequel vous fournissez une table des matières du site à partir de laquelle vos lecteurs peuvent naviguer vers n'importe quelle page), et les liens "Précédent" et "Suivant" qui permettent de passer à la page suivante ou à la précédente, à partir d'une structuration linéaire de votre site.

Le Plan du site ("Site outline")

Commençons par apprendre comment faire un plan du site avec Frontier. Allez d'abord à myFirstSite.default et ajoutez ceci à la fin de la page :

   {outlineSite()}

Publiez l'ensemble du site et examinez default.html dans le fureteur. Vous pouvez voir que les liens vers toutes les autres pages ont été ajoutés, ce qui n'est pas mal du tout.

En plus, outlineSite est si futé qu'il regarde dans les sous-tables, considère qu'il s'agit de dossiers situés à un niveau inférieur de la hiérarchie, et ajoute des entrées en indentation pour représenter leur contenu.

Et puis outlineSite ignore les tables tools, glossary et images, il ne catalogue que la partie du site qui sera effectivement rendue.

Mais en vérité, nous n'en avons pas encore pour notre argent, car la macro outlineSite est encore mieux que ça. Avec outlineSite, nous pouvons inclure une directive #subtext dans chaque page qui deviendra une description dans le plan du site. Essayez. Dans secondePage, ajoutez une ligne au début qui pourrait être comme ceci :

    #subtext "Exemple montrant comment inclure une liste dans un plan"

Et dans quatrièmePage, ajoutez au début la ligne suivante :

    #subtext "Montre comment faire un tableau à partir d'un outline"

À présent publiez encore une fois tout le site, et regardez dans default.html. Pas mal n'est-ce pas ?

Voici, pour en terminer sur ce sujet, quelques dernières considérations sur outlineSite. Premièrment, vous avez avec cette macro des directives que nous n'avons pas encore utilisées : #siteOutlineHeadFont permet de définir globalement la balise <font> pour les titres de pages. Par exemple, la balise <font> par défaut est <font face="geneva,arial" size=-2>. Si cela est trop pour vous, ne l'utilisez pas et laissez les autres paramètres par défaut prendre le dessus, #siteOutlineSubtextFont fonctionne aussi de la même façon.

En outre, #siteDefaultName vous permet de choisir le nom de la page d'index ou default. Si vous n'utilisez pas cette directive dans votre page, la directive #siteDefaultName de votre site (ou cette directive dans user.html.prefs.defaultFileName) sera utilisée. Ni la page qui est indiquée comme page default ou index, ni la page que nous sommes en train de rendre avec outlineSite (si elles sont différentes) ne sont incluses dans le plan du site.

Vous pouvez aussi donner un paramètre à outlineSite pour qu'il ne fasse le plan que d'une table spécifique plutôt que du site complet. Si vous écrivez :

    {outlineSite(@user.websites.monPremierSite.uneSousTableQuelquonque)}

Seul ce qui est à uneSousTableQuelquonque sera listé.

D'autres arguments peuvent vous permettre d'établir la mise en page ; la largeur (en pixels) du tableau qui sera produit, et la longueur de chaque indentation, et à quel niveau chacune de celle-ci devrait être. Pour faire un plan de votre site complet, vous pouvez écrire :

    {outlineSite(maxWidth:200, indentPixels:5)}

Un petit inconvénient d'outlineSite est qu'il classe les pages alphabétiquement selon le nom donné à #title. Cela n'est peut être pas ce que vous voulez. J'ai quelques solutions pour résoudre ce problème qui, bien que peu sophistiquées, sont efficaces.

La première est de rendre une page avec outlineSite, juste pour avoir le HTML. Puis j'ouvre le document avec un traitement de texte, copie ce qui m'intéresse, et le colle dans un outline de Frontier. À présent je peux réordonner l'outline puis l'inclure dans une page en utilisant la macro renderObject (et le renderer "newCulture") .

L'autre méthode consiste à inclure un numéro au début de chaque titre pour les ordonner.

Et bien sûr, il vous reste la possibilité d'écrire votre propre macro qui fera ce que fait outlineSite, mais en le personnalisant selon vos besoins. Après avoir appris UserTalk, vous considèrerez ceci comme un défi qu'il est parfaitement possible de relever.

Liens Précédent et Suivant

Testons à présent le mécanisme du NextPrev ("suivant-précédent"). La première étape, est de faire établir par Frontier une liste de vos pages, sous la forme de lignes d'un outline, et de les ordonner dans l'ordre voulu. C'est ainsi que Frontier saura, pour chaque page, quelle sont la page précédente et la page suivante.

À partir du menu Web, choisissez Build NextPrev List. Frontier va vous obliger à saisir le chemin complet jusqu'à la table de votre site, ce qui peut sembler un peu stupide puisque vous êtes déjà probablement dans cette table. Mais continuez et écrivez user.websites.monPremierSite puis cliquez OK (attention : il est crucial que la capitalisation du nom soit la même que celle du nom de la table du site).

Frontier vous présentera alors un outline composé de toutes les pages de votre site.

Il se peut que la liste fasse apparaître certaines pages qui n'existent pas dans votre site, parce que la routine d'outlineSite pense (allez savoir pourquoi) que vous devez avoir une page default dans chacune des sous-tables du site. Vous n'avez qu'à supprimer celles qui ne correspondent à aucune page réelle. Mais lorsqu'elles correspondent vraiment à une page existante, vous devrez peut être corriger quelques majuscules dans l'outline. Par exemple, si votre site est "monPremierSite" et que l'entrée correspondant à default est orthographiée "monpremiersite.defaut", il vous faudra la corriger en "monPremierSite.defaut" faute de quoi ça ne marchera pas. Désolé.

Bon le plus dur est fait, à présent passons à la partie amusante.

Arrangez la liste des pages dans l'ordre désiré -- dans notre cas, je suggèrerait que vous mettiez secondePage au milieu de la liste.

Maintenant aller dans le #template et mettez la ligne suivante avant la ligne du {bodytext} :

    <p>{linkPrev("Précédent")} | {linkNext("Suivant")}</p><hr>

La syntaxe ici est assez évidente. Nous créons deux appels de macro ; les éléments entre guillemets seront les textes qui apparaîtront dans le fureteur, et ces textes seront transformés en liens hypertextes pointant vers la page précédente et la page suivante.

Finalement, créez une nouvelle entrée de type String dans la table monPremierSite, appelez-la #useGlossPatcher, et réglez la à "true" (sans les guillemets). C'est absolument essentiel : le mécanisme du NextPrev ne peut fonctionner que si #useGlossPatcher est réglé à true, et vous ne voulez pas courir le risque qu'il soit réglé à false depuis un autre niveau de la hiérarchie directive/preference.

À présent, publiez le site complet (vous aurez peut être besoin de le publier deux fois), et regardez default.html dans le fureteur. Cliquez le lien "Suivant" à plusieurs reprises pour vous déplacer à travers les pages de votre site. Vous avez à présent un petit site assez sophistiqué. Je vous laisse vous amuser avec quelques instants.

Des images à la place des mots

Vous rêvez probablement d'améliorer le mécanisme du NextPrev. Par exemple, une question qui revient souvent est de demander comment faire des liens "Précédents" et "Suivant" avec des images cliquables au lieu du texte. C'est facile, et vous avez probablement déjà deviné comment faire.

Supposons que vous ayez deux images intitulées "prec et "suiv". Pour obtenir des images cliquables, vous pourriez penser que ceci marchera :

   {linkNext (imageRef ("suiv"))}
   {linkPrev (imageRef ("prec"))}

Et c'est le cas ! Vous obtiendrez bien les images cliquables précédente et suivante.

Un autre exemple : en bas des pages de ce manuel, il y a une flêche vers la gauche et une vers la droite. La flêche gauche s'appelle "previous.gif" et la flêche droite s'appelle "next.gif". Elles sont générées par ses deux lignes :

   {linkPrev (imageRef ("previous", "Précédent"))}
  {linkNext (imageRef ("next", "Suivant"))}

(La raison d'être de ce second paramètre à imageRef, est d'ajouter la partie alt de la balise, de sorte que sur un fureteur paramétré pour ne pas charger les images, le texte "Précédent" et "Suivant" sera visible.)

Améliorations possibles

Vous devez certainement envisager plusieurs façons de personnaliser tout le mécanisme.

Par exemple, vous pensez peut-être que l'arrangement cyclique des liens (où la dernière page pointe sur la première et vice-versa) ne vous convient pas. Dans ce cas, vous préféreriez sans doute empêcher que les liens "Précédent" et "suivant" ne soient actifs s'il n'y a pas de page suivante ou précédente.

Cela n'est pas difficile à implémenter avec une routine finalFiler, ou en créant une version modifiée des macros linkNext et linkPrev. Mais pour cela, vous aurez besoin de scripter Frontier. Cette introduction n'est donc pas l'endroit désigné pour discuter de ce sujet plus avant. Cependant, j'espère que vous commencez à envisager de vous y mettre.