HTML de blog [2] La cellule des articles

Cette cellule peut être cl_0_0, cl_1_0 ou autre selon la mise en page donnée au blog dans l'admin. La structure de cette cellule dépend du type de la page affichée. La structure des articles proprement dits est développée dans l'article suivant : Articles et quasi-articles.

[1] Infos générales - Haut et bas de page

[2] La cellule des articles

1. Pages 'accueil'
2. Pages 'articles' (=de catégorie)
3. Article seul
4. Article et commentaires
5. Liste complète, archives
6. Articles les plus commentés
7. OB-pages
8. C.G.U

[3] Articles et quasi-articles

[4] Annexes des articles

[5] Modules

[6] Diablogs

Les tableaux ci-dessous partent tous du div.column_content de la cellule des articles.

Page 'Accueil' - cellule des articles

• Table
• Structure commune

divcolumn_content

Contenu de la cellule

divmenuob

Barre de menu (optionnelle)

a

Un choix du menu

a

Un autre choix du menu (maximum 6)

divarticles

Un ou plusieurs articles ou résumés

div

Div sans classe ni identifiant

divbefore_articles

Pagination ou vide, selon configuration (détails)

divarticle1article article_even
divextraitArticle1extraitArticle article_summary_even

1er article OU résumé d'article (détails article - détails résumé)

divarticle2article article_odd
divextraitArticle2extraitArticle article_summary_odd

2e article OU résumé d'article.

div

ainsi de suite : le numéro d'article ou résumé augmente, 'even' et 'odd' alternent.

divafter_articles

Pagination ou vide, selon configuration (détails)

• Cette structure ne concerne que la page d'accueil et ses pages de suite (1-index.html, 2-index.html, etc.)
• La barre de menu n'apparaît que si elle contient au moins un lien.
• La pagination, quand elle est présente, couvre tout le blog.
• Mise à jour avril 2012 : prise en compte de la barre de menu.

Page 'Articles' - cellule des articles

• Table
• Structure commune

divcolumn_content

Contenu de la cellule

divmenuob

Barre de menu (optionnelle)

a

Un choix du menu

a

Un autre choix du menu (maximum 6)

divarticles

Un ou plusieurs articles ou résumés

h2topicTitle

Libellé de la catégorie

div

Div sans classe ni identifiant

divbefore_articles

Pagination ou vide, selon configuration (détails)

divarticle1article article_even
divextraitArticle1extraitArticle article_summary_even

1er article OU résumé d'article (détails article - détails résumé)

divarticle2article article_odd
divextraitArticle2extraitArticle article_summary_odd

2e article OU résumé d'article.

div

ainsi de suite : le numéro d'article ou résumé augmente, 'even' et 'odd' alternent.

divafter_articles

Pagination ou vide, selon configuration (détails)

• Cette structure ne concerne, actuellement, que les pages de catégories.
• La barre de menu n'apparaît que si elle contient au moins un lien.
• Remarquez l'ajout du h2.topicTitle .
• La pagination, quand elle est présente, ne couvre que la catégorie affichée.
• Mise à jour avril 2012 : prise en compte de la barre de menu.

Page 'Article seul' - cellule des articles

• Table
• Structure commune

divcolumn_content

Contenu de la cellule

divmenuob

Barre de menu (optionnelle)

a

Un choix du menu

a

Un autre choix du menu (maximum 6)

div

Div sans classe ni identifiant

divarticleSeularticle

Article, jamais résumé (détails)

• Cette structure ne concerne qu'un article affiché seul, avec ou sans ses commentaires.
• La barre de menu n'apparaît que si elle contient au moins un lien.
• Mise à jour avril 2012 : prise en compte de la barre de menu.

Différences avec le cas général :

• pas de div.articles
• div.before_articles et div.after_articles ne sont pas vides mais absents. Il n'y a aucune pagination.
• évidemment, il n'y a qu'un seul article et il n'est jamais résumé…

Page 'Article et commentaires' - cellule des articles

• Table
• Structure commune

divcolumn_content

Contenu de la cellule

divmenuob

Barre de menu (optionnelle)

a

Un choix du menu

a

Un autre choix du menu (maximum 6)

div

Div sans classe ni identifiant

divarticleSeularticle

Article, jamais résumé (détails)

divanchorComment

Div vide, pour aider à la navigation et la mise en page

divcommentsList addEnding

'Emballage' des commentaires et réponses.

divcommentXXXcommentContainer comment1 comment_odd

