Початок роботи

Readmore.js можна інтегрувати у ваш проєкт кількома способами. Оберіть той, що найкраще відповідає вашим потребам, залежно від типу проєкту та інструментів, які ви використовуєте.

За допомогою NPM Node.js / CommonJS ES-модуль Ручне підключення За допомогою CDN

Встановлення через 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, що підвищує продуктивність.

Використання в Node.js / CommonJS

Для проєктів, що використовують CommonJS (наприклад, у Node.js або з інструментами типу Webpack), ви можете імпортувати основну функцію Readmore.js після встановлення через NPM.

— Додайте наступний код у ваш JavaScript-файл:


					const initReadMore = require('@corgras/readmore-js');
					// Ініціалізація: initReadMore('.selector', { /* опції */ });

Використання як ES-модуль

Для сучасних проєктів, що використовують ES-модулі (наприклад, з Vite, Rollup або сучасними версіями Webpack), імпортуйте Readmore.js як модуль після встановлення через NPM.

— Додайте наступний код у ваш JavaScript-файл:


					import initReadMore from '@corgras/readmore-js';
					// Ініціалізація: initReadMore('.selector', { /* опції */ });

— Приклад підключення з типом модуля:


					<script type="module">
						import initReadMore from './node_modules/@corgras/readmore-js/readmore.min.js';
						initReadMore('.content', { collapsedHeight: 200 });
					</script>

Важливо

Переконайтеся, що ваш HTML-файл містить атрибут type="module" у тегу <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>

— Після підключення ініціалізуйте скрипт, як описано в розділі ініціалізації.