Начало работы
Readmore.js можно интегрировать в ваш проект несколькими способами. Выберите тот, который лучше всего соответствует вашим потребностям, в зависимости от типа проекта и используемых инструментов.
Установка через NPM
Этот способ идеально подходит для проектов, использующих менеджер пакетов npm. Установка через NPM упрощает управление зависимостями, обновление библиотеки и интеграцию с современными JavaScript-фреймворками, такими как React, Vue.js или Angular.
— Выполните следующую команду в терминале:
$ npm i @corgras/readmore-js
— После установки подключите скрипт в вашем проекте. Например, добавьте его в HTML-файл:
<script src="./node_modules/@corgras/readmore-js/readmore.min.js" defer></script>
Атрибут defer обеспечивает выполнение скрипта после полной загрузки DOM, что повышает производительность.
— Если вы используете модульную систему, импортируйте библиотеку в вашем JavaScript-коде (см. разделы ниже).
Использование в Node.js / CommonJS
Для проектов, использующих CommonJS (например, в Node.js или с инструментами типа Webpack), вы можете импортировать основную функцию Readmore.js после установки через NPM.
— Добавьте следующий код в ваш JavaScript-файл:
const initReadMore = require('@corgras/readmore-js');
// Инициализация: initReadMore('.selector', { /* опции */ });
Убедитесь, что ваш проект настроен для работы с CommonJS-модулями.
Использование как ES-модуль
Для современных проектов, использующих ES-модули (например, с Vite, Rollup или современными версиями Webpack), импортируйте Readmore.js как модуль после установки через NPM.
— Добавьте следующий код в ваш JavaScript-файл:
import initReadMore from '@corgras/readmore-js';
// Инициализация: initReadMore('.selector', { /* опции */ });
Убедитесь, что ваш HTML-файл содержит атрибут type="module" в теге <script>, если вы подключаете скрипт напрямую.
— Пример подключения с типом модуля:
<script type="module">
import initReadMore from './node_modules/@corgras/readmore-js/readmore.min.js';
initReadMore('.content', { collapsedHeight: 200 });
</script>
Ручное подключение
Если вы не используете менеджеры пакетов, можно подключить Readmore.js, загрузив файл скрипта вручную. Этот способ дает полный контроль над версией библиотеки и не зависит от внешних инструментов.
— Загрузите последнюю версию readmore.min.js с официального репозитория на GitHub.
— Разместите загруженный файл в папке вашего проекта (например, /js/).
— Подключите скрипт к вашему HTML-файлу, добавив следующий код в секцию <head> или перед закрывающим тегом </body>:
<script src="путь_к_вашей_папке/readmore.min.js" defer></script>
Атрибут defer гарантирует, что скрипт выполнится после загрузки DOM, избегая блокировки рендеринга страницы.
— После подключения инициализируйте скрипт, вызвав функцию initReadMore. Подробнее об инициализации читайте в разделе инициализации.
Подключение через CDN
Использование CDN (Content Delivery Network) позволяет быстро подключить Readmore.js без локального сохранения файлов. CDN обеспечивает высокую скорость загрузки благодаря кешированию и глобальной сети серверов.
— Добавьте один из приведенных ниже скриптов в секцию <head> или перед закрывающим тегом </body>:
CDN jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/@corgras/readmore-js/readmore.min.js" defer></script>
CDN Unpkg:
<script src="https://unpkg.com/@corgras/readmore-js/readmore.min.js" defer></script>
Без указания версии загрузится самая новая.
— После подключения инициализируйте скрипт, как описано в разделе инициализации.