HTML de blog [3] Articles et quasi-articles

Tout ce qu'on peut trouver "au centre" de la cellule des articles étudiée dans l'article précédent : La cellule des articles.

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

[2] La cellule des articles

[3] Articles et quasi-articles

1. Article - cas général
2. Résumé d'article
3. Extrait d'article (200 caractères)
4. Article d'accueil
5. OB-page

[4] Annexes des articles

[5] Modules

[6] Diablogs

Sur les formes abrégées d'articles le vocabulaire d'OB est fluctuant, mêlant les termes 'résumé', 'summary' et 'extrait' dans les classes et les identifiants. Je me suis efforcé de rester cohérent : ici, 'résumé' désigne ce qu'on obtient en cochant une certaine case dans la config du module 'articles' (=nombre de caractères réglable, vignette de la première photo de l'article) et 'extrait' ce qu'on trouve dans la liste complète des articles (=200 premiers caractères, jamais de vignette).

Article - cas général

• Table
• Page Accueil
• Page Articles

divarticle

Article. Son identifiant dépend du contexte :
cas général : articleN indique son ordre.
page de l'article : articleSeul
Porte aussi la classe article_even ou article_odd

divoption beforeArticle

Infos diverses, configurables dans l'admin (détails)

divdivTitreArticle

Emballage du titre d'article

h2

Emballage intermédiaire

atitreArticle

Le titre, avec lien vers l'URL de l'article

divcontenuArticle

Le texte de l'article

tout et rien

Le texte écrit par vous

divclear

Assure que le contenuArticle se termine en-dessous des flottants.

divclear

Protection contre les flottants.

divsocialShare

Liens de réseaux sociaux, configurables dans l'admin (détails)

divclear

Protection contre les flottants, uniquement avec un article seul.

divsocialPopup

Fenêtre de partage, configurable dans l'admin (détails), uniquement avec un article seul.

divclear

Protection contre les flottants.

divoption afterArticle

Infos diverses, configurables dans l'admin (détails)

divarticle_navigation

Bandeau précédent/accueil/suivant (détails), uniquement avec un article seul.

Trois choses ne figurent que dans le cas "article seul" (avec ou sans ses comms) :

• un div.clear de protection,
• le div.socialPopup = le petit popin de partage
• le div.article_navigation = le bandeau précédent/accueil/suivant.

Ces trois éléments figurent DANS le div.article, autour du bandeau div.option afterArticle.

Mise à jour avril 2012 : ajout de socialShare et socialPopup.

Résumé d'article

• Table
• Page Accueil
• Page Articles

divextraitArticle

Résumé d'article. Son identifiant extraitArticleN indique son ordre.
Porte aussi la classe article_summary_even ou article_summary_odd

divdateExtrait

Infos complémentaires, équivaut à option beforeArticle (détails)

divinfoExtrait

Titre de l'article, équivaut à divTitreArticle

spantitreExtrait

Emballage

atitreExtrait

Lien vers l'article. Attention : même classe que le span !

hrhrExtrait

Trait horizontal

divextrait

Le résumé lui-même

a

Lien vers l'article via une image cliquable. Absent si pas de photo dans l'article.

imgimgExtraitCon

Vignette 150x150 pixels de la 1ère photo de l'article

br

Retour à la ligne (le seul dans l'extrait)

pas de balise

Texte du résumé (longueur réglable dans l'admin)

a

texte "[...]" : lien vers l'article.

divclear

Assure que le extrait se termine en-dessous des flottants.

divclear

Protection contre les flottants.

divsocialShare

Liens de réseaux sociaux, configurables dans l'admin (détails)

divclear

Protection contre les flottants.

divplusExtrait

Infos complémentaires, équivaut à option afterArticle (détails)

Attention à la terminologie !

• L'admin OB ne parle que de 'résumé' d'article alors que les noms des classes mêlent 'extrait' et 'résumé' (summary)
• dateExtrait et plusExtrait, malgré leurs noms, contiennent la même chose que beforeArticle et afterArticle, respectivement.

Mise à jour avril 2012 : ajout de socialShare.

Extrait d'article (200 caractères)

• Table
• Page Liste complète/archives

lilistArticles

Extrait
Porte aussi la classe article_item_even ou article_item_odd

a

Titre de l'article, lien vers l'article

pas de balise

texte "("

spanDateListe

Date de l'article, au format jj/mm/aaaa (format imposé)

spancategorieArticle

Catégorie de l'article

pas de balise

texte "publié dans"

a

Lien vers la catégorie

pas de balise

texte ")"

br

Saut de ligne

divresumeArticle

Début du texte de l'article

pas de balise

200 premiers caractères (nombre imposé)

a

texte "(...)" : lien vers l'article

divclear

Assure que le resumeArticle se termine en-dessous des flottants.

• Un extrait d'article ne porte pas d'identifiant.
• Le peu de classes indiquées rend délicate la construction des sélecteurs CSS, c'est pourquoi j'ai détaillé tous les éléments.
• Attention à la terminologie ! L'admin OB ne parle ici ni de 'résumé' ni d' 'extrait' alors que les noms des classes mêlent 'liste' et 'résumé'. Comprenne qui pourra.

Article d'accueil

• Table
• Page Accueil
• Page Articles
• Article seul
• Article et commentaires
• Liste complète, archives
• Articles les plus commentés
• C.G.U

divarticle articleAccueilarticleAccueil

Article d'accueil
Se place avant ou après les articles/résumés normaux

divdivTitreArticle

Emballage du titre d'article

h2

Le titre (qui n'est pas un lien)

divcontenuArticle

Le texte de l'article

tout et rien

Le texte écrit par vous

divclear

Assure que le contenu d'article se termine en-dessous des flottants éventuels.

divoption afterArticle

Présent mais vide

Cet article est construit comme un article normal, en plus simple. Particularités :

• le titre n'est pas un lien
• il n'y a qu'un seul des deux div.option, et il est vide. Pur auxiliaire de mise en page, donc.
• impossible de laisser des commentaires.
• cet article, selon les choix faits dans l'admin, se place au début ou à la fin du column_content de la cellule des articles
• toujours selon les choix faits dans l'admin, il figure sur toutes les pages du blog (même les CGU !) ou seulement sur les pages d'accueil.

OB-page

• Table
• OB-pages

divpage

La page

divbeforePage

Vide

divdivPageTitle

Emballage du titre de page

h2

Titre de la page

divpageContent

Le texte de la page

tout et rien

Le texte écrit par vous

divclear

Protection contre les flottants.

divsocialShare

Liens de réseaux sociaux, configurables dans l'admin (détails)

divclear

Protection contre les flottants.

divsocialPopup

Fenêtre de partage, configurables dans l'admin (détails).

divclear

Assure que le pageContent se termine en-dessous des flottants.

divafterPage

Vide

• Structure similaire à celle d'un article seul, en beaucoup plus simple et avec d'autres noms de classes.
• Mise à jour avril 2012 : ajout de socialShare et socialPopup.

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