Définir l'apparence d'un article en fonction de son libellé

[Cours Mangas Inari Sensei]

Mon message

Bonjour,

Pour personnaliser mon blog, je souhaiterais pouvoir modifier l'apparence d'un article en fonction des libellés que je le lui attribue. Par exemple, si j'ai un article avec le libellé "bleu", le background de l'article doit être bleu mais si j'ai un autre article avec le libellé "rouge" le background est rouge.

Voici une capture d'écran de la page d'accueil de mon site. Avec le processus décrit ci-dessus, je souhaiterais adapter la couleur de la bande (actuellement jaune) et fonction du libellé que je lui attribue sur ma page d'accueil. (Par exemple jaune pour le libellé "dessin", vert pour le libellé matériel, etc). J'ai vu qu'on peut personnaliser un article en fonction de son libellé grâce à la condition:

<b:if cond='data:blog.searchLabel == "foo"'>

<!-- for label 'foo' -->
</b:if>

Mais cette condition personnalise que l'apperance des posts qui sont sur le flux consacré aux libellés (ex: www.monblog.blogspot/label) alors que moi j'aimerais que cela apparaisse directement sur la page d'accueil ! 

J'ai lu sur ce site anglophone Style blog post based on label que quelqu'un qui s'est posé exactement la même question, mais je n'ai pas compris comment ils ont résolu le problème.

Merci à ceux qui prendront le temps de me lire et de me répondre

URL de mon blog

https://BLOG-NAME.blogspot.com

[Soraya Lambrechts [fr-BE]]

Salut,

SO n'est pas une plateforme spécialisée dans le langage Blogger. Tu y trouveras surtout des réponses maladroites comme celle-là.

Entre parenthèse, data:blog.searchLabel est en cours d'abandon et est remplacé par data:view.search.label.

Dans le code XML du gadget Blog, il faut utiliser un opérateur lambda (pour filtrer les libellés) qui doit être placé dans une balise <b:class> (pour ajouter une classe à la balise parente).

<div>

  <b:class expr:name='data:post.labels first (l => l.name in ["bleu","vert","rouge"])'/>

  .... contenu

</div>

En  orange : La balise <b:class>

En rouge : L'opérateur lambda qui recherche le 1er libellé correspondant au critère.

En mauve : Le critère - Pour ce cas, la liste des libellés.

Si le libellé du post courant est "bleu" le résultat HTML sera

<div class="bleu">

</div>

Pour appliquer la couleur à l'élément, il faut ajouter les déclarations adéquates dans l'éditeur CSS

► Tableau de bord ► Thème ► Personnaliser ► Avancé ► Ajouter fichier CSS

Par exemple :

.bleu { background-color: blue; }
.vert { background-color: green; }

.rouge { background-color: red; }

Best :)

[Cours Mangas Inari Sensei]

Merci beaucoup pour votre réponse,

Si j'ai bien compris comment cela fonctionne en théorie, je dois bien avouer être un peu perdu pour la mise en pratique. Je ne sais pas où dois-je positionner les div dans mon éditeur html/xml et le contenu qu'elles doivent englober. Je suis parvenu à trouver le widget Blog1 (que je suppose être le gadget blog dont vous me parlez)

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>

mais après je ne sais pas comment procéder pour installer correctement la ligne de code pour quelle soit efficiente. Pourriez-vous me donner quelques précisions ?

J'utilise un thème Simple blanc

Merci de votre patience et votre compréhension.

[Soraya Lambrechts [fr-BE]]

Les <div> sont déjà dans le modèle et c'est ça qu'il faut trouver. Et puis ce n'est pas obligatoire que ça soit automatiquement un <div>. ça peut être aussi une autre balise comme <span>, <h1>, <h2>, <h3>, <header>, <article>, <section>, etc...
Pour localiser, il faudrait savoir quelle est la version du gadget ou du layouts que tu utilises parce que chaque version à son propre code.


Si tu utilises un gadget V1, il faut aller dans l'inclusion "post".

Au mieux, ajouter la balise <b:class> après cette balise :

<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Si c'est un gadget V2, c'est un peu plus compliqué parce qu'il existe plusieurs variantes :

