Berechnung der geschätzten Lesezeit für Blogartikel: Ein Tutorial
Laat artikelen voorlezen
Wenn du deinen Lesern eine zusätzliche Orientierung bieten möchtest und ihnen zeigen willst, wie viel Zeit sie in etwa für das Lesen deines Beitrags einplanen sollten, ist die Angabe einer geschätzten Lesezeit ein praktisches Feature. In diesem Blogartikel zeige ich dir, wie du mit einem simplen Stück JavaScript diesen Mehrwert auf deiner Website schaffen kannst, unabhängig davon, welches Content Management System oder welche Technologie du verwendest.
Was der JavaScript-Code macht
Der vorliegende Code berechnet die geschätzte Lesezeit basierend auf der Anzahl der Wörter in einem Text. Wir nehmen an, dass ein durchschnittlicher Leser etwa 200 Wörter pro Minute liest. Diesen Wert kannst du an die Lesegewohnheiten deiner Zielgruppe anpassen, sollte dies notwendig sein.
Im Wesentlichen besteht der Code aus zwei Teilen:
- Die Berechnungsfunktion (calculateReadingTime): Diese Funktion nimmt einen Textstring entgegen, zählt die Wörter und teilt diese Anzahl durch die durchschnittliche Lesegeschwindigkeit. Das Ergebnis wird auf die nächste ganze Zahl aufgerundet, um die Minuten der Lesezeit zu erhalten.
- Die Aktualisierungsfunktion (updateReadingTime): Hier wird der tatsächliche Text aus einem Element mit der Klasse .news-text-wrap geholt. Nach der Berechnung der Lesezeit wird diese in einem Element mit der Klasse .estimated-reading-time_inner angezeigt.
Integration des Codes
Um dieses Feature zu verwenden, musst du diese Schritte befolgen:
1. JavaScript-Code einbinden
Füge den bereitgestellten JavaScript-Code in eine JavaScript-Datei ein oder integriere ihn direkt in ein <script>-Tag innerhalb deines HTML-Dokuments:
<script>
// Hier kommt das JavaScript zum Berechnen und Anzeigen der Lesezeit
</script>2. HTML-Elemente vorbereiten
Dein Artikel-HTML sollte mindestens zwei Elemente enthalten: Eines für den Textinhalt und eines, in dem die Lesezeit dargestellt wird. Zum Beispiel:
<div class="estimated-reading-time">
Geschätzte Lesezeit: <span class="estimated-reading-time_inner"></span> Minuten
</div>
<div class="news-text-wrap">
<!-- Hier kommt der Artikeltext -->
</div>3. JavaScript-Code aufrufen
Stelle sicher, dass die Funktion updateReadingTime aufgerufen wird, sobald der Textinhalt geladen wurde. Wenn du den Code direkt in das HTML-Dokument einfügst, wird dies automatisch am Ende des Scripts durchgeführt.
Anpassungen vornehmen
- Angepasste Lesegeschwindigkeit: Falls du weißt, dass deine Leser schneller oder langsamer lesen, kannst du den Wert wordsPerMinute entsprechend abändern.
- Responsive Anzeige: Stelle sicher, dass die Darstellung der Lesezeit auch auf mobilen Geräten gut aussieht und funktioniert.
Schlussfolgerung
Die Angabe einer geschätzten Lesezeit auf deiner Seite ist eine einfache, aber wirkungsvolle Methode, um Lesern einen zusätzlichen Service zu bieten und gleichzeitig Professionalität auszustrahlen. Dieser kleine JavaScript-Schnipsel kann überall eingesetzt werden, unabhängig von der verwendeten Plattform.
Der JavaScript-Code
document.addEventListener('DOMContentLoaded', function() {
// Estimated reading time for blog articles
// Calculates the estimated reading time based on the number of words
function calculateReadingTime(text) {
const wordsPerMinute = 200; // Average reading speed
const words = text.trim().split(/\s+/).length; // Count the words
const readingTime = Math.ceil(words / wordsPerMinute);
return readingTime;
}
// Updates the display of the estimated reading time
function updateReadingTime() {
const newsTextWrap = document.querySelector('.news-text-wrap');
// Checks if the element exists
if (newsTextWrap) {
const textContent = newsTextWrap.innerText;
const readingTime = calculateReadingTime(textContent);
const readingTimeDisplay = document.querySelector('.estimated-reading-time_inner');
// Only updates if the target element exists
if (readingTimeDisplay) {
readingTimeDisplay.innerText = `${readingTime}`;
}
}
}
updateReadingTime();
});
Wie schrijft hier?
Hoi, ik ben Wolfgang.
Sinds 2006 duik ik diep in de fascinerende wereld van TYPO3 - het is niet alleen mijn beroep, maar ook mijn passie. Mijn pad heeft me door talloze projecten geleid en ik heb honderden professionele video tutorials gemaakt over TYPO3 en zijn extensies. Ik hou ervan complexe onderwerpen te ontrafelen en ze om te zetten in eenvoudig te begrijpen concepten, wat ook tot uiting komt in mijn trainingen en seminars.
Als actief lid van het TYPO3 Education Committee zet ik me in om de TYPO3 CMS Certified Integrator examenvragen actueel en uitdagend te houden. Sinds januari 2024 ben ik er trots op een officiële TYPO3 Consultant Partner te zijn!
Maar mijn passie eindigt niet bij het scherm. Wanneer ik niet in de diepte van TYPO3 duik, vind je me vaak op mijn fiets, de schilderachtige paden rond het Bodenmeer verkennend. Deze uitstapjes in de buitenlucht zijn mijn perfecte balans - ze houden mijn geest fris en voorzien me altijd van nieuwe ideeën.
Der TYPO3 Newsletter
TYPO3-Insights direkt in dein Postfach!
Hol dir monatliche Updates, praktische Tipps und spannende Fallstudien.
Übersichtlich, zeitsparend, ohne Spam.
Bist du dabei? Jetzt für den Newsletter anmelden!