Comment ajouter des liens d'ancrage dans les Collections Webflow

Même si nous adorons Webflow, un point est agaçant : si votre blog y est géré sous forme de collection, impossible d'ajouter des liens de section ou des liens d'ancrage dans vos articles. C'est pourtant utile quand on veut cliquer sur un lien dans un sommaire, en haut de page, pour accéder directement à la section voulue.

J'ai vu quelques solutions de contournement. L'une d'elles consiste à utiliser la fonction d'intégration pour insérer du code dans le corps de l'article, mais c'est très manuel et assez pénible. Nous avons donc une petite astuce à vous proposer : un bout de JavaScript à ajouter une seule fois dans le modèle de vos articles de blog, et vous pourrez ensuite insérer des liens d'ancrage dans chacun des articles de cette collection !

Note: this code will add anchor links into all of your H2 headings on all of your collection pages. It's not a big issue really, it just means all of your H2 headings become links but if you prefer not to do this then you may want to find an alternative method.

Étape 1 : ajoutez le code à la page de votre collection

Votre collection dispose toujours d'une page modèle. C'est le modèle utilisé pour tous les éléments de la collection : toute modification apportée à cette page se répercute sur l'ensemble des éléments. Nous allons donc ajouter un peu de JavaScript dans l'en-tête de cette page, afin qu'il s'applique à tous les articles de blog. Il ne concernera que les pages utilisant ce modèle et ne modifiera pas le reste de votre site.

Une fois cette page trouvée, ouvrez les paramètres et faites défiler jusqu'à la mention <head>.

Étape 2 : ajoutez votre code JavaScript

Copiez ensuite le code ci-dessous et collez-le dans la zone prévue. Nous expliquons dans un instant ce qu'il fait.

Comment ça marche

Ce code parcourt la page web à la recherche de tous les éléments balisés comme titres H2. Ce sont généralement ces titres que l'on cible avec des liens d'ancrage. Vous pouvez bien sûr adapter le script à d'autres niveaux de titres en remplaçant h2 par h3, par exemple, ou par autre chose.

Une fois ces titres récupérés, il les parcourt un à un et leur attribue un ID qui commence par

La partie suivante du code crée un élément de lien d'ancrage et l'insère avant le titre, ce qui permet de pointer vers cet élément. Elle utilise comme référence l'identifiant de titre (headingID) créé plus haut. Le lien d'ancrage de la section 1 sera donc #section-1, et ainsi de suite.

Si vous ne connaissez pas JavaScript, vous n'avez pas besoin de tout comprendre, ne vous inquiétez pas ! Vous pouvez toujours copier le code dans ChatGPT et lui demander de vous l'expliquer.

Étape 3 : publiez sur le domaine de test et vérifiez le style des H2

Il faut ensuite publier ces modifications sur votre domaine de préproduction ou de test, généralement celui qui contient « webflow » dans l'URL. Nous vous recommandons de le retirer de l'index de Google, afin qu'il ne concurrence pas votre domaine principal.

Une fois la publication faite, vérifiez l'apparence de vos titres : ils ressemblent désormais à des liens, puisque vous leur en avez ajouté un. Vous pouvez alors créer un style personnalisé pour les liens H2, propre à la page modèle des articles de blog. Voici à quoi cela pourrait ressembler côté code, à titre d'exemple simple :

Copiez ce code dans la partie <head> de votre page modèle, comme tout à l'heure, mais entourez-le des balises <style> </style> pour qu'il fonctionne. Vous pouvez ensuite ajuster le style pour qu'il corresponde à celui de vos titres habituels.

Étape 4 : ajoutez les ancres en haut de la page

C'est fait, vous pouvez maintenant ajouter vos liens d'ancrage en haut de la page. Il suffit d'associer un lien au texte de la page, en utilisant #section-1 pour la première section, #section-2 pour la deuxième, et ainsi de suite.

L'avantage de ce script, c'est qu'il n'y a aucune limite au nombre de liens créés : dès qu'un titre est défini en H2, un lien est généré et vous pouvez l'utiliser comme ancre.

Ce script nous a été très utile pour notre propre site, alors nous espérons qu'il aidera aussi d'autres personnes ! N'hésitez pas à nous contacter si quelque chose n'est pas clair. Mais si vous copiez simplement le code comme indiqué et ajustez peut-être le style de vos H2, il ne vous restera plus qu'à ajouter les ancres et à utiliser les bonnes références. Bons liens !