Dynamický zkrácený text s pluginem Shave.js

Většina blogů WordPress používá funkci "více informací" k zobrazení náhledu textu z příspěvku. Tento text je zkrácen a oříznut v určitém bodě, aby se ušetřil prostor a povzbuzujte čtenáře k dalšímu kliknutí a pokračujte ve čtení.

Někdy však budete chtít tuto funkci přidat na jednu stránku. Zadejte Shave.js, plugin pro JavaScript dynamicky zkrácený obsah.

Skvělý fakt o tomto pluginu je, že je vytvořen Dollar Shave Club, tým, který vytvořil jednu z nejzábavnějších reklam, jakou jsem kdy viděl. Nebyla jsem si vědoma, že jejich tým má dokonce stránku GitHub, ale je plný reposů jak originálních, tak vidlicových.

Tento konkrétní plugin je poměrně nový a má již více než 800 hvězd. Je to závislé, tak to je lze spustit na prostém JavaScriptu bez ohledu na prohlížeč nebo jiné zahrnuté knihovny.

Nastavení kódu je také velmi jednoduché holit() funkce pouze s dvěma parametry: a prvek a Maximální výška pro tento prvek. Zde je velmi základní příklad:

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

Samozřejmě existují další parametry, které můžete předat pro vlastní znaky po zkráceném textu nebo více selektorů, kde chcete použít efekt holení.

Na webu Shave plugin můžete vidět živé demo a mají také pěkné demo CodePen.

Je postaveno holení práce na jQuery nebo Zepto pokud dáváte přednost těmto knihovnám. Ale protože to také běží na vanilce JS je to jeden z nejjednodušších pluginů, které můžete vložit na vaše stránky a začít používat.

Není příliš mnoho scénářů, kde budete chtít text zkrátit, ale když to uděláte, je mnohem snazší použít plugin jako Shave, než napsat celý kód sami.

Chcete-li začít, stáhněte si kopii z repozitáře GitHub nebo vytáhněte z repo jako npm. Najdete zde také pokyny a dokumentaci k repo programu GitHub, takže můžete doslova kopírovat, vložit a dostat holení!