Dynamický skrátený text s doplnkom Shave.js

Väčšina blogov WordPress využíva funkciu "čítať viac" na zobrazenie ukážky textu z príspevku. Tento text je skrátený a odrezaný v určitom bode, aby sa ušetril priestor a priestor povzbudiť čitateľov, aby ďalej čítali.

Niekedy však budete chcieť túto funkciu pridať na jednu stránku. Zadajte Shave.js, ktorý bol vytvorený pre JavaScript dynamicky skracuje obsah.

Skvelý fakt o tomto plugin je, že je vytvorený klubom Dollar Shave Club, ktorý vytvoril jednu z najzábavnejších reklám, aké som kedy videl. Nebol som si vedomý, že ich tím dokonca mal stránku GitHub, ale je plná repasov originálnych aj vidlicových.

Tento konkrétny plugin je pomerne nový a má už 800+ hviezd. Je to bez závislostí môže bežať na obyčajný JavaScript bez ohľadu na prehliadač alebo iné zahrnuté knižnice.

Nastavenie kódu je tiež veľmi jednoduché holenie () funkcia má iba dva parametre: an volič prvkov a a maximálna výška pre tento prvok. Tu je veľmi základný príklad:

 maxheight = 320; oholiť ("elemclass", maxheight); 

Prirodzene existujú ďalšie parametre, ktoré môžete odovzdať pre vlastné znaky po skrátenom texte alebo viacerých výberov, kde chcete efekt holenia použiť.

Môžete skutočne vidieť živé demo na stránkach Shave plugin a majú tiež pekné demo CodePen.

Oholenie je postavené na pracovať s jQuery alebo Zepto ak uprednostňujete jednu z týchto knižníc. Ale pretože to tiež beží na vanilke JS je to jeden z najjednoduchších zásuvných modulov, ktoré môžete spustiť na svojom webe a začať používať.

Nie je príliš veľa scenárov, kde budete chcieť skrátiť text, ale keď to urobíte, je to oveľa jednoduchšie použiť plugin, ako je Shave, ako napísať celý kód sám.

Ak chcete začať, stiahnite kópiu z repo GitHub alebo vytiahnite z repo ako npm. Nájdete tu tiež pokyny a dokumentáciu o repo GitHub, takže môžete doslovne skopírovať, vložiť a získať holenie!