[Confiance] Un article au hasard

(article réécrit en octobre 2012)

Avez-vous remarqué le beau gros dé rouge de l' Orientation  ? Il vous envoie au hasard, quelque part dans le blog. La solution s'adapte à tout type de blog et à tout niveau (même Confiance), elle ne demande aucun entretien une fois en place. C'est trop beau pour être vrai !

En effet, c'est un peu trop beau. Le dés n'envoie pas vers un article unique mais vers une page du blog : page d'accueil ou page de catégorie, selon la variante que vous aurez choisie. Car il y a deux variantes et je m'efforcerai de vous renseigner au mieux.

Dernier point : le présent article ne contient aucune explication JavaScript assommante. Si la question vous intéresse, vous trouverez votre bonheur dans l'article jumeau de celui-ci.

---

Première variante : page d'accueil

C'est celle utilisée dans ce blog. Pour comprendre, cliquez une fois ou deux sur un dé et regardez l'URL des pages atteintes : ce sont toutes des pages de suite de l'accueil – 2-index.html, 35-index.html, etc. .

Cette variante est la plus simple à configurer. Pour qu'elle fonctionne au mieux, il faut que la pagination figure dans le module des articles (par défaut, elle y est) mais ce n'est pas indispensable. Seule petite faiblesse : si la pagination manque ou si le lien est utilisé depuis autre chose qu'une page d'accueil, il ne renvoie qu'à l'une des N premières pages du blog, N étant un nombre fixé par vous (inférieur ou égal au nombre d'articles du blog, SVP !)

Deuxième variante : page de catégorie

C'est la première que j'ai mise au point, à une époque (2007) où l'organisation des blogs était un peu différente (pas de pagination en accueil) et beaucoup moins paramétrable. Elle renvoie à une page de catégorie : 1-categorie-12345.html, 18-categorie-98765.html, etc. . Elle exploite le module des catégories (qui doit donc figurer dans le blog). Contrairement à la première variante, elle fonctionne de la même manière partout dans le blog et peut vous envoyer à n'importe quelle page de catégorie.

Comment choisir ?

Tout dépend de vos souhaits et de la configuration de votre blog :

1. Les deux variantes ne couvrent pas tout à fait la même portion de blog :
   • la première variante équivaut à cliquer au petit bonheur dans le bandeau de pagination d'une page d'accueil. Elle envoie donc le visiteur vers une page d'accueil quelconque du blog. Si elle est employée sur une page autre que l'accueil (= une page où le bandeau de pagination éventuel conduit à autre chose qu'une page d'accueil), elle choisit au hasard une page d'accueil parmi N (nombre fixé par vous) ;
   • la deuxième variante envoie le visiteur vers n'importe quelle page de catégorie, et peu importe qu'elle soit utilisée depuis une page de catégorie ou une page d'un autre type. Elle couvre donc tout le blog, sauf peut-être les articles sans catégorie.
   • Cette différence d'étendue de la cible n'est, en pratique, pas très gênante. La première variante a l'avantage de moins dérouter le visiteur : partant de l'accueil du blog, il se promène dans les diverses pages de suite de cet accueil plutôt que dans des pages de catégorie, dont l'aspect peut être différent.
2. si votre blog est en configuration  avancée  les pages d'accueil et les pages  normales  (dont font partie les pages de catégorie de la 2e variante) peuvent avoir des aspects bien différents : pas le même nombre d'articles par page, pas les mêmes modules ni aux mêmes endroits, des CSS très différents, articles complets dans un cas et résumés dans l'autre… : à vous de peser le pour et le contre.
   La 1ère variante a l'avantage de moins dérouter le visiteur mais, si les articles sont résumés à l'accueil, il est peut-être préférable de conduire le lecteur vers des pages où les articles sont complets : le deuxième clic pour  Lire la suite…  est vite lassant. Tenez, voyez donc. Toujours pour ménager sa paresse, je pense meilleur aussi de l'envoyer vers des pages pas trop longues, avec un ou deux articles par page plutôt que dix.

Vous avez bien sûr le droit d'essayer une variante puis l'autre, pour vous rendre compte ; on peut aussi bavarder dans les commentaires.

Installation

Admettons que votre choix est fait et passons à la pratique.

Première variante : page d'accueil

1. Cliquez sur le bouton et sauvegardez le fichier sur votre ordinateur. C'est un fragment de code HTML.
2. Lisez les commentaires, ils vous signalent quatre retouches à faire (voir plus bas). La première est indispensable.
3. Copiez le code à l'endroit qui vous convient (voir plus bas).

Deuxième variante : page de catégorie

D'abord : si votre module des catégories n'a pas encore d'identifiant, donnez-lui en un, de préférence categorie (comment fait-on ?). S'il en a déjà un vous devrez retoucher le programme JS (pas dur !). Si votre blog est en configuration avancée, donnez cet identifiant en "Articles" et "Accueil".

Ensuite, configurez le module : le nombre d'articles doit figurer entre parenthèses après le nom de chaque catégorie, cochez la case idoine. Après quoi c'est presque pareil :

1. Cliquez sur le bouton et sauvegardez le fichier sur votre ordinateur. C'est un fragment de code HTML.
2. Lisez les commentaires, ils vous signalent trois retouches à faire (voir plus bas). La première est indispensable.
3. Copiez le code à l'endroit qui vous convient (voir plus bas).

Les retouches

Retouches propres à une variante :

identifiant du module catégorie (variante 'catégorie')

Si cet identifiant n'est pas categorie il faut le préciser, sans quoi le gadget ne fonctionnera pas du tout.

identifiant de la cellule des articles (variante 'accueil')

Si cet identifiant n'est pas cl_1_0 (= pas de modules à gauche des articles) il faut le préciser, sans quoi le gadget ne fonctionnera pas très bien : il n'exploitera que le nombre approximatif d'articles de blog (voir le point suivant) et pas le nombre exact figurant dans le bandeau de pagination.

nombre approximatif d'articles dans le blog (variante 'accueil')

Ce nombre sert quand le gadget figure sur autre chose qu'une page d'accueil. Si le nombre (fixé par défaut à 100) est trop faible, une partie du blog ne sera pas accessible par tirage aléatoire ; si le nombre est trop élevé, il y aura des erreurs 404 (page introuvable). Pas grave mais un peu gênant.

Retouches communes aux deux variantes :

nombre d'articles par page

Fixé par défaut à 1. Si vous ne corrigez pas ce nombre et que le blog comporte plus d'un article par page, vous risquez seulement de tomber sur des pages "intermédiaires", par exemple 3-index.html sur un blog configuré en 5 articles/page : un peu désordre mais vraiment pas grave

texte du lien

Par défaut c'est "Au hasard" mais vous pouvez le remplacer par ce que vous voulez (image ou autre). Purement cosmétique.

Où insérer ce code HTML ?

Où vous voulez : module de texte libre, en-tête ou pied de page, ou même dans un article. Utilisez le mode HTML de l'éditeur ! Après tout ce code ne décrit rien d'autre qu'un lien a un peu obèse : vous pouvez donc insérer ce lien où ça vous chante, comme n'importe quel autre lien.

Et voilà tout pour l'installation.

Maintenance

Rien à changer quand vous publiez des articles. Tout au plus, dans la variante 'accueil', pouvez-vous, après 50 ou 100 articles nouveaux, mettre à jour le nombre indicatif d'articles du blog.

Variante 'accueil' : si vous ajoutez ou supprimez une colonne de modules à gauche des articles, il faut penser à corriger l'identifiant de la cellule des articles. Si vous n'y pensez pas ce ne sera pas trop grave, vous risquez seulement de voir sortir toujours les mêmes articles : dommage…

---

Démontage

Le présent article vous fournit le gadget et son mode d'emploi. Son article jumeau démonte entièrement la chose si vous voulez comprendre comment elle marche. Sa lecture totalement facultative mais peut vous intéresser. Si vous n'avez pas compris quelque chose au présent article ne vous farcissez pas la lecture du démontage et posez plutôt votre question dans les commentaires.

Mises à jour

• Mai 2007 : 1ère publication, variante 'catégorie' avec un seul article par page.
• Avril 2008 : mise à jour grâce aux questions de Marc, Cln et Maitre Po, prise en compte du nombre d'articles par page.
• Septembre 2008 : Mise au point de la variante 'accueil' sur une suggestion de Marielle Bianchi.
• Octobre 2012 : simplification du gadget, plus grande tolérance aux erreurs de configuration, mise à disposition sous forme téléchargeable, refonte de l'article, réécriture de la  dissection  du programme et report dans un article séparé.

Comments

[Giraud]

Bonjour,

Je viens d'installer grâce à votre aide cette fonctionnalité sur mon blog. Merci beaucoup

[Aïe mes doigts !]

Et ça marche ? Quelle merveille ! :-D Je vous suis redevable d'une idée : faire nettement ressortir (en jaune sur rouge, ça pète assez fort ?) ce qui doit être adapté par l'utilisateur, merci !

[:0095: Maître Po]

Merci de la diligence de ta réponse.

Pour les liens, aucun problème, ça marche parfaitement. Mais j'ai un petit souci pour les images.
Si je tape :
document.write('Image 1 : ');
var imageArticle1 = document.getElementById('extraitArticle1').getElementsByTagName('img');
document.write(imageArticle1[0]);

j'obtiens :
Image 1 : [object]

[AmD]

Surprenant mais logique :
imageArticle1[0] n'est qu'une référence, une adresse en mémoire. Si tu l'écris directement, il t'écrit ce qu'il sait : c'est un objet !
Si tu veux (comme je suppose) que ton image apparaisse dans le document, il faut écrire, à coup de document.write, tout le balisage ! Bourrin.
Si tu sais à quel endroit du flux HTML tu veux faire apparaître cette image, ou bien si tu veux la changer de place dans ce flux, il sera plus propre, élégant, et sans doute rapide, d'intervenir
sur le DOM. Ah ?
Fais-moi un courrier pour me raconter ce que tu veux faire, il y a forcément une solution.

[:0095: Maître Po]

En repassant ici, je me rends compte que j'ai un peu monopolisé les commentaires... mais quelle importance ? ;-)


Bon, j'envisage un truc proche de ta méthode pour choper l'adresse et le lien de chaque image de mon sommaire résumé.

Comme chacun des 20 résumés d'article a un identificateur, je peux utiliser ta méthode pour récupérer le lien. Mais pour l'adresse de l'image, que me donnerait un getElementById('extraitArticle1').getElementsByTagName('img'); ?


Cela dit, je pourrais essayer. C'est d'ailleurs ce que je vais faire, une fois envoyé ce commentaire...

[AmD]

Oh, tant que les commentaires sont en rapport avec l'article, il n'y a pas de mal !
L'expression que tu proposes, notons-la listImg, te renverra la liste des images présentes dans extraitArticle1, liste que tu pourras parcourir avec une boucle :

listImg=getElementById('extraitArticle1').getElementsByTagName('img');
for(i=0;i

[:0095: Maître Po]

Je voulais dire que la page contiendra toujours 20 articles mais commencera par le quantième tiré aléatoirement, alors que la navigation précédent / suivant d'OB ne commencera que par des quantièmes multiples de 20.
(sais pas si je suis très clair, du coup)


Quant au contenu modifié, j'ai vu. Je me suis même demandé pourquoi j'avais posé la question puisque la réponse était dans l'article ;-Þ

[Bren du fat !]

Tu es très clair, et j'avais pigé.
Ma réponse précédente, avec des notations pas très rigoureuses, part du numéro aléatoire d'article, converti en (numéro de catégorie, numarticle dans la catégorie). De là, elle déduit le 
numéro de page (multiple du nbre d'articles par page) où se trouvera l'article désiré. C'est ce numéro de page qu'il faut employer pour constituer l'url définitive. valà valà :)

[:0095: Maître Po]

Sans vouloir squatter les coms de cette article, je voudrais juste rajouter qu'avec un affichage de 20 articles par page, une url du type nomdemonblog/15-categoriealeatoire.html affiche les articles de 15 à 34, soit une page qui n'existe d'ailleurs pas en tant que telle dans la navigation OB.

Donc un article par page semble un impératif à respecter ;-)

[Aïe mes doigts !]

Très bonne observation !
si je te comprends bien :
0-categorie-12345 : articles 0 à 19
20-categorie-12345 : articles 20 à 39
et aucune page intermédiaire, c'est ça ?
On doit quand même pouvoir s'en tirer avec une division entière, qqchose comme :
numpage=numarticle/nbArticlesPage
numpage=numpage*nbArticlesPage
et en utilisant numpage pour construire l'url

[:0095: Maître Po]

En fait, de par sa construction, cette méthode ne peut marcher que pour une configuration d'un article par page et surtout pas un article résumé ;-)

Pour ce qui est de ta question, je ne doute pas que la version longue te fasse plaisir, mais je peux te garantir que le plaisir est partagé. Parce que si on croule sous les blogs détaillant le css, il est difficile d'en trouver détaillant du javascript pour OB. Et des aussi didactiques, ça me paraît mission impossible. Bravo, et merci ;-)

[Aïe mes doigts !]

Article résumé : je ne sais pas, n'ayant jamais employé cette option.
Un article par page : voir comm suivant.
Merci pour la version longue (j'ai retouché l'article, au fait, je ne sais pas si tu as vu). En effet, je ne veux pas me limiter à balancer des scripts tout prêts, j'essaye d'ajouter de la valeur
:)

[:0095: Maître Po]

J'ai lu la version longue avec intérêt et admiration, mais je bute sur un truc en apparence anodin... comment donner un id au module Catégories ?

[Aïe mes doigts !]

Ca, c'est la très bonne question ! Il faut aller dans configuration/réglages avancés, et cocher la case "pouvoir définir l'id XHTML des modules" (texte cité de mémoire). Il faut vraiment que
j'époussette cet article...
A mon tour de t'admirer d'avoir lu la version longue - sert-elle au moins à quelque chose, à part me faire plaisir ? Je te pose vraiment la question :)

