Xingluo Documentation
Xingluo is a modern blog CMS built on Astro and the shadcn/ui visual style. It delivers a more modern visual experience through flat, elegant shadcn components and the OKLCH color system, and natively integrates a comment system, optional MDX support, and audio/video players.
Documentation Index
| Document | Content |
|---|---|
| Getting Started | Requirements, installation, local dev, build and preview |
| Configuration Guide | Full reference for xingluo.config.ts |
| Content Authoring | Post frontmatter, Markdown/MDX syntax, code blocks, callouts, enhancements |
| Internationalization | Multilingual routing, UI strings, content-level translation, adding a language |
| Architecture Overview | Directory layout, config flow, render flow, build pipeline |
| Theme & Styles | shadcn theme variables, OKLCH, Tailwind v4, dark mode |
| Comment System | Choosing and wiring up giscus / twikoo / waline |
| Media Players | Using APlayer / DPlayer in Markdown and MDX |
| SEO | OG images, RSS, sitemap, hreflang, canonical, structured data |
| Search | Flexsearch full-text search integration |
| Deployment | Static hosting, GitHub Pages, environment variables, Docker |
Core Features
- Top-tier performance: Astro static generation, build-time inlined SVG icons (zero runtime JS), lazy-loaded comments and players, orphan asset cleanup
- Modern visuals: shadcn/ui new-york components, OKLCH color space, smooth dark mode (FOUC protection)
- Multilingual: UI and content-level translation,
prefixDefaultLocale: falserouting, hreflang and x-default SEO declarations - Content enhancement: optional MDX, Shiki dual-theme code highlighting, callouts, collapsible TOC, scrollable tables
- Reading time: smart estimation (CJK by character count, Latin by word count), shown on cards and detail pages
- Related posts: automatically recommended by shared tags
- Post categories: assign via frontmatter, with dedicated category pages and a nav entry
- Sticky TOC sidebar: right-side sticky table of contents on large screens, IntersectionObserver scroll spying
- Comment system: giscus / twikoo / waline, theme-aware, lazy-loaded
- Media players: APlayer audio and DPlayer video, with both MD fence and MDX component entry points
- Search: Flexsearch full-text search, per-language indexes, View Transitions state persistence
- Full SEO: dynamic OG images (satori + sharp), RSS, sitemap, JSON-LD structured data (BlogPosting + BreadcrumbList), canonical normalization
Tech Stack
| Category | Technology |
|---|---|
| Framework | Astro 6.x |
| Styling | Tailwind CSS v4, shadcn/ui style components, @tailwindcss/typography |
| Icons | astro-icon + Font Awesome |
| Content | Astro Content Collections, MDX, remark/rehype plugin chain |
| Code highlighting | Shiki |
| Search | Flexsearch |
| OG images | satori + sharp |
| Comments | giscus / twikoo / waline |
| Players | APlayer / DPlayer |
| Date | dayjs |
| Package manager | pnpm |
| Language | TypeScript |
License
AGPL-3.0
Related posts
Deployment
2 min readXingluo deployment guide covering static hosting platforms (Netlify/Vercel/GitHub Pages), Nginx self-hosting, Docker, and environment variables.
Search
1 min readXingluo search guide covering Flexsearch full-text search integration, index generation, UI, multilingual search, and performance.