Anime Tracking System
Relevant source files
The following files were used as context for generating this wiki page:
The Anime Tracking System is a feature within the HXLoLi project that integrates Bangumi data to display personal anime progress and detailed information. The system allows users to browse their anime lists categorized by watching status, view detailed information including characters and voice actors (CV), and visualize relationships through force-directed graphs.
Sources: README.md:20-27, blog/2025/12/14/01_博客更新日志和计划.md:23-53
System Architecture and Data Flow
The system operates as a static site generated by Docusaurus. Data is retrieved from the Bangumi API via Python scripts, stored as JSON files, and served through the jsDelivr CDN to the frontend.
Sources: README.md:29-29
Data Retrieval and Rendering Flow
The following diagram illustrates the flow from data acquisition to user interface rendering:
The system fetches records and processes them through custom hooks like useAnimeRecords and useActorMap.
Sources: src/pages/anime/index.tsx:106, src/pages/anime/details.tsx:112-113
Core Components
Anime List Page
The list page (/anime/index.tsx) groups anime records by year and quarter. It supports filtering by watch status and sorting by last update or release date.
Sources: src/pages/anime/index.tsx:16-95
| Feature | Logic / Description |
|---|---|
| Quarter Grouping | Calculates year and season (Spring, Summer, Autumn, Winter) from release or update dates. |
| Persistence | Uses usePersistent to store watchStatus and sortMode in the browser. |
| Filtering | Filters ANiMeRecord objects based on WatchStatus (e.g., WATCHING, WATCHED). |
| Sources: src/pages/anime/index.tsx:21-42, src/pages/anime/index.tsx:108-115 |
Anime Detail System
The details page (/anime/details.tsx) renders comprehensive metadata for a specific anime ID.
- Basic Info: Includes score, broadcast date, and episode count.
- User Status: Shows current progress, personal ratings, and tags.
- Character/CV List: Displays characters linked to their voice actors, including character summaries and CV bios.
- Relations: Lists related works such as prequels, sequels, and soundtracks.
Sources: src/pages/anime/details.tsx:162-358
Force Graph Visualization
The relationship graph (/anime/graph.tsx) provides a visual representation of links between anime, characters, and voice actors. Users can customize the visualization through a controller.
Sources: src/pages/anime/graph.tsx:88-116
Sources: src/pages/anime/graph.tsx:12-85
Data Models
The system relies on structured records derived from Bangumi.
| Data Type | Fields | Source |
|---|---|---|
| ANiMeRecord | anime_data, user_status | src/utils/anime/types |
| AnimeData | id, name, name_cn, score, summary, episodes, characters, relations | src/pages/anime/index.tsx:142-156 |
| UserStatus | watch_status, watched_eps, comment, tags, last_update | src/pages/anime/index.tsx:157-163 |
| Character | id, name, name_cn, relation, actor_ids, summary | src/pages/anime/details.tsx:273-338 |
Navigation and Routing
The system uses standard URL query parameters to handle state transitions between list, detail, and graph views.
Sources: src/pages/anime/graph.tsx:13-17, src/pages/anime/details.tsx:108-110
Summary
The Anime Tracking System provides a robust interface for managing and exploring anime consumption progress. By combining automated data scraping with React-based visualizations and persistent user settings, it serves as a central hub for personal media tracking within the blog.
Sources: README.md:20-27, blog/2025/12/14/01_博客更新日志和计划.md:23-53