Shave.js eklentisiyle Dinamik kısaltılmış metin

Çoğu blog sitelerinde bir yazı(post)nın önizleme metnini göstermek için “Devamını oku” özelliğini kullanılır. Bu metin yerden tasarruf etmek için okuyucuları okumaya, tıklamaya teşvik etmek için belirli bir noktada kesilir.

Bazen bu özelliği tek bir sayfa üzerine eklemek isteyebilirsiniz. İçeriğin dinamik olarak kesilmesi için JavaScript eklentisi olan Shave.js işinizi rahatlıkla görebilir.

Bu eklenti hakkında bir gerçekte gördüğüm en ilginç reklamlardan birini yapan Dollar Shave Club ekibi tarafından oluşturulmasıdır. Ekibin bir Github sayfasının olmasının yanısıra hem orjinal hem de fork repo‘larla dolu olduğununda altını çizelim.

Bu özel eklenti Github’da oldukça yeni ve 1000+ yıldıza sahiptir. Bağımsız olduğu için tarayıcıda veya diğer kütüphaneler içeriğinde her şeye rağmen JavaScript üzerinde çalışabilir.

Shave() fonksiyonuyla yalnızca iki parametre alarak kod kurulumu da oldukça basittir. Bir element seçici(element selector) ve bu element için bir maksimum yükseklik(max height)tir.

İşte basit bir örnek:

Kısaltılmış(kesilmiş) metinden sonra özel karakterlerle geçiş yapabileceğiniz ekstra parametrelerde vardır. Shave(tıraş) efekti uygulamak istediğiniz birçok seçici(selector)de vardır.

Aslında Shave(tıraş) eklentisini sitesinde canlı bir demoyla görebilirsiniz.

ShaveJS’i eğer kütüphanelerden birinde tercih edecekseniz. jQuery veya Zepto üzerinde çalışmak üzere yapılandırılmıştır. Sitenize girip kullanmaya başlamak için en kolay eklentilerden biridir ve ayrıca Vanilla JS üzerindede çalışır.

Eklentiyi kullanmaya başlamak için Github repo‘sundan bir kopyasını indirebilir veya Npm gibi bir repodan çekebilirsiniz. Ayrıca Github repo’sunda eklentiyle ilgili yönergeler ve dokümanlar bulabilirsiniz. Böylece eklentinin tamamını kopyalayabilir, yapıştırabilir ve Traş(Shaving) yapabilirsiniz.

Geri bildiriminizi aşağıdaki yorum bölümüne bırakmayı unutmayın. Umarım faydalı olmuştur. Herkese iyi çalışmalar diliyorum. Webmaster Mutfakta kalın. ?