File size: 22,366 Bytes
96dd062 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 |
<img src="./images/1131.png" width = "350" height = "500" alt="Firefly" align=right />
<div align="center">
# Firefly
> Свежий и красивый шаблон темы блога Astro
>
> 
>
> [](https://github.com/CuteLeaf/Firefly/stargazers)
[](https://github.com/CuteLeaf/Firefly/network/members)
[](https://github.com/CuteLeaf/Firefly/issues)
>
> [](https://ko-fi.com/Z8Z41NQALY)
>
> 
[](https://deepwiki.com/CuteLeaf/Firefly)
[](https://afdian.com/a/cuteleaf)
</div>
---
📖 README:
**[简体中文](../README.zh.md)** | **[繁體中文](README.zh-TW.md)** | **[English](../README.md)** | **[日本語](README.ja.md)** | **[Русский](README.ru.md)**
🚀 Быстрое руководство:
[**🖥️Демо**](https://firefly.cuteleaf.cn/) /
[**📝Документация**](https://docs-firefly.cuteleaf.cn/) /
[**🍀Мой блог**](https://blog.cuteleaf.cn)
⚡ Генерация статического сайта: Сверхбыстрая загрузка и SEO-оптимизация на основе Astro
🎨 Современный дизайн: Чистый и красивый интерфейс с настраиваемыми цветами темы
📱 Мобильная адаптация: Идеальный адаптивный опыт с оптимизацией для мобильных устройств
🔧 Высокая настраиваемость: Большинство функций можно настроить через конфигурационные файлы
<img alt="firefly" src="./images/1.webp" />
<img alt="Lighthouse" src="./images/Lighthouse.png" />
>[!TIP]
>Firefly — это свежая и красивая тема для персонального блога на основе фреймворка Astro и шаблона Fuwari, разработанная для энтузиастов технологий и создателей контента. Эта тема интегрирует современные веб-технологические стеки, предоставляет богатые функциональные модули и высококастомизируемые интерфейсы, позволяя легко создать профессиональный и красивый веб-сайт персонального блога.
>
>В важных макетах Firefly инновационно добавляет двойные боковые панели, сеточный макет статей (многоколонный), макет Masonry, включает статистику сайта, календарный компонент, оглавление статей и другие виджеты для обогащения боковой панели, при этом сохраняется система макетов fuwari, свободно переключаемая в конфигурационном файле.
>
>**Подробнее о настройках макета и демонстрациях см.: [Детали системы макетов Firefly](https://firefly.cuteleaf.cn/posts/firefly-layout-system/)**
>
>Firefly поддерживает переключение языков i18n, но кроме упрощенного китайского, другие языки переведены с помощью ИИ. Если есть ошибки, пожалуйста, отправьте [Pull Request](https://github.com/CuteLeaf/Firefly/pulls) для исправления.
## ✨ Возможности
### Основные функции
- [x] **Astro + Tailwind CSS** - Сверхбыстрая генерация статических сайтов на основе современного технологического стека
- [x] **Плавная анимация** - Анимация переходов между страницами Swup для шелковисто-плавного просмотра
- [x] **Адаптивный дизайн** - Идеальная адаптация для настольных компьютеров, планшетов и мобильных устройств
- [x] **Многоязычная поддержка** - Интернационализация i18n, поддержка упрощенного китайского, традиционного китайского, английского, японского, русского
- [x] **Полнотекстовый поиск** - Клиентский поиск на основе Pagefind, поддержка индексации содержимого статей.
### Персонализация
- [x] **Динамическая боковая панель** - Поддержка одиночной и двойной боковой панели
- [x] **Макет статей** - Поддержка списка (один столбец) и сетки (многоколонный/Masonry)
- [x] **Управление шрифтами** - Поддержка пользовательских шрифтов с богатым выбором шрифтов
- [x] **Настройка подвала** - Внедрение HTML-контента, полная настраиваемость
- [x] **Режим света и тьмы** - Поддержка светлого/темного/системного режимов
- [x] **Настройка навигации** - Логотип, заголовок, ссылки полностью настраиваются
- [x] **Переключение режимов обоев** - Баннерные обои, полноэкранные обои, однотонный фон
- [x] **Настройка цвета темы** - Регулировка оттенка на 360°
### Компоненты страницы
- [x] **Гостевая книга** - Поддержка страницы гостевой книги
- [x] **Панель объявлений** - Поддержка уведомлений с объявлениями на боковой панели
- [x] **Маскот** - Поддержка двух анимационных движков: Spine и Live2D
- [x] **Статистика сайта** - Отображение количества статей, категорий, тегов, общего количества слов и других данных
- [x] **Календарь сайта** - Отображение календаря текущего месяца и опубликованных статей за месяц
- [x] **Страница спонсоров** - Переход по ссылке спонсора, отображение QR-кода оплаты, список спонсоров, кнопка спонсорства в статьях
- [x] **Постер для публикации** - Поддержка создания красивых постеров для публикации статей
- [x] **Эффект сакуры** - Поддержка эффекта сакуры, полноэкранная анимация сакуры
- [x] **Дружественные ссылки** - Красивая страница отображения дружественных ссылок
- [x] **Рекламный компонент** - Поддержка пользовательского рекламного контента на боковой панели
- [x] **Bangumi** - Отображение отслеживания аниме и игр на основе Bangumi API
- [x] **Система комментариев** - Интеграция систем комментариев Twikoo, Waline, Giscus, Disqus, Artalk
- [x] **Счетчик посещений** - Поддержка вызова встроенного отслеживания посещений Waline, Twikoo
- [x] **Музыкальный плеер** - Музыкальный плеер в стиле Material Design 3
### Улучшение контента
- [x] **Лайтбокс изображений** - Функция предварительного просмотра изображений Fancybox
- [x] **Плавающее оглавление** - Динамическое отображение оглавления статьи, поддержка якорных переходов, показывается при скрытии оглавления боковой панели
- [x] **Защита электронной почты** - Предотвращает сбор адресов электронной почты автоматическими сканерами во избежание спама
- [x] **Оглавление боковой панели** - Динамическое отображение оглавления статьи, поддержка якорных переходов
- [x] **Улучшенные блоки кода** - На основе Expressive Code, поддержка сворачивания кода, номеров строк, идентификации языка
- [x] **Поддержка математических формул** - Движок рендеринга KaTeX, поддержка встроенных и блочных формул
- [x] **Случайные обложки статей** - Поддержка получения случайных обложек через API
- [x] **Расширения Markdown** - Поддержка дополнительных синтаксисов Markdown
### SEO
- [x] **SEO-оптимизация** - Полные мета-теги и структурированные данные
- [x] **RSS-лента** - Автоматическая генерация RSS-ленты
- [x] **Карта сайта** - Автоматическая генерация XML-карты сайта с настройкой фильтрации страниц
- [x] **Аналитика** - Интеграция Google Analytics, Microsoft Clarity
Если у вас есть полезные функции и оптимизации, пожалуйста, отправьте [Pull Request](https://github.com/CuteLeaf/Firefly/pulls)
## 🚀 Быстрый старт
### Требования
- Node.js ≤ 22
- pnpm ≤ 9
### Локальная разработка
1. **Клонировать репозиторий:**
```bash
git clone https://github.com/Cuteleaf/Firefly.git
cd Firefly
```
**Сначала создайте [Fork](https://github.com/CuteLeaf/Firefly/fork) в свой репозиторий, затем клонируйте (рекомендуется). Не забудьте нажать Star перед Fork!**
```bash
git clone https://github.com/you-github-name/Firefly.git
cd Firefly
```
3. **Установить зависимости:**
```bash
# Установите pnpm, если еще не установлен
npm install -g pnpm
# Установить зависимости проекта
pnpm install
```
4. **Настроить блог:**
- Отредактируйте конфигурационные файлы в каталоге `src/config/` для настройки блога
5. **Запустить сервер разработки:**
```bash
pnpm dev
```
Блог будет доступен по адресу `http://localhost:4321`
### Развертывание на платформе хостинга
- **См. [официальное руководство](https://docs.astro.build/ru/guides/deploy/) для развертывания блога на Vercel, Netlify, GitHub Pages, Cloudflare Pages, EdgeOne Pages и т.д.**
Пресет фреймворка: `Astro`
Корневой каталог: `./`
Каталог вывода: `dist`
Команда сборки: `pnpm run build`
Команда установки: `pnpm install`
## 📖 Настройка
> 📚 **Подробная документация по настройке**: См. [документацию Firefly](https://docs-firefly.cuteleaf.cn/) для полного руководства по настройке
### Установка языка сайта
Чтобы установить язык по умолчанию для вашего блога, отредактируйте файл `src/config/siteConfig.ts`:
```typescript
// Определить язык сайта
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 статьи
```yaml
---
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 # Включить комментарии
---
```
## 📖 Расширения Markdown
Помимо поддержки [GitHub Flavored Markdown](https://github.github.com/gfm/) по умолчанию в Astro, есть несколько дополнительных функций Markdown:
- Предупреждающие блоки (Admonitions) - Поддержка тем GitHub, Obsidian и VitePress ([Предпросмотр и использование](https://firefly.cuteleaf.cn/posts/markdown-extended/))
- Карточки репозиториев GitHub ([Предпросмотр и использование](https://firefly.cuteleaf.cn/posts/markdown-extended/))
- Улучшенные блоки кода на основе Expressive Code ([Предпросмотр](http://firefly.cuteleaf.cn/posts/code-examples/) / [Документация](https://expressive-code.com/))
## 🧞 Команды
Все команды должны выполняться в корневом каталоге проекта:
| Команда | Действие |
|:---------------------------|:----------------------------------------------------|
| `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](https://github.com/saicaca) за разработку шаблона [fuwari](https://github.com/saicaca/fuwari), на котором основан Firefly
- Использованы решения [Bangumi Collection Display](https://kasuha.com/posts/fuwari-enhance-ep2/) и [Email Protection/Image Title](https://kasuha.com/posts/fuwari-enhance-ep1/), которыми поделился блогер [霞葉](https://kasuha.com)
- За основу взяты решения [Mizuki](https://github.com/matsuzaka-yuki/Mizuki) для заголовка баннера, многоуровневой панели навигации меню, эффекта сакуры, KaTeX и Fancybox
- Построено с использованием [Astro](https://astro.build) и [Tailwind CSS](https://tailwindcss.com)
- Использует модель маскота в стиле Чиби `Firefly` spine, предоставленную создателем Bilibili [公公的日常](https://space.bilibili.com/3546750017080050)
- Иконки от [Iconify](https://iconify.design/)
- Авторские права на изображения Firefly принадлежат компании [miHoYo](https://www.mihoyo.com/), разработчику игры ["Honkai: Star Rail"](https://sr.mihoyo.com/).
## 📝 Лицензия
Этот проект распространяется под лицензией [MIT license](https://mit-license.org/), подробности см. в файле [LICENSE](../LICENSE).
Первоначально ветвлено из [saicaca/fuwari](https://github.com/saicaca/fuwari). Благодарим автора оригинального проекта за вклад. Оригинальный проект лицензирован по [MIT License](https://mit-license.org/)
**Уведомление об авторских правах:**
- Copyright (c) 2024 [saicaca](https://github.com/saicaca) - [fuwari](https://github.com/saicaca/fuwari)
- Copyright (c) 2025 [CuteLeaf](https://github.com/CuteLeaf) - [Firefly](https://github.com/CuteLeaf/Firefly)
В соответствии с лицензией MIT вы можете свободно использовать, изменять и распространять код, но обязаны сохранять вышеуказанное уведомление об авторских правах.
## 🍀 Участники
Спасибо следующим участникам за их вклад в этот проект. Если у вас есть вопросы или предложения, пожалуйста, отправьте [Issue](https://github.com/CuteLeaf/Firefly/issues) или [Pull Request](https://github.com/CuteLeaf/Firefly/pulls).
><a href="https://github.com/CuteLeaf/Firefly/graphs/contributors">
> <img src="https://contrib.rocks/image?repo=CuteLeaf/Firefly" />
></a>
Спасибо следующим участникам за их вклад в исходный проект [fuwari](https://github.com/saicaca/fuwari), который заложил основу для этого проекта.
><a href="https://github.com/saicaca/fuwari/graphs/contributors">
> <img src="https://contrib.rocks/image?repo=saicaca/fuwari" />
></a>
## ⭐ История звезд
[](https://star-history.com/#CuteLeaf/Firefly&Date)
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
|