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

Archives dynamiques en sidebar gauche ou droite

- Auteur : Brunofaisart

Suite à une question d'Alice concernant :
l'affichage des archives en Sidebar avec la nouvelle plate-forme Overblog, ici un petit exemple simple qui permet d'afficher les archives sous forme d'une arborescence du type :

ARCHIVES
  |
  |_ 2011 (+)
  |
  |_ 2012 (-)
     |
     |_ Juin 2012
     |
     |_ Juillet 2012
     |
     |_ Août 2012
     |
     |_ Septembre 2012
     |
     |_ Octobre 2012
  |
  |_ 2013 (+)

Ceci est une modification de code dans votre thème alors avnt de l'utiliser, je vous conseille de sauvegarder le HTML original du thème en faisant un copier et un coller dans votre éditeur de texte favori.

Les variables d'affichage Overblog utilisées pour cet exemple :

VARIABLE
AFFICHE QUOI ?
Résultat exemple
{{ Lang.Get('Archives') }}
Le titre du widget Archives
Archives
  {{ Lang.Get('Archives') | upper }}
  Le titre du widget Archives en majuscules
ARCHIVES
{{ Archive.Year }}
L'année de publication du post/article
2012
{{ Month.Name | datel("MMMM") | title }}
Le mois de publication en anglais
August
{{ Lang.Get(Month.Name) | datel("MMMM") | title }}
Le mois de publication en français
Août
{{ Month.PostCount }}
Le nombre de posts pour le mois
8
{{ Month.PostCount(' post',' posts' }}
Le nombre de posts pour le mois étendu
8 posts
{{ Month.Url }}
Le lien vers la liste des posts pour un mois
monblog.overblog.com//archive/2012-08
{% list Blog.Archives %}...{% endlist %}
renvoie la liste de toute les archives
Boucle dans un tableau en mémoire
{% list Archive.Months %}
renvoie la liste de tous les posts pour les
archives d'un mois donné
Boucle dans un tableau

Alors maintenant le source HTML qui marche de paire avec un SCRIPT Javascript :

<div class="votre-style-pour-la zone-archives" >
 <div class="votre-style-pour-afficher-le-titre-archives"> <h2> <span>{{ 
 Lang.Get('Archives') }}</span> </h2> </div> <div class="votre-style-pour-le-
 widget-archives"> <ul id="archivelist"> {% list Blog.Archives %} <li 
 class="arch_year"> <a href="#" class="plustext" 
 onclick="javascript:switch_arch('{{ Archive.Year }}')"> {{ Archive.Year }} 
 </a> <ul id="arch_{{ Archive.Year }}" class="arch_month" {% if loop.index == 1 
 %}style="display:block;"{% endif %}> {% list Archive.Months %} {% if 
 Month.PostCount > 0 %} <li> <a href="{{ Month.Url }}"> {{ Month.Name | 
 datel("MMMM") | title }} </a> <span class="number">{{ Month.PostCount 
 }}</span> </li> {% endif %} {% endlist %} </ul> </li> {% endlist %} </ul>
 </div>
</div>

Et à ajouter juste avant la balise </BODY> de votre thème, le script javascript.

<script type="text/javascript">
    function switch_arch(year) {
        'use strict';
        var archiveYear, archiveMonths, displayStyle;
        displayStyle = '';
        archiveYear = document.getElementById('arch_' + year);
        if (typeof (archiveYear) !== 'undefined') {
            if (archiveYear.style.display !== 'none') {
                
                // Cacher les années sans posts
                archiveMonths = archiveYear.getElementsByTagName('li');
                if (!archiveMonths.length) {
                    archiveYear.parentNode.style.display = 'none';
                }
                // Gestion du click
                displayStyle = 'none';
            }
            archiveYear.style.display = displayStyle;
        }
        return false;
    }
    
    $(document).ready(function(){    
   $('.plustext').click(function() {
   return false; 
});
  });

{% list Blog.Archives %}
{% if Archive.Year != "now"|date("Y") %}
switch_arch('{{ Archive.Year }}');
{% endif %}
{% endlist %}  
</script>

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...