[CSS] 'Lire la suite' ultra-light

Besoin classique : afficher le début d'un article et terminer ce début par un lien vers la version complète de l'article. Cet article et celui-ci réinventent un peu la roue avec du JavaScript. La solution d'aujourd'hui (originalité zéro) ne contient pas de JavaScript (= pur HTML/CSS) et peut s'utiliser au niveau Confiance.

Elle ne permet pas les variantes de l'autre (liens de réescamotage, escamotables multiples ou emboîtés), en revanche elle est beaucoup plus simple et répond tout de même au besoin de base. Elle repose sur une particularité des blogs OB mais, comme cette particularité se retrouve sous une forme ou une autre chez de nombreux confrères, elle peut s'adapter simplement ailleurs.

Mode d'emploi

Ajoutez à votre CSS trois lignes :

 .cache {display:none} #articleSeul .cache {display:block} #articleSeul .liensuite {display:none} 

Ceci une fois pour toutes ; il servira pour tous les articles que voulez traiter.

Ajoutez trois autres lignes au HTML de l'article à  perfectionner  (mode source de l'éditeur OB, bouton  HTML  de l'  édition avancée ) selon ce modèle :

• Avant

   Début de l'article. Corps de l'article. Petit baratin final (tout à fait facultatif) 

• Après

   Début de l'article. <a class="liensuite" href="url_de_l_article">Lire la suite ...</a> <div class="cache"> Corps de l'article. </div> Petit baratin final (tout à fait facultatif) 

Adaptations : url_de_l_article est à remplacer par l'url de l'article. Cette url apparaît dans le haut de l'éditeur après une prévisualisation ou un enregistrement en brouillon ; pour un article déjà publié elle est d'emblée affichée au-dessus du cadre d'édition.  Début de l'article  et  Corps de l'article  sont bien évidemment du texte à vous.

Explications

Le lien renvoie à la page réservée à l'article. Sur cette page l'article porte l'identifiant articleSeul (voilà la particularité OB annoncée), on s'en rend compte (par exemple) en examinant le code source de ce genre de page. Le reste est affaire de CSS :