[:0095: Maître Po]

L'est toujours qu'en confiance, ce blog ? ;-)

[Aïe mes doigts !]

Plus vraiment ;-) Mais le gadget reste utilisable en confiance.
Dans les modes où la balise est permise, mieux vaut déporter le code dans un fichier annexe - histoire de ne pas se tourmenter avec l'éditeur de texte, quel qu'il soit...

[Marc]

Un grand merci pour ton aide et ta patience.

[Marc]

Bonjour, j'aimerais insérer ce widget dans un module texte libre mais je n'y arrive pas. Quand je recopie ton code, le mets dans le bloc note windows puis le colle en source dans un module, ça me met une sorte de lien. :(

[Aïe mes doigts !]

Envoie-moi donc par email le source de ce que devient le code, une fois copié et validé dans l'éditeur OB. J'y comprendrai peut-être quelque chose ;)
------------------
Après échange de mails, et pour l'info d'autres lecteurs, en attendant de modifier l'article :
- il est prudent de recopier le code SANS les commentaires
- il FAUT donner un id au module "catégories", et pour ça passer dans les "réglages avancés" du menu "configurer"
- il FAUT jeter un coup d'oeil au source du module "catégories" pour savoir si le nombre d'articles est dans les liens ou en dehors. Dans ce dernier cas, il faut utiliser la deuxième forme du
code.