Exemple : module articles récents

13/01/2013 10:48

Ajouter un module article récents est facile lorsqu'on manipule facilement le méta langage, et le html. Voici donc un exemple détaillé de la réflexion, avec plusieurs version du code.

Etape 1 : liste des articles

Tout d'abord, il nous faut la liste des derniers articles. On l'a déjà vu sur d'autres exemples, je ne détaille pas.

{% list Blog.Posts(10) %}
    <p>
		<a href="{{Post.Permalink}}">{{ Post.Title }}</a>
	</p>
{% endlist %}

Etape 2 : mise en page

Pour mettre en page proprement le widget, il faut ajouter un peu de html, et le css correspondant.

On va afficher une liste à puces, dans un div bien identifié. La partie HTML doit être ajoutée là où l'on souhaite afficher le widget (dans une colonne de modules, dans le pied de page...) La partie CSS doit être ajouté à la suite du CSS existant.

<-- La partie CSS -->
<style>
.recent h2 {
    color: #000099;
}
.recent li {
    list-style-type: square;
}
.recent a {
    color : white;
}
</style>

<-- La partie HTML -->
<div class="recent">
    <h2>Articles récents</h2>
    <ul>
        {% list Blog.Posts(10) %}
            <li>
            	<a href="{{Post.Permalink}}">{{ Post.Title }}</a>
        	</li>
        {% endlist %}
    </ul>
</div>

Et voilà le résultat

Etape 3 : les détails

Maintenant que nous avons une liste d'articles, on peut aussi ajouter la vignette de l'article, ajouter l'option qui permet d'activer le widget en un clic.

<-- La nouvelle option à ajouter -->
<meta name="boolean:display_widget_recents:Hide Widget 'Recent article'" group="Widgets" />

<-- La partie CSS -->
<style>
.recent h2 {
    color: #000099;
}
.recent li {
    list-style-type: square;
}
.recent a {
    color : white;
}
</style>

<-- La partie HTML -->
{% if Custom('display_widget_recents') == false %}
    <div class="recent">
        <h2>Articles récents</h2>
        <ul>
            {% list Blog.Posts(10) %}
                <li>
                    <a href="{{Post.Permalink}}">
                        {% if Post.Cover is not empty %}
                            <img src="{{ Post.Cover | resize(50,50) }}" />
                        {% endif %}
                        {{ Post.Title }}
                    </a>
            	</li>
            {% endlist %}
        </ul>
    </div>
{% endif %}