Dynamisk avkortet tekst med Shave.js-plugin

De fleste WordPress-blogger bruker "Les mer" -funksjonen til å vise forhåndsvisningstekst fra et innlegg. Denne teksten er avkortet og kuttet av ved et bestemt punkt for å spare plass og til oppfordre leserne til å klikke videre for å fortsette å lese.

Men noen ganger vil du legge til denne funksjonen på en enkelt side. Skriv inn Shave.js, JavaScript-plugin laget for dynamisk trunkerende innhold.

Et kult fakta om dette pluginet er at det er opprettet av Dollar Shave Club, laget som laget en av de morsomste annonsene jeg noensinne har sett. Jeg var ikke klar over at laget deres selv hadde en GitHub-side, men den er full av repos både original og forked.

Denne spesielle plugin er ganske ny og den har allerede 800 + stjerner. Det er avhengighetsfritt, så det kan kjøre på vanlig JavaScript, uavhengig av nettleseren eller andre inkluderte biblioteker.

Kodeoppsett er også ganske enkelt med barbere() Funksjonen tar bare to parametere: an elementvelger og a maksimal høyde for det elementet. Her er et veldig grunnleggende eksempel:

 maksimal høyde = 320; barbering ('elemclass', maksimal høyde); 

Naturligvis er det Ekstra parametere du kan passere for egendefinerte tegn etter den avkortede teksten, eller flere selektorer hvor du vil bruke barberingseffekten.

Du kan faktisk se en live demo på Shave plugin-siden, og de har en fin CodePen-demo også.

Barbering er bygget til jobbe på jQuery eller Zepto hvis du foretrekker noen av disse bibliotekene. Men siden det også kjører på vanilje JS Det er en av de enkleste pluginene å slippe inn på nettstedet ditt og begynne å bruke.

Det er ikke så mange scenarier hvor du vil avkorte tekst, men når du gjør det er det mye enklere å bruke et plugin som barbering enn å skrive hele koden selv.

For å komme i gang, last ned en kopi fra GitHub repo eller trekk fra en repo som npm. Du finner også retningslinjer og dokumentasjon på GitHub repo, slik at du bokstavelig talt bare kan kopiere, lime inn og få barbering!