Comment traduire la date d'un post en français dans Webflow ?

Traduire les jours et mois des dates dans Webflow

Ajouter la date à un post n'est pas toujours une bonne pratique. Si vous n'alimentez pas régulièrement votre blog, un article qui date de plusieurs mois est un mauvais signal pour votre client. Je conseille parfois de ne pas dater les post à certain client s'il ne sont pas sûr de publier assez régulièrement. Cependant, si la date peut envoyer un mauvais signal, elle est aussi un atout pour votre image.

Webflow ne permet pas d'afficher une date en français

AEN Alpes énergies nouvelles, souhaite alimenter son site avec un blog et m'a demandé d'ajouter la date pour les derniers post sur la page d'accueil. Or, le CMS Webflow, qui permet une certaine souplesse pour la stylisation d'une date ne permet pas d'afficher la date en français. L'option 100% digitale est la seule solution no-code. Cette alternative ne convenait pas au client.

Traduire en français le jour et le mois avec du custom code JS

Cette automatisation se prépare ne plusieurs temps

Préparer et formater la date

Dans votre collection, créer un bloc date-component dans lequel vous créer 4 autres bloc texte :

1. un premier bloc text pour le jour que vous nommez : day-component
2. un deuxième bloc text pour le chiffre du jour que vous nommez: digit-component
3. un troisième bloc text pour le mois que vous nommez : month-component
4. en fin un quatrième bloc text pour l'année que vous nommez : year-component

Pour que le script s'exécute correctement, il faut attribuer un lass supplémentaire au bloc text qui seront trraduits automatiquement :

1. au premier bloc text day-component ajouter la propriété dayclass
2. au troisième bloc text month-component ajoutez la propriété dateclass
3. pour le jour et l'année. pas besoin de traduction :)

Ajouter les scripts

Dans les paramètres de votre site à l'onglet custom code, et ajouter le code javascript ci-dessous dans le footer.

<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', 'May', 'Juin',
            'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre',
        ],
    },
    days: {
        en: [
            'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday',
        ],
        local: [
            'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche',
        ],
    }
};

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.');
}

const shortenDaysMonths = daymonth => daymonth.substring(0, 3);
const convertToLocal = (daydate, whatToConvert) => {
    whatToConvert.each(function() {
        const theObject = $(this);
        let text = theObject.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]));
                theObject.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]));
                theObject.text(text);
            }
        }
    });
};
</script>

Maintenant que le projet contient le code, il faut ajouter sur dans les paramètres des pages où la collection apparaîtra le code suivant :

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

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

Il ne reste plus qu'à publier le site pour exécuter le script et vérifier le résultat. Dans l'interface Designer de Webflow les script ne sont pas exécutés.

J'ai trouvé ce code sur la page Pardon my French. Le code à intégrer dans les settings du projet a cependant été corrigé : j'ai demandé à ChatGPT de l'examiner notamment à cause de caractères spéciaux pour les mois de Février et Décembre "Fé". L'iA m'a proposé un nouveau code et a bien corrigé ces caractères spéciaux.