Δυναμικό κούτσουρο κείμενο με πρόσθετο Shave.js

Τα περισσότερα blogs του WordPress χρησιμοποιούν τη λειτουργία "διαβάστε περισσότερα" για να εμφανίζουν κείμενο προεπισκόπησης από μια ανάρτηση. Αυτό το κείμενο είναι περικομμένο και αποκοπεί σε ένα συγκεκριμένο σημείο για να εξοικονομήσει χώρο και να ενθαρρύνετε τους αναγνώστες να κάνουν πιο κλικ για να συνεχίσουν να διαβάζουν.

Αλλά μερικές φορές θα θελήσετε να προσθέσετε αυτό το χαρακτηριστικό σε μια σελίδα. Εισαγάγετε το Shave.js, το plugin JavaScript που δημιουργήθηκε για δυναμικά περικοπές περιεχομένου.

Ένα δροσερό γεγονός για αυτό το plugin είναι ότι δημιουργήθηκε από το Dollar Shave Club, την ομάδα που έκανε μία από τις πιο αστείες διαφημίσεις που έχω δει ποτέ. Δεν ήξερα ότι η ομάδα τους είχε ακόμη και μια σελίδα GitHub αλλά είναι γεμάτη repos τόσο πρωτότυπα όσο και διχαλωτά.

Αυτό το συγκεκριμένο πρόσθετο είναι αρκετά νέο και έχει ήδη 800+ αστέρια. Είναι χωρίς εξάρτηση μπορεί να τρέξει σε απλό JavaScript ανεξάρτητα από το πρόγραμμα περιήγησης ή άλλες βιβλιοθήκες που περιλαμβάνονται.

Η ρύθμιση κώδικα είναι επίσης αρκετά απλή με το ξύρισμα() λειτουργία μόνο λαμβάνοντας δύο παραμέτρους: an επιλογέα στοιχείων και ένα μέγιστο ύψος για αυτό το στοιχείο. Εδώ είναι ένα πολύ βασικό παράδειγμα:

 maxheight = 320; ξυρίστε ('. elemclass', maxheight); 

Φυσικά υπάρχουν επιπλέον παραμέτρους που μπορείτε να περάσετε για προσαρμοσμένους χαρακτήρες μετά το περικομμένο κείμενο, ή πολλαπλούς επιλογείς όπου θέλετε να εφαρμόσετε το αποτέλεσμα ξυρίσματος.

Μπορείτε να δείτε πραγματικά μια ζωντανή επίδειξη στο site plugin Shave και έχουν ένα ωραίο demo CodePen πάρα πολύ.

Το ξύρισμα είναι κατασκευασμένο για εργασία στο jQuery ή το Zepto αν προτιμάτε κάποια από αυτές τις βιβλιοθήκες. Αλλά δεδομένου ότι επίσης τρέχει με βανίλια JS είναι ένα από τα ευκολότερα plugins να πέσει στον ιστότοπό σας και να αρχίσει να χρησιμοποιεί.

Δεν υπάρχουν πάρα πολλά σενάρια όπου θα θέλετε να περικόψετε το κείμενο, αλλά όταν το κάνετε είναι πολύ πιο εύκολο να χρησιμοποιήσετε ένα plugin όπως το ξυρίσματος παρά να γράψετε τον ίδιο τον κώδικα.

Για να ξεκινήσετε, κατεβάστε ένα αντίγραφο από το repo της GitHub ή τραβήξτε από ένα repo όπως npm. Θα βρείτε επίσης οδηγίες και τεκμηρίωση σχετικά με το GitHub repo έτσι ώστε να μπορείτε κυριολεκτικά να αντιγράψετε, επικολλήσετε και να πάρει το ξύρισμα!