Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Méta langage : types de page

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.

Partager cet article

Commentaires

Bernieshoot 06/02/2015 14:14

comment pouvoir faire ces modifications avec la version kiwi ?

deborah 20/03/2013 11:51

Bonjour,
J'aurai besoin d'un de tes conseil, je viens de créer un blog malheureusement je n'ai que 2 pages "Acceuil" et "Contact" et je n'arrive pas à en paramètrer d'autres.. J'ai fais un copier coller de tes codes mes il ne les acceptes pas.. Peux tu me renseigner?
http://letheatrepourtous.over-blog.com/

Mélina 02/11/2012 15:17

excusez mon language, j'ai tutoyé, mais disons l'équipe d'over-blog ;)

Mélina 02/11/2012 15:15

Bonjour ! Merci pour ton blog ! Je suis toute perdu avec la nouvelle version !! Je viens de créer un nouveau blog, dans le cadre de mes études, et je voudrais modifier des bricoles sur le thème "Simple Image". Or je me débrouillais -un peu- avec le CSS mais le html a fini de me larguer x)
Pourrais-tu gentillement m'aider à, supprimer les résumer d'articles et à mettre l'article "Qui sommes nous ?" en page de présentation s'il te plait. Je t'en serais très très très reconnaissante !
Bien à toi,
Mélina
savdesecolos.overblog.com