1er commentaire et réponse éventuelle. XXX est le numéro (unique) du commentaire (détails)

divcommentYYYcommentContainer comment2 comment_even

2e commentaire et réponse éventuelle. YYY est le numéro (unique) du commentaire.

div

ainsi de suite : 'even' et 'odd' alternent.

divpagination center

Pagination seulement si +de 50 commentaires (détails), div absent sinon.

divanchorEndComment

Div vide, pour aider à la navigation et la mise en page

divoption afterReactions

Lien 'ajouter un comm'

spanspanAddComment

span d'emballage

alinkAddComment

Lien d'ajout (texte réglable dans l'admin du blog)

• Ce cas est un simple enrichissement du précédent, les mêmes remarques s'y appliquent.
• La 2e classe du div.commentsList est addEnding si les commentaires sont classés du plus ancien au plus récent, addBeginning dans le cas contraire
• Si l'article comporte moins de 50 commentaires il n'y a aucune pagination, même vide
• Si l'article comporte plus de 50 commentaires il y a un seul bandeau de pagination, qui ne couvre que la liste des commentaires de l'article et ne peut donc conduire à un autre article
• Question pendante : que devient le div.option afterReactions si l'on n'y met rien ? Vide ou absent ? (je parie pour vide)
• Mise à jour avril 2012 : prise en compte de la barre de menu.

Page 'Liste complète' ou page 'Archives' - cellule des articles

• Table
• Structure commune

divcolumn_content

Contenu de la cellule

divmenuob

Barre de menu (optionnelle)

a

Un choix du menu

a

Un autre choix du menu (maximum 6)

divarticles extraits

Un ou plusieurs extraits

div

Div sans classe ni identifiant

divbefore_articles

Pagination ou vide, selon configuration (détails)

ul

UL sans identifiant ni classe

lilistArticles article_item_even

Extrait d'article (détails)

lilistArticles article_item_odd

Extrait d'article

li

ainsi de suite : 'even' et 'odd' alternent.

divafter_articles

Pagination ou vide, selon configuration (détails)

• Cette structure ne concerne que la liste complète des articles et les archives.
• La barre de menu n'apparaît que si elle contient au moins un lien.
• Même structure que dans le cas général, en remplaçant la succession des div.article par un ul dont les li équivalent à des articles très simplifiés.
• Mise à jour avril 2012 : prise en compte de la barre de menu.

Page 'Top commentaires' - cellule des articles

• Table
• Structure commune

divcolumn_content

Contenu de la cellule

dllistCommentedArticle

Liste de titres

dt

Une catégorie (ni identifiant ni classe)

dd

Son hit-parade (ni identifiant ni classe)

ul

UL sans identifiant ni classe

li

Un article de la catégorie (ni identifiant ni classe)

a

Titre de l'article

pas de balise

Nombre de commentaires

li

ainsi de suite pour les autres articles

dt

Une autre catégorie…

dd

… et ainsi de suite

La structure diffère franchement du cas général :

• le div.articles est remplacé par le dl.listCommentedArticle (attention, pas de pluriel !)
• chaque article de cette liste est une catégorie (dt) qui se définit (dd) comme une liste (ul) de titres d'articles.
• il n'y a jamais de barre de menu (note d'avril 2012).

OB-page - cellule des articles

• Table
• Structure commune

divcolumn_content

Contenu de la cellule

divmenuob

Barre de menu (optionnelle)

a

Un choix du menu

a

Un autre choix du menu (maximum 6)

divpage

La page (détails)

• Structure similaire à celle d'une page d'article seul, en plus simple (un emballage de moins).
• Mise à jour avril 2012 : prise en compte de la barre de menu.

CGU - cellule des articles

• Table
• Structure commune

divcolumn_content

Contenu de la cellule

divreglementBlogcontenuArticle

Pseudo-article

h1

texte "untel_blog - conditions générales d'utilisation"

pas de balise

texte "Informations pour ce site"

br

Saut de ligne

p

Vide

blockquote

Description du blog (issue de la config du blog)

p

texte "Site hébergé par JFG Networks"

p

texte "JFG Networks n'est pas responsable du contenu"

p

texte "Lire les CGU d'OverBlog"

pas de balise

texte "Les thèmes suivants peuvent vous intéresser"

a

Un thème (autant de liens que de thèmes)

• Structure rigolote : un contenu d'article sans article autour !
• Il n'y a jamais de barre de menu (note d'avril 2012).

Oublis, erreurs : merci de me les signaler en commentaire :-)