WinUI 3 风格的技术博客，基于 Astro 静态生成。干净、快速、无障碍。
- 首页分页 — 置顶文章优先，数字分页导航，每页 5 篇
- 文章详情 — 双栏布局（正文 + 粘性目录），阅读时间 / 字数统计，面包屑导航，上一篇/下一篇
- 标签系统 — 标签云 + 按标签聚合文章列表
- 时间线归档 — 按年份分组，带时间轴竖线
- 好友链接 — 友链卡片网格，一键交换信息
- 站内搜索 — Pagefind 离线全文检索，Fluent 风格 UI 适配
- 关于页面 — 作者介绍 + 技术栈说明
- 阅读进度条 — 页面顶部 3px 进度指示
- 粘性目录 — 跟随滚动，高亮当前区域
- 代码复制 — 代码块一键复制，hover 出现
- 代码 Diff —
+/-行高亮 + 行级高亮{1,3-5} - 数学公式 — KaTeX，
$x^2$/$$block$$语法 - 图表 — Mermaid 流程图、时序图等
- Callout 块 —
> [!NOTE/TIP/INFO/WARNING/DANGER]GFM 风格 - 脚注 —
[^id]智能脚注 + 回链 - 标题锚点 — hover 显示
#，直接链接到段落 - 图片灯箱 — 点击放大，ESC 关闭
- 打印优化 —
@media print隐藏装饰元素，适配纸张排版 - 返回顶部 — 右下角浮动按钮
- Fluent Design System — Acrylic 毛玻璃、4 级阴影、Fluent 动画曲线
- 四芒星 Logo — 双层叠加 Starburst 渐变图标，呼应站点名 Stellar（星际）
- 三态主题 — 浅色 / 深色 / 跟随系统，防闪烁 (FOUC)，SPA 导航主题同步
- ViewTransitions — 页面切换淡入动画
- 响应式 — 768px 侧边栏收起、480px 手机优化
- 字体 — Segoe UI Variable / Cascadia Code（等宽）
- 跳过导航链接（Skip-to-content）
- 语义化 HTML（
nav/article/aside/time） aria-label/aria-current/aria-expanded全覆盖- 键盘可操作（ESC 关闭侧边栏/灯箱，Tab 焦点可见）
prefers-reduced-motion尊重用户动效偏好- 触摸目标 ≥ 44px 优化
lang="zh-CN"正确的文档语言
- 自动 OG 图片生成（Satori + Resvg，1200x630）
- JSON-LD 结构化数据（BlogPosting、BreadcrumbList、Person、WebSite）
- Sitemap + Canonical URL + RSS Feed
- IndexNow 搜索引擎主动推送
- 安全头（CSP、X-Content-Type-Options、Referrer-Policy）
- Twitter/XIntent 链接分享
- 一键复制链接
npm install
npm run dev # http://localhost:4321| 命令 | 说明 |
|---|---|
npm run dev |
启动开发服务器 |
npm run build |
生产构建 → dist/ |
npm run preview |
本地预览构建产物 |
npm run verify |
构建 + SEO 检查 + 链接检查 |
npm run backup -- "描述" |
创建带时间戳的 Git 备份标签 |
npm run backup -- "描述" --push |
创建备份并推送到远程 |
文章存放在 src/content/blog/，使用 Markdown 编写：
---
title: 文章标题
description: SEO 描述
pubDate: 2024-01-01
updated: 2024-06-01
tags: ["Astro", "前端"]
heroImage: /path/to/image.png # 可选封面图
pinned: true # 置顶
draft: false # 草稿（不发布）
series: 系列名称 # 文章系列
---
正文内容...Callout 块：
> [!NOTE] 备注
> 这里是一段备注内容。
> [!TIP] 提示
> 这里是一段提示内容。
> [!INFO] 信息
> [!WARNING] 警告
> [!DANGER] 危险代码 Diff：
```js
+ const added = '新增行';
- const removed = '删除行';
```代码行高亮：
```js {1,3-5}
// 高亮第 1 行和第 3-5 行
```数学公式：
行内 $E = mc^2$ 公式
$$
\int_0^\infty e^{-x} dx = 1
$$Mermaid 图表：
```mermaid
graph TD
A[开始] --> B[结束]
```├── public/ # 静态资源
│ ├── _headers # HTTP 安全头 + OG 图片缓存策略
│ ├── favicon.svg # 四芒星品牌图标
│ └── robots.txt
├── scripts/ # 构建验证脚本
│ ├── verify.mjs # 全链路检查（构建 + SEO + 链接）
│ ├── check-seo.mjs # SEO 标签完整性验证
│ ├── check-links.mjs # 外链状态码扫描
│ ├── backup.mjs # Git 备份标签
│ └── submit-indexnow.mjs # 搜索引擎提交
├── src/
│ ├── components/ # UI 组件
│ │ ├── Avatar.astro
│ │ ├── BackToTop.astro
│ │ ├── CodeCopy.astro
│ │ ├── HeadingAnchor.astro
│ │ ├── ImageLightbox.astro
│ │ ├── JsonLd.astro
│ │ ├── MermaidBlock.astro
│ │ ├── ProgressBar.astro
│ │ ├── ScrollRestore.astro
│ │ ├── ShareButtons.astro
│ │ ├── Sidebar.astro
│ │ └── TableOfContents.astro
│ ├── content/ # Content Collections
│ │ ├── blog/*.md # 文章
│ │ └── config.ts # Schema 定义
│ ├── data/
│ │ └── site.ts # 站点配置
│ ├── layouts/
│ │ └── BaseLayout.astro # 根布局（head、导航、主题）
│ ├── pages/ # 路由
│ │ ├── [...page].astro # 首页分页
│ │ ├── about.astro # 关于
│ │ ├── blog/[...slug].astro # 文章详情
│ │ ├── friends.astro # 友链
│ │ ├── rss.xml.js # RSS
│ │ ├── search.astro # 搜索
│ │ ├── tags.astro # 标签云
│ │ ├── tags/[tag].astro # 标签聚合
│ │ ├── timeline.astro # 时间线
│ │ ├── 404.astro # 404
│ │ └── og/ # OG 图片生成
│ ├── plugins/ # Remark / Rehype 插件
│ │ ├── rehype-callouts.mjs
│ │ └── remark-footnotes.mjs
│ └── styles/
│ └── global.css # 全局样式（Fluent 变量、打印、暗色主题）
├── .editorconfig
├── .nvmrc # Node.js 22
├── astro.config.mjs
├── package.json
└── tsconfig.json
编辑 src/data/site.ts：
SITE_TITLE // 站点标题
SITE_DESC // SEO 描述
AUTHOR_NAME // 作者名
AUTHOR_BIO // 作者简介
AUTHOR_AVATAR // 头像路径 (public/ 下)，留空显示文字头像
NAV_ITEMS // 侧边导航菜单 { href, label, icon }
POSTS_PER_PAGE // 首页每页文章数
READING_SPEED_CN // 中文阅读速度（字/分钟）
READING_SPEED_EN // 英文阅读速度（词/分钟）
FRIENDS // 友链列表 [{ name, url, desc, avatar }]
UI // 页面文案统一管理（按钮、标签、提示等）生产环境设置站点 URL：
# .env
PUBLIC_SITE_URL=https://your-domain.com输出为纯静态站点，可部署到任意平台：
npm run build
npm run verify # 可选：检查 SEO 和外链
# 将 dist/ 部署为站点根目录MIT