Idéalement je choisirai l'inclusion "postCommentsAndAd" et je positionnerai la balise <b:class> après la balise <article>.
Mais comme cette version n'est pas explicite dans certains thèmes, tu auras peux-être des difficultés à la trouver. Encore une fois, si tu me communiques le numéro de version et si possible le nom du thème, je pourrai te suggérer les endroits les plus appropriés.

[Cyril Berset]

Salut,

Merci beaucoup pour ces informations, j'avoue être un peu perdu avec tous ces termes technique.. je débute dans ce domaine et réalise mon blog principalement à l'aide de forum et de copier coller des lignes de code.

Si je comprend bien.., tout est déjà dans le code de mon blog mais je dois les "activer" en qqe sorte ? Ou pas de tout..? 

Merci! 

--
La Communauté ne peut vivre qu'à travers ses membres ! C'est vous qui construisez cet espace à votre image. Comment faire ? :
 
• Poser des questions : votre question n'a pas encore été abordée ? Lancez un nouveau sujet dans le forum et attendez qu'un membre vienne vous aider.
• Aider les autres : un sujet n'a pas encore de réponse et vous avez la solution ? Proposez-la et peut-être qu'elle conviendra !
• Remercier : un membre donne la bonne réponse à votre question ? Remerciez-le et notez-la comme "meilleure réponse"
• Participer : une Communauté doit être vivante. N'hésitez pas à prendre part aux discussions en cours pour apporter un point de vue nouveau sur un sujet.
---
Vous recevez ce message, car vous êtes abonné au groupe Google Groupes "Forum Blogger Ambassade Francophone".
Pour vous désabonner de ce groupe et ne plus recevoir d'e-mails le concernant, envoyez un e-mail à l'adresse blogger-fr+...@googlegroups.com.
Cette discussion peut être lue sur le Web à l'adresse https://groups.google.com/d/msgid/blogger-fr/ec23df2a-22f6-4d2a-9d27-5e30ebf3377b%40googlegroups.com.

[Cours Mangas Inari Sensei]

Voici ce que j'ai trouvé comme informations concernant mon template:

Blogger Template Style
Name:     Simple
Designer: Blogger
URL:      www.blogger.com

b:version='2' class='v2'

[Soraya Lambrechts [fr-BE]]

C'est parfait.

Layouts version 2.

Gadget version 1.

1. Tu repères le gadget Blog1

2. Tu ouvres l'inclusion "post"

3. Dans l'inclusion "post", et tu ajoutes la balise <b:class> après le <div>

[Soraya Lambrechts [fr-BE]]

Re, une petite rectification pour le code à injecter. Celui que je t'ai donné renvoie un objet et non une chaîne. Ce qui entraine un crash du gadget puisque la syntaxe n'est plus respectée.

Celui-ci travaille mieux ;)

<b:class cond='data:post.labels any (l => l.name in ["bleu","vert","rouge"])' expr:name='(data:post.labels first (l => l.name in ["bleu","vert","rouge"])).name'/>

[Julien N.]

Salut Cours Mangas Inari Sensei :)
Dis moi où as tu récupéré le template de ton blog car je le trouve assez réussi ? Merci

[Cours Mangas Inari Sensei]

Ça marche parfaitement ! Merci beaucoup !

[Cours Mangas Inari Sensei]

Le lundi 1 juillet 2019 14:04:43 UTC+2, Julien N. a écrit :

Salut Cours Mangas Inari Sensei :)
Dis moi où as tu récupéré le template de ton blog car je le trouve assez réussi ? Merci

J'ai pris le template de base "Simple" proposé par blogger et après je l'ai entièrement codé...

[Cours Mangas Inari Sensei]

Voici le rendu du code. La couleur du titre de la vignette est automatiquement ajustée en fonction de son libellé ! (J'aurai enfin plus à faire de miniature avec les couleurs sur TheGimp).

J'ai un peu déplacé le code de Soraya et je l'ai mis en dessous de:

<h3 class='post-title entry-title' itemprop='name'>

Voici le résultat en image (c'est un site en version de test, d'ù les titres bizarres...)

[Soraya Lambrechts [fr-BE]]

C'est super. Good job.

C'est ce qu'il faut faire. Tant que cette balise est placée quelque part dans une boucle d'articles, la classe sera toujours appliquée à la balise parente.