HTML de blog [4] Annexes des articles

Tous les  petits trucs  qu'on peut retrouver associés aux articles ou quasi-articles (voir l'article précédent).

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

[2] La cellule des articles

[3] Articles et quasi-articles

[4] Annexes des articles

1. Avant/après un article
2. Liens de réseaux sociaux
3. Popin de partage
4. Commentaire et réponse
5. Bandeau de navigation
6. Pagination

[5] Modules

[6] Diablogs

Leur présence ou absence dépend des choix de configuration. Le dernier schéma décrit la pagination : elle n'est pas attachée à un article particulier comme le sont les autres  petits trucs , mais à la cellule des articles.

Avant/après un article

• Table
• Article - cas général
• Résumé d'article

spantopic

Catégorie

pas de balise

texte "Publié dans :"

alinkTopic

Lien vers la page de catégorie

spancommunity

Communauté

pas de balise

texte "Communauté :"

alinkCommunity

Lien vers la communauté

divdate

Date de publication (le seul div de cette collection)

spantext

Date en format long

spandow

Jour de la semaine, de 1 à 7

spanday

Jour, de 1 à 31

spanmonth

spanseparator

texte "/"

pas de balise

Numéro du mois, de 1 à 12

spanyear

spanseparator

texte "/"

pas de balise

Année (4 chiffres)

spanhour

Heure hh:mm

spanpublishedBy

spanseparator

texte "-"

pas de balise

texte "par " + auteur de l'article

spanspanLinkCommentSingulierXXXXspanLinkComment
spanspanLinkCommentPlurielXXXXspanLinkComment

Accès au(x) commentaire(s).
"XXXX" = numéro de l'article.

Un seul lien s'affiche selon qu'il y a un ou plusieurs comms, aucun lien si aucun comm.

spanseparator

texte "-"

alinkComment
alinkComment

