Початок роботи
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>
Без зазначення версії завантажиться найновіша.
— Після підключення ініціалізуйте скрипт, як описано в розділі ініціалізації.