20 KiB
🚀 Быстрое руководство: 🖥️Демо / 📝Документация / 🍀Мой блог
📖 README: 简体中文 | 繁體中文 | English | 日本語 | Русский
⚡ Генерация статического сайта: Сверхбыстрая загрузка и SEO-оптимизация на основе Astro
🎨 Современный дизайн: Чистый и красивый интерфейс с настраиваемыми цветами темы
📱 Мобильная адаптация: Идеальный адаптивный опыт с оптимизацией для мобильных устройств
🔧 Высокая настраиваемость: Большинство функций можно настроить через конфигурационные файлы
Tip
В важных макетах Firefly инновационно добавляет двойные боковые панели, сеточный макет статей (многоколонный), макет Masonry,
Включает статистику сайта, календарный компонент, оглавление статей и другие виджеты для обогащения боковой панели,
При этом сохраняется система макетов fuwari, свободно переключаемая в конфигурационном файле.
Подробнее о настройках макета и демонстрациях см.: Детали системы макетов Firefly
✨ Возможности
Основные функции
- Astro + Tailwind CSS - Сверхбыстрая генерация статических сайтов на основе современного технологического стека
- Плавная анимация - Анимация переходов между страницами Swup для шелковисто-плавного просмотра
- Адаптивный дизайн - Идеальная адаптация для настольных компьютеров, планшетов и мобильных устройств
- Многоязычная поддержка - Интернационализация i18n, поддержка упрощенного китайского, традиционного китайского, английского, японского, русского
- Полнотекстовый поиск - Клиентский поиск на основе Pagefind, поддержка индексации содержимого статей. Также поддержка поисковой системы MeiliSearch
Персонализация
- Боковая панель - Поддержка одиночной и двойной боковой панели, свободное переключение на фронтенде
- Макет статей - Поддержка списка (один столбец) и сетки (многоколонный/Masonry), свободное переключение на фронтенде
- Управление шрифтами - Поддержка пользовательских шрифтов с богатым выбором шрифтов
- Настройка подвала - Внедрение HTML-контента, полная настраиваемость
- Настройка навигации - Логотип, заголовок, ссылки полностью настраиваются
- Переключение режимов обоев - Баннерные обои, полноэкранные обои, однотонный фон, свободное переключение на фронтенде
- Настройка цвета темы - Регулировка оттенка на 360°, поддержка светлого/темного/системного режимов, свободное переключение на фронтенде
Компоненты страницы
- Гостевая книга - Поддержка страницы гостевой книги с интегрированной системой комментариев
- Панель объявлений - Верхнее уведомление с объявлениями, поддержка закрытия и пользовательских стилей
- Маскот - Поддержка двух анимационных движков: Spine и Live2D
- Статистика сайта - Отображение количества статей, категорий, тегов, общего количества слов, времени работы, времени последнего обновления
- Календарь сайта - Отображение календаря текущего месяца и опубликованных статей за месяц
- Страница спонсоров - Несколько способов оплаты, QR-коды для платежей, список спонсоров, кнопка спонсорства в статьях
- Постер для публикации - Поддержка создания красивых постеров для публикации статей, содержащих краткое содержание статьи, QR-код и т.д.
- Эффект сакуры - Поддержка эффекта сакуры, полноэкранная анимация сакуры
- Дружественные ссылки - Красивые карточки отображения дружественных ссылок
- Рекламный компонент - Поддержка пользовательского рекламного контента на боковой панели
- Bangumi - Отображение отслеживания аниме и игр на основе Bangumi API
- Система комментариев - Интеграция систем комментариев Twikoo, Waline, Giscus, Disqus, Artalk
- Счетчик посещений - Поддержка вызова встроенного отслеживания посещений Waline, Twikoo
- Музыкальный плеер - На основе APlayer, поддержка локальной музыки и онлайн-музыки через Meting API
Улучшение контента
- Лайтбокс изображений - Функция предварительного просмотра изображений Fancybox
- Плавающее оглавление - Динамическое отображение оглавления статьи, поддержка якорных переходов, показывается при скрытии оглавления боковой панели
- Защита электронной почты - Предотвращает сбор адресов электронной почты автоматическими сканерами во избежание спама
- Оглавление боковой панели - Динамическое отображение оглавления статьи, поддержка якорных переходов
- Улучшенные блоки кода - На основе Expressive Code, поддержка сворачивания кода, номеров строк, идентификации языка
- Поддержка математических формул - Движок рендеринга KaTeX, поддержка встроенных и блочных формул
- Расширения Markdown - Расширенные возможности Markdown, также включает Admonitions, карточки репозиториев GitHub, Expressive Code
- Случайные обложки статей - Поддержка получения случайных обложек через API
SEO
- SEO-оптимизация - Полные мета-теги и структурированные данные
- RSS-лента - Автоматическая генерация RSS-ленты
- Карта сайта - Автоматическая генерация XML-карты сайта с настройкой фильтрации страниц
📝 Планы...
- Рефакторинг маскота Live2D
- Непрерывная оптимизация плавности анимации
- Больше функций в разработке...
Если у вас есть полезные функции и оптимизации, пожалуйста, отправьте Pull Request
🚀 Быстрый старт
Требования
- Node.js ≤ 22
- pnpm ≤ 9
Локальная разработка
-
Клонировать репозиторий:
git clone https://github.com/Cuteleaf/Firefly.git cd FireflyСначала создайте Fork в свой репозиторий, затем клонируйте (рекомендуется)
git clone https://github.com/you-github-name/Firefly.git cd Firefly -
Установить зависимости:
# Установите pnpm, если еще не установлен npm install -g pnpm # Установить зависимости проекта pnpm install -
Настроить блог:
- Отредактируйте конфигурационные файлы в каталоге
src/config/для настройки блога
- Отредактируйте конфигурационные файлы в каталоге
-
Запустить сервер разработки:
pnpm devБлог будет доступен по адресу
http://localhost:4321
Развертывание на платформе хостинга
-
См. официальное руководство для развертывания блога на Vercel, Netlify, GitHub Pages, Cloudflare Pages, EdgeOne Pages и т.д.
Пресет фреймворка:
AstroКорневой каталог:
./Каталог вывода:
distКоманда сборки:
pnpm run buildКоманда установки:
pnpm install
📖 Настройка
📚 Подробная документация по настройке: См. документацию Firefly для полного руководства по настройке
Установка языка сайта
Чтобы установить язык по умолчанию для вашего блога, отредактируйте файл src/config/siteConfig.ts:
// Определить язык сайта
const SITE_LANG = "zh_CN";
Поддерживаемые коды языков:
zh_CN- Упрощенный китайскийzh_TW- Традиционный китайскийen- Английскийja- Японскийru- Русский
Структура конфигурационных файлов
src/
├── config/
│ ├── index.ts # Индексный файл конфигурации
│ ├── siteConfig.ts # Базовая конфигурация сайта
│ ├── backgroundWallpaper.ts # Конфигурация фоновых обоев
│ ├── profileConfig.ts # Конфигурация профиля пользователя
│ ├── commentConfig.ts # Конфигурация системы комментариев
│ ├── announcementConfig.ts # Конфигурация объявлений
│ ├── licenseConfig.ts # Конфигурация лицензии
│ ├── footerConfig.ts # Конфигурация подвала
│ ├── FooterConfig.html # HTML-контент подвала
│ ├── expressiveCodeConfig.ts # Конфигурация подсветки кода
│ ├── sakuraConfig.ts # Конфигурация эффекта сакуры
│ ├── fontConfig.ts # Конфигурация шрифтов
│ ├── sidebarConfig.ts # Конфигурация макета боковой панели
│ ├── navBarConfig.ts # Конфигурация навигационной панели
│ ├── musicConfig.ts # Конфигурация музыкального плеера
│ ├── pioConfig.ts # Конфигурация маскота
│ ├── adConfig.ts # Конфигурация рекламы
│ ├── friendsConfig.ts # Конфигурация дружественных ссылок
│ ├── sponsorConfig.ts # Конфигурация спонсоров
│ └── coverImageConfig.ts # Конфигурация обложек статей
⚙️ Frontmatter статьи
---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg # Или используйте "api" для включения случайных обложек
tags: [Foo, Bar]
category: Front-end
draft: false
lang: zh-CN # Устанавливайте только если язык статьи отличается от языка сайта в `siteConfig.ts`
---
🧞 Команды
Все команды должны выполняться в корневом каталоге проекта:
| Команда | Действие |
|---|---|
pnpm install |
Установить зависимости |
pnpm dev |
Запустить локальный сервер разработки на localhost:4321 |
pnpm build |
Собрать сайт в ./dist/ |
pnpm preview |
Локальный предварительный просмотр собранного сайта |
pnpm check |
Проверить код на наличие ошибок |
pnpm format |
Отформатировать код с помощью Biome |
pnpm new-post <filename> |
Создать новую статью |
pnpm astro ... |
Выполнить astro add, astro check и другие команды |
pnpm astro --help |
Показать справку Astro CLI |
🙏 Благодарности
- Особая благодарность saicaca за разработку шаблона Fuwari, на котором основан Firefly
- Использованы решения Bangumi Collection Display и Email Protection/Image Title, которыми поделился блогер Kasuha
- За основу взяты решения Mizuki для заголовка баннера, многоуровневой панели навигации меню, эффекта сакуры, KaTeX и Fancybox
- Построено с использованием Astro и Tailwind CSS
- Использует музыкальный плеер MetingJS и APlayer
- Использует модель маскота в стиле Чиби
Fireflyspine, предоставленную создателем Bilibili 公公的日常 - Иконки от Iconify
- Авторские права на изображения Firefly принадлежат компании miHoYo, разработчику игры "Honkai: Star Rail".
📝 Лицензия
Этот проект распространяется под лицензией MIT license, подробности см. в файле LICENSE.
Уведомление об авторских правах:
В соответствии с лицензией MIT вы можете свободно использовать, изменять и распространять код, но обязаны сохранять вышеуказанное уведомление об авторских правах.
🍀 Участники
Спасибо следующим участникам за их вклад в этот проект. Если у вас есть вопросы или предложения, пожалуйста, отправьте Issue или Pull Request.