texte "Lire le commentaire" (texte réglable dans l'admin).
texte "Lire les N commentaires" (texte réglable dans l'admin).

spanspanAddComment

Ajout d'un commentaire

spanseparator

texte "-"

alinkAddComment

texte "Ajouter un commentaire" (texte réglable dans l'admin)

• Ces éléments apparaissent dans les div.option qui encadrent un article, ainsi que dans le div.dateExtrait et le div.plusExtrait qui encadrent un résumé d'article.
• L'ordre et la présence même de ces éléments dépendent des choix faits dans l'admin.
• Si l'article n'a aucun comm, aucun des deux a.linkComment n'est affiché. S'il y a un ou plusieurs comms, un seul a.linkComment est affiché. Mais, dans tous les cas, ces deux liens sont bel et bien présents dans la page.
• Si la configuration les dispose en deux lignes, cela se traduit par un br entre les deux lignes
• Mise à jour avril 2012 : suppression de spanRecommend.
• Mise à jour juin 2012 : explications sur les liens vers les commentaires.

Liens de réseaux sociaux

• Table
• Article - cas général
• Résumé d'article

divsocialShare

Série de liens de recommandation

ul

Liste non ordonnée

lishareitem small google

Bouton Google

lishareitem small twitter

Bouton Twitter

lishareitem small facebook fr_FR

Bouton Facebook

lishareitem small linkedin

Bouton linkedIn

lishareitem small more

Menu complémentaire

divothersContainer

Emballage

amenu

Bouton d'ouverture du menu

ulmenuContent

Menu proprement dit

liemail

Bouton email

ashare email linkRecommend

texte "Email"

lilink

Bouton URL simplifiée

ashare link

texte "Lien"

liprint

Bouton impression

ashare print

texte "Imprimer"

• Schéma ajouté en avril 2012.
• Cet élément remplace l'ancien span.spanRecommend figurant dans les div.option.
• Il suit le div.contenuArticle et précède le div.socialPopup (s'il existe) ou le div.option afterArticle .
• La présence ou l'absence des divers composants se règle dans l'admin/config du blog, elle concerne tous les endroits où il est question de partage.
• Je n'ai pas tout vérifié : je suppose que, si l'on demande des boutons de grand format, la classe small devient big ou large ou …
• À part le menu complémentaire, je n'ai pas détaillé le contenu des différents shareitem : trop dépendants de chaque réseau social. Mieux vaut les prendre tels qu'ils sont plutôt que de s'échiner à en modifier l'aspect.

Popin de partage

• Table
• Article - cas général

divsocialPopup

popin de partage

divmorePopin

Complètement vide. Se remplira peut-être dans le futur ? Peut aider à la mise en page.

divcontent

Emballage

p

Condensé de l'article

spantext title

texte "Partager l'article !"

spanclose

Bouton de fermeture du popin

spantext short

texte : titre de l'article + premiers caractères

ulpopinList

Liste des boutons

ligoogle

Bouton Google

litwitter

Bouton Twitter

lifacebook fr

Bouton Facebook

lilinkedin

Bouton linkedIn

• Schéma ajouté en avril 2012.
• Ce popin n'existe que pour un article seul (avec ou sans comms). Il peut se désactiver dans l'admin du blog.
• Il précède le div.option afterArticle
• La présence ou l'absence des divers composants se règle dans l'admin/config du blog, elle concerne tous les endroits où il est question de partage.
• Je n'ai pas détaillé le contenu des différents boutons : trop dépendants de chaque réseau social. Mieux vaut les prendre tels qu'ils sont plutôt que de s'échiner à en modifier l'aspect.

Commentaire et réponse

• Table
• Article et commentaires

divcommentContainer

Emballage d'un commentaire et sa réponse

divcommentMessage

Le commentaire

divcommentAvatar

Emballage de l'avatar

img

L'avatar

pas de balise

Texte du commentaire

divcommentOption

Renseignements sur le comm

pas de balise

texte "commentaire n°"

a

Numéro de comm

pas de balise

texte "posté par"

anewWindow
pas de balise

Auteur du commentaire (lien OU texte)

pas de balise

Date et heure

divcommentMessage responseMessage reponseMessage

La réponse

divcommentAvatar

Emballage de l'avatar

img

L'avatar

pas de balise

Texte de la réponse

divcommentOption responseOption reponseOption

Renseignements sur la réponse

pas de balise

texte "Réponse de "

a

Auteur de la réponse (=lien vers l'accueil du blog)

pas de balise

Date et heure

• Commentaire et réponse ont pratiquement la même structure.
• Dans le CSS, .commentMessage concerne aussi bien le comm que sa réponse, alors que .reponseMessage ne concerne que la réponse. Pour éviter des surprises il faut donc écrire les règles des réponses après celles des messages (ou alourdir le sélecteur des règles de réponse, ce qui est une complication superflue).
• Mêmes remarques pour les 'options'.
• Le double jeu de noms en 'reponse' et 'response' me semble un vestige de versions antérieures, conservé pour la rétro-compatibilité. Je ne crois pas qu'il faille chercher plus loin…

Bandeau de navigation

• Table
• Article - cas général

divarticle_navigation

Emballage du bandeau

spanpreviousArticle

Emballage de lien

a

Lien vers l'article précédent

pas de balise

texte "Précédent :"

span

Titre de l'article précédent

spanlinkAllArticles

Emballage de lien

a

texte "Retour à l'accueil"

spannextArticle

Emballage de lien

a

Lien vers l'article suivant

pas de balise

texte "Suivant :"

span

Titre de l'article suivant

• Ce bandeau ne figure que dans un article seul, avec ou sans ses commentaires.
• Bien sûr, il n'y a pas de lien 'suivant' sur le dernier article du blog ni de 'précédent' sur le premier.

Pagination

• Table
• Pages 'accueil'
• Pages 'articles' (=de catégorie)
• Article et commentaires
• Liste complète, archives

divpagination center

Emballage de la pagination

atextFirst

Lien vers l'accueil. Texte "début"

atextPrevious

Lien vers la page précédente. Texte "précédent"

apreviousPage

Lien vers une page précédente. Texte : numéro de la page

bcurrentPage

Texte : numéro de la page affichée

anextPage

Lien vers une page suivante. Texte : numéro de la page

atextNext

Lien vers la page suivante. Texte "suivant"

atextLast

Lien vers la fin du blog. Texte "fin"

• La pagination n'apparaît que s'il y a au moins deux pages, sans cela il n'y a rien. Le div.pagination n'est jamais vide : ou bien il contient la page courante et au moins un lien, ou bien il est absent.
• 'début', 'fin', 'précédent' et 'suivant' reflètent l'ordre des pages dans le blog (ordre dans l'admin du blog), qui n'est pas forcément l'ordre des dates de publication.
• Il y a au maximum 8 numéros de page en sus de la page courante
• 'début', 'fin', 'précédent' et 'suivant' n'apparaissent que si l'on est assez loin du début ou de la fin du blog.
• En définitive, une pagination contient de deux à treize éléments.

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