Overblog Suivre ce blog
Administration Créer mon blog

Données : Tags

Lorsque l'on publie un article, il est possible de saisir des tags. Cela permet de classer et de regrouper les articles d'un même sujet : vos visiteurs pourront rapidement trouver des articles qui les intéressent.

Informations générales

Les tags du blogs sont accessibles directement via le code (pour les tags d'un article, voir cet article)

Liste des tags

On affiche les 6 tags les plus utilisés par défaut.
{% list Blog.PostsTags(6, "count") %}
    {{ PostsTag.Title }}
{% endlist %}

On peut aussi afficher les 5 premiers tags par ordre alphabétique
{% list Blog.PostsTags(5, "index") %}
    {{ PostsTag.Title }}
{% endlist %}

Adresse d'un tag

<a href="{{ PostsTag.Url }}">{{ PostsTag.Title }}</a>

Nombre d'article ayant un tag

{{ PostsTag.PostCount }}

Liste des articles ayant un tag donné

{% list Blog.TaggedPosts("MonTag", 10) %}
    ...
{% endlist %}

Exemple détaillé : le module tag

Ce module permet à vos visiteurs de voir la liste de vos tags. Autre intérêt : c'est une porte d'entrée très intéressante pour le référencement.

Le code CSS

.tags li {
    border-bottom: 1px solid #222; 
    margin: 10px 0; 
    padding: 10px 0;
}
.tags li a {
    font-size: 16px;
}
.tags .number {
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -o-border-radius: 4px; 
    -ms-border-radius: 4px; 
    border-radius: 4px; 
    float: right; 
    font-weight: bold; 
    line-height: 17px; 
    margin-top: -2px; 
    padding: 2px 7px; 
    text-align: center;
}

La partie HTML

<!-- Tags -->
<div class="box tags" >
    <div class="box-titre">
        <h2>
    		<span>{{ Lang.Get('Tags') }}</span>
    	</h2>
    </div>
    <div class="box-content">
        <ul>
            {% list Blog.PostsTags(20) %}
              <li>
                  <a href="{{ PostsTag.Url }}" 
                    title="{{ PostsTag.Title }}">
                    #{{ PostsTag.Title }}
                </a> 
                <span class="number">{{ PostsTag.PostCount }}</span>
              </li>
            {% endlist %}
        </ul>
    </div>
</div>
Données : Tags

Explications détaillées du CSS :

  • Lignes 1 à 5 : espace occupé par les tags.

  • Lignes 6 à 8 : taille du texte

  • Lignes 9 à 21 : affichage du nombre d'articles

Explications détaillés du HTML :

  • Lignes 3 à 7 : Titre du widget

  • Lignes 8 à 20 : contenu du module

  • Lignes 10 à 18 : liste des tags (limité à 20, ordre : nombre d'article décroissant)

  • Lignes 12 à 15 : affichage du lien sur le tag

  • Ligne 16 : affichage du nombre d'articles

Exemple détaillé : menu

Les tags peuvent être également intéressant pour faire un menu.

La partie CSS

.navigation {
    background: black; 
    width: 926px; 
    margin: 20px auto 0; 
    float: left; 
    height: 61px; 
    line-height: 60px; 
    padding-left: 30px; 
    padding-right: 30px;
}
.navigation li {
    height: 46px;
    float: left; 
    margin-right: 10px; 
    padding-bottom: 10px; 
    margin-right: 20px; 
    padding-left: 20px;
}
.navigation li.first {
    padding-left: 0px;
    background: none;
}
.navigation li.last {
    margin-right: 0px;
}
.navigation li.active {
    background : grey;
}
.navigation a {
    color: white; 
    text-transform: uppercase; 
    font-weight: bold; 
    text-shadow: 0px 1px 0px #000;
}
.navigation a:hover {
    text-decoration: none;
    text-shadow: 0px 0px 4px #00a2ff;
}

La partie HTML

<div class="navigation">
    <ul>
		<li class="first">
            <a href="{{ Blog.Url }}" title="{{ Lang.Get('Home') }}">
                {{ Lang.Get('Home') }}
            </a>
        </li>
		{% list Blog.PostsTags(6, count) %}
			<li {% if isTag and Tag.Title == PostsTag.Title %} class="active" {% endif %}>
                <a href="{{ PostsTag.Url }}" title="{{ PostsTag.Title|title }}">
                    {{ PostsTag.Title }}
                </a>
            </li>
		{% endlist %}
		<li>
            <a href="/contact" title="{{ Lang.Get('Contact') }}">
                {{ Lang.Get('Contact') }}
            </a>
        </li>
	</ul>
</div>

Données : Tags

La partie HTML est très proche de celle du widget. Ce qui change :

  • Lignes 4 à 6 : ajout d'un lien vers l'accueil du blog

  • Lignes 15 à 19 : ajout d'un lien vers la page contact

  • Ligne 9 : ajout d'une classe css : "active" pour mettre en valeur le tag courant dans le CSS

Pour la partie CSS

  • Lignes 1 à 10 : la présentation de la barre de menu

  • Lignes 11 à 18 : la présentation des éléments du menu : tailles, espacement...

  • Lignes 19 à 25 : la présentation particulière du premier et dernier éléments de la liste

  • Lignes 26 à 28 : la mise en avant du tag courant.

  • Lignes 29 à 38 : la présentation des liens du menu

Partager cet article

Commentaires

pgi27 16/01/2014 20:46

Bonjour,
J'ai essayé d'utiliser la fonction : list blog.poststagged("MonTag", 10), mais je n'arrive à aucun résultat.(MonTag étant pour moi : Rouen.
Y a t-il un piège à éviter ou est ce réservé au premium?
Merci de votre réponse

Iv-Oam 12/08/2012 15:30

Bonjour,
Je ne trouve pas comment afficher les article du premier tag de l'article affiché
Quelque chose du genre mais sans message d'erreur

{% list Blog.TaggedPosts("{{ Tag.title }}", 2) %}

{{ TaggedPost.Title }}

{% endlist %}

Merci d'avance