logo
0
0
WeChat Login
feat: 更新项目配置和初始化文件,切换为Astro项目
Firefly

Firefly

Свежая и красивая тема для блога на Astro

Node.js >= 22 pnpm >= 9 Astro TypeScript

Stars Forks Issues

ko-fi

GitHub License Ask DeepWiki Afdian Sponsor


🚀 Быстрое руководство: 🖥️Демо / 📝Документация / 🍀Мой блог

📖 README: 简体中文 | 繁體中文 | English | 日本語 | Русский

⚡ Генерация статического сайта: Сверхбыстрая загрузка и SEO-оптимизация на основе Astro

🎨 Современный дизайн: Чистый и красивый интерфейс с настраиваемыми цветами темы

📱 Мобильная адаптация: Идеальный адаптивный опыт с оптимизацией для мобильных устройств

🔧 Высокая настраиваемость: Большинство функций можно настроить через конфигурационные файлы

firefly

TIP

В важных макетах Firefly инновационно добавляет двойные боковые панели, сеточный макет статей (многоколонный), макет Masonry,

Включает статистику сайта, календарный компонент, оглавление статей и другие виджеты для обогащения боковой панели,

При этом сохраняется система макетов fuwari, свободно переключаемая в конфигурационном файле.

Подробнее о настройках макета и демонстрациях см.: Детали системы макетов Firefly

✨ Возможности

Основные функции

  • Astro + Tailwind CSS - Сверхбыстрая генерация статических сайтов на основе современного технологического стека
  • Плавная анимация - Анимация переходов между страницами Swup для шелковисто-плавного просмотра
  • Адаптивный дизайн - Идеальная адаптация для настольных компьютеров, планшетов и мобильных устройств
  • Многоязычная поддержка - Интернационализация i18n, поддержка упрощенного китайского, традиционного китайского, английского, японского, русского
  • Полнотекстовый поиск - Клиентский поиск на основе Pagefind, поддержка индексации содержимого статей.

Персонализация

  • Боковая панель - Поддержка одиночной и двойной боковой панели
  • Макет статей - Поддержка списка (один столбец) и сетки (многоколонный/Masonry)
  • Управление шрифтами - Поддержка пользовательских шрифтов с богатым выбором шрифтов
  • Настройка подвала - Внедрение HTML-контента, полная настраиваемость
  • Настройка навигации - Логотип, заголовок, ссылки полностью настраиваются
  • Переключение режимов обоев - Баннерные обои, полноэкранные обои, однотонный фон
  • Настройка цвета темы - Регулировка оттенка на 360°, поддержка светлого/темного/системного режимов

Компоненты страницы

  • Гостевая книга - Поддержка страницы гостевой книги с интегрированной системой комментариев
  • Панель объявлений - Уведомление с объявлениями на боковой панели
  • Маскот - Поддержка двух анимационных движков: Spine и Live2D
  • Статистика сайта - Отображение количества статей, категорий, тегов, общего количества слов и других данных
  • Календарь сайта - Отображение календаря текущего месяца и опубликованных статей за месяц
  • Страница спонсоров - Переход по ссылке спонсора, отображение QR-кода оплаты, список спонсоров, кнопка спонсорства в статьях
  • Постер для публикации - Поддержка создания красивых постеров для публикации статей
  • Эффект сакуры - Поддержка эффекта сакуры, полноэкранная анимация сакуры
  • Дружественные ссылки - Красивые карточки отображения дружественных ссылок
  • Рекламный компонент - Поддержка пользовательского рекламного контента на боковой панели
  • Bangumi - Отображение отслеживания аниме и игр на основе Bangumi API
  • Система комментариев - Интеграция систем комментариев Twikoo, Waline, Giscus, Disqus, Artalk
  • Счетчик посещений - Поддержка вызова встроенного отслеживания посещений Waline, Twikoo
  • Музыкальный плеер - На основе APlayer, поддержка локальной музыки и онлайн-музыки через Meting API

Улучшение контента

  • Лайтбокс изображений - Функция предварительного просмотра изображений Fancybox
  • Плавающее оглавление - Динамическое отображение оглавления статьи, поддержка якорных переходов, показывается при скрытии оглавления боковой панели
  • Защита электронной почты - Предотвращает сбор адресов электронной почты автоматическими сканерами во избежание спама
  • Оглавление боковой панели - Динамическое отображение оглавления статьи, поддержка якорных переходов
  • Улучшенные блоки кода - На основе Expressive Code, поддержка сворачивания кода, номеров строк, идентификации языка
  • Поддержка математических формул - Движок рендеринга KaTeX, поддержка встроенных и блочных формул
  • Случайные обложки статей - Поддержка получения случайных обложек через API
  • Расширения Markdown - По умолчанию поддерживает GitHub Flavored Markdown, также включает Admonitions, карточки репозиториев GitHub, Expressive Code

SEO

  • SEO-оптимизация - Полные мета-теги и структурированные данные
  • RSS-лента - Автоматическая генерация RSS-ленты
  • Карта сайта - Автоматическая генерация XML-карты сайта с настройкой фильтрации страниц

📝 Планы...

  • Рефакторинг маскота Live2D
  • Непрерывная оптимизация плавности анимации
  • Больше функций в разработке...

Если у вас есть полезные функции и оптимизации, пожалуйста, отправьте Pull Request

🚀 Быстрый старт

Требования

  • Node.js ≤ 22
  • pnpm ≤ 9

Локальная разработка

  1. Клонировать репозиторий:

    git clone https://github.com/Cuteleaf/Firefly.git cd Firefly

    Сначала создайте Fork в свой репозиторий, затем клонируйте (рекомендуется)

    git clone https://github.com/you-github-name/Firefly.git cd Firefly
  2. Установить зависимости:

    # Установите pnpm, если еще не установлен npm install -g pnpm # Установить зависимости проекта pnpm install
  3. Настроить блог:

    • Отредактируйте конфигурационные файлы в каталоге src/config/ для настройки блога
  4. Запустить сервер разработки:

    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` pinned: false # Закрепить статью comment: true # Включить комментарии ---

🧞 Команды

Все команды должны выполняться в корневом каталоге проекта:

КомандаДействие
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
  • Использует модель маскота в стиле Чиби Firefly spine, предоставленную создателем Bilibili 公公的日常
  • Иконки от Iconify
  • Авторские права на изображения Firefly принадлежат компании miHoYo, разработчику игры "Honkai: Star Rail".

📝 Лицензия

Этот проект распространяется под лицензией MIT license, подробности см. в файле LICENSE.

Уведомление об авторских правах:

В соответствии с лицензией MIT вы можете свободно использовать, изменять и распространять код, но обязаны сохранять вышеуказанное уведомление об авторских правах.

🍀 Участники

Спасибо следующим участникам за их вклад в этот проект. Если у вас есть вопросы или предложения, пожалуйста, отправьте Issue или Pull Request.

Alt

⭐ История звезд

Star History Chart