النص المقطوع الديناميكي مع البرنامج المساعد Shave.js

تستخدم معظم مدونات WordPress ميزة "قراءة المزيد" لإظهار نص المعاينة من منشور. يتم اقتطاع هذا النص وتقطيعه في نقطة معينة لتوفير مساحة و شجع القراء على النقر أكثر لمواصلة القراءة.

لكن في بعض الأحيان سترغب في إضافة هذه الميزة إلى صفحة واحدة. أدخل Shave.js ، المكون الإضافي JavaScript المخصص لـ اقتطاع المحتوى ديناميكيًا.

هناك حقيقة رائعة حول هذا المكون الإضافي وهي أنه تم إنشاؤه بواسطة Dollar Shave Club ، وهو الفريق الذي صنع أحد أكثر الإعلانات تسليةً التي رأيتها على الإطلاق. لم أكن أدرك أن فريقهم كان لديه حتى صفحة GitHub ، لكنه مليء بإعادة ضبط كل من النص الأصلي والشوكة.

هذا البرنامج المساعد خاص جديد إلى حد ما ولديه بالفعل 800+ النجوم. انها خالية من التبعية لذلك يمكن تشغيله على جافا سكريبت عادي بصرف النظر عن المتصفح أو المكتبات الأخرى المضمنة.

رمز الإعداد هو أيضا بسيط جدا مع حلاقة() وظيفة فقط مع اثنين من المعلمات: محدد العنصر و اقصى ارتفاع لهذا العنصر. إليك مثال أساسي للغاية:

 الحد الأقصى = 320 ؛ حلاقة ('. elemclass' ، maxheight) ؛ 

بطبيعة الحال هناك معلمات إضافية يمكنك تمرير للأحرف المخصصة بعد النص المقطوع ، أو محددات متعددة حيث تريد تطبيق تأثير الحلاقة.

يمكنك بالفعل مشاهدة عرض توضيحي مباشر على موقع البرنامج المساعد Shave ولديه عرض CodePen جميل أيضًا.

بنيت الحلاقة ل العمل على مسج أو Zepto إذا كنت تفضل أي من تلك المكتبات. ولكن لأنه أيضا يعمل على الفانيليا JS إنها واحدة من أسهل المكونات الإضافية التي تسقط في موقعك وتبدأ في استخدامها.

لا يوجد الكثير من السيناريوهات التي تريد فيها اقتطاع النص ، ولكن عندما تفعل ذلك ، يكون استخدام مكون إضافي مثل Shave أسهل كثيرًا من كتابة جميع الكود بنفسك.

للبدء ، قم بتنزيل نسخة من GitHub repo أو اسحبها من repo مثل npm. ستجد أيضًا إرشادات ووثائق على GitHub repo بحيث يمكنك حرفيًا فقط النسخ واللصق والحصول على الحلاقة!