feat: ai

2025-11-21 11:51:31 +08:00
79 changed files with 8989 additions and 4785 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,10 +0,0 @@
-node_modules/
-.git/
-.idea/
-dist/
-.astro/
-.vscode/
-.claude/
-*.tar.gz
-*.log
-.DS_Store
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,9 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
--- a/.env
+++ b/.env
@@ -1 +0,0 @@
-VITE_API_BASE_URL=http://127.0.0.1:8080/api/
--- a/.env.production
+++ b/.env.production
@@ -1 +0,0 @@
-VITE_API_BASE_URL=https://admin.ua42.com/api/
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,10 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*

+# environment variables
+.env
+.env.production
+
 # macOS-specific files
 .DS_Store

@@ -21,5 +25,3 @@ pnpm-debug.log*

 *.tar
 *.gz
-
-.claude
--- a/.qoder/quests/blog-style-adjustment-and-feature-expansion.md
+++ b/.qoder/quests/blog-style-adjustment-and-feature-expansion.md
--- a/.qoder/quests/blog-style-optimization.md
+++ b/.qoder/quests/blog-style-optimization.md
@@ -0,0 +1,510 @@
+# 博客样式优化设计
+
+## 目标
+
+优化博客的整体视觉呈现，确保风格统一、样式美观，并增强 Markdown 内容渲染和代码块高亮显示能力。
+
+## 背景
+
+当前博客基于 Astro + SolidJS 技术栈，已具备基础样式系统（包括 base.css、typography.css、enhancements.css），并支持暗色模式切换。项目使用 TypeScript 和 PNPM 包管理器，运行于 Node.js 22.21.1 环境。
+
+现有样式系统已建立 CSS 变量体系，覆盖颜色主题、圆角、阴影、过渡动画等设计规范，但在 Markdown 渲染和代码高亮方面存在提升空间。
+
+## 核心需求
+
+### 风格统一性
+
+确保整个站点在视觉呈现上保持一致的设计语言：
+
+- **色彩体系统一**：所有组件遵循统一的 CSS 变量定义，包括亮色和暗色两套主题配色
+- **间距规范一致**：页面布局、组件内边距、外边距采用统一的间距标准
+- **字体层级清晰**：建立明确的字体大小、行高、字重等级体系
+- **交互反馈统一**：hover、focus、active 等状态的视觉反馈保持一致性
+
+### Markdown 渲染优化
+
+提升 Markdown 内容的可读性和视觉表现：
+
+- **标题层级视觉区分**：h1-h6 各级标题具有明显的视觉差异，便于内容层级识别
+- **段落排版优化**：合理的行高、段落间距，提升长文阅读体验
+- **列表样式美化**：有序列表和无序列表具有清晰的视觉标识
+- **引用块样式增强**：blockquote 具有独特的视觉设计，突出引用内容
+- **链接交互优化**：链接具有醒目但不突兀的视觉效果和悬停动画
+- **图片展示优化**：图片具有适当的边框、圆角、阴影效果，支持放大效果
+- **分隔线美化**：hr 标签具有渐变或装饰性样式
+- **表格样式优化**：表格具有清晰的边框、斑马纹或悬停高亮效果
+
+### 代码块高亮
+
+实现专业的代码展示能力：
+
+- **语法高亮引擎选型**：选择合适的语法高亮方案（Shiki 或 Prism），支持多种编程语言
+- **主题适配**：代码高亮主题需适配亮色和暗色两种模式，确保视觉和谐
+- **代码块装饰**：代码块具有语言标识、行号显示、复制按钮等增强功能
+- **行内代码区分**：行内 `code` 标签与代码块在视觉上有明确区分
+- **代码块容器样式**：代码块具有边框、圆角、阴影、背景色等装饰效果
+- **横向滚动优化**：长代码行支持横向滚动，滚动条样式与整体风格匹配
+
+## 设计方案
+
+### 样式系统强化
+
+#### CSS 变量体系扩展
+
+在现有 CSS 变量基础上，补充完善以下变量定义：
+
+**代码相关变量**
+- 行内代码背景色、文字色、边框色
+- 代码块背景色（需区分亮色和暗色模式）
+- 代码块边框色
+- 代码行号颜色
+- 代码高亮行背景色
+
+**Markdown 元素专用变量**
+- 引用块左侧装饰色
+- 引用块背景色
+- 表格边框色
+- 表格斑马纹背景色
+- 链接装饰线颜色
+
+**间距规范变量**
+- 文章内容最大宽度
+- 标题上下边距
+- 段落间距
+- 列表项间距
+
+#### 排版增强策略
+
+**中英文混排优化**
+- 设置适合中文的行高（1.8-2.0）
+- 字体栈优先选择系统优化字体
+- 字符间距微调，提升可读性
+
+**响应式排版**
+- 大屏设备：标准字号（17px）
+- 平板设备：适中字号（16px）
+- 移动设备：缩小字号（15px），调整行高和间距
+
+### Markdown 渲染方案
+
+#### Astro Markdown 配置
+
+利用 Astro 内置的 Markdown 处理能力，通过配置优化渲染输出：
+
+**配置项规划**
+- 启用 GitHub Flavored Markdown（GFM）扩展，支持表格、任务列表等
+- 配置自动链接识别
+- 启用智能标点符号转换
+- 配置标题自动生成 ID，便于锚点跳转
+
+**插件集成考量**
+- 评估是否需要引入 remark 或 rehype 插件增强处理能力
+- 考虑添加目录生成插件
+- 评估是否需要图片懒加载或优化插件
+
+#### 自定义样式映射
+
+针对 Markdown 渲染后的 HTML 结构，编写精准的 CSS 选择器：
+
+**文章容器作用域**
+- 所有 Markdown 样式限定在 `article` 或 `.post-content` 作用域内
+- 避免全局样式污染
+
+**元素样式定义清单**
+- 标题：h1-h6 的字号、字重、颜色、间距、装饰效果
+- 段落：行高、间距、文字颜色
+- 链接：颜色、下划线样式、悬停效果、过渡动画
+- 列表：标记样式、缩进、间距
+- 引用块：边框、背景、左侧装饰、引号装饰
+- 图片：边框、圆角、阴影、悬停效果
+- 表格：边框、表头样式、斑马纹、悬停高亮
+- 分隔线：渐变效果或装饰性样式
+- 行内代码：背景、边框、颜色、字体
+
+### 代码高亮方案
+
+#### Shiki 语法高亮集成
+
+选择 Shiki 作为代码高亮引擎，原因如下：
+- Astro 官方推荐，集成简单
+- 基于 VS Code 主题引擎，主题丰富且美观
+- 支持服务端渲染，无需客户端 JavaScript
+- 支持多语言和自定义主题
+
+#### 主题配置策略
+
+**亮色模式主题**
+- 选择柔和、对比度适中的主题（如 GitHub Light、One Light）
+- 背景色需与整体页面风格协调
+
+**暗色模式主题**
+- 选择护眼、对比度适中的暗色主题（如 One Dark Pro、Night Owl）
+- 背景色需与暗色模式整体风格匹配
+
+**主题切换机制**
+- 通过 CSS 变量或 data-theme 属性实现主题动态切换
+- 确保切换过程平滑，无闪烁
+
+#### 代码块增强功能
+
+**语言标识显示**
+- 在代码块顶部或角落显示语言标签
+- 标签样式需与整体风格一致
+
+**复制功能**
+- 在代码块区域提供复制按钮
+- 点击后复制代码内容到剪贴板
+- 提供复制成功的视觉反馈
+
+**行号显示（可选）**
+- 评估是否需要显示行号
+- 行号样式不干扰代码阅读
+
+**代码块容器装饰**
+- 边框样式：细边框或无边框，颜色与主题协调
+- 圆角效果：使用统一的圆角变量（如 var(--radius-lg)）
+- 阴影效果：适度阴影增强层次感（如 var(--shadow-md)）
+- 左侧装饰线：渐变色装饰线增强视觉效果
+
+### 样式文件组织
+
+#### 文件结构规划
+
+当前样式文件结构保持不变，在现有基础上增强：
+
+**base.css**
+- 补充代码高亮相关 CSS 变量
+- 补充 Markdown 渲染相关变量
+
+**typography.css**
+- 优化现有文章排版样式
+- 补充缺失的 Markdown 元素样式
+- 确保所有样式作用域限定在 article 内
+
+**enhancements.css**
+- 添加代码块复制按钮样式
+- 添加语言标识样式
+- 优化表格、引用块等增强效果
+
+**代码高亮主题（新增）**
+- 考虑是否需要单独的代码主题样式文件
+- 如果使用 Shiki，可能无需额外 CSS 文件
+
+#### 样式优先级与覆盖策略
+
+**导入顺序**
+- reset.css → typography.css → enhancements.css
+- 确保增强样式可以覆盖基础样式
+
+**选择器特异性控制**
+- 避免使用过高权重的选择器
+- 优先使用类选择器和属性选择器
+- 必要时使用作用域限定
+
+### 响应式设计
+
+#### 断点规划
+
+遵循移动优先原则，定义以下断点：
+
+- 小屏移动设备：<= 480px
+- 大屏移动设备：481px - 768px
+- 平板设备：769px - 1024px
+- 桌面设备：>= 1025px
+
+#### 各断点样式调整策略
+
+**移动设备（<= 768px）**
+- 减小标题字号
+- 增加段落行高，便于触摸阅读
+- 代码块字号适当缩小
+- 表格横向滚动处理
+- 图片宽度 100%
+
+**平板设备（769px - 1024px）**
+- 标题字号适中
+- 代码块保持可读性
+- 表格可正常展示或滚动
+
+**桌面设备（>= 1025px）**
+- 最佳阅读体验
+- 充分利用屏幕空间
+- 图片可展示大尺寸
+
+### 暗色模式适配
+
+#### 主题切换机制
+
+依托现有的 `data-theme="dark"` 属性实现主题切换：
+
+**颜色变量切换**
+- 所有颜色变量在暗色模式下重新定义
+- 代码块背景色、文字色适配暗色主题
+- 边框、阴影适配暗色环境
+
+**代码高亮主题切换**
+- 根据 `data-theme` 属性切换 Shiki 主题
+- 确保暗色模式下代码可读性和对比度
+
+**过渡动画**
+- 主题切换过程平滑过渡
+- 避免颜色突变导致的视觉不适
+
+#### 暗色模式特殊处理
+
+**图片亮度调整**
+- 暗色模式下图片亮度略微降低（opacity: 0.9）
+- 悬停时恢复正常亮度
+
+**代码块对比度优化**
+- 暗色模式代码块背景色需与页面背景有一定区分
+- 语法高亮颜色对比度适中，避免刺眼
+
+## 技术实现要点
+
+### Astro 配置调整
+
+在 `astro.config.mjs` 中配置 Markdown 处理选项：
+
+**Markdown 配置项**
+- syntaxHighlight：设置为 'shiki'
+- shikiConfig：配置 Shiki 主题和选项
+- remarkPlugins：可选引入 remark 插件
+- rehypePlugins：可选引入 rehype 插件
+
+**配置示例结构**
+```
+markdown: {
+  syntaxHighlight: 'shiki',
+  shikiConfig: {
+    theme: 亮色主题,
+    themes: { light: 亮色主题, dark: 暗色主题 },
+    wrap: 是否换行,
+    langs: 支持的语言列表
+  },
+  remarkPlugins: [...],
+  rehypePlugins: [...]
+}
+```
+
+### CSS 变量定义规范
+
+**命名约定**
+- 使用 kebab-case 命名法
+- 前缀分类：--bg（背景）、--text（文字）、--code（代码）、--border（边框）等
+- 语义化命名，便于理解和维护
+
+**亮色与暗色变量对应关系**
+- 每个亮色变量在 `[data-theme="dark"]` 中都有对应定义
+- 变量名保持一致，仅值不同
+
+### 组件样式隔离
+
+**PostLayout 组件**
+- 确保文章内容区域使用 `.post-content` 类包裹
+- 所有 Markdown 样式限定在此作用域内
+
+**全局样式与组件样式协同**
+- 全局样式定义基础规范
+- 组件样式处理特定场景
+
+### 性能优化考量
+
+**CSS 体积控制**
+- 避免冗余样式定义
+- 使用 CSS 变量减少重复代码
+- 生产环境压缩 CSS
+
+**代码高亮性能**
+- Shiki 在构建时高亮，无运行时性能损耗
+- 避免客户端高亮库增加包体积
+
+**字体加载优化**
+- 使用系统字体栈，避免额外字体加载
+- 如需自定义字体，采用字体子集化和预加载
+
+## 验收标准
+
+### 风格统一性检查
+
+- 所有页面组件遵循统一的色彩体系
+- 间距、圆角、阴影等设计元素保持一致
+- 亮色和暗色模式切换流畅，无样式错乱
+- 响应式布局在各断点表现正常
+
+### Markdown 渲染质量
+
+- 标题层级清晰，视觉区分明显
+- 段落排版舒适，行高和间距合理
+- 列表、引用块、表格样式美观
+- 链接具有明确的视觉提示和交互反馈
+- 图片展示效果良好，支持悬停效果
+- 分隔线、行内代码等细节元素样式完善
+
+### 代码高亮效果
+
+- 支持常见编程语言的语法高亮（JavaScript、TypeScript、Python、Go、CSS、HTML 等）
+- 代码配色与整体主题协调
+- 亮色和暗色模式下代码可读性良好
+- 代码块具有清晰的边界和装饰效果
+- 行内代码与代码块视觉区分明显
+- 复制功能正常工作（如实现）
+
+### 可访问性
+
+- 颜色对比度符合 WCAG AA 标准
+- 键盘导航支持良好
+- 屏幕阅读器友好
+- 减少动画模式（prefers-reduced-motion）生效
+
+### 性能指标
+
+- 页面首次渲染时间无明显增加
+- CSS 文件体积控制在合理范围
+- 无不必要的客户端 JavaScript 加载
+- 代码高亮渲染速度快
+
+## 潜在风险与应对
+
+### 主题切换闪烁
+
+**风险描述**
+暗色模式切换时可能出现短暂的白屏或颜色闪烁。
+
+**应对策略**
+- 在 HTML 加载初期通过内联脚本读取主题偏好
+- 在 CSS 加载前应用主题属性
+- 使用 localStorage 持久化主题选择
+
+### 代码高亮主题适配问题
+
+**风险描述**
+选择的 Shiki 主题可能与整体风格不匹配。
+
+**应对策略**
+- 预先测试多个主题，选择最协调的方案
+- 必要时自定义 Shiki 主题配色
+- 通过 CSS 变量覆盖部分颜色
+
+### 移动端代码块可读性
+
+**风险描述**
+移动设备屏幕小，代码块显示可能不佳。
+
+**应对策略**
+- 设置合适的最小字号
+- 启用横向滚动，避免代码换行
+- 优化移动端代码块内边距
+
+### 长文章性能问题
+
+**风险描述**
+包含大量代码块的长文章可能导致渲染性能下降。
+
+**应对策略**
+- Shiki 在构建时处理，不影响运行时性能
+- 优化 CSS 选择器性能
+- 避免过度使用复杂动画
+
+## 后续优化方向
+
+### 交互增强
+
+- 代码块行高亮功能
+- 代码差异对比展示
+- 图片点击放大查看（Lightbox）
+- 文章目录自动生成和锚点跳转
+
+### 内容增强
+
+- 代码注释高亮
+- 公式渲染支持（KaTeX 或 MathJax）
+- 图表渲染支持（Mermaid）
+- 视频嵌入样式优化
+
+### 个性化定制
+
+- 用户可选代码高亮主题
+- 字号调节功能
+- 阅读进度指示器
+- 打印样式优化
+
+### 性能优化
+
+- 关键 CSS 内联
+- 非关键样式延迟加载
+- 图片懒加载和响应式图片
+- 字体加载策略优化
+
+## 潜在风险与应对
+
+### 主题切换闪烁
+
+**风险描述**
+暗色模式切换时可能出现短暂的白屏或颜色闪烁。
+
+**应对策略**
+- 在 HTML 加载初期通过内联脚本读取主题偏好
+- 在 CSS 加载前应用主题属性
+- 使用 localStorage 持久化主题选择
+
+### 代码高亮主题适配问题
+
+**风险描述**
+选择的 Shiki 主题可能与整体风格不匹配。
+
+**应对策略**
+- 预先测试多个主题，选择最协调的方案
+- 必要时自定义 Shiki 主题配色
+- 通过 CSS 变量覆盖部分颜色
+
+### 移动端代码块可读性
+
+**风险描述**
+移动设备屏幕小，代码块显示可能不佳。
+
+**应对策略**
+- 设置合适的最小字号
+- 启用横向滚动，避免代码换行
+- 优化移动端代码块内边距
+
+### 长文章性能问题
+
+**风险描述**
+包含大量代码块的长文章可能导致渲染性能下降。
+
+**应对策略**
+- Shiki 在构建时处理，不影响运行时性能
+- 优化 CSS 选择器性能
+- 避免过度使用复杂动画
+
+## 后续优化方向
+
+### 交互增强
+
+- 代码块行高亮功能
+- 代码差异对比展示
+- 图片点击放大查看（Lightbox）
+- 文章目录自动生成和锚点跳转
+
+### 内容增强
+
+- 代码注释高亮
+- 公式渲染支持（KaTeX 或 MathJax）
+- 图表渲染支持（Mermaid）
+- 视频嵌入样式优化
+
+### 个性化定制
+
+- 用户可选代码高亮主题
+- 字号调节功能
+- 阅读进度指示器
+- 打印样式优化
+
+### 性能优化
+
+- 关键 CSS 内联
+- 非关键样式延迟加载
+- 图片懒加载和响应式图片
+- 字体加载策略优化
+- 代码高亮渲染速度快
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,34 +0,0 @@
-# Project Scope Rules
-
-## 文件范围限制
-
-本项目根目录：
-
-./
-
-所有操作必须限制在当前项目目录内。
-
-禁止：
- 访问项目外文件
- 修改父级目录文件
- 创建项目外文件
- 修改用户目录中的其他内容
- 禁止访问服务端仓库
-
-## 修改规则
-
-修改前必须：
-1. 列出将修改的文件
-2. 说明修改原因
-3. 等待确认
-
-禁止修改：
-
-node_modules/
-.git/
-build/
-.env
-
-## 开发环境
-
-默认认为已经启动服务，端口为4321
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,22 +1,31 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import solidJs from '@astrojs/solid-js';
 import node from '@astrojs/node';
