Comment afficher un extrait de trois lignes pour chaque article du flux de votre blog Webflow sans champ de résumé dans le CMS, avec un peu de CSS personnalisé et une classe combo.
Nous avons récemment dû migrer un très grand nombre d'articles de blog de WordPress vers Webflow pour un client, et nous avons rencontré un problème. Sur WordPress, le contenu ne comportait qu'un titre, l'article et une image. Normalement, si l'on travaille à la manière de Webflow, il faudrait un champ pour le résumé de l'article, mais ni nous ni le client n'allions rédiger des résumés pour plus de 500 articles simplement pour afficher un extrait de trois lignes sur la page du blog avant que l'on clique sur l'article. Nous nous sommes donc dit : pourquoi ne pas afficher simplement trois lignes du champ rich text en guise de résumé ? Contrairement à la multitude de plugins WordPress qui génèrent un résumé, Webflow n'offre aucune fonction pour afficher X caractères de votre champ rich text dans une collection list. La solution : placer un élément rich text pour le résumé, le relier au texte complet de l'article et n'afficher que quelques lignes, avec des points de suspension à la fin. Il suffit d'un peu de code personnalisé et d'une classe combo.
C'est étonnamment simple, alors c'est parti. Suivez le guide et copiez-collez :
Étape 1 : ajouter le CSS personnalisé à l'en-tête de votre site
Rendez-vous dans Site settings, Custom code, et collez le style dans la section Head code :
<style>
/* Auto Post Summary Character Limit */
.textlimit {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>Vous pouvez aussi voir le code sous forme de pen sur CodePen : Create a Blog Summary or Excerpt in Webflow, par Jakes van Eeden.
Il existe plusieurs façons de procéder, mais les limites en caractères sont délicates. Le plus simple serait de mesurer la largeur des caractères et de fixer une limite, mais celle-ci change selon la police et bien d'autres facteurs, ce qui devient difficile à maîtriser. Nous avons donc opté pour trois lignes dans cet exemple. Si vous souhaitez un autre nombre de lignes, modifiez le 3 dans -webkit-line-clamp.
Voici ce qui va se passer : lorsque vous reliez le champ rich text de votre collection list à l'élément dans le Designer, celui-ci affiche simplement tout le texte de ce champ. Vous appliquez ensuite la classe combo de limite de texte : l'aspect reste identique dans le Designer, mais une fois le site publié, le texte affiché sur le site publié est limité à trois lignes. Les préfixes -webkit- font un peu désuet, mais c'est toujours la méthode à suivre : selon MDN, cette combinaison de trois propriétés est entièrement spécifiée et continuera d'être prise en charge, alors que la propriété line-clamp sans préfixe, plus récente, n'est pas encore prise en charge par tous les navigateurs les plus utilisés. Passons donc à l'étape suivante :
Étape 2 : appliquer la classe combo
Nous partons du principe que vous avez déjà créé l'élément pour cette étape. Sinon, ajoutez une CMS collection list, placez un élément rich text dans l'élément de la collection list et liez-le au champ rich text de cet élément qui contient l'article de blog. Stylisez-le dans le Designer, puis ajoutez simplement la classe combo textlimit et publiez :
Comme nous l'avons dit, dans le Designer vous verrez tooouuut le texte de ce champ, donc le rendu ne sera pas joli, mais ne vous inquiétez pas : il sera parfait une fois le site publié.
Voici le site en ligne après publication :
Et voilà. Regardez le n° 1 : trois lignes de texte, puis des points de suspension, et c'est tout. N'oubliez pas de bien styliser cet élément rich text dans le Designer. Si vous regardez les n° 2, 3 et 4, vous verrez que je ne l'ai pas encore fait. Il faut en gros donner aux titres, et à peu près à tous les autres éléments de ce champ rich text, le même style que celui du paragraphe par défaut que vous voulez afficher.
Nous l'admettons, ce n'est pas parfait et le résultat n'est pas toujours impeccable, regardez simplement le n° 3 non stylisé, mais quand on a 500 anciens articles de blog, cela fait l'affaire.
Comment résoudre le problème pour la suite ?
Un petit mot sur la manière de résoudre le problème à l'avenir. Pour ce client, nous avons créé un champ de résumé et l'avons rendu obligatoire, de sorte qu'il doit désormais être rempli. Nous avons ensuite ajouté une visibilité conditionnelle et placé le paragraphe de résumé sous l'élément rich text de résumé. La visibilité conditionnelle du paragraphe lié au champ de résumé dans la CMS collection list était réglée pour s'afficher si le résumé était renseigné, et celle de l'élément rich text pour s'afficher si le résumé n'était pas renseigné. Ainsi, le résumé rich text ne s'affiche que sur les anciens articles dont le résumé n'était pas renseigné, et il est masqué au profit du vrai résumé sur les articles plus récents dont le résumé est renseigné.
Cela nuira-t-il aux performances ou au SEO ?
Jef S a soulevé sur le forum Webflow un point intéressant : on subit une perte de performances et de SEO, ce que je n'avais pas expliqué plus haut. Pour limiter cela autant que possible, les éléments ont été stylisés pour ne pas charger d'images, nous ne paginons que 6 éléments (nous utilisons pour cela la pagination fluide) et, côté SEO, j'ai utilisé une balise meta sur le site : <!-- fs-richtext-ignore --><META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW"> qui, d'après notre expérience, permet à Google d'explorer les liens de la page tout en ignorant son contenu. Pour Google, la page est donc pratiquement invisible, mais il peut suivre les liens et explorer les véritables articles de blog. Cela a fonctionné pour nous à l'époque. Google a depuis indiqué qu'une page laissée en noindex pendant longtemps finit par être traitée aussi comme nofollow, alors vérifiez vos propres résultats plutôt que de considérer cette méthode comme une garantie.
FAQ
Comment afficher un extrait d'article de blog dans Webflow sans champ de résumé ?
Reliez un élément rich text de votre collection list au corps complet de l'article, ajoutez une classe combo avec -webkit-line-clamp réglé sur le nombre de lignes souhaité, puis publiez. La limite ne s'applique que sur le site publié : le Designer affiche donc toujours tout le texte.
Peut-on limiter un champ rich text Webflow à un nombre de caractères ?
Pas nativement. Webflow n'offre aucun réglage pour cela, et une limite en caractères est difficile à maîtriser en CSS, car la largeur de chaque caractère varie selon la police. Limiter par lignes, comme nous le faisons ici, est l'option fiable la plus simple.
Pourquoi l'extrait a-t-il un aspect différent dans le Designer ?
Le Designer affiche tout le texte du champ rich text lié, si bien qu'il paraît long et non stylisé. Une fois le site publié, la classe combo le limite au nombre de lignes choisi. Stylisez l'élément rich text comme un paragraphe ordinaire pour que l'extrait s'accorde au reste de votre design.
Faut-il quand même ajouter un vrai champ de résumé ?
Oui, pour les nouveaux contenus. Utilisez cette astuce pour les anciens articles, puis ajoutez un champ de résumé obligatoire et servez-vous de la visibilité conditionnelle pour l'afficher à la place de l'extrait automatique, comme décrit plus haut.
Laissez un commentaire ci-dessous si vous avez des questions, et n'oubliez pas de découvrir nos autres tutoriels Webflow et analytics ici. Si vous créez des mises en page propulsées par le CMS, nos articles sur la mise en forme des text spans dans le texte CMS dynamique, comment briser la grille CMS et l'ajout de modes de fusion avec des classes combo pourraient aussi vous plaire, ou jetez un œil à nos cloneables Webflow.
