A la une - [Escal]

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 :

<div class="cadre-une">

  <ul class="onglets">
    <li><a href="#" name="contenu_1" class="tab active" title="Derniers articles">Les derniers articles ...</a></li>
    <li><a href="#" name="contenu_2" class="tab" title="Plan du site">... et les autres</a></li>
  </ul>

  <div class="contenu_1 content">
    <INCLURE {fond=inclusions/inc-une_derniers}>
  </div>

  <div class="contenu_2 content">
    <INCLURE {fond=inclusions/inc-plan}>
  </div>

</div>
   
</div>

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

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

et un contenu

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

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

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

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

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

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

Le code complet du fichier devient donc

#CACHE{24*3600}

<div class="cadre-une">

  <ul class="onglets">
    <li><a href="#" name="contenu_1" class="tab active" title="<:escal:title_articles_derniers:>"><:escal:articles_derniers:> ...</a></li>
    <li><a href="#" name="contenu_2" class="tab" title="<:escal:plan_site:>">... <:escal:articles_autres:></a></li>
    <BOUCLE_onglets(RUBRIQUES){par num titre}{titre_mot="RubriqueOnglet"}>
      #SET{numero1, #COMPTEUR_BOUCLE|plus{2}}
      <li><a href="#" name="contenu_#GET{numero1}" class="tab">#TITRE</a></li>
    </BOUCLE_onglets>
  </ul>

  <div class="contenu_1 content">
    <INCLURE {fond=inclusions/inc-une_derniers}{env}>
  </div>

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

</div>

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

Répondre à cet article

A la une

jmm - le 18 avril 2018

Bonjour
Comment sont obtenus les onglets "Présentation" et "Crédits" de ce site ?
Avec "articles sélectionnés par mot-clef" ?
Et comment obtient on un affichage complet de l’article dans ces onglets ?

merci d’avance