feat: ai

2025-11-21 11:51:31 +08:00
37 changed files with 6401 additions and 30 deletions
--- 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/astro.config.mjs
+++ b/astro.config.mjs
@@ -2,13 +2,30 @@
 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',
-  integrations: [solidJs()],
+  integrations: [
+    solidJs(),
+    sitemap()
+  ],
  adapter: node({
    mode: 'standalone'
-  })
+  }),
+  markdown: {
+    syntaxHighlight: 'shiki',
+    shikiConfig: {
+      themes: {
+        light: 'github-light',
+        dark: 'one-dark-pro'
+      },
+      wrap: true,
+      transformers: []
+    },
+    remarkPlugins: [],
+    rehypePlugins: []
+  }
 });
--- a/package.json
+++ b/package.json
@@ -11,8 +11,11 @@
  },
  "dependencies": {
    "@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",
    "solid-js": "^1.9.10"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,12 +11,21 @@ importers:
      '@astrojs/node':
        specifier: ^9.5.1
        version: 9.5.1(astro@5.15.8(@types/node@24.10.1)(rollup@4.53.2)(typescript@5.9.3))
+      '@astrojs/rss':
+        specifier: ^4.0.14
+        version: 4.0.14
+      '@astrojs/sitemap':
+        specifier: ^3.6.0
+        version: 3.6.0
      '@astrojs/solid-js':
        specifier: ^5.1.3
        version: 5.1.3(@types/node@24.10.1)(solid-js@1.9.10)
      astro:
        specifier: ^5.15.8
        version: 5.15.8(@types/node@24.10.1)(rollup@4.53.2)(typescript@5.9.3)
+      fuse.js:
+        specifier: ^7.1.0
+        version: 7.1.0
      modern-normalize:
        specifier: ^3.0.1
        version: 3.0.1
@@ -47,6 +56,12 @@ packages:
    resolution: {integrity: sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==}
    engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}

+  '@astrojs/rss@4.0.14':
+    resolution: {integrity: sha512-KCe1imDcADKOOuO/wtKOMDO/umsBD6DWF+94r5auna1jKl5fmlK9vzf+sjA3EyveXA/FoB3khtQ/u/tQgETmTw==}
+
+  '@astrojs/sitemap@3.6.0':
+    resolution: {integrity: sha512-4aHkvcOZBWJigRmMIAJwRQXBS+ayoP5z40OklTXYXhUDhwusz+DyDl+nSshY6y9DvkVEavwNcFO8FD81iGhXjg==}
+
  '@astrojs/solid-js@5.1.3':
    resolution: {integrity: sha512-KxfYt4y1d7BuSw6EsN1EaPoGYsIES7bEI6AtTbncuabRUUMZs+mOWOeOdmgnwVLj+jbNbhBjUZsqr77eUviZdw==}
    engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
@@ -637,9 +652,15 @@ packages:
  '@types/nlcst@2.0.3':
    resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==}

+  '@types/node@17.0.45':
+    resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
+
  '@types/node@24.10.1':
    resolution: {integrity: sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==}

+  '@types/sax@1.2.7':
+    resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==}
+
  '@types/unist@3.0.3':
    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}

@@ -670,6 +691,9 @@ packages:
    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
    engines: {node: '>= 8'}

+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
  argparse@2.0.1:
    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}

@@ -914,6 +938,10 @@ packages:
  fast-deep-equal@3.1.3:
    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}

+  fast-xml-parser@5.3.2:
+    resolution: {integrity: sha512-n8v8b6p4Z1sMgqRmqLJm3awW4NX7NkaKPfb3uJIBTSH7Pdvufi3PQ3/lJLQrvxcMYl7JI2jnDO90siPEpD8JBA==}
+    hasBin: true
+
  fdir@6.5.0:
    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
    engines: {node: '>=12.0.0'}
@@ -942,6 +970,10 @@ packages:
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
    os: [darwin]

+  fuse.js@7.1.0:
+    resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
+    engines: {node: '>=10'}
+
  gensync@1.0.0-beta.2:
    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
    engines: {node: '>=6.9.0'}
@@ -1290,6 +1322,9 @@ packages:
  parse5@7.3.0:
    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}

+  piccolore@0.1.3:
+    resolution: {integrity: sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==}
+
  picocolors@1.1.1:
    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}

@@ -1387,6 +1422,9 @@ packages:
    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
    hasBin: true

+  sax@1.4.3:
+    resolution: {integrity: sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==}
+
  semver@6.3.1:
    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
    hasBin: true
@@ -1426,6 +1464,11 @@ packages:
  sisteransi@1.0.5:
    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}

+  sitemap@8.0.2:
+    resolution: {integrity: sha512-LwktpJcyZDoa0IL6KT++lQ53pbSrx2c9ge41/SeLTyqy2XUNA6uR4+P9u5IVo5lPeL2arAcOKn1aZAxoYbCKlQ==}
+    engines: {node: '>=14.0.0', npm: '>=6.0.0'}
+    hasBin: true
+
  smol-toml@1.5.2:
    resolution: {integrity: sha512-QlaZEqcAH3/RtNyet1IPIYPsEWAaYyXXv1Krsi+1L/QHppjX4Ifm8MQsBISz9vE8cHicIq3clogsheili5vhaQ==}
    engines: {node: '>= 18'}
@@ -1453,6 +1496,9 @@ packages:
    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
    engines: {node: '>= 0.8'}

+  stream-replace-string@2.0.0:
+    resolution: {integrity: sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w==}
+
  string-width@4.2.3:
    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
    engines: {node: '>=8'}
