Squelettes du site : les éléments constants

Profitons des pour ne pas avoir à réécrire n fois des bouts de squelettes qui sont communs.
Cet article détaille donc les éléments que nous avons utilisés dans (presque) tous les squelettes du site

Rappel

Pour utiliser des "bouts de sites", on doit se servir de l’instruction <INCLURE> . Un exemple avec le pied de page de notre site :

  1. Créer le bout de code HTML qui afficher le bas de page :
  2. Ne pas oublier de créer le fichier d’appel :
  3. Et, pour finir, mettre cet <INCLURE> au bon endroit de votre squelette :

    Les différents bandeaux du haut de page

    BANDEAUTETE1.HTML
    Rien de particulier sur ce bandeau qui, pour l’instant, c’est utilisé que dans la page dommaire.
    Le phare est plus gros, le logo « R.A. forum » aussi.
    Sur la droite, une simple boucle permet de lister les rubriques langues du site :


    – id_parent=0 ne prend en compte que les « secteurs », ou rubriques de niveau 1
    – id_rubrique !==^(508|509|603|604)$ : bien entendu, on n’oublie pas d’exclure les rubriques autres : paramétrage, vie du site...
    – par titre permet de trier les rubriques par titre ; nous avons numéroté les rubriques de fçon à forcer notre tri ; mais, quand nous fficherons le titre, il faudra bien penser à supprimer le numéro (#TITRE
    – {<font color=#990000> &ndash; </font>"} : c’est la façon élégante de mettre des séparateurs entre les rubriques : ici, un « – »
    Nous allons aussi en profiter pour donner au visiteur la possibilité de choisir sa langue de navigation

    #MENU_LANG

    . Nous verrons plus tard que, pour les autres pages, le choix de la langue se fera ensuite sur la colonne de gauche de chacune des pages. Mais comme la page sommaire n’étant que sur une colonne, le choix a été fait ainsi !
    BANDEAUTETE2.HTML
    Le phare et le logo sont d’un format plus petit. Ensuite, un titre apparaît sur la droite du logo.
    Que contient-il ?
    Ce bandeau est utilisé pour 2 types de pages :
    – les pages rubriques
    – les pages non liées à un secteur particulier (les mots-clés, le plan du site, le dictionnaire des personnes, le formulaire permettant de joindre un auteur...=
    Donc, dans le premier cas, le titre sera celui de la rubrique juste en dessus de la rubrique affichée... sauf pour les rubriques de niveau 1 où le titre sera le nom de ce niveau.
    Et, dans le second cas, on prendra systématiquement la rubrique secteur correspondant à la langue du visiteur ! La boucle utilisée dans ces pages sera de la forme :

    On remarque le lang ? qui permet de sélectionner la langue du visiteur, langue passée de pages en pages dans l’URL (voir article sur le multilinguisme
    Dans les 2 cas, afin que le bandeau ne « bouge » pas, on tronquera le titre à 50 caractères : [(#TITRE|supprimer_numero|couper{50})]
    Ensuite, on fait apparaître la hiérarchie des rubriques, permettant de nous situer dans le site. Chaque élément de la hiérarchie est cliquable et il nous est possible d’aller directement sur une rubrique en dessus de celle affichée : Recherche sur l’anarchisme > Arts majeurs, mineurs et en do majeur > Spectacles .
    BANDEAUTETE2.HTML
    Seul différence : le titre de la rubrique qu’on affiche est le titre de la rubrique contenant l’article en cours.
    ce bandeau n’est donc utilisé que dans les pages articles (articles « normaux » et albums).

    Le pied de page

    Le squelette PIED.HTML n’a rien de particulier :
    – une ligne avec des menus divers, entrés « en dur »
    – une ligne avec les langues du site, langues conduisant aux différents secteurs du site.

    La colonne de gauche

    Le squelette LEFTCOL.HTML est utilsié sur chacune des pages avec 2 colonnes. Il permet :

  4. d’avoir la possibilité de saisir la langue du site grace au formulaire #MENU_LANG
  5. d’offrir la possibilité de faire une recherche sur le site

    Remarque sur la recherche :
    Au début, nous pensions laisser le choix au niveau de la recherche :
    – recherche sur le secteur
    – recherche sur le site
    Mais, comme nous avons conçu la page recherche, nous n’avons plus à demander au visiteur de choisir !
    De toutes les manières, quand il recherche un mot, il verra les résultats dans sa langue puis dans les autres langues : avec une séparation pour éviter « d’appeurer » notre visiteur !

    Les éléments entre le >HEAD< et le >/HEAD<

    Si l’on veut créer un nouveau squelette, on fera du copier-coller de squelette existant, de façon à récupérer un maximum de choses. Par contre, suivant le type de pages, certains éléments seront modifiés.
    Il correspondent aux différents meta-tags :
    Title, descrition, keywords
    Suivant les squelettes, on utilisera le nom du site, le titre de l’article, de la rubrique, le descriptif, et les mots-clés :

    Les feuilles de style
    On rappellera les différentes feuilles de style SPIP, plus la feuille de style du site "ra.css".
    Le filtre antispam
    Il a été décrit dans l’article Règles générales de développement du site.