1. Создание структуры проекта
Сначала создайте папку для вашего проекта. Назовите её, например, online-library. Внутри этой папки создайте следующие файлы:
├── index.html # Главная страница сайта
├── styles.css # Стили для сайта
├── app.js # JavaScript-код
└── /books # Папка для файлов книг
└── sample.epub # Пример книги (скачайте EPUB-файл)
2. Шаг за шагом
Шаг 1: Создайте файл index.html
Это главная страница вашего сайта. Откройте текстовый редактор (например, Notepad или VS Code) и создайте файл index.html. Вставьте туда следующий код:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Онлайн библиотека</title>
<link rel="stylesheet" href="styles.css">
<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>
Шаг 2: Создайте файл styles.css
Этот файл отвечает за внешний вид сайта. Создайте файл styles.css и вставьте туда следующий код:
font-family: Arial, sans-serif;
background-color: #f4f4f4;
Шаг 3: Создайте файл app.js
Этот файл содержит JavaScript-код для чтения книг. Создайте файл app.js и вставьте туда следующий код:
document.addEventListener('DOMContentLoaded', () => {
const bookUrl = 'books/sample.epub'; // Укажите путь к вашей книге
const bookContainer = document.getElementById('book-reader');
console.error('Контейнер для книги не найден!');
const book = ePub(bookUrl);
const rendition = book.renderTo(bookContainer, {
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 или команду:
Если у вас нет Node.js, скачайте и установите его с официального сайта .
Шаг 2: Откройте сайт в браузере
Запустите сервер и откройте сайт в браузере. Вы должны увидеть заголовок "Добро пожаловать в онлайн-библиотеку!" и область для чтения книги. Если всё сделано правильно, книга должна открыться, и вы сможете перелистывать страницы с помощью кнопок "Назад" и "Вперёд".
4. Что делать, если что-то не работает?
Проверьте пути к файлам : Убедитесь, что путь к книге (books/sample.epub) указан правильно.
Проверьте консоль браузера : Откройте инструменты разработчика (F12) и посмотрите, есть ли ошибки.
Убедитесь, что сервер запущен : Файлы книг могут не загружаться без локального сервера.
Добавим дополнительные улучшения в проект: настройки чтения , поддержку других форматов (TXT, FB2) и адаптивный дизайн для мобильных устройств . Я объясню всё пошагово, чтобы вы могли легко добавить эти функции.
1. Добавление настроек чтения
Настройки чтения позволят пользователям менять размер шрифта и цвет фона.
Шаг 1: Обновите index.html
Добавьте элементы управления (кнопки и ползунки) для настроек чтения. Обновите файл index.html, добавив следующий код:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Онлайн библиотека</title>
<link rel="stylesheet" href="styles.css">
<h1>Добро пожаловать в онлайн-библиотеку!</h1>
<!-- Настройки чтения -->
<input type="range" id="font-size" min="12" max="32" value="16">
<select id="background-color">
<option value="white">Светлый</option>
<option value="black">Тёмный</option>
<div id="book-reader"></div>
<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
<script src="app.js"></script>
Шаг 2: Обновите styles.css
Добавьте стили для настроек чтения и адаптивного дизайна:
@Media (max-width: 768px) {
Добавьте обработчики для изменения размера шрифта и цвета фона. Обновите файл app.js:
document.addEventListener('DOMContentLoaded', () => {
const bookUrl = 'books/sample.epub'; // Укажите путь к вашей книге
const bookContainer = document.getElementById('book-reader');
console.error('Контейнер для книги не найден!');
const book = ePub(bookUrl);
const rendition = book.renderTo(bookContainer, {
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:
Если у вас нет Node.js, скачайте библиотеку напрямую из CDN:
<script src="https://cdn.jsdelivr.net/npm/fb2-reader/dist/fb2-reader.min.js"></script>
Добавьте поддержку TXT и FB2. Обновите файл app.js:
function loadBook(fileUrl) {
const extension = fileUrl.split('.').pop().toLowerCase();
const bookContainer = document.getElementById('book-reader');
if (extension === 'txt') {
.then(response => response.text())
bookContainer.innerHTML = `<pre>${text}</pre>`;
} else if (extension === 'fb2') {
.then(response => response.text())
const parsedContent = FB2Reader.parse(fb2Text);
bookContainer.innerHTML = parsedContent.body;
} else if (extension === 'epub') {
const book = ePub(fileUrl);
const rendition = book.renderTo(bookContainer, {
const bookUrl = 'books/sample.fb2'; // Укажите путь к вашей книге
3. Адаптивный дизайн для мобильных устройств
Адаптивный дизайн уже частично реализован в CSS. Если хотите улучшить его, добавьте медиа-запросы для разных экранов:
/* Для маленьких экранов */
@media (max-width: 480px) {
4. Тестирование
Запустите локальный сервер:
bash
npx serve
Откройте сайт в браузере.
Проверьте:
Настройки чтения (размер шрифта, цвет фона).
Чтение книг в форматах TXT, FB2 и EPUB.
Адаптивность на мобильных устройствах.
5. Что делать, если что-то не работает?
Проверьте пути к файлам : Убедитесь, что все файлы (HTML, CSS, JS, книги) находятся в правильных папках.
Проверьте консоль браузера : Откройте инструменты разработчика (F12) и посмотрите, есть ли ошибки.
Убедитесь, что сервер запущен : Файлы книг могут не загружаться без локального сервера.
Заключение
Теперь ваш сайт поддерживает:
Настройки чтения : Размер шрифта и цвет фона.
Форматы книг : TXT, FB2 и EPUB.
Адаптивный дизайн : Для мобильных устройств.
