Dynamischer abgeschnittener Text mit dem Shave.js-Plugin

Die meisten WordPress-Blogs verwenden die Funktion "Weitere Informationen", um einen Vorschau-Text aus einem Beitrag anzuzeigen. Dieser Text wird an einem bestimmten Punkt abgeschnitten und abgeschnitten, um Platz zu sparen regen Sie die Leser an, weiter zu klicken, um weiterlesen zu können.

Manchmal möchten Sie diese Funktion jedoch auf einer einzelnen Seite hinzufügen. Geben Sie Shave.js ein, das JavaScript-Plugin für Inhalte dynamisch abschneiden.

Eine coole Tatsache über dieses Plugin ist, dass es vom Dollar Shave Club erstellt wurde, dem Team, das eine der lustigsten Anzeigen gemacht hat, die ich je gesehen habe. Ich wusste nicht, dass ihr Team sogar eine GitHub-Seite hatte, aber es ist voller Repos, sowohl original als auch gegabelt.

Dieses spezielle Plugin ist ziemlich neu und hat bereits über 800 Sterne. Es ist abhängigkeitsfrei, also kann mit einfachem JavaScript ausgeführt werden, unabhängig vom Browser oder anderen enthaltenen Bibliotheken.

Code-Setup ist mit dem auch ziemlich einfach rasieren() Funktion nimmt nur zwei Parameter an: an Elementauswahl und ein maximale Höhe für dieses Element. Hier ist ein sehr einfaches Beispiel:

 Maximalhöhe = 320; rasieren ('. elemclass', maxheight); 

Natürlich gibt es zusätzliche Parameter, die Sie für benutzerdefinierte Zeichen übergeben können nach dem abgeschnittenen Text oder mehrere Selektoren, auf die Sie den Rasureffekt anwenden möchten.

Sie können eine Live-Demo auf der Shave-Plugin-Site sehen und sie haben auch eine schöne CodePen-Demo.

Rasur ist gebaut Arbeit an jQuery oder Zepto wenn Sie eine dieser Bibliotheken bevorzugen. Aber seitdem auch läuft auf Vanille JS Es ist eines der einfachsten Plugins, das Sie in Ihre Site einfügen und verwenden können.

Es gibt nicht zu viele Szenarien, in denen Sie Text abschneiden möchten. Wenn Sie dies tun, ist es jedoch viel einfacher, ein Plugin wie Shave zu verwenden, als den gesamten Code selbst zu schreiben.

Laden Sie zunächst eine Kopie aus dem GitHub-Repo herunter oder ziehen Sie sie aus einem Repo wie npm. Sie finden außerdem Richtlinien und Dokumentation zum GitHub-Repo, sodass Sie buchstäblich nur kopieren, einfügen und rasieren können!