@@ -1472,6 +1518,9 @@ packages:
    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
    engines: {node: '>=12'}

+  strnum@2.1.1:
+    resolution: {integrity: sha512-7ZvoFTiCnGxBtDqJ//Cu6fWtZtc7Y3x+QOirG15wztbdngGSkht27o2pyGWrVy0b4WAy3jbKmnoK6g5VlVNUUw==}
+
  tiny-inflate@1.0.3:
    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}

@@ -1802,6 +1851,17 @@ snapshots:
    dependencies:
      prismjs: 1.30.0

+  '@astrojs/rss@4.0.14':
+    dependencies:
+      fast-xml-parser: 5.3.2
+      piccolore: 0.1.3
+
+  '@astrojs/sitemap@3.6.0':
+    dependencies:
+      sitemap: 8.0.2
+      stream-replace-string: 2.0.0
+      zod: 3.25.76
+
  '@astrojs/solid-js@5.1.3(@types/node@24.10.1)(solid-js@1.9.10)':
    dependencies:
      solid-js: 1.9.10
@@ -2306,10 +2366,16 @@ snapshots:
    dependencies:
      '@types/unist': 3.0.3

+  '@types/node@17.0.45': {}
+
  '@types/node@24.10.1':
    dependencies:
      undici-types: 7.16.0

+  '@types/sax@1.2.7':
+    dependencies:
+      '@types/node': 24.10.1
+
  '@types/unist@3.0.3': {}

  '@ungap/structured-clone@1.3.0': {}
@@ -2331,6 +2397,8 @@ snapshots:
      normalize-path: 3.0.0
      picomatch: 2.3.1

+  arg@5.0.2: {}
+
  argparse@2.0.1: {}

  aria-query@5.3.2: {}
@@ -2636,6 +2704,10 @@ snapshots:

  fast-deep-equal@3.1.3: {}

+  fast-xml-parser@5.3.2:
+    dependencies:
+      strnum: 2.1.1
+
  fdir@6.5.0(picomatch@4.0.3):
    optionalDependencies:
      picomatch: 4.0.3
@@ -2664,6 +2736,8 @@ snapshots:
  fsevents@2.3.3:
    optional: true

+  fuse.js@7.1.0: {}
+
  gensync@1.0.0-beta.2: {}

  get-east-asian-width@1.4.0: {}
@@ -3232,6 +3306,8 @@ snapshots:
    dependencies:
      entities: 6.0.1

+  piccolore@0.1.3: {}
+
  picocolors@1.1.1: {}

  picomatch@2.3.1: {}
@@ -3392,6 +3468,8 @@ snapshots:
      '@rollup/rollup-win32-x64-msvc': 4.53.2
      fsevents: 2.3.3

+  sax@1.4.3: {}
+
  semver@6.3.1: {}

  semver@7.7.3: {}
@@ -3467,6 +3545,13 @@ snapshots:

  sisteransi@1.0.5: {}

+  sitemap@8.0.2:
+    dependencies:
+      '@types/node': 17.0.45
+      '@types/sax': 1.2.7
+      arg: 5.0.2
+      sax: 1.4.3
+
  smol-toml@1.5.2: {}

  solid-js@1.9.10:
@@ -3492,6 +3577,8 @@ snapshots:

  statuses@2.0.2: {}

+  stream-replace-string@2.0.0: {}
+
  string-width@4.2.3:
    dependencies:
      emoji-regex: 8.0.0
@@ -3517,6 +3604,8 @@ snapshots:
    dependencies:
      ansi-regex: 6.2.2

+  strnum@2.1.1: {}
+
  tiny-inflate@1.0.3: {}

  tinyexec@1.0.2: {}
--- 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/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/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/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,3 +1,7 @@
 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/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/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/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/index.astro
+++ b/src/pages/index.astro
@@ -1,33 +1,295 @@
 ---
-import Layout from "@/layouts/Layout.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 posts = [
-  {
-    title: "First Post",
-    date: "2024-01-01",
-    summary: "This is the summary of the first post.",
-  },
-];
+const posts = await getCollection('posts', ({ data }) => !data.draft);
+const sortedPosts = posts.sort((a, b) =>
+  b.data.pubDate.getTime() - a.data.pubDate.getTime()
+);
+
+// 获取所有标签
+const allTags = [...new Set(posts.flatMap(post => post.data.tags))];
+const topTags = allTags.slice(0, 8);
 ---

-<Layout>
-  <div>
-    {
-      posts.map((post) => (
-        <a href={`/posts/${post.title.replace(/\s+/g, "-").toLowerCase()}`}>
-          <h2>{post.title}</h2>
-          <p>{post.date}</p>
-          <p class="summary">{post.summary}</p>
-        </a>
-      ))
-    }
+<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>
-</Layout>
+        <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>
-  .summary {
-    line-height: 2;
-    font-size: 16px;
-    color: rgb(66, 63, 63);
+  .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/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -1,9 +1,24 @@
 ---
-import Layout from "@/layouts/Layout.astro";
+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);
 ---

-<Layout>
-  <h1>Post Slug: {slug}</h1>
-</Layout>
+<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/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
@@ -1,7 +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/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/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/post.ts
+++ b/src/types/post.ts
@@ -0,0 +1,19 @@
+import type { CollectionEntry } from 'astro:content';
+
+export type Post = CollectionEntry<'posts'>;
+
+export interface PostMetadata {
+  title: string;
+  description: string;
+  pubDate: Date;
+  updatedDate?: Date;
+  author: string;
+  image?: string;
+  tags: string[];
+  category: string;
+  draft: boolean;
+}
+
+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}`,
+  }));
+}