Comment ajouter une page Archives sur Blogger?

Image : Leeroy, Life of Pix, CC0

Le gadget Archives fourni par défaut par Blogger est bien pratique lorsqu'on débute un blog car il permet aux lecteurs de retrouver facilement les articles publiés depuis les premiers jours du blog jusqu'à aujourd'hui. Il a aussi le grand avantage de ne demander aucun gros effort particulier pour sa mise en place, tout le travail ayant déjà été fait par Blogger. Pourtant, au fur et à mesure que le blog souffle ses bougies, le nombre d'articles qu'il comporte augmente et la liste d'archives s'allonge. Il arrive un moment où le gadget jusque là placé dans la barre latérale devient trop encombrant et peu esthétique. Il peut alors être raisonnable de placer les archives de son blog sur une page indépendante. Cet article explique une méthode pour mettre en place cette page Archives.

La méthode proposée ici permet de générer une page d'archives automatiquement à l'aide d'un code en javascript : il n'est donc pas nécessaire d'ajouter manuellement les articles après chaque publication. En réalité, le code fourni ci-dessous est basé sur un code très populaire parmi les blogs sous Blogger. Il s'agit du code écrit par jhwilson qu'on peut trouver sur GitHub. Ce code est très bien, ce qui explique qu'un grand nombre de bloggers l'utilisent. Malheureusement, il n'est pas parfait. La page générée affiche tous les articles publiés les uns en dessous des autres, avec la date entre parenthèses à droite du titre. Si le code remplit la fonction qu'on attend de lui, le résultat pourrait être plus joli. En m'inspirant des modifications du code de jhwilson apportées par Sarah du blog Life is full of tae, je suis finalement arrivée au code que je vous propose dans cet article. Et en bonus, il est personnalisable à l'envi avec quelques lignes de CSS.

Si vous suivez toutes mes explications, vous devriez arriver à ce résultat-ci :

Capture d'écran de la page archive [sic] de ce blog

Sans plus de tergiversations, place aux explications.

1. Création d'une nouvelle page indépendante

Dans votre tableau de bord, cliquez sur Pages, et puis ensuite sur Nouvelle page.
L'éditeur de texte s'ouvre. Donnez un titre à votre nouvelle page, par exemple, appelez-la Archives.
Vérifiez que vous êtes bien en mode HTML et non en mode Rédiger.

2. Ajout du code javascipt

Dans l'espace réservé au contenu de l'article copiez-collez le code suivant :

<script>
function LoadTheArchive(TotalFeed){
 var PostTitles = new Array();
 var PostURLs = new Array();
 var PostDays = new Array();
 var PostYears = new Array();
 var PostMonths = new Array();
 var PostDays = new Array();
 if("entry" in TotalFeed.feed) {
  var PostEntries=TotalFeed.feed.entry.length;
  for(var PostNum=0; PostNum<PostEntries ; PostNum++) {
   var ThisPost = TotalFeed.feed.entry[PostNum];
   PostTitles.push(ThisPost.title.$t);
   PostYears.push(ThisPost.published.$t.substring(0,4));
   PostMonths.push(ThisPost.published.$t.substring(5,7));
   PostDays.push(ThisPost.published.$t.substring(8,10));
   var ThisPostURL;
   for(var LinkNum=0; LinkNum<ThisPost.link.length; LinkNum++) {
    if(ThisPost.link[LinkNum].rel == "alternate") {
     ThisPostURL = ThisPost.link[LinkNum].href;
    break
    }
   }
  PostURLs.push(ThisPostURL);
  }
    }
    DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays);
}

function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays){
 var MonthNames = ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
 var NumberOfEntries=PostTitles.length;
 var currentYear = "";
 for(var EntryNum = 0; EntryNum<NumberOfEntries; EntryNum++){
  NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]
  if ( currentYear != PostYears[EntryNum]) {
   currentYear = PostYears[EntryNum];
   document.write("<br/><div class='YearStyle'>"+currentYear+" <br/></div>");
  }
  document.write("<span class='DateStyle'>"+parseInt(PostDays[EntryNum],10)+" "+NameOfMonth+"</span> : ");
  document.write('<a class="TitleStyle" href ="'+PostURLs[EntryNum]+'">'+PostTitles[EntryNum]+"</a><br/>");
 } 
}
</script>

A la suite du code que vous venez de coller, ajouter le code suivant, en n'oubliant pas de remplacer NomDuBlog par le nom de votre blog.

<script src="http://NomDuBlog.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=LoadTheArchive">
</script>

Et voilà, votre page Archives est prête à être publiée. Si vous le désirez, vous pourvez vous arrêter ici, la page fonctionnera parfaitement. Les étapes suivantes servent juste à améliorer le code et à personnaliser la mise en page.

3. Affichage d'un avertissement le cas échéant

A la suite des codes collés jusqu'à présent, copiez-collez le code ci-dessous :

<noscript>
Oups ! Javascript semble être désactivé. Veuillez l'activer pour afficher correctement le contenu de cette page. 
</noscript>

Quelle est l'utilité de ce code? La page Archives est générée automatiquement à l'aide de javascript. Hélas, tous les visiteurs de votre blog n'auront pas nécessairement activé javascript sur leur navigateur. Ces personnes-là ne pourront donc pas visualiser correctement le contenu de la page. Pour avertir gentillement ces personnes, on va afficher un message les invitant à activer javascript afin de visualiser le contenu notre page. Ce message est placé entre les balises <noscript> ... </noscript>. Vous pouvez bien entendu personnaliser ce message en modifiant le texte compris entre ces balises.

4. Personnaliser les styles

La dernière consiste à personnaliser la mise en page en ajoutant des styles en CSS. Pour cela, copiez-collez à la suite le code suivant, en replaçant les parties comprises entre /* ... */, par les règles CSS de votre choix.

<style>
.YearStyle{
/*style des années*/
}
.DateStyle{
/*style de la date*/
}
a.TitleStyle{
/*style des titres*/
}
a.TitleStyle:hover{
/*style des titres survolés par la souris*/
}
</style>

A vous de choisir les styles qui vous conviennent le mieux pour faire de votre blog quelque chose d'unique et à votre image. Par exemple, voici les styles que j'ai appliqués sur la page Archives de mon blog :

<style>
.YearStyle{
 font-family: "Niconne",cursive;
 font-weight: bold;
 text-align: center;
 font-size: 20px;
 padding: 5px;
 margin: 1em 3px;
 text-shadow: 1px 1px 0px #E8DAE7;
}
.DateStyle{
 font-family: "Times New Roman", serif;
 font-weight: bold;
 text-decoration: none;
}
a.TitleStyle{
 color: #808080;
 text-decoration: none;
}
a.TitleStyle:hover{
 text-decoration: underline;
}
</style>

5. Publication

Cliquez sur Publier et c'est terminé ! Vous voilà munis d'une page d'archives automatique et personnalisée sur votre blog.

J'espère que ces explications vous auront aidés. Si vous avez des questions, n'hésitez pas à les poser en commentaire.

Bon blogging !