Project Overview
Relevant source files
The following files were used as context for generating this wiki page:
HXLoLi (Heng_Xin Loli Optimizes Loli Iteratively) is a comprehensive personal blog and technical knowledge management system. It serves as a centralized hub for technical notes, project documentation, anime tracking, and high-fidelity music playback. The project uses a mascot, "Last Order" (最后之作), to define its visual identity.
Sources: README.md:1-12
Core System Architecture
HXLoLi operates as a static site generated via Docusaurus v3.7. The architecture integrates React 19 for the frontend and TypeScript for type-safe development. The system splits content into three primary domains: standard documentation (docs/), blog posts (blog/), and an AI-focused knowledge base (ai-docs/).
Sources: README.md:65-71, docusaurus.config.ts:316-350
Content Organization
The system utilizes automated scripts and plugins to manage a complex directory structure. A dedicated AI knowledge base operates as a separate Docusaurus documentation instance, allowing for distinct routing and metadata handling.
The diagram shows the relationship between content directories and the automated plugins that generate metadata and navigation structures.
Sources: docusaurus.config.ts:316-350, scripts/generateAiDocsSidebar.js:10-20
Functional Highlights
Anime Tracking
The project integrates data from Bangumi (bgm.tv) to display personal anime viewing records. A Python script fetches data from the Bangumi API, stores it as JSON, and serves it via jsDelivr CDN. Users can browse lists by status (Watching, Dropped, etc.) and view detailed character and voice actor relationship maps.
Sources: README.md:18-24
Global Music Player
A built-in music player supports uninterrupted playback across the blog.
- Lyrics Rendering: Uses a custom fork of SubtitlesOctopus to render ASS (Advanced Substation Alpha) subtitles on Canvas, supporting VSFilterMod extensions.
- Synchronization: Uses the
BroadcastChannelAPI to synchronize playback states across multiple browser tabs. - Infrastructure: Music resources are hosted in a separate
HXLoLi-Musicrepository.
Sources: README.md:26-34
AI Knowledge Base (AI-KB)
The AI Knowledge Base is optimized for both human and AI consumption. It features a specialized layout that includes metadata headers for AI-generated content and tools for local development, such as an inline VS Code editor link.
This sequence demonstrates the conditional rendering logic used to differentiate the AI Knowledge Base from standard documentation.
Sources: src/theme/DocItem/Layout/index.tsx:50-75
Technical Stack and Dependencies
The project relies on a modern utility-first CSS framework and several specialized plugins for technical content rendering.
| Category | Component | Version / Source |
|---|---|---|
| Framework | Docusaurus | v3.7.0 (Strict) |
| Language | TypeScript | ~v5.6.2 |
| Styling | Tailwind CSS | v3.4 |
| Editor | Monaco Editor | v0.52.2 |
| Math | KaTeX | rehype-katex v7.0.1 |
| Comments | Giscus | @giscus/react v3.1.0 |
| Search | Local Search | @easyops-cn v0.49.2 |
Sources: README.md:43-63, README.md:65-71
Development and Deployment
The project supports multiple deployment targets, primarily GitHub Pages and Cloudflare Workers.
Path Logic
The site dynamically adjusts its baseUrl and asset links based on the DEPLOY_TARGET environment variable. Cloudflare deployments use a root path, while GitHub Pages use the /HXLoLi subdirectory.
Sources: docusaurus.config.ts:14-17
Asset Safeguards
To prevent high-fidelity diagrams (like Draw.io SVG files) from losing interactive functionality, the build process enforces a 0 limit on Webpack URL loader inlining. This ensures .drawio.svg files are treated as external assets rather than base64 strings.
Sources: docusaurus.config.ts:31-45
Development Guidelines
AI Coding Standards
HXLoLi enforces strict coding standards when utilizing AI agents for development.
- Technology Choice: Backend uses Python/FastAPI (uv), Frontend uses React/TypeScript (pnpm).
- Architecture: Prefers functional interfaces and clear separation between API definitions and implementations (e.g.,
impl/directories). - Quality Gates: Employs hooks for code quality checks, including formatting (Prettier/Lint), custom AST rules for documentation consistency, and automated test triggers.
Sources: blog/2026/10/07/01-AI代码质量.md:38-60, blog/2026/10/07/01-AI代码质量.md:144-155
Documentation Maintenance
Documentation follows an "AI-first" principle where metadata (frontmatter) and structure are designed for AI searchability.
- Rules: One topic per document, separation of facts from historical decisions, and no emoji in technical paths.
- Limits: Document lines are capped at 1500 to ensure readability and context window efficiency.
Sources: blog/2026/10/07/01-AI代码质量.md:180-200, ai-docs/002-程序语言/003-Web前端/001-react-bits分门别类学习/index.md:200-210
HXLoLi functions as a highly automated, mascot-themed personal ecosystem that bridges traditional technical blogging with advanced AI-assisted knowledge management and media integration.