Méta langage : types de page

06/02/2015 14:14

Lorsque l'on blogue, on aime parfois afficher des choses différentes en fonction de la page. C'est possible sur overblog, voici comment.

Comment différencier les pages

Plusieurs variables existent, permettant de savoir si la page affichée est l'accueil (au sens large), une page, un article...

{% is isIndex %}
    <h1>Bienvenue sur l'accueil de mon blog</h1>
{% elseif isSingle %}
    <h2>Mon article</h2>
{% elseif isPage %}
    <h2>Ma page</h2>
{% elseif isTag %}
    <h3>Page sur le tag {{ Tag.Title }}</h3>
{% elseif isSearch %}
    <h3>Recherche de {{ Search.Keyword }}</h3>
{% elseif isArchive %}
    <h3>Archives des mois passés</h3>
{% elseif isSpecial %}
    <!-- Formulaire de contact -->
    {{ SpecialContent }}
{% else %}
    <p>Page inconnue</p>
{% endif %}

Si dans cet exemple, nous affichons juste le type de page, il est parfaitement possible d'effectuer des actions plus complexes, comme afficher le contenu de l'article et les commentaires dans le cas où isSingle est vrai.

Exemple détaillé : title

Le title d'une page web est utilisé pour plusieurs choses :

Affichage dans l'onglet du navigateur
Utilisation dans les favoris
Utilisation dans les réseaux sociaux (Facebook, Google+) lorsque vous partagez un lien
Utilisation pour référencer la page.

Il est déconseillé d'avoir un title identique sur toutes les pages d'un site : il faut donc l'adapter en fonction du contenu.

<title>
    {% if isSingle%}
        {% list Posts %}{{ Post.Title }} - {% endlist %}
    {% elseif isTag and Tag is not empty %}
        {{ Tag.Title|title }} - 
    {% elseif isSearch and Search is not empty %}
        {{ Search|title }} - 
    {% endif %}
    {{Blog.Title}}
</title>

Dans cette première version, on adapte le title en fonction du titre de l'article sur un article seul, du mot-clef recherché dans une page de recherche, etc.

C'est efficace, mais on peut faire plus lisible et pratique.

{% if isSingle%}
    {% list Posts %}
		<title>
            {% if Post.Title is not empty %}
                {{ Post.Title }} - 
            {% elseif Post.Snippet is not empty %}
                {{ Post.Snippet|truncate(80) }} - 
            {% endif %}
            {{Blog.Title}}
        </title>
     {% endlist %}
{% elseif isTag and Tag is not empty %}
	<title>
        {{ Tag.Title|title }} - {{Blog.Title}}
    </title>
{% elseif isSearch and Search is not empty %}
	<title>
        {{ Search|title }} - {{Blog.Title}}
    </title>
{% else %}
	<title>
        {{Blog.Title}}
    </title>    
{% endif %}

L'avantage de cette façon de faire ? Il est plus facile d'ajouter d'autres codes qui varient avec les pages. Ajoutant dans le second exemple les mots-clefs et la description du contenu (pour aider les moteurs de recherche).

{% if isSingle%}
    {% list Posts %}
    	<title>
            {% if Post.Title is not empty %}
                {{ Post.Title }} - 
            {% elseif Post.Snippet is not empty %}
                {{ Post.Snippet|truncate(80) }} - 
            {% endif %}
            {{Blog.Title}}
        </title>
        <meta name="description" content="{{ Post.Snippet }}" />
    	<meta name="keywords" 
            content="{% list Post.Tags %}{{ Tag.Title }}{% if loop.last == false %}, {% endif %}{% endlist %}" />
    {% endlist %}
{% elseif isTag and Tag is not empty %}
	<title>
        {{ Tag.Title|title }} - {{Blog.Title}}
    </title>
	<meta name="description" content="{{ Blog.Description }}" />
	<meta name="keywords" content="{{ Tag.Title|title }}" />
{% elseif isSearch and Search is not empty %}
	<title>
        {{ Search|title }} - {{Blog.Title}}
    </title>
	<meta name="description" content="{{ Blog.Description }}" />
	<meta name="keywords" content="{{ Search|title }}" />
{% else %}
	<title>
        {{Blog.Title}}
    </title>    
	<meta name="description" content="{{ Blog.Description }}" />
{% endif %}

En résumé, nous ajoutons les codes suivants :

Pour une page d'article seul :

Ligne 5 à 10 : le title est le titre de l'article (ou le début de l'extrait de l'article si le titre est vide), suivi du titre du blog
Ligne 12 : La description est l'extrait de l'article
Ligne 13 : les mots-clefs sont les tags de l'article.tags

Pour une page de tag :

Ligne 16 à 18 : le title est le tag lui-même (suivi du titre du blog)
Ligne 19 : la description est celle du blog
Ligne 20 : les mots-clefs sont au nombre de un : le tag lui-même

Pour une page de recherche :

Ligne 22 à 24 : le title est le mot-clef (suivi du titre du blog)
Ligne 25 : la description est celle du blog
Ligne 26 :les mots-clefs sont au nombre de un : le mot-clef recherché par le visiteur

Pour les autres pages :

Ligne 28 à 30 : le title est le titre du blog
Ligne 31 : la description est celle du blog
Il n'y a pas de mots-clefs

Pour aller plus loin

On peut continuer cette personnalisation, pour ajouter les informations pour Google+, Facebook, Twitter en fonction des pages. Il devient alors parfaitement possible d'avoir un favicon différent sur certaines pages.