• la première règle dit simplement que la classe cache (et donc le corps de l'article) n'est pas visible ;
• la deuxième dit que, si cette classe est emboîtée dans articleSeul, elle est au contraire affichée ;
• la dernière règle dit que la classe liensuite, lorsqu'elle aussi est emboîtée dans articleSeul, ne s'affiche pas : le lien auxiliaire disparaît donc de la version complète de l'article.

Dernière observation : sur la page des commentaires aussi, l'article est doté de l'identifiant articleSeul. Il s'affichera donc complètement lorsqu'on lit ses comms.

Simple et de bon goût, non ?

• Technique de base
• Quelques perfectionnements
• Version ultra-light

Comments

[Sagan33]

Si je rajoute les codes couleur dans l'html c'est que rien ne marche dans le css. Je ne sais pas quelle ligne il faut modifier pour mettre lire la suite en noir.
Pour les div je les ai tous supprimés mais on ne sait pourquoi ils se réécrivent.

[AïmD !]

lire la suite : peux-tu me donner une url ?  Ce ne doit pas être grand-chose


div proliférants : comment fais-tu la modif ? Un copier/coller dans le source HTML ? autre chose ? Procédure possible : ouvrir l'en tête en mode HTML - copier/coller tout le code source dans
notepad (surtout pas dans word) - faire le ménage en supprimant autant de /div que de div - copier/coller tout ce code source corrigé à la place du 'vieux'.

[Sagan33]

Bonjour Bren,
Dans ce code lire la suite ultralight, je ne sais pas comment modifier la couleur de police de caractère du "lire la suite". http://harmonylegend.over-blog.com, module l'amour est international. Si
je rajoute une ligne span color etc dans l'html juste avant

[AïmD !]

Lire la suite ultra-light ne s'applique qu'à des articles ordinaires, qui ont une URL bien à eux - donc pas à l'"article d'accueil"


Sans rapport avec la question : dans cet article, l' 'object' qui contient l'animation flash est enfoui au fond de plus de trente DIV imbriqués. Tu pourrais supprimer tous ces niveaux
intermédiaires, ce serait plus simple à tenir à jour.


Et plutôt que de rajouter une ligne span color dans l'html, tu devrais ajouter ces indications de couleur dans le CSS, il est là pour ça !

[Sagan33]

Non mais ! quand je te dis que tu es un Maître, un Maître du css, bien sûr que je vais consulter ton article car cet article splash ne me plaisait pas non plus mais je ne voyais aucune autre
solution.
C'est super de trouver réponse à tout,
je n'ose plus te dire encore une fois merci, je me répète,
Alors, ce sera bonne nuit.
GG

[Bren du fat !]

Nan, je ne trouve pas réponse à tout - mais je commence à avoir tripoté beaucoup de choses.


Avant de t'emballer trop vite, garde à l'esprit que


- ce postit, tel que je l'ai conçu, est présent sur tous les écrans du blog, même sous forme réduite. Je l'ai fait parce que c'était ce que je voulais. Cela dit, on peut aussi le limiter à la
seule 'vraie' page d'accueil, celle d'entrée dans le blog (voir [JS] Un billet en page d'accueil (et seulement là).


- le bon côté de la chose est de supprimer toute contrainte sur l'ordre des articles


Ca prend tournure, peut-être.

[Sagan33]

Un grand merci pour l'aide.
Effectivement ça marche avec la ligne enlevée du css articles mise dans le css d'accueil.
L'article est raccourci uniquement dans la liste des articles ouverts avec la pagination. Bien sûr dans mon cas, à cause de l'ordre chronologique, il est à la fin.
Par contre si j'ouvre l'article dans les colonnes modules des articles récents, il s'affiche en entier, il n'y pas de lire la suite. Je pense que c'est normal ?

- pour l'ordre chronologique des articles, je suis obligée car c'est un article d'accueil anti-daté pour faire ce qu'on nomme je crois "splash", donc je ne veux pas inverser car je veux garder le
premier article avec la vidéo de la tête pour en faire un accueil.
Car si je mets cet article en module il se répète sur toutes les pages.

Bon dimanche Bren, merci à toi pour toutes ces précieuses infos.
GG

[AïmD !]

Bon, content que ça marche.


'Article raccourci uniquement dans la liste avec la pagination' : c'est exactement le comportement attendu.


'Article entier dans le module articles récents' : ça aussi c'est normal, parce que ce module affiche les premiers caractères de l'article sans aucun balisage. Donc tous les effets de mise en
page disparaissent (y compris, par exemple, les changements de police ou de couleur)


Ordre chronologique des articles : je me doutais bien qu'il y avait une raison de ce genre.


A titre personnel (mais cet avis est assez partagé) je ne suis pas favorable au 'splash' : c'est amusant ou agréable à la première visite du blog, ensuite ça lasse.


Je te laisse réfléchir à l'idée suivante : sur mon blog, le postit (petite chose jaune) s'affiche ouvert pour tout nouveau venu (mais se laisse refermer), ensuite il s'affiche fermé (mais se
laisse rouvrir). Cependant, si j'en change le contenu, il s'affichera ouvert pour tout visiteur qui n'a pas encore vu le nouveau contenu, ensuite, comme auparavant, il s'affichera fermé (et
pourra se rouvrir). Bien. Si ce postit, au lieu d'être une petite chose jaune, couvrait tout l'écran (ce qui est une pure affaire de CSS) , n'aurait-on pas une bonne approximation de splash 'bien
élevé', 'non intrusif' ? Si ça t'intéresse, je livre ma recette ici article-postit3-67165624.html. Valà valà...

[Sagan33]

Je va essayer de cooooomprendre -
T'inquiète, tu vas me revoir car je ne sais si j'y arriverai............................

[Sagan33]

Mais alors, si c'est bien 2 articles, à quoi sert de renseigner le css ?

[AïmD !]

(idem !)

[Sagan33]

J'avais pas lu les commentaires.
Donc, si je comprends bien (ou mal ! la poisse car où mettre l'autre article ? ça fait doublon) il faut faire 2 articles ?

[AïmD !]

(voir ci-dessus)

[Sagan33]

Re-Bren,
C'est encore moi !
J'ai fait ce que tu as dit dans cet article lire la suite ultra light, mais ça ne marche pas.
Là : http://harmonylegend.over-blog.com/article-revelations-102022165.html.
Par contre dans l'édition de mon article je vois bien le lire la suite qui s'affiche, mais il n'apparaît plus ni à la visualisation, ni à l'édition.
Le titre de mon article : révélations.

[AïmD !]

Stop ! ! !


D'abord il n'y a pas deux articles mais bel et bien un seul, sans quoi c'est pas la peine.


Je vois que mon article n'explique pas tout : l'article se présente en version abrégée *sur la page d'accueil* ou ses pages de suite (123-index.html) et *toujours* en version complète sur la page
d'article (comme celle dont tu me donnes l'URL)


Enfin j'ai écrit cet article sans aller au fond de la question de la configuration 'avancée', qui n'était pas organisée tout à fait de la même façon qu'aujourd'hui.


En attendant de refaire mon papier, voici quelques indications :


la ligne .cache {display:none} doit se trouver dans le CSS d'accueil

les deux autres lignes vont dans le CSS d'article



De plus tu classes, sur la page d'accueil, les articles par ordre chronologique : l'article en question, récent, se trouve sur l'antépénultième page (175), ce qui ne facilite pas les tests ;-)


Mais, si tu appliques les modifs de css précédentes, tu verras que l'article, sur cette page 175, est bien raccourci, et que sa version isolée (l'url que tu donnes) l'affiche au complet.


C'est tout ce que permet cette technique. J'avais bien dit 'ultra-light' :-D

[Anna]

Il faudrait regarder ça de plus près sur un blog qui s'en sert, mais je crois bien que ça fait la même chose que ce que tu proposes ici - afficher seulement le début du billet en page d'accueil et renvoyer sur la page de l'article quand on clique sur "lire la suite".

[AïmD !]

Bien possible - c'est une idée archi-simple, il n'est que de voir la brièveté de l'article :-)

[mebahel]

Alors en fait, après avoir passé une bonne année dans les entrailles de mon tout neuf Imac de l'époque, à chercher des trucs, les trouver, à ouvrir le capot pour zyeuter les mémoires et en rajouter, à passer un certain nombre d'heures à refaire, refaire refaire les trucs logiciels, maintenant, la technique je m'en tape le coquillard.
C'est censé marcher, et je me fiche de savoir comment.
Et plus: je me contente de ce qui est accessible directement et sans me faire suer, et si j'obtiens pas ce que je veux, je réduis mes prétentions é basta così.
Je présume qu'il y a là du renoncement, de l'incuriosité et du déplacement de la curiosité initiale.
Et un lack of desire assez fort :-)
(majeur quoi)
(haha)
(non mais c'est le soir, c'est pour ça)
( au fait vous aimez les parenthèses?)
Raisons pour lesquelles je ne vais rien lire de cet article ci.(comme des autres du même genre d'ailleurs)
Mais je salue l'effort :-)
Ainsi que le technicien :-)

[AïmD !]

Personne n'est obligé de tout lire, je ne vais pas à en faire une jaunisse... :-) Il est vrai que, depuis quelque temps, ma production est un peu "orientée" - serait-ce un appel du pied ? [faux
naïf ON]