Données : Tags

1 Mars 2012

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>

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>

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