Shave.js प्लगइन के साथ डायनामिक ट्रंकटेटेड टेक्स्ट

अधिकांश वर्डप्रेस ब्लॉग एक पोस्ट से पूर्वावलोकन पाठ दिखाने के लिए "अधिक पढ़ें" सुविधा का उपयोग करते हैं। यह पाठ जगह को बचाने और करने के लिए एक निश्चित बिंदु पर छोटा और काट दिया जाता है पाठकों को पढ़ने के लिए आगे क्लिक करने के लिए प्रोत्साहित करें.

लेकिन कभी-कभी आप इस सुविधा को एक पृष्ठ पर जोड़ना चाहते हैं। Shave.js, जावास्क्रिप्ट प्लगइन के लिए बनाया दर्ज करें गतिशील रूप से कम करने वाली सामग्री.

इस प्लगइन के बारे में एक अच्छा तथ्य यह है कि यह डॉलर शेव क्लब द्वारा बनाया गया है, जो टीम ने सबसे मजेदार विज्ञापनों में से एक बनाया है जो मैंने कभी देखा है। मुझे पता नहीं था कि उनकी टीम के पास GitHub पेज भी था, लेकिन यह मूल और कांटे दोनों के भंडार से भरा है.

यह विशेष प्लगइन काफी नया है और इसमें पहले से ही 800+ सितारे हैं। यह निर्भरता से मुक्त है इसलिए यह ब्राउज़र या अन्य शामिल पुस्तकालयों की परवाह किए बिना सादे जावास्क्रिप्ट पर चल सकते हैं.

कोड सेटअप भी बहुत सरल है दाढ़ी () फ़ंक्शन केवल दो पैरामीटर ले रहा है: ए तत्व चयनकर्ता और ए अधिकतम ऊँचाई उस तत्व के लिए। यहाँ एक बहुत ही बुनियादी उदाहरण दिया गया है:

 अधिकता = 320; शेव ('। इल्मक्लास', मैक्सहाइट); 

स्वाभाविक रूप से हैं अतिरिक्त पैरामीटर आप कस्टम वर्णों के लिए पास कर सकते हैं काटे गए पाठ के बाद, या कई चयनकर्ता जहां आप दाढ़ी प्रभाव लागू करना चाहते हैं.

आप वास्तव में शेव प्लगइन साइट पर एक लाइव डेमो देख सकते हैं और उनके पास एक अच्छा कोडपेन डेमो भी है.

के लिए बनाया गया है jQuery या Zepto पर काम करते हैं यदि आप उन पुस्तकालयों में से किसी एक को पसंद करते हैं। लेकिन चूंकि यह भी है वेनिला जेएस पर चलाता है यह आपकी साइट में ड्रॉप करने और उपयोग शुरू करने के लिए सबसे आसान प्लगइन्स में से एक है.

ऐसे बहुत से परिदृश्य नहीं हैं जहाँ आप पाठ को छोटा करना चाहते हैं, लेकिन जब आप ऐसा करते हैं तो सभी कोड लिखने के बजाय शेव जैसे प्लगइन का उपयोग करना बहुत आसान होता है.

आरंभ करने के लिए, GitHub रेपो से एक प्रति डाउनलोड करें या npm जैसे एक रेपो से खींचें। GitHub रेपो पर आपको दिशानिर्देश और प्रलेखन भी मिलेंगे ताकि आप शाब्दिक रूप से कॉपी, पेस्ट और शेविंग कर सकें!