Dynamische ingekorte tekst met Shave.js plug-in

De meeste WordPress-blogs gebruiken de "lees meer" -functie om voorbeeldtekst van een bericht weer te geven. Deze tekst is afgekapt en op een bepaald punt afgesneden om ruimte en moeite te besparen moedig lezers aan om verder te klikken om door te lezen.

Maar soms wilt u deze functie op een enkele pagina toevoegen. Voer Shave.js in, de JavaScript-plug-in gemaakt voor het dynamisch afkappen van inhoud.

Een cool feit over deze plug-in is dat deze is gemaakt door Dollar Shave Club, het team dat een van de grappigste advertenties heeft gemaakt die ik ooit heb gezien. Ik wist niet dat hun team zelfs een GitHub-pagina had, maar het zit vol met repo's, zowel origineel als gevorkt.

Deze specifieke plug-in is vrij nieuw en heeft al meer dan 800 sterren. Het is dus geen afhankelijkheid kan op gewoon JavaScript worden uitgevoerd, ongeacht de browser of andere opgenomen bibliotheken.

Code instellen is ook vrij eenvoudig met de scheren() functie die slechts twee parameters gebruikt: element selector en een maximale hoogte voor dat element. Hier is een heel eenvoudig voorbeeld:

 maxheight = 320; scheren ('. elemclass', maxheight); 

Natuurlijk zijn er extra parameters die je kunt doorgeven voor aangepaste karakters na de ingekorte tekst, of meerdere selectors waar u het scheereffect wilt toepassen.

Je kunt zelfs een live demo zien op de Shave-plugin-site en ze hebben ook een leuke CodePen-demo.

Scheren is gebouwd om werk aan jQuery of Zepto als je een van die bibliotheken verkiest. Maar aangezien het ook draait op vanilla JS het is een van de eenvoudigste plug-ins die u op uw site kunt plaatsen en kunt gebruiken.

Er zijn niet teveel scenario's waar je de tekst wilt afkappen, maar wanneer je dit doet, is het een stuk gemakkelijker om een ​​plug-in te gebruiken zoals Shave dan om alle code zelf te schrijven.

Download om te beginnen een kopie van de GitHub-repo of verwijder een repo-achtige npm. Je vindt ook richtlijnen en documentatie op de GitHub repo zodat je letterlijk gewoon kunt kopiëren, plakken en scheren!