🌟 Gambaran Proyek#

Firefly adalah tema blog pribadi yang modern dan indah berbasis Astro, dirancang untuk para penggemar teknologi dan pembuat konten. Tema ini menggabungkan tumpukan teknologi web modern, menyediakan modul fungsional yang kaya dan antarmuka yang sangat dapat disesuaikan, memungkinkan Anda untuk dengan mudah membuat situs blog pribadi yang profesional dan indah.

🖥️ Pratinjau Online： Firefly - Demo site

🏠 Blog Saya： https://blog.cuteleaf.cn

📝 Dokumentasi Firefly： https://docs-firefly.cuteleaf.cn

⭐ Repositori Open Source Firefly：https://github.com/CuteLeaf/Firefly

🚀 Arsitektur Teknologi#

• Pembuatan Situs Statis: Berbasis Astro, memberikan kecepatan muat yang sangat cepat dan optimisasi SEO yang luar biasa.
• Dukungan TypeScript: Keamanan tipe penuh, meningkatkan pengalaman pengembangan dan kualitas kode.
• Desain Responsif: Dibangun dengan Tailwind CSS, beradaptasi sempurna untuk desktop dan perangkat seluler.
• Pengembangan Berbasis Komponen: Mendukung komponen Astro dan Svelte, fleksibel dan dapat diperluas.

🎨 Antarmuka dan Modul Tema#

• Sistem Warna Tema: Penyesuaian rona 0-360 derajat, warna tema tetap, tiga mode default.
• Sistem Wallpaper Latar Belakang: Mode ganda Banner/Overlay, gambar responsif, penentuan posisi gambar, efek mesin tik.
• Sistem Karakter Live2D/Spine: Mesin ganda Spine/Live2D, fungsi interaktif, konfigurasi animasi.
• Sistem Font: Dukungan multi-font, optimisasi pramuat, font cadangan.

🧭 Modul Navigasi dan Tata Letak#

• Konfigurasi Bilah Navigasi: Menu multi-level, dukungan ikon, tautan prasetel/kustom.
• Sistem Bilah Samping: Komponen modular, kontrol tata letak, perilaku responsif.

📢 Modul Tampilan Konten#

• Sistem Pengumuman: Konfigurasi konten, fungsi interaktif, kontrol tampilan.
• Sistem Tautan Teman: Pengurutan berdasarkan bobot, kontrol pengaktifan, klasifikasi tag.
• Sistem Iklan: Berbagai jenis iklan, opsi konfigurasi, manajemen penempatan iklan.
• Daftar Isi: Mendukung daftar isi di perangkat seluler dan desktop untuk penjelajahan cepat.

🎛️ Modul Konfigurasi Lanjutan#

• Sistem Efek Khusus: Efek bunga sakura, parameter animasi, kontrol perulangan.
• Sistem Statistik: Statistik kunjungan artikel Twikoo, kontrol sakelar independen, dukungan multi-bahasa.
• Alat Pengembangan: Penyorotan kode, dukungan tema, dukungan plugin.
• Sistem Lisensi: Tampilan lisensi, konfigurasi tautan, kontrol sakelar.
• Optimisasi SEO: OpenGraph, informasi situs, kata kunci, pengaturan bahasa.

⚙️ Penjelasan Rinci Sistem Konfigurasi#

• Konfigurasi Modular: Setiap modul fungsional memiliki file konfigurasi independen untuk manajemen dan pemeliharaan yang mudah.
• Konfigurasi Situs: Informasi dasar situs web, warna tema, ikon, pengaturan bahasa.
• Konfigurasi Profil Pengguna: Avatar, nama, bio, tautan sosial.
• Konfigurasi Fungsional: Sistem komentar, pengumuman, lisensi, footer, statistik.
• Konfigurasi Gaya: Penyorotan kode, efek bunga sakura, manajemen font.
• Konfigurasi Tata Letak: Manajemen komponen bilah samping dan bilah navigasi.
• Konfigurasi Komponen: Pemutar musik, karakter Live2D/Spine, iklan, tautan teman.
• HTML Footer: Injeksi konten HTML kustom.

📖 Instruksi Konfigurasi#

📚 Dokumentasi Konfigurasi Rinci: Lihat Dokumentasi Penggunaan Firefly untuk panduan konfigurasi lengkap.

1
src/
2
├── config/
3
│   ├── index.ts              # File indeks konfigurasi
4
│   ├── siteConfig.ts         # Konfigurasi dasar situs
5
│   ├── profileConfig.ts      # Konfigurasi profil pengguna
6
│   ├── commentConfig.ts      # Konfigurasi sistem komentar (komentar Twikoo dan statistik kunjungan)
7
│   ├── announcementConfig.ts # Konfigurasi pengumuman
8
│   ├── licenseConfig.ts      # Konfigurasi lisensi
9
│   ├── footerConfig.ts       # Konfigurasi footer
10
│   ├── FooterConfig.html     # Konten HTML footer
11
│   ├── expressiveCodeConfig.ts # Konfigurasi penyorotan kode
12
│   ├── sakuraConfig.ts       # Konfigurasi efek bunga sakura
13
│   ├── fontConfig.ts         # Konfigurasi font
14
│   ├── sidebarConfig.ts      # Konfigurasi tata letak bilah samping
15
│   ├── navBarConfig.ts       # Konfigurasi bilah navigasi
16
│   ├── musicConfig.ts        # Konfigurasi pemutar musik
17
│   ├── pioConfig.ts          # Konfigurasi karakter Live2D/Spine
18
│   ├── adConfig.ts           # Konfigurasi iklan
19
│   └── friendsConfig.ts      # Konfigurasi tautan teman