Comment ajouter une navigation précédent/suivant sur les templates CMS Webflow avec Finsweet ?
Apprenez à ajouter une navigation précédent/suivant sur les templates CMS Webflow avec Finsweet Prev/Next.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter une navigation précédent/suivant sur les pages templates de collections CMS Webflow avec Finsweet Attributes Prev/Next.
| Attribut | Élément | Valeur |
|---|---|---|
| fs-prevnext-element | Link Block 'Précédent' | prev |
| fs-prevnext-element | Link Block 'Suivant' | next |
| fs-prevnext-collection | Les deux Link Blocks | Slug de la collection CMS |
| fs-prevnext-field | Les deux Link Blocks | Champ de tri (ex: 'date', 'name') |
Comprendre la limitation native
Webflow ne propose pas nativement de navigation précédent/suivant sur les pages templates de collections. Finsweet Prev/Next génère automatiquement les liens vers l'item précédent et suivant dans votre collection, selon le même ordre de tri que dans votre Collection List principale.
1. Ajoutez le script dans le head
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-prevnext@1/prevnext.js" defer>script>2. Créez les boutons de navigation
Sur votre page template CMS, créez deux Link Blocks : un pour "Article précédent" et un pour "Article suivant". Ces liens n'ont pas besoin d'URL : Finsweet les renseigne dynamiquement.
3. Ajoutez les attributs
Sur le Link Block "Précédent" :
fs-prevnext-element="prev"fs-prevnext-collection="articles"(slug de votre collection)
Sur le Link Block "Suivant" :
fs-prevnext-element="next"fs-prevnext-collection="articles"
4. Définissez le champ de tri
Pour que la navigation précédent/suivant suive le même ordre que votre liste principale, ajoutez fs-prevnext-field="date" (ou le champ sur lequel votre liste est triée). Sans cet attribut, Finsweet utilise l'ordre de création des items.
Conclusion
La navigation précédent/suivant réduit le taux de rebond sur les pages de contenu. Cas d'usage :
- Navigation entre articles de blog
- Parcours de tutoriels séquentiels
- Navigation dans un portfolio projet par projet
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
