星罗 · Xingluo

基于 Astro 与 shadcn 视觉风格的现代化博客主题

简体中文 · English · Deutsch · Español · Français · 日本語 · 한국어 · Português · Русский · العربية · Esperanto · 繁體中文

• ⚡ 极致性能 — Astro 静态生成、零运行时 JS、评论与播放器按需懒加载
• 🎨 现代视觉 — shadcn/ui new-york 风格、OKLCH 色彩空间、平滑暗黑模式
• 🌗 暗黑模式 — 无闪烁切换，跟随系统偏好，评论与播放器主题自动同步
• 🔍 全文搜索 — 基于 Flexsearch 实现浏览器端全文检索，构建时预生成按语言分组的索引数据
• 🌐 多语言 — 多语言 UI 与内容级翻译，hreflang 与 x-default SEO 声明
• 📝 内容增强 — 支持 Markdown 与 MDX，Shiki 双主题代码高亮、标注框、目录折叠、表格滚动
• 📖 阅读时长 — CJK 按字符数、拉丁文按单词数智能估算，卡片与详情页均显示
• 🔗 相关文章 — 按标签相似度推荐，自动排序
• 🏷️ 文章分类 — Frontmatter 指定分类，独立分类页与导航入口
• 📌 粘性目录侧栏 — 大屏文章页右侧粘性目录，IntersectionObserver 滚动高亮当前章节
• 💬 评论系统 — 支持使用 Giscus / Twikoo / Waline 评论系统，主题自动跟随，懒加载
• 🎵 媒体播放器 — 集成 APlayer 音乐播放器与 DPlayer 视频播放器，并支持在 Markdown 和 MDX 中调用
• 📡 SEO — 实现动态 OG 图、RSS、Sitemap、JSON-LD 结构化数据（BlogPosting + BreadcrumbList）、Canonical 规范化

环境要求：

• Node.js ≥ 22.12.0
• pnpm 10.x

pnpm install      # 安装依赖
pnpm dev          # 启动开发服务器
pnpm build        # 构建生产版本
pnpm preview      # 预览生产构建

src/
├── components/     # UI 组件
├── content/        # 内容集合（文章与独立页面）
├── i18n/           # 多语言资源与工具
├── layouts/        # 布局组件
├── lib/            # 工具库
├── pages/          # 路由页面
├── scripts/        # 客户端脚本
├── styles/         # 全局样式与主题变量
├── types/          # 类型定义与第三方模块声明
└── utils/          # 工具函数

配置文件为 xingluo.config.ts，可自定义站点信息、功能开关、社交链接、评论系统与播放器等。

完整配置项详见 配置指南。

在 src/content/posts/ 下创建 Markdown 或 MDX 文件，使用以下 frontmatter：

---
title: "文章标题"
pubDatetime: 2026-06-19T10:00:00+08:00
description: "文章描述"
tags: ["标签1", "标签2"]
featured: false # 可选，是否精选
draft: false # 可选，是否草稿
ogImage: "./cover.png" # 可选，OG 图
---

```aplayer
{"audio":[{"name":"曲名","url":"/song.mp3","cover":"/cover.jpg"}]}
```

```dplayer
{"video":{"url":"/demo.mp4","pic":"/cover.jpg"}}
```

import { APlayer, DPlayer } from "@/components/mdx";

<APlayer audio={[{ name: "曲名", url: "/song.mp3" }]} />
<DPlayer video={{ url: "/demo.mp4" }} />

完整项目文档位于 docs/ 目录，支持多语言版本：

各语言文档均包含以下内容：

# 构建镜像
docker build -t xingluo .

# 运行容器
docker run -d -p 8080:80 --name xingluo xingluo

AGPL-3.0