Anime Blog Template

A personal blog template specifically designed for anime enthusiasts, built with modern frontend technology stack. It features interactive Live2D character animations and dynamic particle background effects using particles.js, creating an immersive anime-style experience. This project provides anime culture enthusiasts with a beautiful and practical blog solution.

🚀 Deploy

You can quickly deploy this template to EdgeOne Pages with just one click:

More Templates

✨ Features

• 🎨 Anime-style UI with Live2D character animations
• ✨ Dynamic particle background effects
• 📱 Responsive design for all devices
• 📝 Markdown-based content management
• 🎯 SEO optimized
• 💬 Multiple comment system support

⚠️ Important Notice

This project is intended for private deployment only. For commercial use, please refer to the license terms of:

• hexo-theme-redefine
• Live2D

🚀 Quick Start

Requirements

• Node.js >= 16.0.0
• Yarn >= 1.22.0

Installation Steps

1. Clone the project

git clone https://github.com/tomcomtang/anime-blog-demo1.git
cd anime-blog-demo1

2. Install dependencies

yarn install

3. Start development server

yarn dev

4. Build for production

yarn build

📝 Content Management

Writing Posts

Create Markdown files in the source/_posts directory using the following format:

---
title: Post Title
date: 2024-03-21 12:00:00
---

Post content...

Draft Management

• Place unfinished posts in the source/_drafts directory
• Use yarn draft command to preview drafts

⚙️ Configuration

Site Configuration

Configure in config/site.yml:

title: My Anime Blog
subtitle: Sharing Anime Culture
description: A personal blog about anime culture
keywords: anime,ACG,culture
author: Your Name
language: en-US
timezone: UTC

Theme Configuration

Configure in config/theme.yml:

# Theme color
theme_color: "#FF69B4"

# Navigation menu
menu:
  - name: Home
    path: /
  - name: Archives
    path: /archives
  - name: About
    path: /about

📦 Project Structure

.
├── public/          # Build output directory
├── source/          # Blog source files
│   ├── _posts/     # Blog posts
│   ├── _drafts/    # Draft posts
│   └── assets/     # Static assets
├── themes/         # Theme files
└── config/         # Configuration files

🚀 Deployment

Supports multiple deployment methods:

• GitHub Pages

  • Push public directory contents to gh-pages branch
  • Enable GitHub Pages in repository settings

• Vercel

  • Connect Vercel account
  • Select public as output directory
  • Automatic deployment

• EdgeOne

  • Upload static files to EdgeOne
  • Configure CDN acceleration

❓ FAQ

1. How to modify theme styles?

Theme style files are located in themes/default/assets/css/ directory, you can modify the corresponding CSS files directly.

2. How to add new pages?

Create corresponding Markdown files in the source directory and add menu items in the menu configuration in config/theme.yml.

3. How to add comment system?

Configure Gitalk or Valine comment system parameters in config/theme.yml.

🤝 Contributing

Pull requests are welcome to improve this project. Before submitting, please ensure:

1. Code follows project coding standards
2. Add necessary tests
3. Update relevant documentation

📚 References

This project is inspired by and uses resources from the following projects:

• hexo-theme-redefine - A beautiful and feature-rich Hexo theme
• Live2D Widget - A web platform Live2D widget

If you like this project, please consider giving a star to these amazing projects that made this possible!