Dinamički skraćeni tekst s dodatkom Shave.js

Većina WordPress blogova koristi značajku "pročitaj više" za prikaz teksta pregleda s posta. Ovaj tekst je skraćen i odrezan u određenom trenutku kako bi se uštedio prostor i potaknite čitatelje da kliknu kako bi nastavili čitati.

Ali ponekad ćete htjeti dodati tu značajku na jednu stranicu. Unesite Shave.js, JavaScript plugin napravljen za dinamički skraćivanje sadržaja.

Kul činjenica o ovom dodatku je da ga je stvorio Dollar Shave Club, tim koji je napravio jedan od najsmješnijih oglasa koje sam ikada vidio. Nisam bio svjestan da je njihov tim čak imao i GitHub stranicu, ali je prepuna repo i originalnih i forkiranih.

Ovaj dodatak je prilično nov i već ima 800+ zvjezdica. Bez ovisnosti je tako može se izvoditi na običnom JavaScriptu bez obzira na preglednik ili druge uključene knjižnice.

Postavljanje koda je također prilično jednostavno obrijati se() funkcija uzima samo dva parametra: a izbornik elemenata i a maksimalna visina za taj element. Evo vrlo osnovnog primjera:

 maxheight = 320; brijanje ("elemclass", maks. visina); 

Naravno da postoje dodatne parametre možete prenijeti za prilagođene znakove nakon skraćenog teksta ili više selektora gdje želite primijeniti efekt brijanja.

Možete zapravo vidjeti demo uživo na web-mjestu Shave plugin i imaju lijep CodePen demo.

Za brijanje je izgrađeno rad na jQuery ili Zepto ako želite bilo koju od tih knjižnica. Ali budući da je također radi na vanili JS to je jedan od najjednostavnijih dodataka koji padaju na vašu web-lokaciju i počnu koristiti.

Nema previše scenarija u kojima ćete htjeti skratiti tekst, ali kada to učinite, mnogo je lakše koristiti dodatak poput Shavea nego sami pisati cijeli kôd.

Da biste započeli, preuzmite kopiju iz GitHub repo ili povucite iz repo kao npm. Također ćete naći smjernice i dokumentaciju o GitHub repo tako da možete doslovno samo kopirati, zalijepiti i dobiti brijanje!