+import sitemap from '@astrojs/sitemap';

 // https://astro.build/config
 export default defineConfig({
  site: 'https://ua42.com',
  output: 'server',
-  server: {
-    host: "0.0.0.0",
-  },
+  integrations: [
+    solidJs(),
+    sitemap()
+  ],
  adapter: node({
    mode: 'standalone'
  }),
-  vite: {
-    server: {
-      ...(process.argv.includes('dev')
-        ? {watch: {usePolling: true}}
-        : {}),
-    }
+  markdown: {
+    syntaxHighlight: 'shiki',
+    shikiConfig: {
+      themes: {
+        light: 'github-light',
+        dark: 'one-dark-pro'
+      },
+      wrap: true,
+      transformers: []
+    },
+    remarkPlugins: [],
+    rehypePlugins: []
  }
 });
--- a/package.json
+++ b/package.json
@@ -10,20 +10,16 @@
    "deploy": "./scripts/deploy.sh"
  },
  "dependencies": {
-    "@astrojs/node": "11.0.2",
-    "astro": "^7.0.6",
-    "clipboard": "^2.0.11",
-    "dayjs": "^1.11.21",
-    "jsdom": "^29.1.1",
-    "ky": "^2.0.2",
+    "@astrojs/node": "^9.5.1",
+    "@astrojs/rss": "^4.0.14",
+    "@astrojs/sitemap": "^3.6.0",
+    "@astrojs/solid-js": "^5.1.3",
+    "astro": "^5.15.8",
+    "fuse.js": "^7.1.0",
    "modern-normalize": "^3.0.1",
-    "photoswipe": "^5.4.4",
-    "shiki": "^4.3.1"
+    "solid-js": "^1.9.10"
  },
  "volta": {
    "node": "22.21.1"
-  },
-  "devDependencies": {
-    "@types/jsdom": "^28.0.3"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +0,0 @@
-allowBuilds:
-  esbuild: true
-  sharp: true
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="placeholder favicon">
+  <defs>
+    <!-- 轻微渐变底色 -->
+    <linearGradient id="g" x1="0" x2="0" y1="0" y2="1">
+      <stop offset="0" stop-color="#f7f8fb"/>
+      <stop offset="1" stop-color="#e6e9f2"/>
+    </linearGradient>
+
+    <!-- 圆角外形的蒙版（用来制造中间空缺） -->
+    <mask id="holeMask">
+      <!-- 全白表示顯示 -->
+      <rect x="0" y="0" width="64" height="64" fill="white"/>
+      <!-- 中间用黑色（掏空） -->
+      <!-- 这里用一个较大的圆角方块作为"空缺" -->
+      <rect x="14" y="14" width="36" height="36" rx="8" ry="8" fill="black"/>
+    </mask>
+
+    <!-- 描边样式（虚线） -->
+    <pattern id="dash" width="6" height="6" patternUnits="userSpaceOnUse">
+      <rect width="6" height="6" fill="none"/>
+    </pattern>
+  </defs>
+
+  <!-- 圆角底板 -->
+  <rect x="2" y="2" width="60" height="60" rx="12" ry="12" fill="url(#g)" stroke="#d9dce8" stroke-width="1"/>
+
+  <!-- 在底板上绘制一个较暗的阴影区域，让边缘有质感 -->
+  <rect x="2" y="34" width="60" height="28" rx="12" ry="12" fill-opacity="0.03" fill="#000"/>
+
+  <!-- 使用mask把中间挖空（透明） -->
+  <g mask="url(#holeMask)">
+    <!-- 这层是底色的延伸，挖空后中间变透明 -->
+    <rect x="2" y="2" width="60" height="60" rx="12" ry="12" fill="url(#g)" />
+  </g>
+
+  <!-- 在被挖空的边缘画一圈圆角虚线作为占位提示 -->
+  <rect x="14" y="14" width="36" height="36" rx="8" ry="8"
+        fill="none" stroke="#9aa0b6" stroke-width="1.5" stroke-dasharray="3 3" />
+
+  <!-- 中心放置一个小图形（可选）: 一个微小的“文件”轮廓来提示占位 -->
+  <g transform="translate(28,20)">
+    <path d="M0 0 L8 0 L8 12 L0 12 Z" fill="none" stroke="#9aa0b6" stroke-width="1" stroke-linejoin="round"/>
+    <path d="M5 0 L5 3" stroke="#9aa0b6" stroke-width="1" stroke-linecap="round"/>
+  </g>
+</svg>
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,4 +0,0 @@
-User-agent: *
-Allow: /
-
-Sitemap: https://ua42.com/sitemap.xml
--- a/scripts/Dockerfile
+++ b/scripts/Dockerfile
@@ -1,13 +1,12 @@
 FROM alpine:3.22 AS base
 WORKDIR /app

-RUN apk add --no-cache --update nodejs
+RUN apk add --no-cache --update nodejs pnpm

 FROM base AS install
-RUN apk add --no-cache pnpm
 ENV NODE_ENV=production
 COPY package.json pnpm-lock.yaml ./
-RUN pnpm install --frozen-lockfile
+RUN pnpm install

 FROM install AS build
 COPY . .
--- a/scripts/deploy.sh
+++ b/scripts/deploy.sh
@@ -5,7 +5,7 @@ PROJECT_ROOT=$(cd -- "$(dirname "${BASH_SOURCE[0]}")/.." &> /dev/null && pwd)
 DOCKERFILE_PATH=./scripts/Dockerfile
 IMAGE_NAME=blog
 IMAGE_FILE_NAME=$IMAGE_NAME.tar.gz
-REMOTE_SERVER=01
+REMOTE_SERVER=02
 REMOTE_PATH=/srv/docker/nginx/www
 DOCKER_NETWORK=docker_app-bridge

--- a/src/components/ArticleCard.astro
+++ b/src/components/ArticleCard.astro
@@ -0,0 +1,181 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import { formatDate } from '@/utils/date';
+import { getReadingTime } from '@/utils/reading-time';
+
+interface Props {
+  post: CollectionEntry<'posts'>;
+}
+
+const { post } = Astro.props;
+const readingTime = getReadingTime(post.body);
+---
+
+<article class="article-card">
+  <a href={`/posts/${post.slug}`} class="card-link">
+    <div class="title-row">
+      <h2 class="title">{post.data.title}</h2>
+      <span class="category">{post.data.category}</span>
+    </div>
+    <p class="description">{post.data.description}</p>
+    <div class="meta">
+      <time datetime={post.data.pubDate.toISOString()}>
+        {formatDate(post.data.pubDate)}
+      </time>
+      <span class="separator">·</span>
+      <span>{readingTime}</span>
+    </div>
+    {post.data.tags.length > 0 && (
+      <div class="tags">
+        {post.data.tags.map((tag, index) => (
+          <span class="tag">
+            #{tag}{index < post.data.tags.length - 1 ? ', ' : ''}
+          </span>
+        ))}
+      </div>
+    )}
+  </a>
+</article>
+
+<style>
+  .article-card {
+    padding: 1.75rem 2rem;
+    background: transparent;
+    border-radius: 0;
+    transition: all var(--transition-base);
+    border: none;
+    border-bottom: 1px solid var(--border-color);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .article-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 4px;
+    background: var(--accent-color);
+    transform: scaleY(0);
+    transform-origin: top;
+    transition: transform var(--transition-base);
+  }
+
+  .article-card:hover {
+    transform: translateY(-2px);
+    background: var(--bg-secondary);
+  }
+
+  .article-card:hover::before {
+    transform: scaleY(1);
+  }
+
+  .card-link {
+    display: block;
+    color: inherit;
+  }
+
+  .title-row {
+    display: flex;
+    align-items: baseline;
+    gap: 1rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .title {
+    font-size: 1.625rem;
+    color: var(--text-heading);
+    line-height: 1.3;
+    font-weight: 700;
+    transition: color var(--transition-base);
+    flex: 1;
+  }
+
+  .article-card:hover .title {
+    color: var(--accent-color);
+  }
+
+  .category {
+    color: var(--accent-secondary);
+    font-size: 0.875rem;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+
+  .description {
+    color: var(--text-secondary);
+    line-height: 1.7;
+    margin-bottom: 1rem;
+    font-size: 1rem;
+  }
+
+  .meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-tertiary);
+    font-size: 0.875rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .separator {
+    opacity: 0.5;
+  }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+  }
+
+  .tag {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    font-weight: 400;
+    transition: color var(--transition-fast);
+  }
+
+  .article-card:hover .tag {
+    color: var(--accent-secondary);
+  }
+
+  @media (max-width: 768px) {
+    .article-card {
+      padding: 1.5rem 1rem;
+    }
+
+    .title {
+      font-size: 1.375rem;
+    }
+
+    .title-row {
+      flex-direction: column;
+      gap: 0.5rem;
+      align-items: flex-start;
+    }
+
+    .description {
+      font-size: 0.9375rem;
+    }
+
+    .meta {
+      font-size: 0.8125rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .article-card {
+      padding: 1.25rem 1rem;
+    }
+
+    .title {
+      font-size: 1.25rem;
+    }
+
+    .description {
+      font-size: 0.875rem;
+      line-height: 1.6;
+    }
+  }
+</style>
--- a/src/components/BackToTop.tsx
+++ b/src/components/BackToTop.tsx
@@ -0,0 +1,44 @@
+import { createSignal, onMount, onCleanup, Show } from 'solid-js';
+
+export default function BackToTop() {
+  const [isVisible, setIsVisible] = createSignal(false);
+
+  onMount(() => {
+    const handleScroll = () => {
+      setIsVisible(window.scrollY > 800);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    onCleanup(() => window.removeEventListener('scroll', handleScroll));
+  });
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <Show when={isVisible()}>
+      <button
+        class="back-to-top"
+        onClick={scrollToTop}
+        aria-label="返回顶部"
+      >
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 15l-6-6-6 6"></path>
+        </svg>
+      </button>
+    </Show>
+  );
+}
--- a/src/components/BaseFooter.astro
+++ b/src/components/BaseFooter.astro
@@ -0,0 +1,28 @@
+<style>
+  footer {
+    background-color: #1a1a1a;
+    height: 70px;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .content {
+    color: aliceblue;
+    max-width: var(--layout-width);
+    margin: 0 auto;
+    color: #f9f8f6;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    font-size: 14px;
+    justify-content: center;
+  }
+</style>
+
+<footer>
+  <div class="content">
+    <a href="https://beian.miit.gov.cn/#/Integrated/index">
+      备案号：鄂ICP备2023000060号-2
+    </a>
+  </div>
+</footer>
--- a/src/components/BaseHeader.astro
+++ b/src/components/BaseHeader.astro
@@ -0,0 +1,43 @@
+<style>
+  header {
+    height: 60px;
+    position: sticky;
+    top: 0;
+    z-index: 99999;
+    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
+    flex-shrink: 0;
+    background: #fff;
+  }
+
+  .main-nav {
+    max-width: var(--layout-width);
+    margin: 0 auto;
+    height: 100%;
+    padding: 0 16px;
+  }
+
+  .main-nav .menu {
+    list-style: none;
+    display: flex;
+    gap: 20px;
+    height: 100%;
+    align-items: center;
+  }
+
+  /* element: menu-item */
+  .main-nav .menu-item a {
+    text-decoration: none;
+    font-weight: bold;
+  }
+
+  .main-nav .menu-item a:hover {
+  }
+</style>
+
+<header>
+  <nav class="main-nav">
+    <ul class="menu">
+      <li class="menu-item"><a href="/">首页</a></li>
+    </ul>
+  </nav>
+</header>
--- a/src/components/IndexPage.astro
+++ b/src/components/IndexPage.astro
@@ -1,40 +0,0 @@
---
-import PostList from "@/components/Post/List.astro";
-import Pagination from "@/components/Post/Pagination.astro";
-import type {Post} from "@/types";
-
-interface Props {
-  posts: Post[]
-  page: number
-  totalPage: number
-}
-
-const {posts, page, totalPage} = Astro.props
---
-<main>
-  <div class="intro">
-    <p>did you stand too close to the fire?<br>
-      like a liar looking for forgiveness from a stone.</p>
-  </div>
-
-  <PostList posts={posts}/>
-  <Pagination page={page} totalPage={totalPage}/>
-</main>
-
-
-<style>
-  .intro {
-    border-bottom: var(--border-secondary);
-    line-height: 2;
-    font-size: 15px;
-    color: var(--text-secondary);
-    padding-bottom: 32px;
-    margin-bottom: 12px;
-  }
-
-  @media (max-width: 640px) {
-    .intro{
-      padding-bottom: 24px;
-    }
-  }
-</style>
--- a/src/components/LazyImage.astro
+++ b/src/components/LazyImage.astro
@@ -1,130 +0,0 @@
---
-interface Props {
-  src: string;
-  alt?: string;
-  width?: number;
-  height?: number;
-  class?: string;
-}
-
-const {
-  src,
-  alt = "",
-  width,
-  height,
-  class: className = ""
-} = Astro.props;
---
-
-<div
-  class={`lazy-image ${className}`}
-  data-src={src}
-  style={`aspect-ratio:${width}/${height}`}
->
-  <div class="placeholder"></div>
-
-  <img
-    class="real-image"
-    alt={alt}
-    width={width}
-    height={height}
-    loading="lazy"
-    decoding="async"
-  />
-</div>
-
-
-<style>
-.lazy-image {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-}
-
-.lazy-image img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.placeholder {
-  position: absolute;
-  inset: 0;
-  background-image: linear-gradient(
-    90deg,
-    #f3f4f6 0%,
-    #e5e7eb 50%,
-    #f3f4f6 100%
-  );
-  background-size: 200% 100%;
-  animation: loading 1.5s infinite;
-}
-
-@keyframes loading {
-  from {
-    background-position: 200% 0;
-  }
-
-  to {
-    background-position: -200% 0;
-  }
-}
-
-.real-image {
-  opacity: 0;
-  transition: opacity .35s ease;
-}
-
-.real-image.loaded {
-  opacity: 1;
-}
-</style>
-
-
-<script>
-function initLazyImages() {
-  const images = document.querySelectorAll(".lazy-image");
-
-  const observer = new IntersectionObserver(
-    entries => {
-      entries.forEach(entry => {
-
-        if (!entry.isIntersecting) return;
-
-        const container = entry.target as HTMLElement;
-        const img = container.querySelector(
-          ".real-image"
-        ) as HTMLImageElement;
-
-        const src = container.dataset.src;
-
-        if (!src) return;
-
-        img.src = src;
-
-        img.onload = () => {
-          img.classList.add("loaded");
-
-          const placeholder =
-            container.querySelector(".placeholder");
-
-          placeholder?.remove();
-        };
-
-        observer.unobserve(container);
-      });
-    },
-    {
-      rootMargin: "300px"
-    }
-  );
-
-
-  images.forEach(img => observer.observe(img));
-}
-
-
-initLazyImages();
-</script>
--- a/src/components/Link.astro
+++ b/src/components/Link.astro
@@ -0,0 +1,12 @@
+---
+interface Props {
+  href: string;
+  class?: string;
+}
+
+const { href, class: className } = Astro.props;
+---
+
+<a href={href} class={className}>
+  <slot />
+</a>
--- a/src/components/Post/List.astro
+++ b/src/components/Post/List.astro
@@ -1,83 +0,0 @@
---
-import type {Post} from "@/types";
-import {formatDatetime} from '@/lib/format.ts'
-
-interface Props {
-  posts: Post[]
-}
-const {posts} = Astro.props
---
-
-<div class="posts">
-  {posts.map(item => (
-    <div class="post">
-      <span class="d">{formatDatetime(item.published_at, 'YY.MM.DD')}</span>
-      <h2><a href=`/post/${item.slug}`>{item.title}</a></h2>
-      <span class="arrow">→</span>
-    </div>
-  ))}
-</div>
-
-<style>
-  .posts {
-
-  }
-
-  .post {
-    display: flex;
-    align-items: baseline;
-    gap: 20px;
-    padding: 26px 0;
-    border-bottom: var(--border-secondary);
-  }
-
-  .post .d {
-    font-size: 14px;
-    color: var(--text-meta);
-    min-width: 80px;
-    letter-spacing: 1px;
-  }
-
-  .post h2 {
-    font-size: 16px;
-    font-weight: normal;
-    flex: 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .post h2 a {
-    color: var(--text-primary);
-    text-decoration: none;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .post h2 a:hover {
-    color: var(--text-title-hover);
-    text-decoration: underline;
-    text-underline-offset: 6px;
-  }
-
-  .post .arrow {
-    color: #d0d0d0;
-    font-size: 14px;
-    transition: transform 0.2s, color 0.2s;
-  }
-
-  .post:hover .arrow {
-    color: #334155;
-  }
-
-  @media (max-width: 640px) {
-    .post .d {
-      min-width: 64px;
-    }
-
-    .post h2 {
-      font-size: 15px;
-    }
-  }
-</style>
--- a/src/components/Post/Pagination.astro
+++ b/src/components/Post/Pagination.astro
@@ -1,49 +0,0 @@
---
-interface Props {
-  page: number
-  totalPage: number
-}
-
-const {page, totalPage} = Astro.props
---
-
-<!--分页器-->
-{totalPage > 1 &&
-<nav class="pagination" aria-label="分页">
-  {Array.from({length: totalPage}).map((_, index) => {
-    if (page === index + 1) {
-      return <span class="link current">{index + 1}</span>
-    }
-    return <a class="link" href={`/page/${index + 1}`}>{index + 1}</a>
-  })}
-  {page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页</a> :
-    <span class="link disabled">下一页</span>}
-</nav>}
-
-<style>
-  /* ========== 分页 ========== */
-  .pagination {
-    width: 100%;
-    text-align: right;
-    white-space: nowrap;
-    margin-top: 32px;
-    font-size: 13px;
-  }
-
-  .link {
-    display: inline-block;
-    margin: 0 12px;
-    line-height: 1;
-    color: var(--text-secondary);
-  }
-
-  .current{
-    color: var(--text-primary);
-    font-weight: bold;
-  }
-
-  .link.disabled {
-    color: var(--text-disabled);
-    cursor: not-allowed;
-  }
-</style>
--- a/src/components/SearchButton.tsx
+++ b/src/components/SearchButton.tsx
@@ -0,0 +1,157 @@
+import { createSignal, Show, For, onMount } from 'solid-js';
+import Fuse from 'fuse.js';
+import type { SearchIndexItem } from '@/utils/search-index';
+
+export default function SearchButton() {
+  const [isExpanded, setIsExpanded] = createSignal(false);
+  const [searchQuery, setSearchQuery] = createSignal('');
+  const [searchResults, setSearchResults] = createSignal<SearchIndexItem[]>([]);
+  const [showResults, setShowResults] = createSignal(false);
+  const [searchIndex, setSearchIndex] = createSignal<SearchIndexItem[]>([]);
+  const [fuse, setFuse] = createSignal<Fuse<SearchIndexItem> | null>(null);
+
+  let inputRef: HTMLInputElement | undefined;
+  let containerRef: HTMLDivElement | undefined;
+
+  // 加载搜索索引
+  onMount(async () => {
+    try {
+      const response = await fetch('/search-index.json');
+      const data = await response.json();
+      setSearchIndex(data);
+
+      // 初始化 Fuse.js
+      const fuseInstance = new Fuse(data, {
+        keys: [
+          { name: 'title', weight: 3 },
+          { name: 'description', weight: 2 },
+          { name: 'tags', weight: 2 },
+          { name: 'category', weight: 1.5 },
+          { name: 'content', weight: 1 },
+        ],
+        threshold: 0.3,
+        includeScore: true,
+      });
+      setFuse(fuseInstance);
+    } catch (error) {
+      console.error('Failed to load search index:', error);
+    }
+
+    // 点击外部关闭
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  });
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (containerRef && !containerRef.contains(event.target as Node)) {
+      setIsExpanded(false);
+      setShowResults(false);
+    }
+  };
+
+  const handleExpand = () => {
+    setIsExpanded(true);
+    setTimeout(() => inputRef?.focus(), 100);
+  };
+
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    
+    if (!query.trim()) {
+      setShowResults(false);
+      setSearchResults([]);
+      return;
+    }
+
+    const fuseInstance = fuse();
+    if (!fuseInstance) return;
+
+    const results = fuseInstance.search(query);
+    setSearchResults(results.slice(0, 10).map(r => r.item));
+    setShowResults(true);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      setIsExpanded(false);
+      setShowResults(false);
+      setSearchQuery('');
+    }
+  };
+
+  return (
+    <div class="search-container" ref={containerRef}>
+      <Show
+        when={isExpanded()}
+        fallback={
+          <button
+            class="search-button"
+            onClick={handleExpand}
+            aria-label="搜索"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="11" cy="11" r="8"></circle>
+              <path d="m21 21-4.35-4.35"></path>
+            </svg>
+          </button>
+        }
+      >
+        <div class="search-input-wrapper">
+          <input
+            ref={inputRef}
+            type="text"
+            class="search-input"
+            placeholder="搜索文章..."
+            value={searchQuery()}
+            onInput={(e) => handleSearch(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+          />
+          <button
+            class="search-close"
+            onClick={() => {
+              setIsExpanded(false);
+              setShowResults(false);
+              setSearchQuery('');
+            }}
+          >
+            ✕
+          </button>
+        </div>
+      </Show>
+
+      <Show when={showResults() && searchResults().length > 0}>
+        <div class="search-results">
+          <For each={searchResults()}>
+            {(result) => (
+              <a href={result.url} class="search-result-item">
+                <div class="result-title">{result.title}</div>
+                <div class="result-description">{result.description}</div>
+                <div class="result-meta">
+                  <span class="result-category">{result.category}</span>
+                  <span class="result-date">
+                    {new Date(result.date).toLocaleDateString('zh-CN')}
+                  </span>
+                </div>
+              </a>
+            )}
+          </For>
+        </div>
+      </Show>
+
+      <Show when={showResults() && searchQuery() && searchResults().length === 0}>
+        <div class="search-results">
+          <div class="no-results">未找到相关文章</div>
+        </div>
+      </Show>
+    </div>
+  );
+}
--- a/src/components/SiteFooter.astro
+++ b/src/components/SiteFooter.astro
@@ -0,0 +1,32 @@
+---
+const currentYear = new Date().getFullYear();
+---
+
+<footer class="site-footer">
+  <div class="container">
+    <p>&copy; {currentYear} 42. All rights reserved.</p>
+  </div>
+</footer>
+
+<style>
+  .site-footer {
+    border-top: 1px solid var(--border-color);
+    padding: 2rem 0;
+    margin-top: auto;
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+  }
+
+  .container {
+    max-width: var(--layout-width);
+    margin: 0 auto;
+    padding: 0 2rem;
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      padding: 0 1rem;
+    }
+  }
+</style>
--- a/src/components/SiteHeader.astro
+++ b/src/components/SiteHeader.astro
@@ -0,0 +1,381 @@
+---
+import ThemeToggle from './ThemeToggle';
+import SearchButton from './SearchButton';
+
+interface Props {
+  currentPath?: string;
+}
+
+const { currentPath = '/' } = Astro.props;
+
+const navItems = [
+  { label: '首页', href: '/' },
+  { label: '标签', href: '/tags' },
+  { label: '分类', href: '/categories' },
+  { label: '关于', href: '/about' },
+];
+---
+
+<header class="site-header">
+  <div class="container">
+    <a href="/" class="logo">
+      <span class="logo-icon"></span>
+      <span class="logo-text">
+        <span class="logo-number">42</span><span class="logo-suffix">的博客</span>
+      </span>
+    </a>
+    <nav class="nav">
+      {navItems.map(item => (
+        <a 
+          href={item.href} 
+          class:list={['nav-link', { active: currentPath === item.href }]}
+        >
+          {item.label}
+        </a>
+      ))}
+      <SearchButton client:load />
+      <ThemeToggle client:load />
+    </nav>
+  </div>
+</header>
+
+<style>
+  .site-header {
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    background: var(--bg-primary);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: var(--shadow-sm);
+    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
+  }
+
+  @supports (backdrop-filter: blur(10px)) {
+    .site-header {
+      backdrop-filter: blur(10px) saturate(180%);
+      -webkit-backdrop-filter: blur(10px) saturate(180%);
+      background: rgba(255, 255, 255, 0.9);
+    }
+
+    [data-theme="dark"] .site-header {
+      background: rgba(9, 9, 11, 0.95);
+    }
+  }
+
+  .container {
+    max-width: var(--layout-width);
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    transition: transform var(--transition-fast);
+  }
+
+  .logo:hover {
+    transform: scale(1.05);
+  }
+
+  .logo-icon {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--accent-color);
+    flex-shrink: 0;
+  }
+
+  .logo-text {
+    display: flex;
+    align-items: baseline;
+  }
+
+  .logo-number {
+    color: var(--accent-color);
+    font-weight: 700;
+  }
+
+  .logo-suffix {
+    color: var(--text-secondary);
+    font-size: 0.9em;
+    margin-left: 0.1em;
+  }
+
+  .nav {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+  }
+
+  .nav-link {
+    color: var(--text-secondary);
+    transition: all var(--transition-fast);
+    font-weight: 500;
+    position: relative;
+  }
+
+  .nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--accent-color);
+    transform: scaleX(0);
+    transition: transform var(--transition-fast);
+  }
+
+  .nav-link:hover {
+    color: var(--text-primary);
+    transform: scale(1.02);
+  }
+
+  .nav-link:hover::after {
+    transform: scaleX(1);
+  }
+
+  .nav-link.active {
+    color: var(--text-primary);
+    font-weight: 600;
+  }
+
+  .nav-link.active::after {
+    transform: scaleX(1);
+  }
+
+  .nav :global(.search-container) {
+    position: relative;
+  }
+
+  .nav :global(.search-button) {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-full);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    transition: all var(--transition-base);
+    cursor: pointer;
+  }
+
+  .nav :global(.search-button:hover) {
+    background: var(--accent-secondary);
+    border-color: var(--accent-secondary);
+    box-shadow: var(--shadow-md);
+  }
+
+  .nav :global(.search-button svg) {
+    color: var(--text-primary);
+  }
+
+  .nav :global(.search-button:hover svg) {
+    color: white;
+  }
+
+  .nav :global(.search-input-wrapper) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-full);
+    padding: 0.5rem 1rem;
+    min-width: 280px;
+    transition: all var(--transition-base);
+  }
+
+  .nav :global(.search-input-wrapper:focus-within) {
+    border-color: var(--accent-secondary);
+    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
+  }
+
+  .nav :global(.search-input) {
+    flex: 1;
+    border: none;
+    background: transparent;
+    outline: none;
+    font-size: 0.9375rem;
+    color: var(--text-primary);
+  }
+
+  .nav :global(.search-input::placeholder) {
+    color: var(--text-tertiary);
+  }
+
+  .nav :global(.search-close) {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: none;
+    background: transparent;
+    color: var(--text-tertiary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-fast);
+  }
+
+  .nav :global(.search-close:hover) {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
+
+  .nav :global(.search-results) {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    right: 0;
+    min-width: 400px;
+    max-height: 500px;
+    overflow-y: auto;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-xl);
+    z-index: 1000;
+  }
+
+  .nav :global(.search-result-item) {
+    display: block;
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+    transition: background var(--transition-fast);
+    color: inherit;
+  }
+
+  .nav :global(.search-result-item:last-child) {
+    border-bottom: none;
+  }
+
+  .nav :global(.search-result-item:hover) {
+    background: var(--bg-secondary);
+  }
+
+  .nav :global(.result-title) {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-heading);
+    margin-bottom: 0.25rem;
+  }
+
+  .nav :global(.result-description) {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .nav :global(.result-meta) {
+    display: flex;
+    gap: 0.75rem;
+    font-size: 0.8125rem;
+    color: var(--text-tertiary);
+  }
+
+  .nav :global(.result-category) {
+    color: var(--accent-secondary);
+    font-weight: 500;
+  }
+
+  .nav :global(.no-results) {
+    padding: 2rem;
+    text-align: center;
+    color: var(--text-secondary);
+  }
+
+  .nav :global(.theme-toggle) {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-full);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    transition: all var(--transition-base);
+    cursor: pointer;
+  }
+
+  .nav :global(.theme-toggle:hover) {
+    background: var(--accent-color);
+    border-color: var(--accent-color);
+    box-shadow: var(--shadow-md);
+  }
+
+  .nav :global(.theme-toggle .icon-wrapper) {
+    position: relative;
+    width: 20px;
+    height: 20px;
+  }
+
+  .nav :global(.theme-toggle .icon) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity var(--transition-base), transform var(--transition-base);
+    opacity: 0;
+    transform: rotate(-90deg) scale(0);
+  }
+
+  .nav :global(.theme-toggle .icon.active) {
+    opacity: 1;
+    transform: rotate(0) scale(1);
+  }
+
+  .nav :global(.theme-toggle svg) {
+    width: 100%;
+    height: 100%;
+    color: var(--text-primary);
+  }
+
+  .nav :global(.theme-toggle:hover svg) {
+    color: white;
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      padding: 0 1rem;
+    }
+
+    .nav {
+      gap: 1rem;
+      font-size: 0.875rem;
+    }
+
+    .logo {
+      font-size: 1.25rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .nav-link:not(:first-child) {
+      font-size: 0.8125rem;
+    }
+
+    .nav {
+      gap: 0.75rem;
+    }
+  }
+</style>
--- a/src/components/TableOfContents.tsx
+++ b/src/components/TableOfContents.tsx
@@ -0,0 +1,146 @@
+import { createSignal, onMount, onCleanup, For } from 'solid-js';
+import type { Heading } from '@/utils/extract-headings';
+
+interface Props {
+  headings: Heading[];
+}
+
+export default function TableOfContents(props: Props) {
+  const [activeId, setActiveId] = createSignal('');
+  const [isOpen, setIsOpen] = createSignal(false);
+
+  onMount(() => {
+    // 使用 IntersectionObserver 监听标题元素
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        });
+      },
+      {
+        rootMargin: '-100px 0px -66%',
+        threshold: 1.0,
+      }
+    );
+
+    // 观察所有标题元素
+    props.headings.forEach((heading) => {
+      const element = document.getElementById(heading.id);
+      if (element) {
+        observer.observe(element);
+      }
+    });
+
+    onCleanup(() => observer.disconnect());
+  });
+
+  const handleClick = (id: string) => {
+    const element = document.getElementById(id);
+    if (element) {
+      const top = element.getBoundingClientRect().top + window.scrollY - 80;
+      window.scrollTo({ top, behavior: 'smooth' });
+    }
+    setIsOpen(false);
+  };
+
+  // 如果标题少于3个，不显示目录
+  if (props.headings.length < 3) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* 桌面端：侧边固定目录 */}
+      <nav class="toc-desktop">
+        <div class="toc-title">目录</div>
+        <ul class="toc-list">
+          <For each={props.headings}>
+            {(heading) => (
+              <li
+                class="toc-item"
+                classList={{
+                  active: activeId() === heading.id,
+                  'level-3': heading.level === 3,
+                }}
+              >
+                <a
+                  href={`#${heading.id}`}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handleClick(heading.id);
+                  }}
+                >
+                  {heading.text}
+                </a>
+              </li>
+            )}
+          </For>
+        </ul>
+      </nav>
+
+      {/* 移动端：浮动按钮 + 抽屉 */}
+      <div class="toc-mobile">
+        <button
+          class="toc-toggle"
+          onClick={() => setIsOpen(!isOpen())}
+          aria-label="目录"
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <line x1="3" y1="6" x2="21" y2="6"></line>
+            <line x1="3" y1="12" x2="21" y2="12"></line>
+            <line x1="3" y1="18" x2="21" y2="18"></line>
+          </svg>
+        </button>
+
+        {isOpen() && (
+          <>
+            <div class="toc-overlay" onClick={() => setIsOpen(false)} />
+            <div class="toc-drawer">
+              <div class="toc-drawer-header">
+                <span class="toc-drawer-title">目录</span>
+                <button
+                  class="toc-drawer-close"
+                  onClick={() => setIsOpen(false)}
+                >
+                  ✕
+                </button>
+              </div>
+              <ul class="toc-drawer-list">
+                <For each={props.headings}>
+                  {(heading) => (
+                    <li
+                      class="toc-drawer-item"
+                      classList={{
+                        active: activeId() === heading.id,
+                        'level-3': heading.level === 3,
+                      }}
+                    >
+                      <a
+                        href={`#${heading.id}`}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          handleClick(heading.id);
+                        }}
+                      >
+                        {heading.text}
+                      </a>
+                    </li>
+                  )}
+                </For>
+              </ul>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
--- a/src/components/ThemeIcon.astro
+++ b/src/components/ThemeIcon.astro
@@ -1,76 +0,0 @@
---
---
-<div class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
-  <svg aria-hidden="true" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path class="sun" fill-rule="evenodd"
-          d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
-    <path class="moon" fill-rule="evenodd"
-          d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
-  </svg>
-</div>
-
-<style>
-  #themeToggle {
-    border: 0;
-    background: none;
-    user-select: none;
-  }
-
-  .theme-toggle {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  .sun {
-    fill: black;
-  }
-
-  .moon {
-    fill: transparent;
-  }
-
-  :global(.dark) .sun {
-    fill: transparent;
-  }
-
-  :global(.dark) .moon {
-    fill: white;
-  }
-</style>
-
-<script is:inline>
-  const meta = document.querySelector('meta[name="theme-color"]');
-
-  const theme = (() => {
-    const localStorageTheme = localStorage?.getItem("theme") ?? '';
-    if (['dark', 'light'].includes(localStorageTheme)) {
-      return localStorageTheme;
-    }
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-    return 'light';
-  })();
-
-  if (theme === 'light') {
-    document.documentElement.classList.remove('dark');
-    meta.setAttribute('content', '#ffffff');
-  } else {
-    document.documentElement.classList.add('dark');
-    meta.setAttribute('content', '#0a0a0a');
-  }
-
-  window.localStorage.setItem('theme', theme);
-
-  const handleToggleClick = () => {
-    const element = document.documentElement;
-    element.classList.toggle("dark");
-
-    const isDark = element.classList.contains("dark");
-    meta.setAttribute('content', isDark ? '#0a0a0a' : '#ffffff');
-    localStorage.setItem("theme", isDark ? "dark" : "light");
-  }
-
-  document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
-</script>
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,52 @@
+import { createSignal, onMount } from 'solid-js';
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = createSignal<'light' | 'dark'>('light');
+  const [isAnimating, setIsAnimating] = createSignal(false);
+
+  onMount(() => {
+    const currentTheme = document.documentElement.getAttribute('data-theme') as 'light' | 'dark';
+    setTheme(currentTheme || 'light');
+  });
+
+  const toggleTheme = () => {
+    setIsAnimating(true);
+    setTimeout(() => setIsAnimating(false), 600);
+
+    const newTheme = theme() === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      class="theme-toggle"
+      classList={{ 'is-animating': isAnimating() }}
+      aria-label="切换主题"
+      title={theme() === 'light' ? '切换到暗色模式' : '切换到亮色模式'}
+    >
+      <span class="icon-wrapper">
+        <span class="icon sun" classList={{ 'active': theme() === 'light' }}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="5"/>
+            <line x1="12" y1="1" x2="12" y2="3"/>
+            <line x1="12" y1="21" x2="12" y2="23"/>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+            <line x1="1" y1="12" x2="3" y2="12"/>
+            <line x1="21" y1="12" x2="23" y2="12"/>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+          </svg>
+        </span>
+        <span class="icon moon" classList={{ 'active': theme() === 'dark' }}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+          </svg>
+        </span>
+      </span>
+    </button>
+  );
+}
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -1,7 +1,7 @@
-export const siteConfig = {
-  site: "https://ua42.com",
-  siteTitle: "Uroboros",
-  postPageSize: 7,
-  description: "一个人的自留地 ，不欢迎我，也不欢迎你。",
-  git: "https://git.ua42.com"
+export const metadata = {
+  siteTitle: "42的博客",
+  siteDescription: "分享技术、思考与生活",
+  siteUrl: "https://ua42.com",
+  author: "42",
+  postsPerPage: 10,
 }
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -0,0 +1,18 @@
+import { defineCollection, z } from 'astro:content';
+
+const posts = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    pubDate: z.coerce.date(),
+    updatedDate: z.coerce.date().optional(),
+    author: z.string().default('42'),
+    image: z.string().optional(),
+    tags: z.array(z.string()).default([]),
+    category: z.string().default('未分类'),
+    draft: z.boolean().default(false),
+  }),
+});
+
+export const collections = { posts };
--- a/src/content/posts/markdown-test.md
+++ b/src/content/posts/markdown-test.md
@@ -0,0 +1,264 @@
+---
+title: "Markdown 渲染测试"
+description: "测试博客的 Markdown 渲染能力，包括各种元素和代码高亮"
+pubDate: 2024-11-21
+author: "42"
+tags: ["测试", "Markdown", "代码高亮"]
+category: "技术"
+draft: false
+---
+
+## 标题测试
+
+### 三级标题
+
+#### 四级标题
+
+##### 五级标题
+
+###### 六级标题
+
+## 段落和文本格式
+
+这是一个普通的段落。Lorem ipsum dolor sit amet, consectetur adipiscing elit. 中文和英文混排测试，确保行高和间距合理。
+
+这是另一个段落，包含**粗体文本**、*斜体文本*和`行内代码`。
+
+## 列表测试
+
+### 无序列表
+
+- 第一项
+- 第二项
+  - 嵌套项 2.1
+  - 嵌套项 2.2
+    - 更深层嵌套 2.2.1
+- 第三项
+
+### 有序列表
+
+1. 第一步
+2. 第二步
+   1. 子步骤 2.1
+   2. 子步骤 2.2
+3. 第三步
+
+## 链接测试
+
+这是一个[内联链接](https://example.com)。
+
+这是一个[带标题的链接](https://example.com "链接标题")。
+
+## 引用块测试
+
+> 这是一个引用块。
+> 
+> 引用块可以包含多个段落。
+> 
+> 引用块的样式应该与正文有明显区分。
+
+## 代码测试
+
+### 行内代码
+
+使用 `const` 和 `let` 声明变量，用 `console.log()` 输出日志。
+
+### JavaScript 代码块
+
+```javascript
+// JavaScript 示例
+function fibonacci(n) {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+const result = fibonacci(10);
+console.log(`Fibonacci(10) = ${result}`);
+
+// ES6+ 特性
+const numbers = [1, 2, 3, 4, 5];
+const doubled = numbers.map(n => n * 2);
+```
+
+### TypeScript 代码块
+
+```typescript
+// TypeScript 示例
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+class UserService {
+  private users: User[] = [];
+
+  addUser(user: User): void {
+    this.users.push(user);
+  }
+
+  getUserById(id: number): User | undefined {
+    return this.users.find(user => user.id === id);
+  }
+}
+
+const service = new UserService();
+service.addUser({ id: 1, name: '张三', email: 'zhang@example.com' });
+```
+
+### Python 代码块
+
+```python
+# Python 示例
+def fibonacci(n):
+    """计算斐波那契数列第 n 项"""
+    if n <= 1:
+        return n
+    return fibonacci(n - 1) + fibonacci(n - 2)
+
+# 列表推导式
+squares = [x**2 for x in range(10)]
+
+# 字典
+user = {
+    'name': '李四',
+    'age': 25,
+    'email': 'li@example.com'
+}
+
+print(f"用户: {user['name']}, 年龄: {user['age']}")
+```
+
+### CSS 代码块
+
+```css
+/* CSS 示例 */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.card {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+}
+```
+
+### HTML 代码块
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>示例页面</title>
+</head>
+<body>
+  <header class="site-header">
+    <h1>欢迎</h1>
+    <nav>
+      <a href="/">首页</a>
+      <a href="/about">关于</a>
+    </nav>
+  </header>
+  <main>
+    <article>
+      <h2>文章标题</h2>
+      <p>文章内容...</p>
+    </article>
+  </main>
+</body>
+</html>
+```
+
+### Go 代码块
+
+```go
+// Go 示例
+package main
+
+import (
+    "fmt"
+    "time"
+)
+
+type User struct {
+    ID    int
+    Name  string
+    Email string
+}
+
+func main() {
+    user := User{
+        ID:    1,
+        Name:  "王五",
+        Email: "wang@example.com",
+    }
+    
+    fmt.Printf("用户: %s (ID: %d)\n", user.Name, user.ID)
+    
+    // 并发示例
+    go func() {
+        fmt.Println("并发执行")
+    }()
+    
+    time.Sleep(time.Second)
+}
+```
+
+## 表格测试
+
+| 语言       | 类型     | 特点           | 流行度 |
+|-----------|---------|---------------|-------|
+| JavaScript | 动态     | 灵活，生态丰富   | ⭐⭐⭐⭐⭐ |
+| TypeScript | 静态     | 类型安全       | ⭐⭐⭐⭐ |
+| Python    | 动态     | 简洁，易学      | ⭐⭐⭐⭐⭐ |
+| Go        | 静态     | 高性能，并发    | ⭐⭐⭐⭐ |
+| Rust      | 静态     | 内存安全，性能  | ⭐⭐⭐ |
+
+## 图片测试
+
+![示例图片](https://via.placeholder.com/800x400/667eea/ffffff?text=示例图片)
+
+## 分隔线
+
+---
+
+## 混合内容测试
+
+让我们结合多种元素：
+
+1. **列表项包含代码**：使用 `Array.prototype.map()` 进行数组转换
+2. **列表项包含链接**：访问 [MDN 文档](https://developer.mozilla.org)
+3. **列表项包含强调**：这是*非常重要*的一点
+
+> **提示**：以上测试涵盖了常见的 Markdown 元素。
+> 
+> 确保在亮色和暗色模式下都有良好的显示效果。
+
+```typescript
+// 综合示例
+interface Config {
+  theme: 'light' | 'dark';
+  language: string;
+  features: string[];
+}
+
+const config: Config = {
+  theme: 'dark',
+  language: 'zh-CN',
+  features: ['syntax-highlight', 'responsive', 'dark-mode']
+};
+```
+
+## 结尾
+
+这个测试文档涵盖了博客系统支持的主要 Markdown 功能。
--- a/src/content/posts/welcome.md
+++ b/src/content/posts/welcome.md
@@ -0,0 +1,30 @@
+---
+title: "欢迎来到我的博客"
+description: "这是第一篇博客文章，介绍了博客的功能和技术栈。"
+pubDate: 2024-11-21
+author: "42"
+tags: ["博客", "Astro", "SolidJS"]
+category: "技术"
+draft: false
+---
+
+## 欢迎！
+
+这是使用 Astro + SolidJS 构建的现代化博客系统。
+
+### 技术特点
+
+- **服务端渲染**：基于 Astro 的 SSR 模式，提供极致的首屏加载速度
+- **响应式组件**：使用 SolidJS 构建高性能的交互式组件
+- **TypeScript**：完整的类型支持，提升开发体验
+- **内容管理**：使用 Content Collections 管理文章
+
+### 功能亮点
+
+1. 文章分类和标签系统
+2. 搜索功能
+3. RSS 订阅
+4. 响应式设计
+5. 暗色模式支持
+
+开始你的阅读之旅吧！
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,56 @@
+---
+import '@/styles/base.css';
+import { metadata } from '@/consts';
+
+interface Props {
+  title?: string;
+  description?: string;
+  image?: string;
+}
+
+const {
+  title = metadata.siteTitle,
+  description = metadata.siteDescription,
+  image = `${metadata.siteUrl}/og-image.jpg`,
+} = Astro.props;
+
+const fullTitle = title === metadata.siteTitle ? title : `${title} - ${metadata.siteTitle}`;
+---
+
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content={description} />
+    <meta name="generator" content={Astro.generator} />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={fullTitle} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content={image} />
+    <meta property="og:url" content={Astro.url} />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={fullTitle} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={image} />
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="sitemap" href="/sitemap-index.xml" />
+
+    <title>{fullTitle}</title>
+
+    <script is:inline>
+      // 主题切换逻辑
+      const theme = localStorage.getItem('theme') ||
+        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+      document.documentElement.setAttribute('data-theme', theme);
+    </script>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,69 +1,80 @@
 ---
-import "@/styles/global.css";
-import {siteConfig} from "@/consts.ts";
-import PageHeader from "./PageHeader.astro";
-import PageFooter from "./PageFooter.astro";
+import "@/styles/base.css";

-const {siteTitle} = siteConfig;
+import BaseHeader from "@/components/BaseHeader.astro";
+import BaseFooter from "@/components/BaseFooter.astro";

-interface Props {
-  title?: string;
-  description?: string;
-}
-
-const {title, description} = Astro.props;
-const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
+import { metadata } from "@/consts.ts";
+const { siteTitle } = metadata;
 ---

 <!doctype html>
-<html lang="zh-CN">
+<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
-  <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
-  <meta name="description" content={description}/>
-  <meta name="theme-color" content="#ffffff"/>
-  <title>{pageTitle}</title>
+    <title>{siteTitle}</title>
  </head>
  <body>
-<div class="container">
-  <PageHeader/>
+    <BaseHeader />
    <main>
-    <slot></slot>
+      <div class="grid-background"></div>
+      <slot />
    </main>
-  <PageFooter />
-</div>
+    <BaseFooter />
  </body>
 </html>

 <style>
+  html,
  body {
-    background: var(--background);
+    width: 100%;
+    height: 100%;
  }

-  .container {
-    width: 100%;
-    max-width: var(--layout-width);
-    height: 100%;
-    min-height: 100%;
-    margin: 0 auto;
-    padding: 24px;
+  body {
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 1;
-    padding: 24px 0;
+    max-width: var(--layout-width);
+    width: 100%;
+    margin: 0 auto;
+    padding: 16px;
+    position: relative;
  }

-  @media (max-width: 640px) {
-    .container {
-      padding: 16px;
-    }
+  .grid-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-color: #ffffff;
+    opacity: 0.3;
+    background-image: linear-gradient(#d7edfb 2px, transparent 2px),
+      linear-gradient(90deg, #d7edfb 2px, transparent 2px),
+      linear-gradient(#d7edfb 1px, transparent 1px),
+      linear-gradient(90deg, #d7edfb 1px, #ffffff 1px);
+    background-size:
+      50px 50px,
+      50px 50px,
+      10px 10px,
+      10px 10px;
+    background-position:
+      -2px -2px,
+      -2px -2px,
+      -1px -1px,
+      -1px -1px;
  }
 </style>
--- a/src/layouts/PageFooter.astro
+++ b/src/layouts/PageFooter.astro
@@ -1,26 +0,0 @@
-<footer>
-  <div>© 2026 Uroboros</div>
-  <a href="https://beian.miit.gov.cn" target="_blank">备案号：鄂ICP备2023000060号-2</a>
-</footer>
-
-<style>
-  footer {
-    flex-shrink: 0;
-    min-height: 0;
-    height: 84px;
-    padding-bottom: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 13px;
-    gap: 12px;
-    color: var(--text-secondary);
-  }
-
-  @media (max-width: 640px) {
-    footer {
-      height: 64px;
-      padding-bottom: 0;
-    }
-  }
-</style>
--- a/src/layouts/PageHeader.astro
+++ b/src/layouts/PageHeader.astro
@@ -1,56 +0,0 @@
---
-import {siteConfig} from "@/consts.ts";
-import ThemeIcon from "@/components/ThemeIcon.astro";
-
-const {siteTitle,git} = siteConfig;
---
-
-<header>
-  <a href="/"><h1>{siteTitle}</h1></a>
-  <nav>
-    <a href="/archive">归档</a>
-    <a target="_blank" href={git}>git</a>
-
-    <ThemeIcon />
-  </nav>
-</header>
-
-<style>
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: var(--border-primary);
-    margin-top: 32px;
-    padding-bottom: 24px;
-  }
-
-  nav {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    font-size: 14px;
-    color: var(--text-secondary);
-  }
-
-  nav a:hover {
-    color: var(--text-primary);
-  }
-
-  h1 {
-    font-size: 24px;
-    font-weight: 600;
-  }
-
-  @media (max-width: 640px) {
-    header {
-      margin-top: 12px;
-      margin-bottom: 0;
-    }
-
-    h1 {
-      font-size: 20px;
-      font-weight: normal;
-    }
-  }
-</style>
--- a/src/layouts/PostLayout.astro
+++ b/src/layouts/PostLayout.astro
@@ -0,0 +1,193 @@
+---
+import BaseLayout from './BaseLayout.astro';
+import { formatDate } from '@/utils/date';
+import type { CollectionEntry } from 'astro:content';
+import SiteHeader from '@/components/SiteHeader.astro';
+import TableOfContents from '@/components/TableOfContents';
+import BackToTop from '@/components/BackToTop';
+import { extractHeadings } from '@/utils/extract-headings';
+import '@/styles/toc.css';
+
+interface Props {
+  post: CollectionEntry<'posts'>;
+  readingTime: string;
+}
+
+const { post, readingTime } = Astro.props;
+const { title, description, pubDate, author, tags, category } = post.data;
+const headings = extractHeadings(post.body);
+---
+
+<BaseLayout title={title} description={description}>
+  <div class="layout">
+    <SiteHeader currentPath="" />
+
+    <main class="main">
+      <TableOfContents headings={headings} client:load />
+      <BackToTop client:load />
+      <article class="post">
+        <header class="post-header">
+          <h1 class="post-title">{title}</h1>
+          <div class="post-meta">
+            <div class="meta-row">
+              <span class="author">{author}</span>
+              <span class="separator">·</span>
+              <time datetime={pubDate.toISOString()}>
+                {formatDate(pubDate)}
+              </time>
+            </div>
+            <div class="meta-row">
+              <span class="reading-time">{readingTime}</span>
+              <span class="separator">·</span>
+              <span class="category">{category}</span>
+            </div>
+          </div>
+          {tags.length > 0 && (
+            <div class="post-tags">
+              {tags.map((tag, index) => (
+                <a href={`/tags/${tag}`} class="tag">
+                  #{tag}{index < tags.length - 1 ? ', ' : ''}
+                </a>
+              ))}
+            </div>
+          )}
+        </header>
+
+        <div class="post-content">
+          <slot />
+        </div>
+      </article>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container">
+        <p>&copy; {new Date().getFullYear()} {author}. All rights reserved.</p>
+      </div>
+    </footer>
+  </div>
+</BaseLayout>
+
+<style>
+  .layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .site-header {
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    background: var(--bg-primary);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: var(--shadow-sm);
+  }
+
+  .main {
+    flex: 1;
+    max-width: 680px;
+    margin: 0 auto;
+    padding: 3rem 2rem;
+    width: 100%;
+  }
+
+  .post-header {
+    margin-bottom: 3rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .post-title {
+    font-size: 2.5rem;
+    line-height: 1.3;
+    color: var(--text-heading);
+    margin-bottom: 1.5rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+  }
+
+  .post-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    color: var(--text-tertiary);
+    font-size: 0.9375rem;
+    margin-bottom: 1rem;
+  }
+
+  .meta-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .separator {
+    opacity: 0.5;
+  }
+
+  .category {
+    color: var(--accent-secondary);
+    font-weight: 600;
+  }
+
+  .post-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+    margin-top: 1rem;
+  }
+
+  .tag {
+    color: var(--text-secondary);
+    font-size: 0.9375rem;
+    font-weight: 400;
+    transition: color var(--transition-fast);
+  }
+
+  .tag:hover {
+    color: var(--accent-secondary);
+  }
+
+  .post-content {
+    margin-bottom: 3rem;
+  }
+
+  .site-footer {
+    border-top: 1px solid var(--border-color);
+    padding: 2rem 0;
+    margin-top: auto;
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+  }
+
+  @media (max-width: 768px) {
+    .main {
+      padding: 2rem 1rem;
+    }
+
+    .post-title {
+      font-size: 2rem;
+    }
+
+    .post-meta {
+      font-size: 0.875rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .main {
+      padding: 1.5rem 1rem;
+    }
+
+    .post-title {
+      font-size: 1.75rem;
+    }
+
+    .post-header {
+      margin-bottom: 2rem;
+      padding-bottom: 1.5rem;
+    }
+  }
+</style>
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -1,10 +0,0 @@
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-export const formatDatetime = (date: string,format = 'YYYY-MM-DD HH:mm') => {
-  return dayjs(date).tz('Asia/Shanghai').format(format);
-};
--- a/src/lib/processHtml.ts
+++ b/src/lib/processHtml.ts
@@ -1,115 +0,0 @@
-import {JSDOM} from 'jsdom'
-import {createHighlighter} from 'shiki'
-
-const DEFAULT_THEME = 'github-dark-dimmed'
-
-const highlighter = await createHighlighter({
-  themes: [DEFAULT_THEME],
-  langs: []
-})
-
-const SUPPORTED_LANGS = [
-  "bash", "json", "yaml", "xml", "html", "css", "scss",
-  "javascript", "typescript", "jsx", "tsx", "vue",
-  "markdown", "sql", "python", "go", "dockerfile", "nginx"
-] as const
-
-const loadedLangs = new Set<string>(['text'])
-
-type SupportedLang = typeof SUPPORTED_LANGS[number]
-
-const supportedSet = new Set<string>(SUPPORTED_LANGS)
-
-const ensureLangLoaded = async (lang: string): Promise<string> => {
-  if (lang === 'text' || loadedLangs.has(lang)) return lang
-  if (!supportedSet.has(lang)) return 'text'
-  try {
-    await highlighter.loadLanguage(lang as SupportedLang)
-    loadedLangs.add(lang)
-    return lang
-  } catch {
-    return 'text'
-  }
-}
-
-export const processHtmlWithJsdom = async (rawHtml: string) => {
-  const dom = new JSDOM(rawHtml)
-  const document = dom.window.document
-
-  const codeBlocks = document.querySelectorAll('pre code')
-
-  for (const codeBlock of codeBlocks) {
-    const preEl = codeBlock.parentElement
-    if (!preEl || preEl.tagName !== 'PRE') continue
-
-    const codeContent = codeBlock.textContent || ''
-    let lang = 'text'
-    for (const cls of codeBlock.classList) {
-      if (cls.startsWith('language-')) {
-        lang = cls.slice('language-'.length)
-        break
-      }
-    }
-
-    lang = await ensureLangLoaded(lang)   // ← 唯一改动点：按需加载
-
-    const highlighted = highlighter.codeToHtml(codeContent, {
-      lang,
-      theme: DEFAULT_THEME,
-    })
-
-    // 替换 DOM
-    const wrapper = document.createElement('div')
-    wrapper.innerHTML = highlighted.trim()
-
-    const newNode = wrapper.firstElementChild
-    if (newNode && preEl.parentNode) {
-      const container = document.createElement('div')
-      container.className = 'code-block'
-
-      const header = document.createElement('div')
-      header.className = 'code-header'
-
-      const headerLeft = document.createElement('div')
-      headerLeft.className = 'code-header-left'
-
-      const headerRight = document.createElement('div')
-      headerRight.className = 'code-header-right'
-
-      // 装饰点
-      const actions = document.createElement('div')
-      actions.className = 'code-actions'
-
-      const close = document.createElement('span')
-      close.className = 'dot close'
-
-      const minimize = document.createElement('span')
-      minimize.className = 'dot minimize'
-
-      const maximize = document.createElement('span')
-      maximize.className = 'dot maximize'
-
-      actions.append(close, minimize, maximize)
-
-      // 显示语言
-      const langDisplay = document.createElement('div')
-      langDisplay.className = 'code-language'
-      langDisplay.textContent = lang ? lang : 'text'
-
-      const copyBtn = document.createElement('div')
-      copyBtn.className = 'code-copy-btn'
-      copyBtn.textContent = '复制代码'
-
-      headerLeft.append(actions, langDisplay)
-      headerRight.append(copyBtn)
-
-      header.append(headerLeft, headerRight)
-
-      container.append(header, newNode)
-
-      preEl.parentNode.replaceChild(container, preEl)
-    }
-  }
-
-  return document.body.innerHTML
-}
--- a/src/lib/request.ts
+++ b/src/lib/request.ts
@@ -1,51 +0,0 @@
-import ky, {type Options} from 'ky'
-
-type ForwardHeaderSource = Headers | Record<string, string | undefined> | undefined | null
-
-const api = ky.create({
-  baseUrl: import.meta.env.VITE_API_BASE_URL
-});
-
-const pickHeader = (source: ForwardHeaderSource, name: string): string | undefined => {
-  if (!source) return undefined
-  if (source instanceof Headers) return source.get(name) ?? undefined
-  return source[name] ?? source[name.toLowerCase()]
-}
-
-const buildForwardHeaders = (source: ForwardHeaderSource): Record<string, string> => {
-  const xff = pickHeader(source, 'x-forwarded-for')
-  const realIp = pickHeader(source, 'x-real-ip')
-  const cfIp = pickHeader(source, 'cf-connecting-ip')
-  const ua = pickHeader(source, 'user-agent')
-  const referer = pickHeader(source, 'referer')
-  const host = pickHeader(source, 'host')
-  const proto = pickHeader(source, 'x-forwarded-proto')
-
-  return {
-    ...(xff ? {'x-forwarded-for': xff} : {}),
-    ...(realIp ? {'x-real-ip': realIp} : {}),
-    ...(cfIp ? {'cf-connecting-ip': cfIp} : {}),
-    ...(ua ? {'user-agent': ua} : {}),
-    ...(referer ? {referer} : {}),
-    ...(host ? {host} : {}),
-    ...(proto ? {'x-forwarded-proto': proto} : {})
-  }
-}
-
-export const createHttp = (forwardHeadersSource?: ForwardHeaderSource) => {
-  const forwardedHeaders = buildForwardHeaders(forwardHeadersSource)
-
-  return {
-    get: async <T = unknown>(url: string, options?: Options): Promise<T> => {
-      return api.get(url, {
-        ...options,
-        headers: {
-          ...forwardedHeaders,
-          ...(options?.headers ?? {})
-        }
-      }).json<T>()
-    }
-  };
-}
-
-export const http = createHttp();
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,18 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro";
---
-
-<Layout title="404" description="这里什么也没有">
-  <div class="not-found">
-    <h1>404 NOT FOUND</h1>
-  </div>
-</Layout>
-
-<style>
-  .not-found{
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-</style>
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -0,0 +1,283 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import SiteHeader from '@/components/SiteHeader.astro';
+
+---
+
+<BaseLayout title="关于">
+  <div class="layout">
+    <SiteHeader currentPath="/about" />
+
+    <main class="main">
+      <article class="about-content">
+        <h1>关于本站</h1>
+
+        <section>
+          <h2>技术栈</h2>
+          <p>本博客基于现代化的技术栈构建：</p>
+          <ul>
+            <li><strong>Astro</strong> - 现代化的静态网站生成器</li>
+            <li><strong>SolidJS</strong> - 高性能的响应式UI框架</li>
+            <li><strong>TypeScript</strong> - 类型安全的开发体验</li>
+            <li><strong>Docker</strong> - 容器化部署方案</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>关于作者</h2>
+          <p>42 - 一个热爱技术、喜欢折腾的开发者。</p>
+          <p>在这里分享技术心得、项目经验和生活感悟。</p>
+        </section>
+
+        <section>
+          <h2>联系方式</h2>
+          <p>欢迎通过以下方式与我交流：</p>
+          <ul>
+            <li>网站：<a href="https://ua42.com">ua42.com</a></li>
+            <li>Email: hello@ua42.com</li>
+          </ul>
+        </section>
+      </article>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container">
+        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
+      </div>
+    </footer>
+  </div>
+</BaseLayout>
+
+<style>
+  .layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .site-header {
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    background: var(--bg-primary);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: var(--shadow-sm);
+    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
+  }
+
+  @supports (backdrop-filter: blur(10px)) {
+    .site-header {
+      backdrop-filter: blur(10px) saturate(180%);
+      -webkit-backdrop-filter: blur(10px) saturate(180%);
+      background: rgba(255, 255, 255, 0.9);
+    }
+
+    [data-theme="dark"] .site-header {
+      background: rgba(15, 23, 42, 0.95);
+    }
+  }
+
+  .container {
+    max-width: var(--layout-width);
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .nav {
+    display: flex;
+    gap: 2rem;
+  }
+
+  .nav a {
+    color: var(--text-secondary);
+    transition: color var(--transition-fast);
+    font-weight: 500;
+    position: relative;
+  }
+
+  .nav a::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--gradient-primary);
+    transform: scaleX(0);
+    transition: transform var(--transition-fast);
+  }
+
+  .nav a:hover {
+    color: var(--text-primary);
+  }
+
+  .nav a:hover::after {
+    transform: scaleX(1);
+  }
+
+  .main {
+    flex: 1;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 3rem 2rem;
+    width: 100%;
+  }
+
+  .about-content h1 {
+    font-size: 3rem;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 3rem;
+    font-weight: 800;
+  }
+
+  .about-content section {
+    margin-bottom: 3rem;
+    padding: 2rem;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+    transition: transform var(--transition-base), box-shadow var(--transition-base);
+  }
+
+  .about-content section:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .about-content h2 {
+    font-size: 1.875rem;
+    color: var(--text-heading);
+    margin-bottom: 1.25rem;
+    font-weight: 700;
+    position: relative;
+    padding-left: 1rem;
+  }
+
+  .about-content h2::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 4px;
+    height: 70%;
+    background: var(--gradient-primary);
+    border-radius: var(--radius-sm);
+  }
+
+  .about-content p {
+    line-height: 1.8;
+    color: var(--text-primary);
+    margin-bottom: 1rem;
+  }
+
+  .about-content ul {
+    list-style: none;
+    padding-left: 0;
+    color: var(--text-primary);
+  }
+
+  .about-content li {
+    margin-bottom: 0.75rem;
+    line-height: 1.8;
+    padding-left: 1.75rem;
+    position: relative;
+  }
+
+  .about-content li::before {
+    content: '▸';
+    position: absolute;
+    left: 0;
+    color: var(--accent-color);
+    font-weight: bold;
+  }
+
+  .about-content a {
+    color: var(--link-color);
+    text-decoration: none;
+    font-weight: 500;
+    border-bottom: 2px solid transparent;
+    transition: border-color var(--transition-fast);
+  }
+
+  .about-content a:hover {
+    color: var(--link-hover);
+    border-bottom-color: var(--link-hover);
+  }
+
+  .site-footer {
+    border-top: 1px solid var(--border-color);
+    padding: 2rem 0;
+    margin-top: auto;
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      padding: 0 1rem;
+    }
+
+    .nav {
+      gap: 1rem;
+      font-size: 0.875rem;
+    }
+
+    .logo {
+      font-size: 1.25rem;
+    }
+
+    .main {
+      padding: 2rem 1rem;
+    }
+
+    .about-content h1 {
+      font-size: 2rem;
+      margin-bottom: 2rem;
+    }
+
+    .about-content section {
+      padding: 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    .about-content h2 {
+      font-size: 1.5rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .nav a:not(:first-child) {
+      font-size: 0.8125rem;
+    }
+
+    .about-content h1 {
+      font-size: 1.75rem;
+    }
+
+    .about-content section {
+      padding: 1.25rem;
+    }
+
+    .about-content h2 {
+      font-size: 1.375rem;
+    }
+  }
+</style>
--- a/src/pages/archive.astro
+++ b/src/pages/archive.astro
@@ -1,135 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro";
-import type {Archive} from "@/types/archive";
-import {createHttp} from "@/lib/request";
-
-const http = createHttp(Astro.request.headers);
-
-const {data} = await http.get<ApiResponse<Archive>>("posts/archives");
---
-
-
-<Layout title="归档" description="">
-  <div class="archive">
-    {
-      data.map((year) => (
-        <div class="archive-year">
-          <h2 class="year-title">
-            <span class="year-badge">{year.year}年</span>
-            <span class="year-count">共 {year.total} 篇</span>
-          </h2>
-          <div>
-            {year.list.map((month) => (
-              <div class="month-group">
-                <h3 class="month-title">{month.month} 月</h3>
-                <ul class="post-list">
-                  {month.list.map((post) => (
-                    <li class="post-item">
-                        <span class="post-date">
-                          {post.published_at_display}
-                        </span>
-                      <a class="post-title" href={`/post/${post.slug}`}>{post.title}</a>
-                      <span class="post-cat">{post.category_name}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-        </div>
-      ))
-    }
-  </div>
-</Layout>
-
-<style>
-  .archive {
-
-  }
-
-  .archive-year {
-
-  }
-
-  .year-title {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    color: var(--text-primary);
-    font-size: 28px;
-    margin-bottom: 24px;
-  }
-
-  .year-badge {
-
-  }
-
-  .year-count {
-    font-size: 14px;
-    font-weight: normal;
-  }
-
-  .month-group {
-    padding: 12px 0;
-  }
-
-  .month-title {
-    color: var(--text-primary);
-    font-weight: normal;
-  }
-
-  .post-list {
-    padding: 12px 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .post-item {
-    display: flex;
-    gap: 24px;
-    font-size: 14px;
-    border-bottom: var(--border-secondary);
-    padding: 18px 0;
-    align-items: center;
-  }
-
-  .post-item:last-child {
-    border-bottom: none;
-  }
-
-  .post-date {
-    color: var(--text-meta);
-  }
-
-  .post-title {
-    flex: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    color: var(--text-primary);
-    font-size: 16px;
-    text-underline-offset: 4px;
-    line-height: 24px;
-  }
-
-  .post-title:hover{
-    color: var(--text-title-hover);
-    text-decoration: underline;
-  }
-
-  .post-cat {
-    color: var(--text-meta);
-    font-size: 14px;
-  }
-
-  @media (max-width: 640px) {
-    .year-title{
-      font-size: 24px;
-    }
-
-    .post-title{
-      font-size: 15px;
-    }
-  }
-
-</style>
--- a/src/pages/categories/[category].astro
+++ b/src/pages/categories/[category].astro
@@ -0,0 +1,292 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+import ArticleCard from '@/components/ArticleCard.astro';
+import ThemeToggle from '@/components/ThemeToggle';
+
+const { category } = Astro.params;
+
+if (!category) {
+  return Astro.redirect('/404');
+}
+
+const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+const posts = allPosts
+  .filter(post => post.data.category === category)
+  .sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
+
+if (posts.length === 0) {
+  return Astro.redirect('/categories');
+}
+---
+
+<BaseLayout title={`分类: ${category}`}>
+  <div class="layout">
+    <header class="site-header">
+      <div class="container">
+        <a href="/" class="logo">42的博客</a>
+        <nav class="nav">
+          <a href="/">首页</a>
+          <a href="/tags">标签</a>
+          <a href="/categories">分类</a>
+          <a href="/about">关于</a>
+          <ThemeToggle client:load />
+        </nav>
+      </div>
+    </header>
+
+    <main class="main">
+      <div class="page-header">
+        <h1 class="page-title">分类: {category}</h1>
+        <p class="post-count">{posts.length} 篇文章</p>
+      </div>
+
+      <div class="posts-list">
+        {posts.map(post => (
+          <ArticleCard post={post} />
+        ))}
+      </div>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container">
+        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
+      </div>
+    </footer>
+  </div>
+</BaseLayout>
+
+<style>
+  .layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .site-header {
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    background: var(--bg-primary);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: var(--shadow-sm);
+    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
+  }
+
+  @supports (backdrop-filter: blur(10px)) {
+    .site-header {
+      backdrop-filter: blur(10px) saturate(180%);
+      -webkit-backdrop-filter: blur(10px) saturate(180%);
+      background: rgba(255, 255, 255, 0.9);
+    }
+
+    [data-theme="dark"] .site-header {
+      background: rgba(15, 23, 42, 0.95);
+    }
+  }
+
+  .container {
+    max-width: var(--layout-width);
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    transition: transform var(--transition-fast);
+  }
+
+  .logo:hover {
+    transform: scale(1.05);
+  }
+
+  .nav {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+  }
+
+  .nav a {
+    color: var(--text-secondary);
+    transition: color var(--transition-fast);
+    font-weight: 500;
+    position: relative;
+  }
+
+  .nav a::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--gradient-primary);
+    transform: scaleX(0);
+    transition: transform var(--transition-fast);
+  }
+
+  .nav a:hover {
+    color: var(--text-primary);
+  }
+
+  .nav a:hover::after {
+    transform: scaleX(1);
+  }
+
+  .nav :global(.theme-toggle) {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-full);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    transition: all var(--transition-base);
+    cursor: pointer;
+  }
+
+  .nav :global(.theme-toggle:hover) {
+    background: var(--accent-color);
+    border-color: var(--accent-color);
+    transform: rotate(180deg);
+    box-shadow: var(--shadow-md);
+  }
+
+  .nav :global(.theme-toggle .icon-wrapper) {
+    position: relative;
+    width: 20px;
+    height: 20px;
+  }
+
+  .nav :global(.theme-toggle .icon) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity var(--transition-base), transform var(--transition-base);
+    opacity: 0;
+    transform: rotate(-180deg) scale(0);
+  }
+
+  .nav :global(.theme-toggle .icon.active) {
+    opacity: 1;
+    transform: rotate(0) scale(1);
+  }
+
+  .nav :global(.theme-toggle.is-animating) {
+    animation: spin 0.6s ease-in-out;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .nav :global(.theme-toggle svg) {
+    width: 100%;
+    height: 100%;
+    color: var(--text-primary);
+  }
+
+  .nav :global(.theme-toggle:hover svg) {
+    color: white;
+  }
+
+  .main {
+    flex: 1;
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 3rem 2rem;
+    width: 100%;
+  }
+
+  .page-header {
+    margin-bottom: 3rem;
+  }
+
+  .page-title {
+    font-size: 2.75rem;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 0.75rem;
+    font-weight: 800;
+  }
+
+  .post-count {
+    color: var(--text-tertiary);
+    font-size: 1.125rem;
+  }
+
+  .posts-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .site-footer {
+    border-top: 1px solid var(--border-color);
+    padding: 2rem 0;
+    margin-top: auto;
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      padding: 0 1rem;
+    }
+
+    .nav {
+      gap: 1rem;
+      font-size: 0.875rem;
+    }
+
+    .logo {
+      font-size: 1.25rem;
+    }
+
+    .main {
+      padding: 2rem 1rem;
+    }
+
+    .page-title {
+      font-size: 2rem;
+    }
+
+    .post-count {
+      font-size: 1rem;
+    }
+
+    .posts-list {
+      gap: 1rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .nav a:not(:first-child) {
+      font-size: 0.8125rem;
+    }
+
+    .page-title {
+      font-size: 1.75rem;
+    }
+  }
+</style>
--- a/src/pages/categories/index.astro
+++ b/src/pages/categories/index.astro
@@ -0,0 +1,358 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+import ThemeToggle from '@/components/ThemeToggle';
+
+const posts = await getCollection('posts', ({ data }) => !data.draft);
+
+// 统计所有分类
+const categoryCount = new Map<string, number>();
+posts.forEach(post => {
+  const category = post.data.category;
+  categoryCount.set(category, (categoryCount.get(category) || 0) + 1);
+});
+
+// 按文章数量排序
+const sortedCategories = Array.from(categoryCount.entries())
+  .sort((a, b) => b[1] - a[1]);
+---
+
+<BaseLayout title="分类">
+  <div class="layout">
+    <header class="site-header">
+      <div class="container">
+        <a href="/" class="logo">42的博客</a>
+        <nav class="nav">
+          <a href="/">首页</a>
+          <a href="/tags">标签</a>
+          <a href="/categories">分类</a>
+          <a href="/about">关于</a>
+          <ThemeToggle client:load />
+        </nav>
+      </div>
+    </header>
+
+    <main class="main">
+      <h1 class="page-title">分类</h1>
+      <div class="categories-list">
+        {sortedCategories.map(([category, count]) => (
+          <a href={`/categories/${category}`} class="category-item">
+            <span class="category-name">{category}</span>
+            <span class="category-count">{count} 篇</span>
+          </a>
+        ))}
+      </div>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container">
+        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
+      </div>
+    </footer>
+  </div>
+</BaseLayout>
+
+<style>
+  .layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .site-header {
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    background: var(--bg-primary);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: var(--shadow-sm);
+    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
+  }
+
+  @supports (backdrop-filter: blur(10px)) {
+    .site-header {
+      backdrop-filter: blur(10px) saturate(180%);
+      -webkit-backdrop-filter: blur(10px) saturate(180%);
+      background: rgba(255, 255, 255, 0.9);
+    }
+
+    [data-theme="dark"] .site-header {
+      background: rgba(15, 23, 42, 0.95);
+    }
+  }
+
+  .container {
+    max-width: var(--layout-width);
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    transition: transform var(--transition-fast);
+  }
+
+  .logo:hover {
+    transform: scale(1.05);
+  }
+
+  .nav {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+  }
+
+  .nav a {
+    color: var(--text-secondary);
+    transition: color var(--transition-fast);
+    font-weight: 500;
+    position: relative;
+  }
+
+  .nav a::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--gradient-primary);
+    transform: scaleX(0);
+    transition: transform var(--transition-fast);
+  }
+
+  .nav a:hover {
+    color: var(--text-primary);
+  }
+
+  .nav a:hover::after {
+    transform: scaleX(1);
+  }
+
+  .nav :global(.theme-toggle) {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-full);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    transition: all var(--transition-base);
+    cursor: pointer;
+  }
+
+  .nav :global(.theme-toggle:hover) {
+    background: var(--accent-color);
+    border-color: var(--accent-color);
+    transform: rotate(180deg);
+    box-shadow: var(--shadow-md);
+  }
+
+  .nav :global(.theme-toggle .icon-wrapper) {
+    position: relative;
+    width: 20px;
+    height: 20px;
+  }
+
+  .nav :global(.theme-toggle .icon) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity var(--transition-base), transform var(--transition-base);
+    opacity: 0;
+    transform: rotate(-180deg) scale(0);
+  }
+
+  .nav :global(.theme-toggle .icon.active) {
+    opacity: 1;
+    transform: rotate(0) scale(1);
+  }
+
+  .nav :global(.theme-toggle.is-animating) {
+    animation: spin 0.6s ease-in-out;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .nav :global(.theme-toggle svg) {
+    width: 100%;
+    height: 100%;
+    color: var(--text-primary);
+  }
+
+  .nav :global(.theme-toggle:hover svg) {
+    color: white;
+  }
+
+  .main {
+    flex: 1;
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 3rem 2rem;
+    width: 100%;
+  }
+
+  .page-title {
+    font-size: 3rem;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 3rem;
+    font-weight: 800;
+  }
+
+  .categories-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1.5rem;
+    animation: fadeInUp 0.6s ease-out;
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .category-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 2rem 1.5rem;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+    transition: all var(--transition-base);
+    color: var(--text-primary);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .category-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--gradient-primary);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform var(--transition-base);
+  }
+
+  .category-item:hover {
+    background: var(--accent-color);
+    color: white;
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-xl);
+    border-color: var(--accent-color);
+  }
+
+  .category-item:hover::before {
+    transform: scaleX(1);
+  }
+
+  .category-name {
+    font-size: 1.375rem;
+    font-weight: 700;
+  }
+
+  .category-count {
+    font-size: 0.9rem;
+    opacity: 0.8;
+  }
+
+  .site-footer {
+    border-top: 1px solid var(--border-color);
+    padding: 2rem 0;
+    margin-top: auto;
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      padding: 0 1rem;
+    }
+
+    .nav {
+      gap: 1rem;
+      font-size: 0.875rem;
+    }
+
+    .logo {
+      font-size: 1.25rem;
+    }
+
+    .main {
+      padding: 2rem 1rem;
+    }
+
+    .page-title {
+      font-size: 2rem;
+      margin-bottom: 2rem;
+    }
+
+    .categories-list {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+    }
+
+    .category-item {
+      padding: 1.5rem 1.25rem;
+    }
+
+    .category-name {
+      font-size: 1.25rem;
+    }
+
+    .category-count {
+      font-size: 0.875rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .nav a:not(:first-child) {
+      font-size: 0.8125rem;
+    }
+
+    .page-title {
+      font-size: 1.75rem;
+    }
+
+    .category-item {
+      padding: 1.25rem 1rem;
+    }
+
+    .category-name {
+      font-size: 1.125rem;
+    }
+  }
+</style>
--- a/src/pages/embed/gitea.astro
+++ b/src/pages/embed/gitea.astro
@@ -1,139 +0,0 @@
---
-const noindex = true;
---
-
-<!doctype html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8"/>
-  <meta
-    name="viewport"
-    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
-  />
-  <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
-  <meta name="generator" content={Astro.generator}/>
-  <title>Gitea 入口</title>
-  <meta name="theme-color" content="#ffffff"/>
-  <meta name="robots" content="noindex, nofollow">
-  <style>
-    @import "modern-normalize";
-
-    :root {
-      --bg: #f6f7f9;
-      --card-bg: #ffffff;
-      --border: #e5e7eb;
-      --text-color: #2b2f36;
-      --text-secondary: #6b7280;
-      --primary: #4f6df5;
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-
-    body {
-      margin: 0;
-      min-height: 100vh;
-      background: var(--bg);
-      color: var(--text-color);
-      font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    .page-container {
-      height: 100vh;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 24px 24px 24px 24px;
-    }
-
-    .gitea-card {
-      width: 100%;
-      max-width: 520px;
-      background: var(--card-bg);
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-      overflow: hidden;
-    }
-
-    .gitea-card__title {
-      padding: 14px 20px;
-      font-size: 15px;
-      font-weight: 600;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .gitea-content {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .gitea-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 16px;
-      padding: 13px 20px;
-      font-size: 14px;
-    }
-
-    .gitea-item + .gitea-item {
-      border-top: 1px solid var(--border);
-    }
-
-    .gitea-item:hover {
-      background: #fafbfc;
-    }
-
-    .gitea-item__label {
-      color: var(--text-secondary);
-    }
-
-    .gitea-item__link {
-      color: var(--primary);
-      text-decoration: none;
-      white-space: nowrap;
-    }
-
-    .gitea-item__link:hover {
-      text-decoration: underline;
-    }
-  </style>
-</head>
-<body>
-<div class="page-container">
-  <div class="gitea-card">
-    <div class="gitea-card__title">常用入口</div>
-    <div class="gitea-content">
-      <div class="gitea-item">
-        <span class="gitea-item__label">博客地址</span>
-        <a class="gitea-item__link" target="_blank" href="https://ua42.com">点击访问</a>
-      </div>
-
-      <div class="gitea-item">
-        <span class="gitea-item__label">博客管理后台(支持游客查看)</span>
-        <a class="gitea-item__link" target="_blank" href="https://admin.ua42.com">点击访问</a>
-      </div>
-
-      <div class="gitea-item">
-        <span class="gitea-item__label">仓库地址</span>
-        <a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin">点击访问</a>
-      </div>
-
-      <div class="gitea-item">
-        <span class="gitea-item__label">博客服务端仓库</span>
-        <a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin/blog-server">点击访问</a>
-      </div>
-
-      <div class="gitea-item">
-        <span class="gitea-item__label">博客服务端 API文档</span>
-        <a class="gitea-item__link" target="_blank" href="https://dev.ua42.com/docs/server-documentation.html">点击访问</a>
-      </div>
-    </div>
-  </div>
-</div>
-</body>
-</html>
-
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,23 +1,295 @@
 ---
-import Layout from "@/layouts/Layout.astro";
-import {siteConfig} from "@/consts.ts";
-import {createHttp} from "@/lib/request.ts";
-import type {Post} from "@/types";
-import IndexPage from "@/components/IndexPage.astro";
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+import ArticleCard from '@/components/ArticleCard.astro';
+import SiteHeader from '@/components/SiteHeader.astro';

-const {postPageSize, description} = siteConfig;
+const posts = await getCollection('posts', ({ data }) => !data.draft);
+const sortedPosts = posts.sort((a, b) =>
+  b.data.pubDate.getTime() - a.data.pubDate.getTime()
+);

-const http = createHttp(Astro.request.headers);
-
-const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
-  searchParams: {
-    page: 1,
-    page_size: postPageSize,
-  },
-});
-const totalPage = Math.ceil(total / postPageSize);
+// 获取所有标签
+const allTags = [...new Set(posts.flatMap(post => post.data.tags))];
+const topTags = allTags.slice(0, 8);
 ---

-<Layout title="博客首页" description={description}>
-  <IndexPage page={1} totalPage={totalPage} posts={list}/>
-</Layout>
+<BaseLayout>
+  <div class="layout">
+    <SiteHeader currentPath="/" />
+
+    <main class="main">
+      <div class="hero">
+        <div class="hero-content">
+          <h1>42的博客</h1>
+          <p class="subtitle">分享技术、思考与生活</p>
+          <p class="description">在这里记录开发过程中的思考，分享工程实践经验，探索技术的可能性。</p>
+        </div>
+        <div class="hero-stats">
+          <div class="stat-item">
+            <div class="stat-number">{sortedPosts.length}</div>
+            <div class="stat-label">篇文章</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-number">{allTags.length}</div>
+            <div class="stat-label">个标签</div>
+          </div>
+          <div class="tags-preview">
+            <div class="tags-title">热门标签</div>
+            <div class="tags-list">
+              {topTags.map(tag => (
+                <a href={`/tags/${tag}`} class="tag-item">#{tag}</a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="posts-section">
+        <h2 class="section-title">最新文章</h2>
+        <div class="posts-list">
+          {sortedPosts.map(post => (
+            <ArticleCard post={post} />
+          ))}
+        </div>
+      </div>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container">
+        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
+      </div>
+    </footer>
+  </div>
+</BaseLayout>
+
+<style>
+  .layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .site-header {
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    background: var(--bg-primary);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: var(--shadow-sm);
+  }
+
+  .main {
+    flex: 1;
+    max-width: 760px;
+    margin: 0 auto;
+    padding: 0 2rem 3rem;
+    width: 100%;
+  }
+
+  .hero {
+    padding: 5rem 0;
+    margin-bottom: 4rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: start;
+  }
+
+  .hero-content {
+    text-align: left;
+  }
+
+  .hero h1 {
+    font-size: 3rem;
+    color: var(--text-heading);
+    margin-bottom: 1rem;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    position: relative;
+  }
+
+  .hero h1::after {
+    content: '';
+    position: absolute;
+    bottom: -0.5rem;
+    left: 0;
+    width: 80px;
+    height: 5px;
+    background: var(--accent-color);
+    border-radius: 2px;
+  }
+
+  .subtitle {
+    font-size: 1.5rem;
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+    margin-top: 1.5rem;
+  }
+
+  .description {
+    font-size: 1.0625rem;
+    color: var(--text-secondary);
+    line-height: 1.7;
+    max-width: 500px;
+  }
+
+  .hero-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .stat-item {
+    text-align: center;
+    padding: 1.5rem;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-lg);
+    border-left: 4px solid var(--accent-color);
+  }
+
+  .stat-number {
+    font-size: 3rem;
+    font-weight: 800;
+    color: var(--accent-color);
+    line-height: 1;
+  }
+
+  .stat-label {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    margin-top: 0.5rem;
+  }
+
+  .tags-preview {
+    padding: 1.5rem;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-lg);
+  }
+
+  .tags-title {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+    font-weight: 600;
+  }
+
+  .tags-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .tag-item {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    transition: color var(--transition-fast);
+  }
+
+  .tag-item:hover {
+    color: var(--accent-secondary);
+  }
+
+  .posts-section {
+    margin-bottom: 3rem;
+  }
+
+  .section-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-heading);
+    margin-bottom: 2rem;
+    padding-left: 1rem;
+    border-left: 4px solid var(--accent-color);
+  }
+
+  .posts-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .site-footer {
+    border-top: 1px solid var(--border-color);
+    padding: 2rem 0;
+    margin-top: auto;
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+  }
+
+  @media (max-width: 992px) {
+    .hero {
+      grid-template-columns: 1fr;
+      gap: 3rem;
+    }
+
+    .hero-stats {
+      flex-direction: row;
+      gap: 1rem;
+    }
+
+    .stat-item {
+      flex: 1;
+    }
+
+    .tags-preview {
+      grid-column: 1 / -1;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .main {
+      padding: 0 1rem 2rem;
+    }
+
+    .hero {
+      padding: 3rem 0;
+      margin-bottom: 3rem;
+    }
+
+    .hero h1 {
+      font-size: 2.25rem;
+    }
+
+    .subtitle {
+      font-size: 1.25rem;
+    }
+
+    .description {
+      font-size: 1rem;
+    }
+
+    .hero-stats {
+      flex-direction: column;
+    }
+
+    .stat-number {
+      font-size: 2.5rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .hero {
+      padding: 2rem 0;
+      margin-bottom: 2rem;
+    }
+
+    .hero h1 {
+      font-size: 2rem;
+    }
+
+    .subtitle {
+      font-size: 1.125rem;
+    }
+
+    .description {
+      font-size: 0.9375rem;
+    }
+
+    .stat-number {
+      font-size: 2rem;
+    }
+  }
+</style>
--- a/src/pages/page/[...page].astro
+++ b/src/pages/page/[...page].astro
@@ -1,34 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro";
-import {siteConfig} from "@/consts.ts";
-import {createHttp} from "@/lib/request.ts";
-import type {Post} from "@/types";
-import IndexPage from "@/components/IndexPage.astro";
-const {page} = Astro.params;
-
-const pageInt = Number(page);
-
-if (isNaN(pageInt) || pageInt <= 1) {
-  return Astro.redirect("/");
-}
-
-const {postPageSize,description} = siteConfig;
-
-const http = createHttp(Astro.request.headers);
-
-const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
-  searchParams: {
-    page: pageInt,
-    page_size: postPageSize,
-  },
-});
-const totalPage = Math.ceil(total / postPageSize);
-
-if (totalPage < pageInt) {
-  return Astro.redirect("/404");
-}
---
-
-<Layout title="博客首页" description={description}>
-  <IndexPage page={pageInt} totalPage={totalPage} posts={list}/>
-</Layout>
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -1,237 +0,0 @@
---
-import "@/styles/github-markdown.css";
-import "@/styles/github-markdown-reset.css";
-import "photoswipe/dist/photoswipe.css";
-
-import Layout from '@/layouts/Layout.astro';
-import {createHttp} from "@/lib/request.ts";
-import type {Post} from "@/types";
-import {processHtmlWithJsdom} from "@/lib/processHtml.ts";
-import {formatDatetime} from "@/lib/format.ts";
-
-const {slug} = Astro.params;
-
-const http = createHttp(Astro.request.headers);
-
-let data: Post;
-
-try {
-  const res = await http.get<ApiResponse<Post>>(`posts/${slug}`);
-  data = res.data;
-} catch (error) {
-  return Astro.redirect("/404");
-}
-
-const content = await processHtmlWithJsdom(data.content);
-const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
---
-
-<Layout title={data.title} description={data.summary}>
-  <article>
-    <div class="meta">
-      <div class="meta-left">
-        <span>{data.category_name} · {data.category_code.toUpperCase()}</span>
-        <span>{published_at}</span>
-      </div>
-
-      <div class="meta-view-count">{data.view_count} 次阅读</div>
-    </div>
-    <h1>{data.title}</h1>
-
-    {data.cover &&
-      <div>
-        <img class="cover" src={data.cover} alt={data.title}>
-      </div>
-    }
-
-    <p class="summary">{data.summary}</p>
-
-    <div class="divider"></div>
-
-    <div class="markdown-body" data-color-mode="dark" set:html={content}/>
-
-    {
-      data.tags.length > 0 &&
-      <div class="tags">
-        {data.tags.map(tag => <span>{tag.name}</span>)}
-      </div>
-    }
-  </article>
-</Layout>
-
-<style>
-  article {
-    width: 100%;
-    margin: 0 auto;
-    flex: 1;
-    flex-shrink: 0;
-  }
-
-  .cover {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-
-  .meta {
-    color: var(--text-meta);
-    font-size: 13px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-  }
-
-  .meta-left {
-    display: flex;
-    gap: 16px;
-    flex-wrap: wrap;
-  }
-
-  .meta-view-count:hover {
-    color: var(--text-primary);
-  }
-
-  h1 {
-    font-size: 28px;
-    line-height: 1.4;
-    font-weight: 500;
-    margin-bottom: 20px;
-  }
-
-  .summary {
-    font-size: 14px;
-    margin-bottom: 20px;
-    color: var(--text-meta);
-    line-height: 1.4;
-  }
-
-  .divider {
-    border-bottom: var(--border-secondary);
-  }
-
-  .markdown-body {
-    margin-top: 24px;
-    line-height: 1.8;
-    font-size: 15px;
-    color: var(--article-text-color);
-  }
-
-  .tags {
-    margin-top: 24px;
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-  }
-
-  .tags span {
-    font-size: 12px;
-    color: var(--text-secondary);
-    border: var(--border-primary);
-    border-radius: 20px;
-    padding: 8px 16px;
-  }
-
-  @media (max-width: 640px) {
-    h1{
-      font-size: 24px;
-    }
-  }
-</style>
-
-<script>
-  import PhotoSwipeLightbox from "photoswipe/lightbox";
-  import ClipboardJS from "clipboard";
-
-  const init = async () => {
-    const article = document.querySelector(".markdown-body")!;
-    const images = Array.from(article.querySelectorAll("img"));
-
-    if(images.length === 0) return
-
-    const waitImageLoaded = (img: HTMLImageElement) => {
-      if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
-        return Promise.resolve();
-      }
-
-      return new Promise<void>((resolve) => {
-        img.addEventListener("load", () => resolve(), {once: true});
-        img.addEventListener("error", () => resolve(), {once: true});
-      });
-    };
-
-    await Promise.all(
-      images.map(async (img) => {
-        if (img.closest("a")) return;
-
-        await waitImageLoaded(img);
-
-        const link = document.createElement("a");
-
-        link.href = img.currentSrc || img.src;
-        link.target = "_blank";
-        link.rel = "noreferrer";
-        link.dataset.pswpWidth = String(img.naturalWidth || img.width || 1200);
-        link.dataset.pswpHeight = String(
-          img.naturalHeight || img.height || 800,
-        );
-
-        img.parentNode?.insertBefore(link, img);
-        link.appendChild(img);
-      }),
-    );
-
-    const lightbox = new PhotoSwipeLightbox({
-      gallery: ".markdown-body",
-      children: "a[data-pswp-width]",
-      pswpModule: () => import("photoswipe"),
-
-      padding: {
-        top: 48,
-        right: 24,
-        bottom: 48,
-        left: 24,
-      },
-      bgOpacity: 0.5,
-      tapAction: "close",
-      bgClickAction: "close",
-    });
-
-    lightbox.init();
-  };
-
-  init();
-
-
-  const copyTimers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();
-
-  // 代码块复制功能
-  const clipboard = new ClipboardJS(".code-copy-btn", {
-    text: (el) => {
-      const sibling = el.closest(".code-header")?.nextElementSibling;
-      return sibling?.textContent.trim() || "";
-    }
-  });
-
-  clipboard.on("success", (e) => {
-    const btn = e.trigger as HTMLElement;
-
-    // 清理当前按钮之前的定时器
-    const oldTimer = copyTimers.get(btn);
-    if (oldTimer) {
-      clearTimeout(oldTimer);
-    }
-
-    const originalText = btn.textContent || "";
-
-    btn.textContent = "✓ 代码已复制";
-
-    const timer = setTimeout(() => {
-      btn.textContent = originalText;
-      copyTimers.delete(btn);
-    }, 2000);
-
-    copyTimers.set(btn, timer);
-
-    e.clearSelection();
-  });
-</script>
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -0,0 +1,24 @@
+---
+import { getCollection, getEntry } from 'astro:content';
+import PostLayout from '@/layouts/PostLayout.astro';
+import { getReadingTime } from '@/utils/reading-time';
+
+const { slug } = Astro.params;
+
+if (!slug) {
+  return Astro.redirect('/404');
+}
+
+const post = await getEntry('posts', slug);
+
+if (!post || post.data.draft) {
+  return Astro.redirect('/404');
+}
+
+const { Content } = await post.render();
+const readingTime = getReadingTime(post.body);
+---
+
+<PostLayout post={post} readingTime={readingTime}>
+  <Content />
+</PostLayout>
--- a/src/pages/rss.xml.ts
+++ b/src/pages/rss.xml.ts
@@ -0,0 +1,25 @@
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+import { metadata } from '@/consts';
+import type { APIContext } from 'astro';
+
+export async function GET(context: APIContext) {
+  const posts = await getCollection('posts', ({ data }) => !data.draft);
+
+  return rss({
+    title: metadata.siteTitle,
+    description: metadata.siteDescription,
+    site: context.site || metadata.siteUrl,
+    items: posts
+      .sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime())
+      .map(post => ({
+        title: post.data.title,
+        description: post.data.description,
+        pubDate: post.data.pubDate,
+        link: `/posts/${post.slug}/`,
+        categories: [post.data.category, ...post.data.tags],
+        author: post.data.author,
+      })),
+    customData: `<language>zh-CN</language>`,
+  });
+}
--- a/src/pages/search-index.json.ts
+++ b/src/pages/search-index.json.ts
@@ -0,0 +1,14 @@
+import type { APIRoute } from 'astro';
+import { generateSearchIndex } from '@/utils/search-index';
+
+export const GET: APIRoute = async () => {
+  const searchIndex = await generateSearchIndex();
+  
+  return new Response(JSON.stringify(searchIndex), {
+    status: 200,
+    headers: {
+      'Content-Type': 'application/json',
+      'Cache-Control': 'public, max-age=3600',
+    },
+  });
+};
--- a/src/pages/sitemap-pages.xml.ts
+++ b/src/pages/sitemap-pages.xml.ts
@@ -1,32 +0,0 @@
-import type {APIRoute} from 'astro';
-import {siteConfig} from "@/consts";
-
-const site = siteConfig.site
-
-const staticUrls = [
-  '',
-  '/archive'
-];
-
-export const GET: APIRoute = async () => {
-  const urls = staticUrls
-    .filter((url, index, array) => {
-      return array.indexOf(url) === index;
-    });
-
-  const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-              ${urls.map((url) => `<url>
-                <loc>${site}${url}</loc>
-              </url>`
-  )
-    .join('\n')}
-</urlset>`;
-
-  return new Response(xml, {
-    status: 200,
-    headers: {
-      'Content-Type': 'application/xml; charset=utf-8',
-      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
-    },
-  });
-};
--- a/src/pages/sitemap-posts.xml.ts
+++ b/src/pages/sitemap-posts.xml.ts
@@ -1,35 +0,0 @@
-import type {APIRoute} from 'astro';
-import {siteConfig} from "@/consts";
-import {createHttp} from "@/lib/request.ts";
-import type {PostForSitemap} from "@/types";
-import dayjs from "dayjs";
-
-const site =siteConfig.site
-
-export const GET: APIRoute = async (context) => {
-  const http = createHttp(context.request.headers);
-
-  const {data} = await http.get<ApiResponse<PostForSitemap[]>>("posts/sitemap")
-
-  const urls = data
-    .filter((url, index, array) => {
-      return array.indexOf(url) === index;
-    });
-
-  const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-              ${urls.map((post) => `<url>
-                <loc>${site}/post/${post.slug}</loc>
-                <lastmod>${dayjs(post.updated_at || post.created_at).toISOString()}</lastmod>
-              </url>`
-  )
-    .join('\n')}
-</urlset>`;
-
-  return new Response(xml, {
-    status: 200,
-    headers: {
-      'Content-Type': 'application/xml; charset=utf-8',
-      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
-    },
-  });
-};
--- a/src/pages/sitemap.xml.ts
+++ b/src/pages/sitemap.xml.ts
@@ -1,21 +0,0 @@
-import type {APIRoute} from 'astro';
-import {siteConfig} from "@/consts";
-
-const site = siteConfig.site
-
-export const GET: APIRoute = () => {
-  const xml = `<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  <sitemap>
-    <loc>${site}/sitemap-pages.xml</loc>
-  </sitemap>
-  <sitemap>
-    <loc>${site}/sitemap-posts.xml</loc>
-  </sitemap>
-</sitemapindex>`;
-
-  return new Response(xml, {
-    headers: {
-      'Content-Type': 'application/xml; charset=utf-8',
-    },
-  });
-};
--- a/src/pages/tags/[tag].astro
+++ b/src/pages/tags/[tag].astro
@@ -0,0 +1,407 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+import { formatDate } from '@/utils/date';
+import { getReadingTime } from '@/utils/reading-time';
+import ThemeToggle from '@/components/ThemeToggle';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('posts', ({ data }) => !data.draft);
+
+  const tags = new Set<string>();
+  posts.forEach(post => {
+    post.data.tags.forEach(tag => tags.add(tag));
+  });
+
+  return Array.from(tags).map(tag => ({
+    params: { tag },
+    props: {
+      posts: posts.filter(post => post.data.tags.includes(tag))
+        .sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime())
+    },
+  }));
+}
+
+const { tag } = Astro.params;
+const { posts } = Astro.props;
+---
+
+<BaseLayout title={`标签: ${tag}`}>
+  <div class="layout">
+    <header class="site-header">
+      <div class="container">
+        <a href="/" class="logo">42的博客</a>
+        <nav class="nav">
+          <a href="/">首页</a>
+          <a href="/tags">标签</a>
+          <a href="/categories">分类</a>
+          <a href="/about">关于</a>
+          <ThemeToggle client:load />
+        </nav>
+      </div>
+    </header>
+
+    <main class="main">
+      <div class="page-header">
+        <h1 class="page-title">标签: #{tag}</h1>
+        <p class="post-count">{posts.length} 篇文章</p>
+      </div>
+
+      <div class="posts-list">
+        {posts.map(post => {
+          const readingTime = getReadingTime(post.body);
+          return (
+            <article class="post-card">
+              <a href={`/posts/${post.slug}`} class="post-link">
+                <h2 class="post-title">{post.data.title}</h2>
+                <p class="post-description">{post.data.description}</p>
+                <div class="post-meta">
+                  <time datetime={post.data.pubDate.toISOString()}>
+                    {formatDate(post.data.pubDate)}
+                  </time>
+                  <span class="separator">·</span>
+                  <span>{readingTime}</span>
+                  <span class="separator">·</span>
+                  <span class="category">{post.data.category}</span>
+                </div>
+              </a>
+            </article>
+          );
+        })}
+      </div>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container">
+        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
+      </div>
+    </footer>
+  </div>
+</BaseLayout>
+
+<style>
+  .layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .site-header {
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    background: var(--bg-primary);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: var(--shadow-sm);
+    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
+  }
+
+  @supports (backdrop-filter: blur(10px)) {
+    .site-header {
+      backdrop-filter: blur(10px) saturate(180%);
+      -webkit-backdrop-filter: blur(10px) saturate(180%);
+      background: rgba(255, 255, 255, 0.9);
+    }
+
+    [data-theme="dark"] .site-header {
+      background: rgba(15, 23, 42, 0.95);
+    }
+  }
+
+  .container {
+    max-width: var(--layout-width);
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    transition: transform var(--transition-fast);
+  }
+
+  .logo:hover {
+    transform: scale(1.05);
+  }
+
+  .nav {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+  }
+
+  .nav a {
+    color: var(--text-secondary);
+    transition: color var(--transition-fast);
+    font-weight: 500;
+    position: relative;
+  }
+
+  .nav a::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--gradient-primary);
+    transform: scaleX(0);
+    transition: transform var(--transition-fast);
+  }
+
+  .nav a:hover {
+    color: var(--text-primary);
+  }
+
+  .nav a:hover::after {
+    transform: scaleX(1);
+  }
+
+  .nav :global(.theme-toggle) {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-full);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    transition: all var(--transition-base);
+    cursor: pointer;
+  }
+
+  .nav :global(.theme-toggle:hover) {
+    background: var(--accent-color);
+    border-color: var(--accent-color);
+    transform: rotate(180deg);
+    box-shadow: var(--shadow-md);
+  }
+
+  .nav :global(.theme-toggle .icon-wrapper) {
+    position: relative;
+    width: 20px;
+    height: 20px;
+  }
+
+  .nav :global(.theme-toggle .icon) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity var(--transition-base), transform var(--transition-base);
+    opacity: 0;
+    transform: rotate(-180deg) scale(0);
+  }
+
+  .nav :global(.theme-toggle .icon.active) {
+    opacity: 1;
+    transform: rotate(0) scale(1);
+  }
+
+  .nav :global(.theme-toggle.is-animating) {
+    animation: spin 0.6s ease-in-out;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .nav :global(.theme-toggle svg) {
+    width: 100%;
+    height: 100%;
+    color: var(--text-primary);
+  }
+
+  .nav :global(.theme-toggle:hover svg) {
+    color: white;
+  }
+
+  .main {
+    flex: 1;
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 3rem 2rem;
+    width: 100%;
+  }
+
+  .page-header {
+    margin-bottom: 3rem;
+  }
+
+  .page-title {
+    font-size: 2.75rem;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 0.75rem;
+    font-weight: 800;
+  }
+
+  .post-count {
+    color: var(--text-tertiary);
+    font-size: 1.125rem;
+  }
+
+  .posts-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .post-card {
+    padding: 2rem;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .post-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--gradient-primary);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform var(--transition-base);
+  }
+
+  .post-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-xl);
+    background: var(--bg-primary);
+  }
+
+  .post-card:hover::before {
+    transform: scaleX(1);
+  }
+
+  .post-link {
+    display: block;
+    color: inherit;
+  }
+
+  .post-title {
+    font-size: 1.75rem;
+    color: var(--text-heading);
+    margin-bottom: 0.75rem;
+    line-height: 1.3;
+    font-weight: 700;
+    transition: color var(--transition-base);
+  }
+
+  .post-card:hover .post-title {
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .post-description {
+    color: var(--text-secondary);
+    line-height: 1.7;
+    margin-bottom: 1rem;
+  }
+
+  .post-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-tertiary);
+    font-size: 0.875rem;
+  }
+
+  .separator {
+    opacity: 0.5;
+  }
+
+  .site-footer {
+    border-top: 1px solid var(--border-color);
+    padding: 2rem 0;
+    margin-top: auto;
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      padding: 0 1rem;
+    }
+
+    .nav {
+      gap: 1rem;
+      font-size: 0.875rem;
+    }
+
+    .logo {
+      font-size: 1.25rem;
+    }
+
+    .main {
+      padding: 2rem 1rem;
+    }
+
+    .page-title {
+      font-size: 2rem;
+    }
+
+    .post-count {
+      font-size: 1rem;
+    }
+
+    .posts-list {
+      gap: 1rem;
+    }
+
+    .post-card {
+      padding: 1.5rem;
+    }
+
+    .post-title {
+      font-size: 1.5rem;
+    }
+
+    .post-description {
+      font-size: 0.9375rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .nav a:not(:first-child) {
+      font-size: 0.8125rem;
+    }
+
+    .page-title {
+      font-size: 1.75rem;
+    }
+
+    .post-card {
+      padding: 1.25rem;
+    }
+
+    .post-title {
+      font-size: 1.375rem;
+    }
+  }
+</style>
--- a/src/pages/tags/index.astro
+++ b/src/pages/tags/index.astro
@@ -0,0 +1,346 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+import SiteHeader from '@/components/SiteHeader.astro';
+
+const posts = await getCollection('posts', ({ data }) => !data.draft);
+
+// 统计所有标签
+const tagCount = new Map<string, number>();
+posts.forEach(post => {
+  post.data.tags.forEach(tag => {
+    tagCount.set(tag, (tagCount.get(tag) || 0) + 1);
+  });
+});
+
+// 按文章数量排序
+const sortedTags = Array.from(tagCount.entries())
+  .sort((a, b) => b[1] - a[1]);
+---
+
+<BaseLayout title="标签">
+  <div class="layout">
+    <SiteHeader currentPath="/tags" />
+
+    <main class="main">
+      <h1 class="page-title">标签</h1>
+      <div class="tags-cloud">
+        {sortedTags.map(([tag, count]) => (
+          <a href={`/tags/${tag}`} class="tag-item">
+            <span class="tag-name">#{tag}</span>
+            <span class="tag-count">{count}</span>
+          </a>
+        ))}
+      </div>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container">
+        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
+      </div>
+    </footer>
+  </div>
+</BaseLayout>
+
+<style>
+  .layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .site-header {
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    background: var(--bg-primary);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: var(--shadow-sm);
+    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
+  }
+
+  @supports (backdrop-filter: blur(10px)) {
+    .site-header {
+      backdrop-filter: blur(10px) saturate(180%);
+      -webkit-backdrop-filter: blur(10px) saturate(180%);
+      background: rgba(255, 255, 255, 0.9);
+    }
+
+    [data-theme="dark"] .site-header {
+      background: rgba(15, 23, 42, 0.95);
+    }
+  }
+
+  .container {
+    max-width: var(--layout-width);
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    transition: transform var(--transition-fast);
+  }
+
+  .logo:hover {
+    transform: scale(1.05);
+  }
+
+  .nav {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+  }
+
+  .nav a {
+    color: var(--text-secondary);
+    transition: color var(--transition-fast);
+    font-weight: 500;
+    position: relative;
+  }
+
+  .nav a::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--gradient-primary);
+    transform: scaleX(0);
+    transition: transform var(--transition-fast);
+  }
+
+  .nav a:hover {
+    color: var(--text-primary);
+  }
+
+  .nav a:hover::after {
+    transform: scaleX(1);
+  }
+
+  .nav :global(.theme-toggle) {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-full);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    transition: all var(--transition-base);
+    cursor: pointer;
+  }
+
+  .nav :global(.theme-toggle:hover) {
+    background: var(--accent-color);
+    border-color: var(--accent-color);
+    transform: rotate(180deg);
+    box-shadow: var(--shadow-md);
+  }
+
+  .nav :global(.theme-toggle .icon-wrapper) {
+    position: relative;
+    width: 20px;
+    height: 20px;
+  }
+
+  .nav :global(.theme-toggle .icon) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity var(--transition-base), transform var(--transition-base);
+    opacity: 0;
+    transform: rotate(-180deg) scale(0);
+  }
+
+  .nav :global(.theme-toggle .icon.active) {
+    opacity: 1;
+    transform: rotate(0) scale(1);
+  }
+
+  .nav :global(.theme-toggle.is-animating) {
+    animation: spin 0.6s ease-in-out;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .nav :global(.theme-toggle svg) {
+    width: 100%;
+    height: 100%;
+    color: var(--text-primary);
+  }
+
+  .nav :global(.theme-toggle:hover svg) {
+    color: white;
+  }
+
+  .main {
+    flex: 1;
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 3rem 2rem;
+    width: 100%;
+  }
+
+  .page-title {
+    font-size: 3rem;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 3rem;
+    font-weight: 800;
+  }
+
+  .tags-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    animation: fadeInUp 0.6s ease-out;
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .tag-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.875rem 1.5rem;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+    transition: all var(--transition-base);
+    color: var(--text-primary);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .tag-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 3px;
+    height: 100%;
+    background: var(--gradient-primary);
+    transform: scaleY(0);
+    transition: transform var(--transition-base);
+  }
+
+  .tag-item:hover {
+    background: var(--accent-color);
+    color: white;
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-xl);
+    border-color: var(--accent-color);
+  }
+
+  .tag-item:hover::before {
+    transform: scaleY(1);
+  }
+
+  .tag-name {
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+
+  .tag-count {
+    font-size: 0.9rem;
+    opacity: 0.8;
+  }
+
+  .site-footer {
+    border-top: 1px solid var(--border-color);
+    padding: 2rem 0;
+    margin-top: auto;
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      padding: 0 1rem;
+    }
+
+    .nav {
+      gap: 1rem;
+      font-size: 0.875rem;
+    }
+
+    .logo {
+      font-size: 1.25rem;
+    }
+
+    .main {
+      padding: 2rem 1rem;
+    }
+
+    .page-title {
+      font-size: 2rem;
+      margin-bottom: 2rem;
+    }
+
+    .tags-cloud {
+      gap: 0.75rem;
+    }
+
+    .tag-item {
+      padding: 0.75rem 1.25rem;
+    }
+
+    .tag-name {
+      font-size: 1rem;
+    }
+
+    .tag-count {
+      font-size: 0.875rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .nav a:not(:first-child) {
+      font-size: 0.8125rem;
+    }
+
+    .page-title {
+      font-size: 1.75rem;
+    }
+
+    .tag-item {
+      padding: 0.625rem 1rem;
+    }
+
+    .tag-name {
+      font-size: 0.9375rem;
+    }
+  }
+</style>
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -0,0 +1,171 @@
+@import "modern-normalize";
+@import "./reset.css";
+@import "./typography.css";
+@import "./enhancements.css";
+
+:root {
+  --layout-width: 1200px;
+  --content-width: 680px;
+
+  /* 亮色模式 */
+  --bg-primary: #ffffff;
+  --bg-secondary: #fafaf9;
+  --bg-tertiary: #f5f5f4;
+  --text-primary: #18181b;
+  --text-secondary: #71717a;
+  --text-tertiary: #a1a1aa;
+  --text-heading: #09090b;
+  --link-color: #0891b2;
+  --link-hover: #0e7490;
+  --accent-color: #d97706;
+  --accent-secondary: #0891b2;
+  --success-color: #10b981;
+  --warning-color: #f59e0b;
+  --border-color: #e5e7eb;
+  --border-light: #f3f4f6;
+  
+  /* 代码相关 */
+  --code-inline-bg: #f4f5f7;
+  --code-inline-color: #e91e63;
+  --code-inline-border: #e5e7eb;
+  --code-block-bg: #f6f8fa;
+  --code-block-border: #e5e7eb;
+  --code-line-number: #9ca3af;
+  --code-highlight-bg: #fff9db;
+  
+  /* Markdown 元素 */
+  --quote-border: #3b82f6;
+  --quote-bg: #f8f9fa;
+  --table-border: #e5e7eb;
+  --table-header-bg: #f0f2f5;
+  --table-stripe-bg: #f8f9fa;
+  --link-underline: #3b82f6;
+  
+  /* 间距规范 */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 2.5rem;
+  --spacing-3xl: 3rem;
+  
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* 装饰线条颜色（替代渐变） */
+  --accent-line: var(--accent-color);
+  --accent-line-secondary: var(--accent-secondary);
+
+  /* 圆角 */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* 过渡 */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-theme="dark"] {
+  /* 暗色模式 */
+  --bg-primary: #09090b;
+  --bg-secondary: #18181b;
+  --bg-tertiary: #27272a;
+  --text-primary: #fafafa;
+  --text-secondary: #a1a1aa;
+  --text-tertiary: #71717a;
+  --text-heading: #fafafa;
+  --link-color: #06b6d4;
+  --link-hover: #22d3ee;
+  --accent-color: #fbbf24;
+  --accent-secondary: #06b6d4;
+  --success-color: #34d399;
+  --warning-color: #fbbf24;
+  --border-color: #27272a;
+  --border-light: #18181b;
+  
+  /* 代码相关 */
+  --code-inline-bg: #1e293b;
+  --code-inline-color: #f472b6;
+  --code-inline-border: #334155;
+  --code-block-bg: #1e293b;
+  --code-block-border: #334155;
+  --code-line-number: #64748b;
+  --code-highlight-bg: #374151;
+  
+  /* Markdown 元素 */
+  --quote-border: #60a5fa;
+  --quote-bg: #1e293b;
+  --table-border: #334155;
+  --table-header-bg: #1e293b;
+  --table-stripe-bg: #0f172a;
+  --link-underline: #60a5fa;
+  
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
+
+  /* 暗色模式装饰线条 */
+  --accent-line: var(--accent-color);
+  --accent-line-secondary: var(--accent-secondary);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-size: 16px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background-color var(--transition-base), color var(--transition-base);
+  min-height: 100vh;
+  position: relative;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
--- a/src/styles/css-reset.css
+++ b/src/styles/css-reset.css
@@ -1,13 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-}
-
-a {
-    color: inherit;
-    text-decoration: none;
-}
-
-ul,li{
-  list-style: none;
-}
--- a/src/styles/enhancements.css
+++ b/src/styles/enhancements.css
@@ -0,0 +1,295 @@
+/* UI/UX 增强样式 */
+
+/* 选中文本样式 */
+::selection {
+  background: var(--accent-color);
+  color: white;
+}
+
+::-moz-selection {
+  background: var(--accent-color);
+  color: white;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--text-tertiary);
+  border-radius: var(--radius-sm);
+  transition: background var(--transition-base);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-color);
+}
+
+/* Focus 样式增强 */
+*:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+
+/* 按钮基础样式增强 */
+button {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 平滑过渡类 */
+.fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 链接悬停效果 */
+a {
+  position: relative;
+}
+
+/* 响应式图片 */
+img {
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+}
+
+/* 代码块增强 */
+pre {
+  position: relative;
+}
+
+/* Shiki 代码块样式适配 */
+.astro-code,
+.shiki {
+  padding: 1.5rem;
+  border-radius: var(--radius-lg);
+  overflow-x: auto;
+  line-height: 1.6;
+  font-size: 0.875rem;
+  margin: 1.5rem 0;
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--code-block-border);
+}
+
+/* 代码块滚动条样式 */
+pre::-webkit-scrollbar,
+.astro-code::-webkit-scrollbar,
+.shiki::-webkit-scrollbar {
+  height: 8px;
+}
+
+pre::-webkit-scrollbar-track,
+.astro-code::-webkit-scrollbar-track,
+.shiki::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+pre::-webkit-scrollbar-thumb,
+.astro-code::-webkit-scrollbar-thumb,
+.shiki::-webkit-scrollbar-thumb {
+  background: var(--text-tertiary);
+  border-radius: var(--radius-sm);
+}
+
+pre::-webkit-scrollbar-thumb:hover,
+.astro-code::-webkit-scrollbar-thumb:hover,
+.shiki::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-color);
+}
+
+/* 移动端代码块优化 */
+@media (max-width: 768px) {
+  .astro-code,
+  .shiki,
+  article pre {
+    padding: 1rem;
+    font-size: 0.8125rem;
+    border-radius: var(--radius-md);
+  }
+}
+
+/* 加载动画 */
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+.skeleton {
+  animation: shimmer 2s infinite;
+  background: linear-gradient(
+    to right,
+    var(--bg-secondary) 0%,
+    var(--bg-tertiary) 50%,
+    var(--bg-secondary) 100%
+  );
+  background-size: 1000px 100%;
+}
+
+/* 工具提示基础样式 */
+[data-tooltip] {
+  position: relative;
+  cursor: help;
+}
+
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-8px);
+  padding: 0.5rem 0.75rem;
+  background: var(--text-heading);
+  color: white;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
+  z-index: 1000;
+}
+
+[data-tooltip]:hover::after {
+  opacity: 1;
+  transform: translateX(-50%) translateY(-4px);
+}
+
+/* 徽章样式 */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: var(--radius-full);
+  background: var(--accent-color);
+  color: white;
+}
+
+/* 分隔线增强 */
+hr {
+  margin: 2rem 0;
+  border: none;
+  height: 1px;
+  background: linear-gradient(
+    to right,
+    transparent,
+    var(--border-color),
+    transparent
+  );
+}
+
+/* 引用块增强样式 */
+blockquote {
+  position: relative;
+  isolation: isolate;
+}
+
+/* 响应式视频容器 */
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+}
+
+.video-container iframe,
+.video-container video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* 打印样式优化 */
+@media print {
+  body {
+    background: white;
+    color: black;
+  }
+
+  .site-header,
+  .site-footer,
+  .theme-toggle,
+  nav {
+    display: none;
+  }
+
+  article {
+    max-width: 100%;
+  }
+
+  a {
+    color: black;
+    text-decoration: underline;
+  }
+
+  pre,
+  code {
+    border: 1px solid #ccc;
+    page-break-inside: avoid;
+  }
+}
+
+/* 减少动画偏好设置 */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* 暗色模式特定增强 */
+[data-theme="dark"] img {
+  opacity: 0.9;
+}
+
+[data-theme="dark"] img:hover {
+  opacity: 1;
+}
+
+/* 高对比度模式支持 */
+@media (prefers-contrast: high) {
+  :root {
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+  }
+
+  button,
+  a {
+    outline: 2px solid currentColor;
+  }
+}
--- a/src/styles/github-markdown-reset.css
+++ b/src/styles/github-markdown-reset.css
@@ -1,84 +0,0 @@
-.markdown-body pre code {
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.markdown-body h1,
-.markdown-body h2,
-.markdown-body h3,
-.markdown-body h4,
-.markdown-body h5,
-.markdown-body h6 {
-  border-bottom: none;
-}
-
-@media (max-width: 768px) {
-  .markdown-body pre code {
-    font-size: inherit;
-  }
-}
-
-.markdown-body .highlight pre,
-.markdown-body pre {
-  border-radius: 0 0 8px 8px;
-}
-
-.markdown-body img {
-  margin: 12px 0 12px;
-}
-
-.code-block {
-}
-
-.code-header {
-  height: 36px;
-  background: var(--code-block-header-bg);
-  display: flex;
-  justify-content: space-between;
-  color: var(--text-primary);
-  align-items: center;
-  padding: 0 12px;
-  font-size: 14px;
-  border-radius: 8px 8px 0 0;
-}
-
-.code-header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.code-actions {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-}
-
-.code-actions .dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  display: block;
-}
-
-.code-actions .close {
-  background: #ff5f57;
-}
-
-.code-actions .minimize {
-  background: #febc2e;
-}
-
-.code-actions .maximize {
-  background: #28c840;
-}
-
-.code-copy-btn {
-  font-size: 12px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.code-copy-btn:hover {
-  color: var(--code-block-copy-btn-hover-color);
-}
--- a/src/styles/github-markdown.css
+++ b/src/styles/github-markdown.css
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,65 +0,0 @@
-@import "modern-normalize";
-@import "css-reset.css";
-
-:root {
-  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --layout-width: 760px;
-
-  --background: #ffffff;
-  --border-primary: 1px solid #dcdcdc;
-  --border-secondary: 1px solid #eee;
-  --text-primary: #030712;
-  --text-secondary: #3f3f46;
-  --text-disabled: #d1d5db;
-  --text-meta: #71717a;
-  --article-text-color: #404040;
-  --text-title-hover: #000;
-
-  --code-block-header-bg: #f5f5f4;
-  --code-block-copy-btn-hover-color: #6b7280;
-}
-
-.dark {
-  --background: #0a0a0a;
-  --border-primary: 1px solid #52525b;
-  --border-secondary: 1px solid #525252;
-  --text-primary: #e4e4e7;
-  --text-secondary: #d1d5db;
-  --text-disabled: #6b7280;
-  --text-meta: #d4d4d8;
-  --article-text-color: #d4d4d8;
-  --text-title-hover: #fff;
-
-  --code-block-header-bg: #374151;
-  --code-block-copy-btn-hover-color: #9ca3af;
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
-  font-family: var(--font-family), serif;
-  color: var(--text-primary);
-}
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-/* 滚动条轨道 */
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-/* 滚动条滑块 */
-::-webkit-scrollbar-thumb {
-  background: rgba(139,139,139,.5);
-  border-radius: 999px;
-}
-
-/* 鼠标悬停 */
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(139,139,139,.7);
-}
--- a/src/styles/reset.css
+++ b/src/styles/reset.css
@@ -0,0 +1,11 @@
+/* css reset */
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul, ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
--- a/src/styles/toc.css
+++ b/src/styles/toc.css
@@ -0,0 +1,263 @@
+/* 文章目录（TOC）样式 */
+
+/* 桌面端：侧边固定目录 */
+.toc-desktop {
+  position: fixed;
+  left: max(1rem, calc((100vw - var(--layout-width)) / 2 - 240px));
+  top: 120px;
+  width: 200px;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+  display: none;
+}
+
+@media (min-width: 1400px) {
+  .toc-desktop {
+    display: block;
+  }
+}
+
+.toc-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.toc-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.toc-item {
+  margin-bottom: 0.5rem;
+  position: relative;
+}
+
+.toc-item.level-3 {
+  padding-left: 1rem;
+}
+
+.toc-item a {
+  display: block;
+  padding: 0.25rem 0;
+  padding-left: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  text-decoration: none;
+  border-left: 2px solid transparent;
+  transition: all var(--transition-fast);
+  line-height: 1.5;
+}
+
+.toc-item a:hover {
+  color: var(--text-primary);
+  border-left-color: var(--text-tertiary);
+}
+
+.toc-item.active a {
+  color: var(--accent-color);
+  font-weight: 600;
+  border-left-color: var(--accent-color);
+  border-left-width: 3px;
+}
+
+/* 移动端：浮动按钮 + 抽屉 */
+.toc-mobile {
+  display: block;
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 100;
+}
+
+@media (min-width: 1400px) {
+  .toc-mobile {
+    display: none;
+  }
+}
+
+.toc-toggle {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--accent-color);
+  color: white;
+  border: none;
+  box-shadow: var(--shadow-lg);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+}
+
+.toc-toggle:hover {
+  transform: scale(1.1);
+  box-shadow: var(--shadow-xl);
+}
+
+.toc-toggle:active {
+  transform: scale(0.95);
+}
+
+.toc-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 200;
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.toc-drawer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-height: 60vh;
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  box-shadow: var(--shadow-xl);
+  z-index: 201;
+  animation: slideUp 0.3s ease-out;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.toc-drawer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.toc-drawer-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--text-heading);
+}
+
+.toc-drawer-close {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-fast);
+}
+
+.toc-drawer-close:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.toc-drawer-list {
+  list-style: none;
+  padding: 1rem;
+  margin: 0;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.toc-drawer-item {
+  margin-bottom: 0.5rem;
+}
+
+.toc-drawer-item.level-3 {
+  padding-left: 1rem;
+}
+
+.toc-drawer-item a {
+  display: block;
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  color: var(--text-secondary);
+  text-decoration: none;
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+  border-left: 3px solid transparent;
+}
+
+.toc-drawer-item a:active {
+  transform: scale(0.98);
+}
+
+.toc-drawer-item:hover a {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.toc-drawer-item.active a {
+  background: var(--bg-secondary);
+  color: var(--accent-color);
+  font-weight: 600;
+  border-left-color: var(--accent-color);
+}
+
+/* 返回顶部按钮 */
+.back-to-top {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--accent-secondary);
+  color: white;
+  border: none;
+  box-shadow: var(--shadow-lg);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+  z-index: 50;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.back-to-top:hover {
+  transform: scale(1.1);
+  box-shadow: var(--shadow-xl);
+}
+
+.back-to-top:active {
+  transform: scale(0.95);
+}
+
+/* 当有TOC按钮时，调整返回顶部按钮位置 */
+@media (max-width: 1399px) {
+  .back-to-top {
+    bottom: 5.5rem;
+  }
+}
--- a/src/styles/typography.css
+++ b/src/styles/typography.css
@@ -0,0 +1,267 @@
+/* 排版样式 */
+article {
+  line-height: 1.75;
+  color: var(--text-primary);
+  font-size: 1.125rem; /* 18px */
+}
+
+article h1,
+article h2,
+article h3,
+article h4,
+article h5,
+article h6 {
+  margin-top: 3em;
+  margin-bottom: 1em;
+  line-height: 1.4;
+  font-weight: 700;
+  color: var(--text-heading);
+  letter-spacing: -0.02em;
+  scroll-margin-top: 5rem;
+  position: relative;
+}
+
+article h1:first-child,
+article h2:first-child,
+article h3:first-child,
+article h4:first-child {
+  margin-top: 0;
+}
+
+article h1 {
+  font-size: 2.5rem;
+  color: var(--text-heading);
+  position: relative;
+  padding-bottom: 0.5rem;
+}
+
+article h1::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 60px;
+  height: 4px;
+  background: var(--accent-color);
+  border-radius: 2px;
+}
+
+article h2 { 
+  font-size: 1.875rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--border-color);
+}
+
+article h3 { 
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+article h4 { 
+  font-size: 1.375rem;
+}
+
+article h5 {
+  font-size: 1.125rem;
+}
+
+article h6 {
+  font-size: 1rem;
+  color: var(--text-secondary);
+}
+
+article p {
+  margin-bottom: 1.75em;
+}
+
+article a {
+  color: var(--link-color);
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  background-image: linear-gradient(var(--link-color), var(--link-color));
+  background-size: 0% 2px;
+  background-repeat: no-repeat;
+  background-position: left bottom;
+  transition: background-size var(--transition-base), color var(--transition-base);
+  font-weight: 500;
+}
+
+article a:hover {
+  color: var(--link-hover);
+  background-size: 100% 2px;
+}
+
+article ul,
+article ol {
+  margin-bottom: 1.5em;
+  padding-left: 2em;
+}
+
+article ul {
+  list-style-type: disc;
+}
+
+article ol {
+  list-style-type: decimal;
+}
+
+article li {
+  margin-bottom: 0.5em;
+  line-height: 1.8;
+}
+
+article li > ul,
+article li > ol {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+article ul ul {
+  list-style-type: circle;
+}
+
+article ul ul ul {
+  list-style-type: square;
+}
+
+article code {
+  padding: 0.25rem 0.5rem;
+  background: var(--code-inline-bg);
+  border-radius: var(--radius-sm);
+  font-size: 0.9em;
+  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+  color: var(--code-inline-color);
+  font-weight: 500;
+  border: 1px solid var(--code-inline-border);
+}
+
+article pre {
+  margin-bottom: 1.5em;
+  padding: 1.5em;
+  background: var(--code-block-bg);
+  border-radius: var(--radius-lg);
+  overflow-x: auto;
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--code-block-border);
+  position: relative;
+  line-height: 1.6;
+}
+
+article pre::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background: var(--accent-color);
+  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+}
+
+article pre code {
+  padding: 0;
+  background: none;
+  font-size: 0.875rem;
+  border: none;
+  color: inherit;
+  font-weight: 400;
+  display: block;
+}
+
+article blockquote {
+  margin: 2em 0;
+  padding: 1.5em 1.5em 1.5em 2em;
+  border-left: 6px solid var(--accent-color);
+  background: var(--quote-bg);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-style: italic;
+  position: relative;
+  box-shadow: var(--shadow-sm);
+}
+
+article blockquote p {
+  margin-bottom: 0.5em;
+}
+
+article blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+article img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-lg);
+  margin: 2em 0;
+  box-shadow: var(--shadow-lg);
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
+}
+
+article img:hover {
+  transform: scale(1.01);
+  box-shadow: var(--shadow-xl);
+}
+
+article hr {
+  margin: 3em 0;
+  border: none;
+  height: 1px;
+  background: linear-gradient(to right, transparent, var(--border-color), transparent);
+}
+
+/* 表格样式 */
+article table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 2rem 0;
+  background: var(--bg-primary);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--table-border);
+}
+
+article thead {
+  background: var(--table-header-bg);
+}
+
+article th {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-weight: 600;
+  color: var(--text-heading);
+  border-bottom: 2px solid var(--table-border);
+  font-size: 0.9375rem;
+}
+
+article td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--table-border);
+  color: var(--text-primary);
+}
+
+article tr:last-child td {
+  border-bottom: none;
+}
+
+article tbody tr {
+  transition: background var(--transition-fast);
+}
+
+article tbody tr:nth-child(even) {
+  background: var(--table-stripe-bg);
+}
+
+article tbody tr:hover {
+  background: var(--bg-secondary);
+}
+
+/* 移动端表格滚动 */
+@media (max-width: 768px) {
+  article table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }
+}
--- a/src/types/archive.ts
+++ b/src/types/archive.ts
@@ -1,21 +0,0 @@
-type ArchiveYear = {
-  year: number;
-  total: number;
-  list: ArchiveMonth[];
-};
-
-type ArchivePost = {
-  id: number;
-  slug: string;
-  title: string;
-  published_at: string;
-  published_at_display: string;
-  category_name: string;
-};
-
-type ArchiveMonth = {
-  month: number;
-  list: ArchivePost[];
-};
-
-export type Archive = ArchiveYear[];
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -1,29 +0,0 @@
-/** 基础 API 响应结构 */
-declare interface ApiResponse<T = unknown> {
-  msg?: string
-  data: T
-}
-
-/** 分页响应结构 */
-declare interface ApiPageResponse<T = unknown> {
-  msg?: string
-  /** 当前页码 */
-  page: number
-  /** 每页数量 */
-  pageSize: number
-  /** 业务数据列表 */
-  list: T[]
-  /** 总记录数 */
-  total: number
-}
-
-/** 错误响应结构 - 当请求失败时的响应格式 */
-declare interface ApiErrorResponse {
-  msg: string
-}
-
-/** 通用请求参数类型 */
-declare interface Pagination {
-  page?: number
-  pageSize?: number
-}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1 +0,0 @@
-export * from './post.ts'
--- a/src/types/post.ts
+++ b/src/types/post.ts
@@ -1,32 +1,19 @@
-export type Tag = {
-  id: number
-  code: string
-  name: string
-}
+import type { CollectionEntry } from 'astro:content';

-export type Post = {
+export type Post = CollectionEntry<'posts'>;
+
+export interface PostMetadata {
  title: string;
-  summary: string;
-  slug: string;
-  cover: string;
-  category_name: string;
-  category_code: string;
-  category_id?: number;
-  published_at: string;
-  view_count: number;
-  content: string;
-  tags: Tag[]
+  description: string;
+  pubDate: Date;
+  updatedDate?: Date;
+  author: string;
+  image?: string;
+  tags: string[];
+  category: string;
+  draft: boolean;
 }

-export type CategoriesStats = {
-  id: number;
-  name: string;
-  code: string
-  post_count: number;
-}
-
-export type PostForSitemap = {
-  slug: string
-  created_at: string
-  updated_at: string
+export interface PostWithReadingTime extends Post {
+  readingTime: string;
 }
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -0,0 +1,15 @@
+export function formatDate(date: Date): string {
+  return new Date(date).toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+export function formatDateShort(date: Date): string {
+  return new Date(date).toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  });
+}
--- a/src/utils/extract-headings.ts
+++ b/src/utils/extract-headings.ts
@@ -0,0 +1,29 @@
+// 提取文章标题的工具函数
+export interface Heading {
+  id: string;
+  text: string;
+  level: number;
+}
+
+export function extractHeadings(content: string): Heading[] {
+  const headings: Heading[] = [];
+  const lines = content.split('\n');
+  
+  for (const line of lines) {
+    // 匹配 Markdown 标题 (## 或 ###)
+    const match = line.match(/^(#{2,3})\s+(.+)$/);
+    if (match) {
+      const level = match[1].length;
+      const text = match[2].trim();
+      // 生成 ID（简单处理，实际 Astro 会自动生成）
+      const id = text
+        .toLowerCase()
+        .replace(/[^\w\u4e00-\u9fa5]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+      
+      headings.push({ id, text, level });
+    }
+  }
+  
+  return headings;
+}
--- a/src/utils/reading-time.ts
+++ b/src/utils/reading-time.ts
@@ -0,0 +1,19 @@
+export function getReadingTime(content: string): string {
+  const wordsPerMinute = 200;
+  const chineseCharsPerMinute = 300;
+
+  // 计算中文字符数
+  const chineseChars = (content.match(/[\u4e00-\u9fa5]/g) || []).length;
+
+  // 计算英文单词数
+  const englishWords = content
+    .replace(/[\u4e00-\u9fa5]/g, '')
+    .split(/\s+/)
+    .filter(word => word.length > 0).length;
+
+  const minutes = Math.ceil(
+    chineseChars / chineseCharsPerMinute + englishWords / wordsPerMinute
+  );
+
+  return `${minutes} 分钟`;
+}
--- a/src/utils/search-index.ts
+++ b/src/utils/search-index.ts
@@ -0,0 +1,28 @@
+// 搜索索引生成工具
+import { getCollection } from 'astro:content';
+
+export interface SearchIndexItem {
+  id: string;
+  title: string;
+  description: string;
+  content: string;
+  category: string;
+  tags: string[];
+  date: string;
+  url: string;
+}
+
+export async function generateSearchIndex(): Promise<SearchIndexItem[]> {
+  const posts = await getCollection('posts', ({ data }) => !data.draft);
+  
+  return posts.map(post => ({
+    id: post.slug,
+    title: post.data.title,
+    description: post.data.description,
+    content: post.body.slice(0, 500), // 仅索引前500字符
+    category: post.data.category,
+    tags: post.data.tags,
+    date: post.data.pubDate.toISOString(),
+    url: `/posts/${post.slug}`,
+  }));
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,8 @@
      "@/*": [
        "src/*"
      ]
-    }
+    },
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
  }
 }
				`@@ -1 +0,0 @@`
				`VITE_API_BASE_URL=http://127.0.0.1:8080/api/`
				`@@ -1 +0,0 @@`
				`VITE_API_BASE_URL=https://admin.ua42.com/api/`