Динамичен съкратен текст с плъгин Shave.js

Повечето блогове на WordPress използват функцията "прочети повече", за да покажат текст за предварителен преглед от публикация. Този текст се съкращава и отрязва в определен момент, за да се спести място и насърчавайте читателите да натискат допълнително, за да продължат да четат.

Но понякога ще искате да добавите тази функция към една страница. Въведете Shave.js, плъгинът на JavaScript, за който сте направили динамично отрязване на съдържанието.

Готин факт за този плъгин е, че той е създаден от Dollar Shave Club, екипа, който направи една от най-забавните реклами, които съм виждал. Не знаех, че техният екип дори имаше GitHub страница, но е пълна с оригинални и вилични репо.

Този плъгин е сравнително нов и вече има 800+ звезди. Това е без зависимост може да се изпълнява на обикновен JavaScript, независимо от браузъра или други включени библиотеки.

Настройката на кода също е доста проста бръснене () функция само при два параметъра: a селектор на елементи и a максимална височина за този елемент. Ето един много основен пример:

 maxheight = 320; бръснене (". elemclass", максимална височина); 

Естествено има допълнителни параметри, които можете да предавате за персонализирани знаци след изрязания текст, или няколко селектора, където искате да приложите ефекта на бръснене.

Всъщност можете да видите демонстрация на живо на сайта за плъгини Shave и те имат хубава демо версия на CodePen.

Бръсненето е направено така работа с jQuery или Zepto ако предпочитате някоя от тези библиотеки. Но тъй като тя също работи на ванилия JS това е един от най-лесните приставки, които можете да пуснете в сайта си и да започнете да използвате.

Няма прекалено много сценарии, в които искате да отрежете текста, но когато го направите, е много по-лесно да използвате плъгин като Shave, отколкото сами да пишете кода..

За да започнете, изтеглете копие от GitHub repo или издърпайте от repo като npm. Също така ще намерите указания и документация за GitHub repo, така че можете буквално да копирате, поставяте и да се бръснете!