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

Exemple : module articles récents

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

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 %}    

Partager cet article

Commentaires

Jean luc M 13/01/2013 10:48

C'est super, après un long moment passé devant l'ordi, j'y suis arrivé..
les copains de l'asso vont être ravis ... merci

Jean luc M 12/01/2013 08:36

Bonjour
je me mets tout doucement au HTML et au CSS , et par avance je tenais a remercier le superbe travail qui est fait sur ce site
que je découvre.
j'ai une question, j'essaye exactement de faire ce que vous décrivez sur le meme thème ( j'espere que j'employe les bons mots ...), mais voila je ne comprends pas du tout ou je dois copier ces informations ???
je vous l'ai dit, je découvre et me lance pour pouvoir offrir un blog digne de ce nom a une asso dans une petite commune ( c'est pour une école de musique ), et j'adorerais pouvoir faire une liste sur le coté a droite des articles récents ...
Mille merci pour votre aide ..
jean luc

chris 25/10/2012 21:16

Quel dommage d'avoir créé une plateforme en coréen! Vivement qu'elle soit tradiuite!