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

Exemple : module archives

Etape 1 : liste des mois d'archives

Le module archives permet aux visiteurs de visiter rapidement le blog, en commencant au début, ou en remontant progressivement dans le temps. Sans oublier l'intérêt pour les moteurs de recherches de disposer d'un accès à tous les articles du blog très simplement.

On peut lister simplement les mois pour lesquels un blog a publié avec le code suivant.

<ul>
    {% list Blog.Archives %}
      	{% list Archive.Months %}
          	{% if Month.PostCount > 0 %}
        		<li>
					<a href="{{ Month.Url }}">
    					{{ Month.Name | datel("MMMM") | title }} {{ Archive.Year }}
					</a>
				</li>
        	{% endif %}
 	 	{% endlist %}
	{% endlist %}
</ul>

On note la liste des années, et pour chaque année, la liste des mois d'archives. Pour chaque mois d'archive, nous disposons de l'adresse, du mois, et du nombre d'articles publiés.

Etape 2 : design avancé

Mais pourquoi se contenter d'une liste ? Il est possible de regrouper les mois dans les années, et de les déplier au clic

Module optionnel

<meta name="boolean:display_widget_archives:Masquer les Archives" group="Widgets" />

CSS

.plustext {
    font-size: 16px;
}
.arch_month {
    margin-left: 20px;
}
.arch_month li {
    border-bottom: 1px solid #222; 
    margin: 10px 0; 
    padding: 10px 0;
}
.archives .number {
    border-radius: 4px; 
    float: right; 
    font-weight: bold; 
    line-height: 17px; 
    margin-top: -2px; 
    padding: 2px 7px; 
    text-align: center;
}

Le widget

{% if Custom('display_widget_archives') == false %}
  <div class="box archives" >
      <div class="box-titre">
          <h2>
      		<span>{{ Lang.Get('Archives') }}</span>
      	</h2>
      </div>
      <div class="box-content">
          <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>
{% endif %}


Le javascript

Ce code permet de rendre ce widget dynamique.
<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') {
                
                // Hide years without months
                archiveMonths = archiveYear.getElementsByTagName('li');
                if (!archiveMonths.length) {
                    archiveYear.parentNode.style.display = 'none';
                }
                // Onclick management
                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>
Le widget en position ouverte et ferméeLe widget en position ouverte et fermée

Le widget en position ouverte et fermée

Explications partielles

La ligne 13 du html permet d'ajouter le comportement ouverture / fermeture lors d'un clic d'un visiteur.

Le début du script définit l'action. La fin du script définit le comportement par défaut : toutes les années sont fermées, sauf l'année en cours.

Partager cet article

Commentaires

Carmencita 05/11/2014 18:41

Bonsoir, je ne sais pas où placer ces codes, je suis nulle en informatique, ça fait 3 semaines que j'essaie de trouver une solution mais rien. Je voudrais mettre un menu déroulant pour mes archives depuis 2010, année qui n'apparait même plus ce qui est lamentable. Par un clic qu'on puisse y accéder j'ai vu ça sur d'autres blogs , mais comme je vous l'ai dit je n'y comprends rien en CSS. mon blog c'est Cuisine gourmande de Carmencita. Merci bonne soirée

Eva Scardapelle 30/08/2012 13:19

bonjour
tout cela m'a été très utile pour mon thème qui n'avait pas de blocs archives préinstallé.
merci pour cette FAQ ou ce guide qui m'aide beaucoup.