Publii🧩Plugin: Reading Time

Dieses Plugin berechnet automatisch die geschätzte Lesezeit für Ihre Beiträge und Seiten und zeigt sie an. Es funktioniert während des Rendering-Prozesses der Website und fügt die Lesezeit direkt in Ihren HTML-Code ein, ohne dass clientseitiges JavaScript erforderlich ist. Sie haben die volle Kontrolle darüber, was gezählt wird, wie die Zeit berechnet wird und wo die Anzeige auf Ihren Seiten erscheint.
Eine Übersetzung von Christian Spaan

❓ Wie funktioniert's ?

Das Reading Time-Plugin fängt die HTML-Ausgabe während der Website-Generierung ab und scannt Ihre Inhalte mithilfe der von Ihnen angegebenen CSS-Selektoren. Es zählt die Wörter basierend auf Ihrer konfigurierten Lesegeschwindigkeit (Standard: 210 Wörter pro Minute), fügt optional Zeit für Bilder und Videos hinzu und fügt dann an der von Ihnen gewählten Stelle eine formatierte Beschriftung ein. Der gesamte Prozess findet auf der App-Seite statt, sodass Ihre Besucher sauberen, schnell ladenden HTML-Code mit der bereits enthaltenen Lesezeit erhalten.

Das Plugin geht bei der Extraktion von Inhalten intelligent vor, indem es bestimmte Container (wie .content__entry) anvisiert und unerwünschte Abschnitte (wie Inhaltsverzeichnisse oder Fußzeilen) ausschließt. Es berücksichtigt die HTML-Struktur, verarbeitet verschachtelte Elemente korrekt und greift automatisch auf gängige Inhalts-Tags zurück, wenn benutzerdefinierte Selektoren nicht übereinstimmen.

🔑 Schlüsselfunktionen

• Flexible Inhaltsauswahl: Wählen Sie bestimmte Inhaltscontainer mithilfe von CSS-Selektoren aus (unterstützt mehrere Selektoren, Klassen, IDs und komplexe Kombinationen). Das Plugin umfasst eine Fallback-Erkennung für Standard-HTML5-Elemente wie article, main und body, um auch bei minimaler Konfiguration einen zuverlässigen Betrieb zu gewährleisten.
• Intelligente Inhaltsausblendung: Entfernen Sie bestimmte Abschnitte mithilfe von Ausschlussselektoren aus der Wortzählung. Dies ist nützlich für Elemente wie Inhaltsverzeichnisse, Seitenleisten, Fußzeilen oder andere Inhalte, die nicht in die Lesezeit einfließen sollen. Das Plugin entfernt ganze verschachtelte Strukturen und blendet sie nicht nur visuell aus.
• Anpassbare Zählregeln: Konfigurieren Sie die Lesegeschwindigkeit in Wörtern pro Minute, wählen Sie aus, ob Bilder und Videos gezählt werden sollen, legen Sie fest, wie viele Sekunden jedes Medienelement hinzufügt, und entscheiden Sie, ob iframes (wie YouTube-Einbettungen) als Videos behandelt werden sollen. Sie können auch Bild-Alt-Text in die Wortzählung einbeziehen, um genauere Schätzungen zu erhalten.
• Präzise Zeitberechnung: Steuern Sie das Rundungsverhalten (aufrunden, abrunden oder auf die nächste Minute runden) und legen Sie Mindest-/Höchstwerte für Minuten fest, um die angezeigten Zeiten in einem sinnvollen Bereich zu halten. Das Plugin bietet drei Werte für die Vorlagenerstellung: gerundete Minuten, exakte Dezimalminuten und Gesamtsekunden.
• Universelle Pluralunterstützung: Definieren Sie separate Beschriftungsvorlagen für verschiedene Minutenanzahlen (eine, wenige, viele, andere), um die Pluralbildung in jeder Sprache korrekt zu handhaben. Das Plugin verwendet einfache deterministische Regeln (1 > eine, 2-4 > wenige, ≥5 > viele), die sich gut für Sprachen mit komplexen Pluralformen wie Polnisch oder Tschechisch eignen. Alle Vorlagen unterstützen Platzhalter: {m} für gerundete Minuten, {exact} für Dezimalgenauigkeit, {sec} für Gesamtsekunden.
• Flexible Platzierung von Beschriftungen: Wählen Sie mithilfe von Zielselektoren aus, wo die Lesezeit angezeigt werden soll, und steuern Sie dann den Einfügemodus (vor, nach, voranstellen oder an das Zielelement anhängen). Das Plugin passt das Einfügeverhalten automatisch an, wenn Inline- und Blockelemente gemischt werden, um Layoutbrüche zu vermeiden.
• Saubere HTML-Ausgabe: Passen Sie das Wrapper-Tag (span, div oder ein beliebiges HTML-Element) und die CSS-Klasse an, die auf die Lesezeitbeschriftung angewendet werden. Das Plugin generiert semantisches HTML mit korrekten ARIA-Beschriftungen für die Barrierefreiheit und behält alle vorhandenen CSS-Klassen auf den Zielelementen bei.
• Detaillierte Steuerung: Aktivieren Sie die Lesezeit separat für Beiträge und Seiten. Sie können Schätzungen in Blog-Beiträgen anzeigen und Seiten wie „Über uns“ oder „Kontakt“ ausschließen oder umgekehrt.
• Debug-Modus: Wenn dieser Modus aktiviert ist, zeigen detaillierte Protokolle genau an, was das Plugin zählt (Wörter, Bilder, Videos), wie die Berechnungen durchgeführt werden und wie die endgültige Ausgabe für jede Seite aussieht. 

🤹‍♀️ Einsatzzwecke

• Bessere Benutzererfahrung: Die geschätzte Lesezeit hilft Besuchern bei der Entscheidung, ob sie einen Inhalt sofort lesen oder für später speichern möchten, was das Engagement verbessert und die Absprungraten senkt.
• Vollständige Kontrolle: Im Gegensatz zu einfachen Lösungen zur Anzeige der Lesezeit können Sie mit diesem Plugin jeden Aspekt der Berechnung und Anzeige genau auf Ihren Inhaltstyp und die Bedürfnisse Ihrer Zielgruppe abstimmen.
• Kein clientseitiges JavaScript: Da alles während der Erstellung geschieht, werden Ihre Seiten schneller geladen und funktionieren auch bei deaktiviertem JavaScript oder auf Lesegeräten, die Skripte blockieren, einwandfrei.
• Funktioniert mit jedem Theme: Da Sie Selektoren und CSS-Klassen selbst definieren, lässt sich die Lesezeit nahtlos in jede Theme-Struktur und jedes Design integrieren.

🧩 Plugin installieren

Klicken Sie auf das 3-Punkte-Menü in der oberen rechten Ecke des Hauptbildschirms von Publii:

Nachdem Sie die Zip-Datei des Plugins auf der Plugin-Seite des Publii Marktplatzes heruntergeladen haben, klicken Sie auf die Schaltfläche Plugin installieren und wählen Sie die zuvor heruntergeladene Zip-Datei aus.

👋Fertig.
Greifen Sie auf Ihr frisch installiertes Plugin über Tools & Plugins in der Seitenleiste zu.
Wenn Sie auf ein Plugin klicken, wird der Konfigurationsbildschirm des Plugins geöffnet.

Eine Übersetzung von s3n🧩net