So zeigst du für jeden Beitrag im Webflow-Blog-Feed einen dreizeiligen Auszug ohne Zusammenfassungsfeld im CMS an, mit etwas Custom CSS und einer Combo-Klasse.
Wir mussten kürzlich für einen Kunden eine riesige Menge an Blogbeiträgen von WordPress zu Webflow migrieren und sind dabei auf ein Problem gestoßen. Die Inhalte auf WordPress bestanden nur aus einem Titel, dem Beitrag und einem Bild. Wenn man es auf die Webflow-Art macht, braucht man normalerweise ein Feld für die Beitragszusammenfassung. Aber weder wir noch der Kunde wollten für über 500 Blogbeiträge Zusammenfassungen schreiben, nur damit auf der Blogseite ein dreizeiliger Auszug steht, bevor jemand zum Beitrag durchklickt. Also dachten wir: Warum nicht einfach drei Textzeilen aus dem Rich-Text-Feld als Zusammenfassung anzeigen? Anders als bei den unzähligen WordPress-Plugins, die dir eine Zusammenfassung liefern, gibt es in Webflow keine Funktion, die in einer Collection List eine bestimmte Anzahl an Zeichen aus deinem Rich-Text-Feld ausgibt. Die Lösung: Du setzt ein Rich-Text-Element für die Zusammenfassung ein, verbindest es mit dem vollständigen Beitragstext und zeigst nur ein paar Textzeilen mit Auslassungspunkten am Ende an. Das gelingt mit etwas Custom Code und einer Combo-Klasse.
Es ist überraschend einfach, also los. Folge einfach der Anleitung und kopiere und füge ein:
Schritt 1: Das benutzerdefinierte CSS zum Site-Header hinzufügen
Gehe zu Site settings, Custom code und füge den Style in den Bereich Head code ein:
<style>
/* Auto Post Summary Character Limit */
.textlimit {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>Den Code findest du auch als Pen auf CodePen: Create a Blog Summary or Excerpt in Webflow von Jakes van Eeden.
Es gibt mehrere Wege, aber Zeichenbegrenzungen sind etwas schwierig. Am einfachsten wäre es, die Zeichenbreite zu messen und ein Limit zu setzen. Die hängt jedoch von der Schriftart und anderen Faktoren ab und lässt sich kaum kontrollieren. Deshalb haben wir uns in diesem Beispiel für drei Zeilen entschieden. Wenn du eine andere Zeilenzahl möchtest, ändere die 3 in -webkit-line-clamp.
Was passiert: Sobald du das Rich-Text-Feld in deiner Collection List mit dem Element im Designer verbindest, zeigt es einfach den gesamten Text dieses Rich-Text-Felds an. Dann wendest du die Combo-Klasse für die Textbegrenzung an. Im Designer sieht alles gleich aus, aber nach dem Veröffentlichen wird der Text auf der veröffentlichten Website auf drei Zeilen begrenzt. Die -webkit--Präfixe wirken veraltet, sind aber nach wie vor der richtige Weg: Laut MDN ist die Kombination der drei Properties vollständig spezifiziert und wird weiterhin unterstützt, während die neuere, präfixfreie Property line-clamp noch nicht in allen gängigen Browsern unterstützt wird. Also der nächste Schritt:
Schritt 2: Die Combo-Klasse anwenden
Wir gehen davon aus, dass du das Element für diesen Schritt bereits gebaut hast. Falls nicht, füge eine CMS Collection List hinzu, setze ein Rich-Text-Element in das Collection-List-Item und binde es an das Rich-Text-Feld des Collection-List-Items, das den Blogbeitrag enthält. Style es im Designer, füge dann einfach die Combo-Klasse textlimit hinzu und veröffentliche:
Wie gesagt, im Designer siehst du den ganzen Text dieses Felds, es sieht also nicht besonders gut aus. Keine Sorge, nach dem Veröffentlichen sieht es super aus.
So sieht die Live-Website nach dem Veröffentlichen aus:
Und das war's. Schau dir Nr. 1 an: drei Textzeilen, dann Auslassungspunkte, fertig. Denk nur daran, das Rich-Text-Element im Designer noch sauber zu stylen. Bei Nr. 2, 3 und 4 siehst du, dass ich das noch nicht getan habe. Im Grunde gibst du den Überschriften und praktisch allen anderen Elementen in diesem Rich-Text-Feld dasselbe Styling wie dem Standardabsatz, den du anzeigen möchtest.
Wir geben zu, dass das nicht perfekt ist und nicht immer hundertprozentig sauber aussieht, schau dir nur das ungestylte Nr. 3 an. Aber bei 500 älteren Blogbeiträgen reicht es völlig.
Wie löst du das Problem für die Zukunft?
Kurz noch zur Frage, wie du das Problem künftig löst. Für diesen Kunden haben wir ein Zusammenfassungsfeld angelegt und es zum Pflichtfeld gemacht, damit es ab jetzt ausgefüllt werden muss. Dann haben wir bedingte Sichtbarkeit hinzugefügt und den Zusammenfassungsabsatz unter das Rich-Text-Zusammenfassungselement gesetzt. Die bedingte Sichtbarkeit des Absatzes, der mit dem Zusammenfassungsfeld in der CMS Collection List verknüpft ist, war so eingestellt, dass er angezeigt wird, wenn die Zusammenfassung ausgefüllt ist. Beim Rich-Text-Element war sie so eingestellt, dass es angezeigt wird, wenn keine Zusammenfassung vorhanden ist. So erscheint die Rich-Text-Zusammenfassung nur bei den älteren Beiträgen ohne Zusammenfassung. Bei neueren Beiträgen mit Zusammenfassung wird sie ausgeblendet und die eigentliche Zusammenfassung angezeigt.
Schadet das der Performance oder dem SEO?
Jef S hat im Webflow-Forum einen interessanten Punkt angesprochen: Du musst mit Einbußen bei Performance und SEO rechnen, was ich oben nicht erklärt hatte. Um das so weit wie möglich abzufedern, wurden die Elemente so gestylt, dass sie keine Bilder laden, wir paginieren nur 6 Einträge (dafür nutzen wir nahtlose Pagination), und für das SEO habe ich auf der Website ein Meta-Tag verwendet: <!-- fs-richtext-ignore --><META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW">. Nach unserer Erfahrung kann Google damit die Links auf der Seite crawlen und ignoriert den Inhalt. Für Google ist die Seite also praktisch unsichtbar, aber es kann den Links folgen und die eigentlichen Blogbeiträge crawlen. Bei uns hat das damals funktioniert. Google hat inzwischen gesagt, dass eine Seite, die lange auf noindex steht, irgendwann auch wie nofollow behandelt wird. Prüfe deshalb deine eigenen Ergebnisse, statt dich darauf als Garantie zu verlassen.
FAQ
Wie zeigst du in Webflow einen Blog-Auszug ohne Zusammenfassungsfeld an?
Binde ein Rich-Text-Element in deiner Collection List an den vollständigen Beitragstext, füge eine Combo-Klasse mit -webkit-line-clamp hinzu, eingestellt auf die gewünschte Zeilenzahl, und veröffentliche. Die Begrenzung gilt nur auf der veröffentlichten Website, im Designer siehst du also weiterhin den gesamten Text.
Kannst du ein Rich-Text-Feld in Webflow auf eine bestimmte Zeichenzahl begrenzen?
Nicht nativ. Webflow bietet dafür keine Einstellung, und eine Zeichenbegrenzung lässt sich in CSS schwer kontrollieren, weil die Breite jedes Zeichens je nach Schriftart variiert. Die Begrenzung nach Zeilen, wie wir sie hier nutzen, ist die einfachste zuverlässige Option.
Warum sieht der Auszug im Designer anders aus?
Der Designer zeigt den gesamten Text des verbundenen Rich-Text-Felds an, daher wirkt er lang und ungestylt. Nach dem Veröffentlichen begrenzt die Combo-Klasse ihn auf die gewählte Zeilenzahl. Style das Rich-Text-Element wie einen normalen Absatz, damit der Auszug zum Rest deines Designs passt.
Solltest du trotzdem ein richtiges Zusammenfassungsfeld hinzufügen?
Ja, für neue Inhalte. Nutze diesen Trick für ältere Beiträge, füge dann ein Pflichtfeld für die Zusammenfassung hinzu und nutze bedingte Sichtbarkeit, um es anstelle des automatischen Auszugs anzuzeigen, wie oben beschrieben.
Schreib uns gern unten einen Kommentar, wenn du Fragen hast, und schau dir auch unsere anderen Webflow- und Analytics-Anleitungen hier an. Wenn du CMS-gestützte Layouts baust, gefallen dir vielleicht auch unsere Beiträge zum Stylen von Text-Spans in dynamischem CMS-Text, zum Ausbrechen aus dem CMS-Raster und zum Hinzufügen von Blend Modes mit Combo-Klassen, oder hol dir etwas aus unseren Webflow-Cloneables.
