Создание онлайн читалки книг на САЙТЕ. Может комуто будет полезна эта статья
1. Создание структуры проекта
Сначала создайте папку для вашего проекта. Назовите её, например, online-library. Внутри этой папки создайте следующие файлы:
/online-library
├── index.html # Главная страница сайта
├── styles.css # Стили для сайта
├── app.js # JavaScript-код
└── /books # Папка для файлов книг
└── sample.epub # Пример книги (скачайте EPUB-файл)
2. Шаг за шагом
Шаг 1: Создайте файл index.html
Это главная страница вашего сайта. Откройте текстовый редактор (например, Notepad или VS Code) и создайте файл index.html. Вставьте туда следующий код:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Онлайн библиотека</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Добро пожаловать в онлайн-библиотеку!</h1>
<div id="book-reader"></div>
<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Шаг 2: Создайте файл styles.css
Этот файл отвечает за внешний вид сайта. Создайте файл styles.css и вставьте туда следующий код:
css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
h1 {
text-align: center;
margin-top: 20px;
}
#book-reader {
width: 90%;
height: 500px;
margin: 20px auto;
border: 1px solid #ccc;
background-color: #fff;
overflow-y: auto;
}
Шаг 3: Создайте файл app.js
Этот файл содержит JavaScript-код для чтения книг. Создайте файл app.js и вставьте туда следующий код:
javascript
document.addEventListener('DOMContentLoaded', () => {
const bookUrl = 'books/sample.epub'; // Укажите путь к вашей книге
const bookContainer = document.getElementById('book-reader');
if (!bookContainer) {
console.error('Контейнер для книги не найден!');
return;
}
const book = ePub(bookUrl);
const rendition = book.renderTo(bookContainer, {
width: '100%',
height: '100%',
});
rendition.display(); // Отображаем первую страницу
// Добавляем кнопки для перелистывания страниц
const prevButton = document.createElement('button');
prevButton.textContent = 'Назад';
prevButton.onclick = () => rendition.prev();
const nextButton = document.createElement('button');
nextButton.textContent = 'Вперёд';
nextButton.onclick = () => rendition.next();
bookContainer.appendChild(prevButton);
bookContainer.appendChild(nextButton);
});
Шаг 4: Добавьте файлы книг
Создайте папку books внутри вашей папки проекта. Скачайте или создайте файл книги в формате EPUB (например, sample.epub) и поместите его в эту папку.
3. Запуск проекта
Теперь, когда все файлы готовы, можно запустить сайт.
Шаг 1: Установите локальный сервер
Для работы с файлами книг нужен локальный сервер. Вы можете использовать простой сервер, например, Live Server в VS Code или команду:
bash
Копировать
1
npx serve
Если у вас нет Node.js, скачайте и установите его с официального сайта .
Шаг 2: Откройте сайт в браузере
Запустите сервер и откройте сайт в браузере. Вы должны увидеть заголовок "Добро пожаловать в онлайн-библиотеку!" и область для чтения книги. Если всё сделано правильно, книга должна открыться, и вы сможете перелистывать страницы с помощью кнопок "Назад" и "Вперёд".
4. Что делать, если что-то не работает?
Проверьте пути к файлам : Убедитесь, что путь к книге (books/sample.epub) указан правильно.
Проверьте консоль браузера : Откройте инструменты разработчика (F12) и посмотрите, есть ли ошибки.
Убедитесь, что сервер запущен : Файлы книг могут не загружаться без локального сервера.
Добавим дополнительные улучшения в проект: настройки чтения , поддержку других форматов (TXT, FB2) и адаптивный дизайн для мобильных устройств . Я объясню всё пошагово, чтобы вы могли легко добавить эти функции.
1. Добавление настроек чтения
Настройки чтения позволят пользователям менять размер шрифта и цвет фона.
Шаг 1: Обновите index.html
Добавьте элементы управления (кнопки и ползунки) для настроек чтения. Обновите файл index.html, добавив следующий код:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Онлайн библиотека</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Добро пожаловать в онлайн-библиотеку!</h1>
<!-- Настройки чтения -->
<div id="settings">
<label>
Размер шрифта:
<input type="range" id="font-size" min="12" max="32" value="16">
</label>
<label>
Цвет фона:
<select id="background-color">
<option value="white">Светлый</option>
<option value="black">Тёмный</option>
</select>
</label>
</div>
<div id="book-reader"></div>
<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Шаг 2: Обновите styles.css
Добавьте стили для настроек чтения и адаптивного дизайна:
css
/* Настройки чтения */
#settings {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
#settings label {
font-size: 14px;
}
/* Адаптивный дизайн */
@Media (max-width: 768px) {
#settings {
flex-direction: column;
align-items: center;
}
#book-reader {
width: 100%;
height: auto;
}
}
Шаг 3: Обновите app.js
Добавьте обработчики для изменения размера шрифта и цвета фона. Обновите файл app.js:
javascript
document.addEventListener('DOMContentLoaded', () => {
const bookUrl = 'books/sample.epub'; // Укажите путь к вашей книге
const bookContainer = document.getElementById('book-reader');
if (!bookContainer) {
console.error('Контейнер для книги не найден!');
return;
}
const book = ePub(bookUrl);
const rendition = book.renderTo(bookContainer, {
width: '100%',
height: '500px',
});
rendition.display(); // Отображаем первую страницу
// Настройки чтения
const fontSizeInput = document.getElementById('font-size');
const backgroundColorSelect = document.getElementById('background-color');
fontSizeInput.addEventListener('input', (event) => {
const size = event.target.value + 'px';
bookContainer.style.fontSize = size;
});
backgroundColorSelect.addEventListener('change', (event) => {
const color = event.target.value;
bookContainer.style.backgroundColor = color;
// Меняем цвет текста для контраста
bookContainer.style.color = color === 'black' ? 'white' : 'black';
});
// Кнопки перелистывания страниц
const prevButton = document.createElement('button');
prevButton.textContent = 'Назад';
prevButton.onclick = () => rendition.prev();
const nextButton = document.createElement('button');
nextButton.textContent = 'Вперёд';
nextButton.onclick = () => rendition.next();
bookContainer.appendChild(prevButton);
bookContainer.appendChild(nextButton);
});
2. Поддержка других форматов (TXT, FB2)
Шаг 1: Установите библиотеку для FB2
Для работы с FB2 используйте библиотеку fb2-reader. Установите её через npm:
bash
Копировать
1
npm install fb2-reader
Если у вас нет Node.js, скачайте библиотеку напрямую из CDN:
html
<script src="https://cdn.jsdelivr.net/npm/fb2-reader/dist/fb2-reader.min.js"></script>
Шаг 2: Обновите app.js
Добавьте поддержку TXT и FB2. Обновите файл app.js:
javascript
function loadBook(fileUrl) {
const extension = fileUrl.split('.').pop().toLowerCase();
const bookContainer = document.getElementById('book-reader');
if (extension === 'txt') {
fetch(fileUrl)
.then(response => response.text())
.then(text => {
bookContainer.innerHTML = `<pre>${text}</pre>`;
});
} else if (extension === 'fb2') {
fetch(fileUrl)
.then(response => response.text())
.then(fb2Text => {
const parsedContent = FB2Reader.parse(fb2Text);
bookContainer.innerHTML = parsedContent.body;
});
} else if (extension === 'epub') {
const book = ePub(fileUrl);
const rendition = book.renderTo(bookContainer, {
width: '100%',
height: '500px',
});
rendition.display();
}
}
// Пример загрузки книги
const bookUrl = 'books/sample.fb2'; // Укажите путь к вашей книге
loadBook(bookUrl);
3. Адаптивный дизайн для мобильных устройств
Адаптивный дизайн уже частично реализован в CSS. Если хотите улучшить его, добавьте медиа-запросы для разных экранов:
css
/* Для маленьких экранов */
@media (max-width: 480px) {
h1 {
font-size: 20px;
}
#book-reader {
height: auto;
padding: 10px;
}
}
4. Тестирование
Запустите локальный сервер:
bash
npx serve
Откройте сайт в браузере.
Проверьте:
Настройки чтения (размер шрифта, цвет фона).
Чтение книг в форматах TXT, FB2 и EPUB.
Адаптивность на мобильных устройствах.
5. Что делать, если что-то не работает?
Проверьте пути к файлам : Убедитесь, что все файлы (HTML, CSS, JS, книги) находятся в правильных папках.
Проверьте консоль браузера : Откройте инструменты разработчика (F12) и посмотрите, есть ли ошибки.
Убедитесь, что сервер запущен : Файлы книг могут не загружаться без локального сервера.
Заключение
Теперь ваш сайт поддерживает:
Настройки чтения : Размер шрифта и цвет фона.
Форматы книг : TXT, FB2 и EPUB.
Адаптивный дизайн : Для мобильных устройств.
