Comment traduire une date de publication en français dans Webflow ?

Lorsque vous gérez un blog ou un site Web alimenté par un CMS, l'affichage des dates dans la bonne langue est crucial pour une expérience utilisateur fluide. Webflow, un puissant créateur de sites Web sans code, permet une flexibilité dans le style des dates mais ne fournit pas de support natif pour l'affichage des dates dans français ou dans d'autres langues autres que l'anglais.

Pour les entreprises ou les créateurs de contenu ciblant un public francophone, le fait d'avoir des noms de mois et de jours en anglais peut avoir un impact négatif sur l'apparence professionnelle du site. Étant donné que Webflow ne propose pas de solution prête à l'emploi pour traduire les dates, une solution JavaScript personnalisée est nécessaire.

Dans cet article, nous vous guiderons tout au long du processus de traduction automatique des dates de publication de Webflow CMS en français en utilisant JavaScript et les attributs de classe. Cette méthode garantit que toutes les dates générées par le CMS apparaissent en français sans nécessiter d'ajustements manuels pour chaque publication.

‍

Devez-vous afficher les dates sur votre blog ?

‍

Ajouter une date à un article de blog n'est pas toujours une bonne pratique. Si vous ne mettez pas fréquemment à jour votre blog, une date plus ancienne peut décourager les visiteurs de lire votre contenu, car ils pourraient penser qu'il est obsolète.

Cependant, dans certains cas, l'affichage de la date peut s'avérer bénéfique :

• ‍Pour plus de crédibilité : les visiteurs peuvent se sentir rassurés lorsqu'ils voient du contenu récent et régulièrement mis à jour.‍
• Pour le référencement : Google privilégie les nouveaux contenus, et une date visible peut améliorer la fiabilité.‍
• Pour le contenu basé sur l'actualité : si votre site publie des mises à jour sectorielles, les articles avec des dates ajoutent de la pertinence et de la clarté.

Si vous décidez d'afficher les dates, s'assurer qu'ils sont rédigés dans la bonne langue est essentiel à la cohérence et au professionnalisme.

‍

Pourquoi Webflow n'affiche pas les dates en français ?

‍

L'une des limites de Webflow est son absence de support intégré pour la traduction des dates du CMS dans différentes langues. Bien qu'il permette diverses options de style, le formatage de la date par défaut suit la langue anglaise, ce qui rend impossible afficher automatiquement les noms des jours et des mois en français.

Par exemple, Webflow peut afficher : 📅 samedi 26 octobre 2024

Mais pour un public français, le format attendu serait le suivant : 📅 Samedi 26 octobre 2024

Pour y parvenir, nous devons utiliser JavaScript personnalisé de remplacer les noms anglais des mois et des jours par leurs équivalents français.

‍

{{blog_article_cta01}}

‍

Traduire les noms des jours et des mois à l'aide de JavaScript personnalisé

‍

Pour mettre en œuvre cette solution, nous devons :

1. ‍Préparer et mettre en forme la date dans Webflow
2. Attribuer des noms de classe à différents composants de date
3. Insérez un extrait de code JavaScript pour remplacer les noms anglais par des traductions françaises

‍

1. Structurer la date dans Webflow CMS

‍

À l'intérieur de votre Collection Webflow, créez un composant de datequi contient quatre blocs de texte distincts :

• ‍Nom du jour → Attribuer une classe : day-component‍
• Numéro du jour → Attribuer une classe : composant numérique (aucune traduction requise)‍
• Nom du mois → Attribuer une classe : composante mensuelle‍
• Année → Attribuer une classe : composante annuelle (aucune traduction requise)

‍

2. Ajouter des attributs de classe pour la traduction

‍

Pour garantir que le script identifie correctement les éléments de texte à traduire, attribuez des attributs de classe supplémentaires :

• ‍Nom du jour (composant du jour) → Ajouter un cours : dayclass‍
• Nom du mois (composant du mois) → Ajouter une classe : dateclass‍
• Numéro du jour et année → Aucune traduction requise

‍

3. Ajouter le code JavaScript

‍

Maintenant, allez à Paramètres du site Webflow → Code personnalisé → Pied de page et insérez l'extrait de code JavaScript suivant :

<script>
console.clear();

const data = {
    months: {
        en: [
            'January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December',
        ],
        local: [
            'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
            'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre',
        ],
    },
    days: {
        en: [
            'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday',
        ],
        local: [
            'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche',
        ],
    }
};

// Error handling: Ensure correct array lengths
if (data.months.local.length !== 12) {
    console.error('Months are incorrect! Check your script.');
}
if (data.days.local.length !== 7) {
    console.error('Days are incorrect! Check your script.');
}

// Function to shorten words (e.g., "Jan" instead of "January")
const shortenDaysMonths = daymonth => daymonth.substring(0, 3);

// Function to replace English names with French equivalents
const convertToLocal = (daydate, elementsToConvert) => {
    elementsToConvert.each(function() {
        const element = $(this);
        let text = element.text();

        if (daydate === 'm' || daydate === 'month' || daydate === 'months') {
            for (let i = 0; i < data.months.en.length; i++) {
                text = text.replace(new RegExp(data.months.en[i], 'g'), data.months.local[i]);
                text = text.replace(new RegExp(shortenDaysMonths(data.months.en[i]), 'g'), shortenDaysMonths(data.months.local[i]));
                element.text(text);
            }
        } else if (daydate === 'd' || daydate === 'day' || daydate === 'days') {
            for (let i = 0; i < data.days.en.length; i++) {
                text = text.replace(new RegExp(data.days.en[i], 'g'), data.days.local[i]);
                text = text.replace(new RegExp(shortenDaysMonths(data.days.en[i]), 'g'), shortenDaysMonths(data.days.local[i]));
                element.text(text);
            }
        }
    });
};
</script>

‍

4. Exécution du script dans les pages Webflow

‍

Une fois le script ajouté au niveau du site, vous devez vous assurer qu'il s'exécute sur les pages affichant du contenu CMS. Pour ce faire, rendez-vous sur le paramètres de page où votre articles de collection apparaissent et insérez le code suivant :

<script>
    const allDates = $('.dateclass');
    const allDays = $('.dayclass');

    convertToLocal('m', allDates);
    convertToLocal('d', allDays);
</script>

‍

5. Publication et tests

• ‍Publiez votre site vers le domaine live de Webflow.‍
• Vérifiez que toutes les dates de publication du CMS apparaissent désormais en français au lieu de l'anglais.‍
• N'oubliez pas : les scripts ne sont pas exécutés dans la vue Designer de Webflow, vous devez donc vérifier la version active.

‍

Conclusion

En intégrant cette solution JavaScript, vous pouvez traduire automatiquement publier les dates en français dans le CMS de Webflow sans avoir à ajuster manuellement chaque article. Cette méthode est particulièrement utile pour sites web multilingues ou pour les entreprises françaises ou ciblant un public francophone.

Même si Webflow ne prend pas en charge les langues intégrées pour les dates, cette solution de contournement garantit un contrôle total sur la façon dont les dates sont affichées.

Si le contenu de votre blog est sensible au facteur temps, l'affichage des dates dans la langue appropriée permet de maintenir cohérence, professionnalisme et engagement des utilisateurs. En suivant ces étapes, vous pouvez vous assurer que votre contenu reste localisé et optimisé pour votre public.

Merci à Vincent Bidaux pour la création de ce code. Vous pouvez retrouver son travail ici : https://webflow.com/made-in-webflow/website/pardon-my-French-Translate-your-CMS-dates-and-time