Idées pour un blog (1)

Les blogueurs ne manquent pas d'idées.. Mais encore faut-il savoir comment mettre en oeuvre ses idées sur la nouvelle plateforme.

Voici donc quelques idées que j'ai eues avec les moyens simples de les réaliser.

Un poème dans une colonne de droite (ou de gauche).

On pourrait très bien inclure un test directement dans le code HTML. Mais il y a plus simple et plus pratique.

Je crée un article avec un poème avec comme tag pour cet article poème. Si je ne veux pas qu'il apparaisse dans la liste des premiers articles, j'antidate l'article.

Ensuite, je rajoute dans mon code HTML un petit bloc. Pour que le poème apparaisse en haut de la colonne, j'ajoute ce code au début du code de la colonne signalé "chez moi" par <div class="sidebar">

<div class="poeme">
    {% list Blog.TaggedPosts("poème", 1) %}
         <h2>{{ TaggedPost.Title }}</h2>
         <p>{{ TaggedPost.Body }}</p>
     {% endlist %}
</div>

Ce petit bout de code utilise deux langages : le langage html commun à la plupart des sites et blogs... et le méta-langage. Késako ? C'est plus simple que la métaphysique, rassurez-vous. Il permet de retrouver tous les éléments que vous avez défini pour votre blog et ce que vous publiez.

Ainsi de notre exemple, la liste des articles ayant comme tag poeme se retrouve avec {% list Blog.TaggedPosts("poème", 1) %} (je mets 1 pour prendre le dernier article concerné).

Pour chaque article taggé, on a TaggedPost.Title (le titre) et TaggedPost.Body (le corps de l'article). En omettant le lien (TaggedPost.Permalink) ou l'image de couverture (TaggedPost.Cover). Chaque expression étant entre deux accolades }}.

Le poème apparaît ainsi à côté de l'article affiché.

Dès qu'un nouvel article sera publié avec le même tag, il prendra sa place sans avoir besoin de changer le code. C'est là tout l'intérêt.

Le code est applicable avec toutes sortes d'articles courts. Quelques réglages dans le CSS à prévoir. Pour le texte et les images evéntuels, réglages de la taille :

.poeme p{font-size:12px;margin-top:8px;}
.poeme .ob-section-images{width:200px;}

aperçu du résultat sur mon blog test