1 mars 2013

Comment Utiliser Les Balises Conditionnelles Dans Blogger

Conditional Tags Blogger
Les balises conditionnelles <b:if> / <b:else/> ( si / sinon) sont des éléments spécifiques à Blogger qui offrent davantage de souplesse en permettant de définir des modifications de modèle qui ont lieu uniquement dans certaines conditions.
Les balises des conditions, Blogger Conditional Tags, sont utilisées dans le code HTML du modèle pour indiquer aux navigateurs ce que doit être afficher ou cacher selon le cas.
Vous allez voir que les conditions constituent vraiment la base pour rendre votre blog dynamique, c'est-à-dire pour afficher des choses différentes en fonction de type des pages, de l'auteur, du nombre de commentaires, etc.

Principe Et Syntaxe Des Balises Conditionnelles

Le principe d'utilisation des balises conditionnelles est simple : on définie une condition et le contenu sera exécuté selon tel ou tel cas.
Ces balises peuvent être insérées aussi bien dans le code HTML du modèle que dans une gadget HTML/Js.
D'une manière générale, la syntaxe (en français) est la suivante :
Si Condition  = élément_comparé | opérateur de comparaison | élément comparant
=>Exécuter cette partie
Sinon
=>Exécuter cette autre partie
Fin si

Exemple :
SI le type de la page est égale à TYPE
=> Exécuter cette partie
SINON
=> Exécuter cette autre partie
Fin de condition 
 
on peut aussi utiliser une deuxième condition à la place de SINON :
SI le type de la page est égale à TYPE
=> Exécuter cette partie
Fin de condition1 
SI le type de la page est différent de  TYPE
=> Exécuter cette autre partie
Fin de condition2

Par exemple, si on veut afficher BONJOUR dans les pages article et BYE sur toutes les autres pages, alors en langage HTML cela donne :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
BONJOUR
<b:else/>
BYE
</b:if>
ou encore :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
BONJOUR
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
BYE
</b:if>

* à noter que la comparaison avec un autre élément n'est pas obligatoire; donc s'il n'existe pas d'élément comparant, la comparaison se fait selon le contenu de la donnée.
Exemple :
<b:if cond='data:post.title'>

Cependant, la balise b:else n'est pas aussi obligatoire. Elle est utile s'il s'agit d'exécuter une alternative.

 * L'élément comparé peut être une donnée Blogger, une valeur texte ou une valeur numérique.
s'il s'agit d'une valeur texte, elle doit être encadré de guillemet (' ') échappés (&quot;) => Exemple : &quot;Texte encadré&quot;

* Les opérateurs de comparaison :
Voici comment comparer les données dans Blogger :
OpérateurSignificationType de valeur
==Est égal à texte ou numérique
!=Est différent detexte ou numérique
&gt;Est plus grand queUniquement numérique
&lt;Est plus petit queUniquement numérique

Les Différents Types De Pages Blogger Et Les Balises Conditionnelles à Utiliser

La page d'accueil du blog : Blogger Home page
<b:if cond='data:blog.url == data:blog.homepageUrl'>
{...}
</b:if>

Les pages articles (message,post) ou Items
<b:if cond='data:blog.pageType == &quot;item&quot;'>
{...}
</b:if>

Les pages index : index page 
Elle se réfère à toutes les autres pages sauf les pages articles càd la page d'accueil, de libellés, des archives et celle de la recherche.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
{...}
</b:if>

Les pages statiques : static page
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
{...}
</b:if>

Cibler à la fois les pages articles et les pages statiques
<b:if cond='data:blog.url == data:post.url'>
{...}
</b:if>

Les pages de libellés : Label page
<b:if cond='data:blog.searchLabel'>
{...}
</b:if>

Les pages des archives : Archive page
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
{...}
</b:if>

Une page en particulier :
Il suffit d'insérer l'adresse URL de la page désirée.
<b:if cond='data:blog.url == &quot;URL_De_La_Page&quot;'>
{...}
</b:if>

Page d'erreur 404 : Blogger error page
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
{...}
</b:if>

Le premier article ou l'article le plus récent du blog
<b:if cond='data:post.isFirstPost'>

La version mobile
<b:if cond='data:blog.isMobile'>

Inverser Une Condition

Une condition peut être inversé simplement en remplaçant l'opérateur == (est égal à) avec l'opérateur != (est différent de) :
<b:if cond='data:blog.url != data:blog.homepageUrl'>
{...}
</b:if>
Dans l'exemple précédant le contenu va s'afficher dans toutes les pages du blog mais pas dans la page d'accueil.

Comment utiliser les balises conditionnelles

Le contenu qu'on veut afficher/masquer doit être insérer à l'intérieur de la condition càd entre les deux balises <b:if...> et </b:if>
Les conditions peuvent être utiliser n'importe-où dans le code HTML, mais dans certain cas il faut les insérer avec soin afin d'éviter l'affichage des erreurs lors de l'enregistrement du modèle.
Par exemple si on veut appliquer une condition sur un widget il faut la mettre entre les deux balises <b:includable id=....> et </b:includable>
Dans certaines situations il faut regrouper plusieurs conditions afin d'arriver à un résultat. Par exemple pour afficher un contenu dans la page d'accueil, dans les pages statiques et dans un article en particulier, il faut écrire ça :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.url == &quot;static_page&quot;'>
<b:if cond='data:blog.url == &quot;URL_De_La_Page&quot;'> 
Le contenu qu'on veut l'afficher uniquement si on se trouve dans la page d'accueil ou dans une page statique ou dans l'article indiqué.
</b:if>
</b:if>
</b:if>
N'oubliez surtout pas de fermer les conditions avec la balise </b:if> pour chaque <b:if...> usé.

11 commentaires:

  1. Bonjour,

    je voudrais afficher certains éléments sur les pages index et archive, puis afficher ces éléments une autre façon sur les autres pages.

    J'ai fait :



    mon élément


    mon élément une autre façon


    ça ne marche pas... comment peux-je déclarer "if index" et "if archive" puis "else" ?

    merci en avance !

    RépondreSupprimer
  2. aie... je n'ai pas fait les codes correctement mais c'était suffisant qu'ils ne sont pas affichés ici...

    donc, j'ai fait :
    "if index"
    "if archive"
    mon élément
    "/if"
    "else"
    mon élément une autre façon
    "/if"

    RépondreSupprimer
  3. what is the name of programmation language that blogger use it

    RépondreSupprimer
  4. j'avais le plaisir de visiter votre blog.

    RépondreSupprimer
  5. Comment faire pour creer un bouton cliquzble uniquement si une textbox est non-vide ?

    RépondreSupprimer
  6. You have done a great job. I will definitely dig it and personally recommend to my friends. I am confident they will be benefited from this site.
    Click here to buy online
    Covid-19 Safety Signages and Banners

    RépondreSupprimer
  7. Your articles are a testament to your passion for the subject matter. Thank you for sharing your expertise and contributing to the broader understanding of your chosen fields.

    Marble Contractor in Fujairah

    RépondreSupprimer