Початок роботи
Існує кілька способів інтегрувати Readmore.js у ваш проєкт. Оберіть той, що найбільше відповідає вашим потребам.
Підключення через NPM
Це зручний варіант для більших проєктів, де використовується npm. Використання NPM також дозволяє вам легко оновлювати бібліотеку та керувати залежностями вашого проєкту, а також інтегрувати її в більші системи на базі JavaScript, такі як React або Vue.js.
— У командному рядку виконайте:
$ npm i @corgras/readmore-js
— Після встановлення ви можете імпортувати функцію initReadMore
у вашому JavaScript файлі.
import { initReadMore } from '@corgras/readmore-js';
// Решта коду
— Потім ви можете викликати initReadMore
з необхідними параметрами.
Ручне підключення
Цей спосіб дозволяє додати файл безпосередньо до вашого HTML-коду. Просто завантажте скрипт, збережіть його у папці вашого проєкту та підключіть до документа. Таке підключення дає вам повний контроль над версією скрипта, яку ви використовуєте.
— Завантажте файли скрипта Readmore.js з GitHub
— Після завантаження файлу в певну папку на сайті, потрібно підключити його до HTML-сторінки. Вставте наведений нижче код у секцію <head>
або перед закриттям тегу </body>
на вашій HTML-сторінці:
<script src="шлях_до_вашої_папки/readmore.min.js" defer></script>
У тегу <script>
використовується атрибут defer
. Скрипт буде виконано після завантаження HTML, але перед подією DOMContentLoaded
.
— Після підключення вам потрібно ініціалізувати скрипт, щоб він почав працювати з обраними елементами на вашій сторінці.
Підключення через CDN
Скрипт можна підключити з віддаленого сервера, що значно прискорить завантаження вашого сайту та позбавляє необхідності зберігати його локально. Використання CDN забезпечує доступ до кешованих версій скрипта з різних куточків світу. Ви можете скористатися одним із популярних сервісів CDN, таких як jsDelivr або Unpkg.
— Для підключення, вставте один із наведених нижче рядків коду в секцію <head>
або перед закриттям тега </body>
на вашій HTML-сторінці:
CDN jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/@corgras/readmore-js@1.0.0/readmore.min.js" defer></script>
CDN Unpkg:
<script src="https://unpkg.com/@corgras/readmore-js@1.0.0/readmore.min.js" defer></script>
У тегу <script>
використовується атрибут defer
. Скрипт буде виконано після завантаження HTML, але перед подією DOMContentLoaded
.
— Після підключення вам потрібно ініціалізувати скрипт, щоб він почав працювати з обраними елементами на вашій сторінці.