matsuzaka-yuki / Mizuki

🌸 Mizuki A modern, feature-rich static blog template built with Astro, featuring advanced functionality and beautiful design. **🖥️ Live Demo** | **📝 Documentation** 🌏 **README Languages:** **English** / **中文** / **日本語** / **中文繁体** / Get started quickly with our comprehensive documentation. Whether you're customizing your theme, configuring features, or deploying to production, the documentation covers everything you need to launch your blog successfully. 📚 Read Full Documentation → 🚀 NEW: Automatic Resolution Adaptation > **🎯 Automatic Resolution Algorithm** - Intelligently adapts content layout based on device screen resolution, providing the best viewing experience for all devices 🌏 README Language **English** / **中文** / **日本語** / **中文繁体** / 🔧 Component Configuration System Restructuring • **Unified Configuration Architecture:** Brand new modular component configuration system, supporting dynamic component management and order configuration • **Configuration-Driven Component Loading:** Restructured SideBar component, implementing fully configuration-based component loading mechanism • **Unified Control Switches:** Removed independent enable switches for music player and announcement components, unified control through sidebarLayoutConfig • **Responsive Layout Adaptation:** Components support responsive layouts, automatically adjusting display based on device type 📐 Layout System Optimization • **Dynamic Sidebar Position Adjustment:** Support for left/right sidebar switching, with automatic layout adaptation • **Intelligent Article Directory Positioning:** When sidebar is on the right, article navigation automatically moves to the left, providing a better reading experience • **Grid Layout Improvements:** Optimized CSS Grid layout, resolving container width anomaly issues 🎛️ Configuration File Format Standardization • **Standardized Configuration Format:** Created unified component configuration file format specifications • **Type Safety:** Comprehensive TypeScript type definitions ensuring configuration type safety • **Extensibility:** Support for custom component types and configuration options 🧹 Code Optimization • **Test File Cleanup:** Removed unused test configurations and dependencies, reducing project size • **Code Structure Optimization:** Improved component architecture, enhancing code maintainability • **Performance Improvement:** Optimized component loading logic, improving page rendering performance --- ✨ Features 🎨 Design & Interface • [x] Built with Astro and Tailwind CSS • [x] Smooth animations and page transitions using Swup • [x] Light/dark theme switching with system preference detection • [x] Customizable theme colors and dynamic banner carousel • [x] Fullscreen background images with carousel, opacity, and blur effects • [x] Fully responsive design for all devices • [x] Beautiful typography with JetBrains Mono font 🔍 Content & Search • [x] Advanced search functionality based on Pagefind • [x] Enhanced Markdown features with syntax highlighting • [x] Interactive table of contents with auto-scrolling • [x] RSS feed generation • [x] Reading time estimation • [x] Article categorization and tagging system 📱 Special Pages • [x] **Anime Tracking Page** - Track anime watching progress and ratings • [x] **Friends Page** - Beautiful cards showcasing friend websites • [x] **Diary Page** - Share life moments, similar to social media • [x] **Archive Page** - Organized timeline view of articles • [x] **About Page** - Customizable personal introduction 🛠 Technical Features • [x] **Enhanced code blocks** based on Expressive Code • [x] **Math formula support** with KaTeX rendering • [x] **Image optimization** with PhotoSwipe gallery integration • [x] **SEO optimization** including sitemaps and meta tags • [x] **Performance optimization** with lazy loading and caching • [x] **Comment system** with Twikoo integration 🚀 Quick Start 📦 Installation • **Clone the repository:** • **Install dependencies:** • **Configure your blog:** • Edit to customize blog settings • Update site information, theme colors, banner images, and social links • Configure feature page functionality • **Start the development server:** Your blog will be available at 📝 Content Management • **Create new posts:** • **Edit posts:** Modify files in • **Customize special pages:** Edit files in • **Add images:** Place images in or 🚀 Deployment Deploy your blog to any static hosting platform: • **Vercel:** Connect your GitHub repository to Vercel • **Netlify:** Deploy directly from GitHub • **GitHub Pages:** Use the included GitHub Actions workflow • **Cloudflare Pages:** Connect your repository • **Environment Variable Configuration (Optional):** Refer to for configuration Before deployment, update the in . **Not recommended** to commit the file to Git. The file should only be used for local debugging or building. For cloud platform deployment, it's recommended to configure via the platform's settings. 📝 Post Frontmatter Format Frontmatter Field Descriptions • **title**: Article title (required) • **published**: Publication date (required) • **description**: Article description for SEO and previews • **image**: Cover image path (relative to article file) • **tags**: Array of tags for categorization • **category**: Article category • **draft**: Set to to hide article in production • **pinned**: Set to to pin article to top • **comment**: Set to to enable article comment area (requires global comment function enabled) • **lang**: Article language (only set when different from site default) Pinned Articles Feature The field allows you to pin important articles to the top of your blog list. Pinned articles will always appear before regular articles regardless of their publication date. **Usage:** **Sorting Rules:** • Pinned articles appear first, sorted by publication date (newest first) • Regular articles follow, sorted by publication date (newest first) Article-Level Com…