Динамический усеченный текст с плагином Shave.js

Большинство блогов WordPress используют функцию «читать дальше», чтобы показать предварительный просмотр текста поста. Этот текст обрезан и обрезан в определенной точке, чтобы сэкономить место и поощрить читателей нажимать дальше, чтобы продолжить чтение.

Но иногда вы захотите добавить эту функцию на одну страницу. Войти Shave.jsJavaScript-плагин для динамического усечения контента.
домашняя страница плагина бритья

Читайте также: улучшите результаты поиска с помощью Rich Snippets & Schema.org Vocabulary

Интересным фактом об этом плагине является то, что он создан Dollar Shave Club, команда, которая сделала один из самые смешные объявления Я когда-либо видел. Я не знал, что у их команды даже была страница GitHub, но это полный репо как оригинальный, так и раздвоенный.

Этот конкретный плагин является довольно новым и уже имеет более 800 звезд. Он не зависит от зависимостей, поэтому может работать на обычном JavaScript независимо от браузера или других включенных библиотек.

Настройка кода также довольно проста: функция shave () принимает только два параметра: селектор элемента и максимальную высоту для этого элемента. Вот очень простой пример:

максимальная высота = 320;

    бритье (‘. elemclass’, maxheight);

Естественно, есть дополнительные параметры, которые вы можете передать для пользовательских символов после усеченного текста, или несколько селекторов, где вы хотите применить эффект бритья.

Вы можете увидеть живую демонстрацию на Сайт плагинов Shave и у них есть хороший CodePen демо тоже.
усеченный текстовый плагинShave создан для работы на jQuery или Zepto, если вы предпочитаете любую из этих библиотек. Но так как он также работает на vanilla JS, это один из самых простых плагинов, чтобы зайти на ваш сайт и начать использовать.

Существует не так уж много сценариев, в которых вы хотите обрезать текст, но когда вы делаете это, гораздо проще использовать такой плагин, как Бритье чем написать весь код самостоятельно.

Для начала загрузите копию с GitHub репо или вытащить из репо, как нпм. Вы также найдете рекомендации и документацию по репозиторию GitHub, так что вы можете буквально просто копировать, вставлять и брить!

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *