Exemple : module archives

31 Janvier 2012

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é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.