ข้อความที่ถูกตัดทอนแบบไดนามิกพร้อมปลั๊กอิน Shave.js

บล็อก WordPress ส่วนใหญ่ใช้คุณสมบัติ "อ่านเพิ่มเติม" เพื่อแสดงข้อความตัวอย่างจากโพสต์ ข้อความนี้ถูกตัดทอนและตัดออกในบางจุดเพื่อประหยัดพื้นที่และ สนับสนุนให้ผู้อ่านคลิกเพิ่มเติมเพื่ออ่านต่อไป.

แต่บางครั้งคุณอาจต้องการเพิ่มคุณสมบัตินี้ลงในหน้าเดียว ป้อน Shave.js ซึ่งเป็นปลั๊กอิน JavaScript ที่สร้างขึ้นเพื่อ ตัดทอนเนื้อหาแบบไดนามิก.

ข้อเท็จจริงที่น่าสนใจเกี่ยวกับปลั๊กอินนี้คือมันถูกสร้างขึ้นโดย Dollar Shave Club ทีมที่สร้างโฆษณาที่สนุกที่สุดเท่าที่ฉันเคยเห็นมา ฉันไม่ทราบว่าทีมของพวกเขามีหน้า GitHub แต่เต็มไปด้วย repos ทั้งแบบดั้งเดิมและแบบแยก.

ปลั๊กอินนี้โดยเฉพาะนั้นค่อนข้างใหม่และมีดาวมากกว่า 800+ แล้ว มันไม่ขึ้นต่อกันดังนั้น สามารถรันบน JavaScript ธรรมดาโดยไม่คำนึงถึงเบราว์เซอร์หรือไลบรารีอื่น ๆ ที่รวมอยู่.

การตั้งรหัสก็ค่อนข้างง่ายด้วย โกน() ฟังก์ชันใช้พารามิเตอร์สองตัวเท่านั้น: ตัวเลือกองค์ประกอบ และ ความสูงสูงสุด สำหรับองค์ประกอบนั้น นี่เป็นตัวอย่างพื้นฐานมาก:

 maxheight = 320; โกน ('. elemclass', maxheight); 

ตามธรรมชาติมี พารามิเตอร์เพิ่มเติมที่คุณสามารถส่งผ่านสำหรับอักขระที่กำหนดเอง หลังจากข้อความที่ถูกตัดทอนหรือ ตัวเลือกหลายตัวที่คุณต้องการใช้เอฟเฟกต์การโกน.

คุณสามารถดูการสาธิตสดได้ที่ไซต์ปลั๊กอินของ Shave และพวกเขาก็มีการสาธิต CodePen ที่ดีเช่นกัน.

Shave ถูกสร้างขึ้นเพื่อ ทำงานกับ jQuery หรือ Zepto หากคุณต้องการห้องสมุดเหล่านี้ แต่เนื่องจากมันยัง วิ่งบนวานิลลา JS เป็นหนึ่งในปลั๊กอินที่ง่ายที่สุดในการวางในไซต์ของคุณและเริ่มใช้งาน.

มีสถานการณ์ไม่มากเกินไปที่คุณต้องการตัดทอนข้อความ แต่เมื่อคุณทำมันจะง่ายกว่าการใช้ปลั๊กอินเช่น Shave มากกว่าเขียนโค้ดทั้งหมดด้วยตัวคุณเอง.

ในการเริ่มต้นให้ดาวน์โหลดสำเนาจาก repo GitHub หรือดึงจาก repo เช่น npm คุณจะพบแนวทางและเอกสารประกอบใน repo ของ GitHub เพื่อให้คุณสามารถคัดลอกวางและโกนหนวดได้อย่างแท้จริง!