Shave.js Eklentisi ile Dinamik Kesilmiş Metin

WordPress bloglarının çoğu, bir yayındaki önizleme metnini göstermek için "devamını oku" özelliğini kullanır. Bu metin kısaltılır ve yerden tasarruf etmek için belirli bir noktada kesilir ve okuyucuları okumaya devam etmek için daha fazla tıklamaları yönünde teşvik edin.

Ancak bazen bu özelliği tek bir sayfaya eklemek isteyebilirsiniz. İçin yapılan JavaScript eklentisi olan Shave.js kodunu girin. dinamik olarak kesen içerik.

Bu eklenti hakkında güzel bir gerçek, şimdiye kadar gördüğüm en komik reklamlardan birini yapan, Dollar Shave Club tarafından yaratılmış olması. Takımlarının GitHub sayfası bile olduğunu bilmiyordum, ancak hem orijinal hem de çatallı depolarla dolu.

Bu belirli eklenti oldukça yeni ve zaten 800'den fazla yıldıza sahip. Bağımlılıktan uzak bu yüzden Tarayıcıdan veya dahil olan diğer kütüphanelerden bağımsız olarak düz JavaScript’te çalışabilir.

Kod ayarı da oldukça basittir. tıraş() yalnızca iki parametre alarak işlev: eleman seçici ve bir maksimum yükseklik bu eleman için. İşte çok temel bir örnek:

 maksimum yükseklik = 320; tıraş ('. elemclass', maksheight); 

Doğal olarak var özel karakterler için geçebileceğiniz ek parametreler kesilmiş metinden sonra veya tıraş efektini uygulamak istediğiniz çoklu seçiciler.

Aslında Shave eklenti sitesinde canlı bir demo görebilirsiniz ve çok hoş bir CodePen demosuna sahipler..

Tıraş inşa edilmiştir jQuery veya Zepto üzerinde çalışmak Bu kütüphanelerden birini tercih ederseniz. Ama o zamandan beri vanilya JS'sinde çalışır sitenize bırakıp kullanmaya başlamak için en kolay eklentilerden biri.

Metni kısaltmak isteyeceğiniz çok fazla senaryo yoktur, ancak bunu yaptığınızda, Shave gibi bir eklenti kullanmak, tüm kodu kendiniz yazmaktan daha kolaydır..

Başlamak için GitHub deposundan bir kopya indirin veya npm benzeri bir repo'dan çekin. Ayrıca GitHub deposunda kurallar ve belgeler bulacaksınız; böylece yalnızca kopyalayıp yapıştırabilir ve tıraş alabilirsiniz!