Dynamisk afkortet tekst med Shave.js-plugin

De fleste WordPress blogs bruger funktionen "læs mere" til at vise eksempeltekst fra et indlæg. Denne tekst er afkortet og afskåret på et bestemt tidspunkt for at spare plads og til opfordre læsere til at klikke videre for at fortsætte med at læse.

Men nogle gange vil du gerne tilføje denne funktion på en enkelt side. Indtast Shave.js, JavaScript plugin lavet til dynamisk trunkerende indhold.

En kold kendsgerning om dette plugin er, at den er skabt af Dollar Shave Club, holdet, der lavede en af ​​de sjoveste annoncer, jeg nogensinde har set. Jeg var ikke klar over deres hold havde endda en GitHub side, men den er fuld af repos både originale og forked.

Denne særlige plugin er ret ny, og den har allerede 800 + stjerner. Det er afhængighedsfrit, så det kan køre på almindeligt JavaScript uanset browser eller andre inkluderede biblioteker.

Kodeopsætning er også ret simpelt med barbering() Funktionen tager kun to parametre: an elementvælger og a maksimal højde for det element. Her er et meget grundlæggende eksempel:

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

Naturligvis er der Ekstra parametre du kan passere til brugerdefinerede tegn efter den afkortede tekst, eller flere selektorer, hvor du vil anvende barberingseffekten.

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

Barbering er bygget til arbejde på jQuery eller Zepto hvis du foretrækker en af ​​disse biblioteker. Men siden det også kører på vanille JS det er et af de nemmeste plugins at slippe ind på dit websted og begynde at bruge.

Der er ikke for mange scenarier, hvor du vil afkorte tekst, men når du gør det, er det meget nemmere at bruge et plugin som barbering end at skrive hele koden selv.

For at komme i gang skal du downloade en kopi fra GitHub repo eller trække fra en repo som npm. Du finder også retningslinjer og dokumentation på GitHub repo, så du kan bogstaveligt talt bare kopiere, indsætte og få barbering!