Kennis delen

Vertaal eenvoudig uw CMS-datums in Webflow

Webflow cms datums worden alleen in het Engels weergegeven, dit is een elegante manier om ze naar een andere taal te vertalen

Opgelet

Deze methode is niet bedoeld voor meertalige websites. Het is eerder ontworpen voor een website in één taal (in een andere taal dan het Engels) waar u bestaande Engelse datums in een andere taal moet vertalen.

Stap 1: Voeg de vereiste scripts toe

Voeg de volgende scripts toe aan je head sectie:

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/nl.js"></script>

Opmerking: In dit voorbeeld vertalen we Engelse datums naar het Nederlands (nl). Als je een andere taal nodig hebt, voeg dan gewoon het bijbehorende taalbestand toe en werk de landinstellingsverwijzingen in de onderstaande code bij.

Stap 2: De vertaalcode toevoegen

Plaats het volgende script op elke pagina die datums bevat die vertaald moeten worden. Als je meerdere pagina's hebt, overweeg dan om dit in een herbruikbaar onderdeel te verpakken om consistentie te garanderen.

//Selecteer alle elementen met de klasse 'translate-date' (wijzig indien nodig)
const DateElements = document.QuerySelectorAll (".translate-date");

DateElements.forEach (functie (el) {
 const OriginalText = el.innerText.Trim ();
 const parsedDate = dayjs (OriginalText, 'MMMM D, YYYY', 'en');

 if (parsedDate.isValid ()) {
 //Converteer de geparseerde datum naar de Nederlandse landinstelling en indeling
 const dutchDate = parsedDate.locale ('nl') .format ('MMMM YYYY');
 el.innerText = DutchDate;
 }
});

.translate-date is een voorbeeldklasse voor het identificeren van elementen die datums bevatten.

Als je wilt, kun je een andere klassenaam of meerdere klassen gebruiken (bijv. .translate-date, .some-other-class).

Hulp nodig?

Als je vragen hebt of meer hulp nodig hebt, neem dan gerust contact op met johan@wambay.com.

Dat is het! In slechts een paar minuten kunt u Engelse datums naadloos vertalen naar het Nederlands (of een andere taal) met behulp van Day.js.