Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Utilisé à ce jour dans 510 sites
logo article ou rubrique
A la une
Article mis en ligne le 31 janvier 2009
dernière modification le 18 août 2017

par Jean Christophe Villeneuve

Cette noisette destinée à être appelée au centre de la page d’accueil affiche 2 onglets par défaut mais on peut en rajouter facilement.

Nom du fichier inc-a_la_une.html
pages concernées page d’accueil
mots-clés aucun

On peut configurer de 1 à 5 onglets avec le choix suivant :

  • Derniers articles avec 3 présentations possibles :
  • * Derniers articles : 1 article en exergue configurable et d’autres en-dessous en 1 à 3 colonnes. Un clic sur l’un d’eux le fait remonter en exergue.
  • * Derniers articles bis : Une liste des derniers articles présentés comme l’article en exergue de la première option
  • * Derniers articles ter : une présentation identique à Derniers articles mais un clic sur un article renvoie directement à l’article
  • Plan du site
  • Article d’accueil qui affiche l’article avec le mot-clé accueil
  • Article avec mot-clé pour afficher la liste des articles avec le mot-clé de votre choix. Cette présentation aura le même aspect que Derniers articles ter
  • Article archive pour afficher un article pris au hasard dans la rubrique ayant le mot-clé archive
  • Rubrique pour afficher les articles d’une rubrique avec 5 rubriques possibles
  • Mon article pour afficher l’article avec le mot-clé mon-articleN avec 3 articles possibles
  • Sur le web pour afficher la liste des articles syndiqués

dans l’ordre souhaité par vous même.

Avec EscalV2

 Présentation

Le code du fichier :

  1. <div class="cadre-une">
  2.  
  3.   <ul class="onglets">
  4.     <li><a href="#" name="contenu_1" class="tab active" title="Derniers articles">Les derniers articles ...</a></li>
  5.     <li><a href="#" name="contenu_2" class="tab" title="Plan du site">... et les autres</a></li>
  6.   </ul>
  7.  
  8.   <div class="contenu_1 content">
  9.     <INCLURE {fond=inclusions/inc-une_derniers}>
  10.   </div>
  11.  
  12.   <div class="contenu_2 content">
  13.     <INCLURE {fond=inclusions/inc-plan}>
  14.   </div>
  15.  
  16. </div>
  17.    
  18. </div>

Télécharger

Pour rajouter un onglet, il suffit de rajouter un élément de liste

  1.     <li><a href="#" name="contenu_3" class="tab">Votre titre</a></li>

et un contenu

  1.   <div class="contenu_3 content">
  2.   <INCLURE {fond=inclusions/inc-autrechose}>
  3.   </div>

Télécharger

le fichier "inc-autrechose" est à créer, bien sur !

 Pour aller plus loin

On peut s’amuser à vouloir afficher certaines rubriques en tant qu’onglets supplémentaires. Pour cela, on va rajouter 2 boucles :
- une première qui va créer les onglets à la suite des 2 premiers

  1.     <BOUCLE_onglets(RUBRIQUES){par num titre}{titre_mot="RubriqueOnglet"}>
  2.       #SET{numero1, #COMPTEUR_BOUCLE|plus{2}}
  3.       <li><a href="#" name="contenu_#GET{numero1}" class="tab">#TITRE</a></li>
  4.     </BOUCLE_onglets>

Télécharger

cette boucle compte le nombre de passages, rajoute 2 à la valeur trouvée et stocke le résultat dans "numero1" afin de numéroter name="contenu_XX
- une deuxième boucle pour afficher le contenu des rubriques sur le même modèle que le premier onglet

  1.   <BOUCLE_contenu(RUBRIQUES){par num titre}{titre_mot="RubriqueOnglet"}>
  2.   #SET{numero2, #COMPTEUR_BOUCLE|plus{2}}
  3.         <div class="contenu_[(#GET{numero2})] content">
  4.         <INCLURE {fond=inclusions/inc-une_derniers}{id_rubrique}>
  5.         </div>
  6. </BOUCLE_contenu>

Télécharger

Il ne reste plus qu’à marquer les rubriques voulues avec le mot-clé RubriqueOnglet.

Le code complet du fichier devient donc

  1. #CACHE{24*3600}
  2.  
  3. <div class="cadre-une">
  4.  
  5.   <ul class="onglets">
  6.     <li><a href="#" name="contenu_1" class="tab active" title="<:escal:title_articles_derniers:>"><:escal:articles_derniers:> ...</a></li>
  7.     <li><a href="#" name="contenu_2" class="tab" title="<:escal:plan_site:>">... <:escal:articles_autres:></a></li>
  8.     <BOUCLE_onglets(RUBRIQUES){par num titre}{titre_mot="RubriqueOnglet"}>
  9.       #SET{numero1, #COMPTEUR_BOUCLE|plus{2}}
  10.       <li><a href="#" name="contenu_#GET{numero1}" class="tab">#TITRE</a></li>
  11.     </BOUCLE_onglets>
  12.   </ul>
  13.  
  14.   <div class="contenu_1 content">
  15.     <INCLURE {fond=inclusions/inc-une_derniers}{env}>
  16.   </div>
  17.  
  18.   <div class="contenu_2 content">
  19.     <INCLURE {fond=inclusions/inc-plan}>
  20.   </div>
  21.  
  22.   <BOUCLE_contenu(RUBRIQUES){par num titre}{titre_mot="RubriqueOnglet"}>
  23.   #SET{numero2, #COMPTEUR_BOUCLE|plus{2}}
  24.         <div class="contenu_[(#GET{numero2})] content">
  25.         <INCLURE {fond=inclusions/inc-une_derniers}{id_rubrique}>
  26.         </div>
  27. </BOUCLE_contenu>
  28.  
  29. </div>

Télécharger

 Précautions

Ce code fonctionne même si on sélectionne des sous-rubriques mais attention à 2 choses :

  • si la suite des onglets est trop longue, les onglets se mettent bien sur 2 lignes mais ce n’est pas très esthétique
  • il y a un risque que le dernier onglet d’une ligne soit coupé en 2 avec l’autre bout sur la ligne suivante si le titre de la rubrique est composé de plusieurs mots. Solution : séparer les mots par un espace insécable avec le code &nbsp;
qrcode:http://escal.ac-lyon.fr/spip/spip.php?article5

Plan du site Contact Mentions légales Espace rédacteurs squelette RSS

2009-2019 © Escal V4 - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.2.97