feat: ai

2025-11-21 11:51:31 +08:00
87 changed files with 8342 additions and 5780 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,9 +0,0 @@
 root = true
 [*]
 charset = utf-8
 indent_style = space
 indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
--- a/.env
+++ b/.env
@@ -1 +0,0 @@
 VITE_API_BASE_URL=http://127.0.0.1:8080/api/
--- a/.env.production
+++ b/.env.production
@@ -1 +0,0 @@
 VITE_API_BASE_URL=https://admin.ua42.com/api/
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,10 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 # environment variables
 .env
 .env.production
 # macOS-specific files
 .DS_Store
@@ -21,5 +25,3 @@ pnpm-debug.log*
 *.tar
 *.gz
 .claude
--- a/.qoder/quests/blog-style-adjustment-and-feature-expansion.md
+++ b/.qoder/quests/blog-style-adjustment-and-feature-expansion.md
--- a/.qoder/quests/blog-style-optimization.md
+++ b/.qoder/quests/blog-style-optimization.md
@@ -0,0 +1,510 @@
 # 博客样式优化设计
 ## 目标
 优化博客的整体视觉呈现，确保风格统一、样式美观，并增强 Markdown 内容渲染和代码块高亮显示能力。
 ## 背景
 当前博客基于 Astro + SolidJS 技术栈，已具备基础样式系统（包括 base.css、typography.css、enhancements.css），并支持暗色模式切换。项目使用 TypeScript 和 PNPM 包管理器，运行于 Node.js 22.21.1 环境。
 现有样式系统已建立 CSS 变量体系，覆盖颜色主题、圆角、阴影、过渡动画等设计规范，但在 Markdown 渲染和代码高亮方面存在提升空间。
 ## 核心需求
 ### 风格统一性
 确保整个站点在视觉呈现上保持一致的设计语言：
 - **色彩体系统一**：所有组件遵循统一的 CSS 变量定义，包括亮色和暗色两套主题配色
 - **间距规范一致**：页面布局、组件内边距、外边距采用统一的间距标准
 - **字体层级清晰**：建立明确的字体大小、行高、字重等级体系
 - **交互反馈统一**：hover、focus、active 等状态的视觉反馈保持一致性
 ### Markdown 渲染优化
 提升 Markdown 内容的可读性和视觉表现：
 - **标题层级视觉区分**：h1-h6 各级标题具有明显的视觉差异，便于内容层级识别
 - **段落排版优化**：合理的行高、段落间距，提升长文阅读体验
 - **列表样式美化**：有序列表和无序列表具有清晰的视觉标识
 - **引用块样式增强**：blockquote 具有独特的视觉设计，突出引用内容
 - **链接交互优化**：链接具有醒目但不突兀的视觉效果和悬停动画
 - **图片展示优化**：图片具有适当的边框、圆角、阴影效果，支持放大效果
 - **分隔线美化**：hr 标签具有渐变或装饰性样式
 - **表格样式优化**：表格具有清晰的边框、斑马纹或悬停高亮效果
 ### 代码块高亮
 实现专业的代码展示能力：
 - **语法高亮引擎选型**：选择合适的语法高亮方案（Shiki 或 Prism），支持多种编程语言
 - **主题适配**：代码高亮主题需适配亮色和暗色两种模式，确保视觉和谐
 - **代码块装饰**：代码块具有语言标识、行号显示、复制按钮等增强功能
 - **行内代码区分**：行内 `code` 标签与代码块在视觉上有明确区分
 - **代码块容器样式**：代码块具有边框、圆角、阴影、背景色等装饰效果
 - **横向滚动优化**：长代码行支持横向滚动，滚动条样式与整体风格匹配
 ## 设计方案
 ### 样式系统强化
 #### CSS 变量体系扩展
 在现有 CSS 变量基础上，补充完善以下变量定义：
 **代码相关变量**
 - 行内代码背景色、文字色、边框色
 - 代码块背景色（需区分亮色和暗色模式）
 - 代码块边框色
 - 代码行号颜色
 - 代码高亮行背景色
 **Markdown 元素专用变量**
 - 引用块左侧装饰色
 - 引用块背景色
 - 表格边框色
 - 表格斑马纹背景色
 - 链接装饰线颜色
 **间距规范变量**
 - 文章内容最大宽度
 - 标题上下边距
 - 段落间距
 - 列表项间距
 #### 排版增强策略
 **中英文混排优化**
 - 设置适合中文的行高（1.8-2.0）
 - 字体栈优先选择系统优化字体
 - 字符间距微调，提升可读性
 **响应式排版**
 - 大屏设备：标准字号（17px）
 - 平板设备：适中字号（16px）
 - 移动设备：缩小字号（15px），调整行高和间距
 ### Markdown 渲染方案
 #### Astro Markdown 配置
 利用 Astro 内置的 Markdown 处理能力，通过配置优化渲染输出：
 **配置项规划**
 - 启用 GitHub Flavored Markdown（GFM）扩展，支持表格、任务列表等
 - 配置自动链接识别
 - 启用智能标点符号转换
 - 配置标题自动生成 ID，便于锚点跳转
 **插件集成考量**
 - 评估是否需要引入 remark 或 rehype 插件增强处理能力
 - 考虑添加目录生成插件
 - 评估是否需要图片懒加载或优化插件
 #### 自定义样式映射
 针对 Markdown 渲染后的 HTML 结构，编写精准的 CSS 选择器：
 **文章容器作用域**
 - 所有 Markdown 样式限定在 `article` 或 `.post-content` 作用域内
 - 避免全局样式污染
 **元素样式定义清单**
 - 标题：h1-h6 的字号、字重、颜色、间距、装饰效果
 - 段落：行高、间距、文字颜色
 - 链接：颜色、下划线样式、悬停效果、过渡动画
 - 列表：标记样式、缩进、间距
 - 引用块：边框、背景、左侧装饰、引号装饰
 - 图片：边框、圆角、阴影、悬停效果
 - 表格：边框、表头样式、斑马纹、悬停高亮
 - 分隔线：渐变效果或装饰性样式
 - 行内代码：背景、边框、颜色、字体
 ### 代码高亮方案
 #### Shiki 语法高亮集成
 选择 Shiki 作为代码高亮引擎，原因如下：
 - Astro 官方推荐，集成简单
 - 基于 VS Code 主题引擎，主题丰富且美观
 - 支持服务端渲染，无需客户端 JavaScript
 - 支持多语言和自定义主题
 #### 主题配置策略
 **亮色模式主题**
 - 选择柔和、对比度适中的主题（如 GitHub Light、One Light）
 - 背景色需与整体页面风格协调
 **暗色模式主题**
 - 选择护眼、对比度适中的暗色主题（如 One Dark Pro、Night Owl）
 - 背景色需与暗色模式整体风格匹配
 **主题切换机制**
 - 通过 CSS 变量或 data-theme 属性实现主题动态切换
 - 确保切换过程平滑，无闪烁
 #### 代码块增强功能
 **语言标识显示**
 - 在代码块顶部或角落显示语言标签
 - 标签样式需与整体风格一致
 **复制功能**
 - 在代码块区域提供复制按钮
 - 点击后复制代码内容到剪贴板
 - 提供复制成功的视觉反馈
 **行号显示（可选）**
 - 评估是否需要显示行号
 - 行号样式不干扰代码阅读
 **代码块容器装饰**
 - 边框样式：细边框或无边框，颜色与主题协调
 - 圆角效果：使用统一的圆角变量（如 var(--radius-lg)）
 - 阴影效果：适度阴影增强层次感（如 var(--shadow-md)）
 - 左侧装饰线：渐变色装饰线增强视觉效果
 ### 样式文件组织
 #### 文件结构规划
 当前样式文件结构保持不变，在现有基础上增强：
 **base.css**
 - 补充代码高亮相关 CSS 变量
 - 补充 Markdown 渲染相关变量
 **typography.css**
 - 优化现有文章排版样式
 - 补充缺失的 Markdown 元素样式
 - 确保所有样式作用域限定在 article 内
 **enhancements.css**
 - 添加代码块复制按钮样式
 - 添加语言标识样式
 - 优化表格、引用块等增强效果
 **代码高亮主题（新增）**
 - 考虑是否需要单独的代码主题样式文件
 - 如果使用 Shiki，可能无需额外 CSS 文件
 #### 样式优先级与覆盖策略
 **导入顺序**
 - reset.css → typography.css → enhancements.css
 - 确保增强样式可以覆盖基础样式
 **选择器特异性控制**
 - 避免使用过高权重的选择器
 - 优先使用类选择器和属性选择器
 - 必要时使用作用域限定
 ### 响应式设计
 #### 断点规划
 遵循移动优先原则，定义以下断点：
 - 小屏移动设备：<= 480px
 - 大屏移动设备：481px - 768px
 - 平板设备：769px - 1024px
 - 桌面设备：>= 1025px
 #### 各断点样式调整策略
 **移动设备（<= 768px）**
 - 减小标题字号
 - 增加段落行高，便于触摸阅读
 - 代码块字号适当缩小
 - 表格横向滚动处理
 - 图片宽度 100%
 **平板设备（769px - 1024px）**
 - 标题字号适中
 - 代码块保持可读性
 - 表格可正常展示或滚动
 **桌面设备（>= 1025px）**
 - 最佳阅读体验
 - 充分利用屏幕空间
 - 图片可展示大尺寸
 ### 暗色模式适配
 #### 主题切换机制
 依托现有的 `data-theme="dark"` 属性实现主题切换：
 **颜色变量切换**
 - 所有颜色变量在暗色模式下重新定义
 - 代码块背景色、文字色适配暗色主题
 - 边框、阴影适配暗色环境
 **代码高亮主题切换**
 - 根据 `data-theme` 属性切换 Shiki 主题
 - 确保暗色模式下代码可读性和对比度
 **过渡动画**
 - 主题切换过程平滑过渡
 - 避免颜色突变导致的视觉不适
 #### 暗色模式特殊处理
 **图片亮度调整**
 - 暗色模式下图片亮度略微降低（opacity: 0.9）
 - 悬停时恢复正常亮度
 **代码块对比度优化**
 - 暗色模式代码块背景色需与页面背景有一定区分
 - 语法高亮颜色对比度适中，避免刺眼
 ## 技术实现要点
 ### Astro 配置调整
 在 `astro.config.mjs` 中配置 Markdown 处理选项：
 **Markdown 配置项**
 - syntaxHighlight：设置为 'shiki'
 - shikiConfig：配置 Shiki 主题和选项
 - remarkPlugins：可选引入 remark 插件
 - rehypePlugins：可选引入 rehype 插件
 **配置示例结构**
 ```
 markdown: {
  syntaxHighlight: 'shiki',
  shikiConfig: {
    theme: 亮色主题,
    themes: { light: 亮色主题, dark: 暗色主题 },
    wrap: 是否换行,
    langs: 支持的语言列表
  },
  remarkPlugins: [...],
  rehypePlugins: [...]
 }
 ```
 ### CSS 变量定义规范
 **命名约定**
 - 使用 kebab-case 命名法
 - 前缀分类：--bg（背景）、--text（文字）、--code（代码）、--border（边框）等
 - 语义化命名，便于理解和维护
 **亮色与暗色变量对应关系**
 - 每个亮色变量在 `[data-theme="dark"]` 中都有对应定义
 - 变量名保持一致，仅值不同
 ### 组件样式隔离
 **PostLayout 组件**
 - 确保文章内容区域使用 `.post-content` 类包裹
 - 所有 Markdown 样式限定在此作用域内
 **全局样式与组件样式协同**
 - 全局样式定义基础规范
 - 组件样式处理特定场景
 ### 性能优化考量
 **CSS 体积控制**
 - 避免冗余样式定义
 - 使用 CSS 变量减少重复代码
 - 生产环境压缩 CSS
 **代码高亮性能**
 - Shiki 在构建时高亮，无运行时性能损耗
 - 避免客户端高亮库增加包体积
 **字体加载优化**
 - 使用系统字体栈，避免额外字体加载
 - 如需自定义字体，采用字体子集化和预加载
 ## 验收标准
 ### 风格统一性检查
 - 所有页面组件遵循统一的色彩体系
 - 间距、圆角、阴影等设计元素保持一致
 - 亮色和暗色模式切换流畅，无样式错乱
 - 响应式布局在各断点表现正常
 ### Markdown 渲染质量
 - 标题层级清晰，视觉区分明显
 - 段落排版舒适，行高和间距合理
 - 列表、引用块、表格样式美观
 - 链接具有明确的视觉提示和交互反馈
 - 图片展示效果良好，支持悬停效果
 - 分隔线、行内代码等细节元素样式完善
 ### 代码高亮效果
 - 支持常见编程语言的语法高亮（JavaScript、TypeScript、Python、Go、CSS、HTML 等）
 - 代码配色与整体主题协调
 - 亮色和暗色模式下代码可读性良好
 - 代码块具有清晰的边界和装饰效果
 - 行内代码与代码块视觉区分明显
 - 复制功能正常工作（如实现）
 ### 可访问性
 - 颜色对比度符合 WCAG AA 标准
 - 键盘导航支持良好
 - 屏幕阅读器友好
 - 减少动画模式（prefers-reduced-motion）生效
 ### 性能指标
 - 页面首次渲染时间无明显增加
 - CSS 文件体积控制在合理范围
 - 无不必要的客户端 JavaScript 加载
 - 代码高亮渲染速度快
 ## 潜在风险与应对
 ### 主题切换闪烁
 **风险描述**
 暗色模式切换时可能出现短暂的白屏或颜色闪烁。
 **应对策略**
 - 在 HTML 加载初期通过内联脚本读取主题偏好
 - 在 CSS 加载前应用主题属性
 - 使用 localStorage 持久化主题选择
 ### 代码高亮主题适配问题
 **风险描述**
 选择的 Shiki 主题可能与整体风格不匹配。
 **应对策略**
 - 预先测试多个主题，选择最协调的方案
 - 必要时自定义 Shiki 主题配色
 - 通过 CSS 变量覆盖部分颜色
 ### 移动端代码块可读性
 **风险描述**
 移动设备屏幕小，代码块显示可能不佳。
 **应对策略**
 - 设置合适的最小字号
 - 启用横向滚动，避免代码换行
 - 优化移动端代码块内边距
 ### 长文章性能问题
 **风险描述**
 包含大量代码块的长文章可能导致渲染性能下降。
 **应对策略**
 - Shiki 在构建时处理，不影响运行时性能
 - 优化 CSS 选择器性能
 - 避免过度使用复杂动画
 ## 后续优化方向
 ### 交互增强
 - 代码块行高亮功能
 - 代码差异对比展示
 - 图片点击放大查看（Lightbox）
 - 文章目录自动生成和锚点跳转
 ### 内容增强
 - 代码注释高亮
 - 公式渲染支持（KaTeX 或 MathJax）
 - 图表渲染支持（Mermaid）
 - 视频嵌入样式优化
 ### 个性化定制
 - 用户可选代码高亮主题
 - 字号调节功能
 - 阅读进度指示器
 - 打印样式优化
 ### 性能优化
 - 关键 CSS 内联
 - 非关键样式延迟加载
 - 图片懒加载和响应式图片
 - 字体加载策略优化
 ## 潜在风险与应对
 ### 主题切换闪烁
 **风险描述**
 暗色模式切换时可能出现短暂的白屏或颜色闪烁。
 **应对策略**
 - 在 HTML 加载初期通过内联脚本读取主题偏好
 - 在 CSS 加载前应用主题属性
 - 使用 localStorage 持久化主题选择
 ### 代码高亮主题适配问题
 **风险描述**
 选择的 Shiki 主题可能与整体风格不匹配。
 **应对策略**
 - 预先测试多个主题，选择最协调的方案
 - 必要时自定义 Shiki 主题配色
 - 通过 CSS 变量覆盖部分颜色
 ### 移动端代码块可读性
 **风险描述**
 移动设备屏幕小，代码块显示可能不佳。
 **应对策略**
 - 设置合适的最小字号
 - 启用横向滚动，避免代码换行
 - 优化移动端代码块内边距
 ### 长文章性能问题
 **风险描述**
 包含大量代码块的长文章可能导致渲染性能下降。
 **应对策略**
 - Shiki 在构建时处理，不影响运行时性能
 - 优化 CSS 选择器性能
 - 避免过度使用复杂动画
 ## 后续优化方向
 ### 交互增强
 - 代码块行高亮功能
 - 代码差异对比展示
 - 图片点击放大查看（Lightbox）
 - 文章目录自动生成和锚点跳转
 ### 内容增强
 - 代码注释高亮
 - 公式渲染支持（KaTeX 或 MathJax）
 - 图表渲染支持（Mermaid）
 - 视频嵌入样式优化
 ### 个性化定制
 - 用户可选代码高亮主题
 - 字号调节功能
 - 阅读进度指示器
 - 打印样式优化
 ### 性能优化
 - 关键 CSS 内联
 - 非关键样式延迟加载
 - 图片懒加载和响应式图片
 - 字体加载策略优化
 - 代码高亮渲染速度快
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,34 +0,0 @@
 # Project Scope Rules
 ## 文件范围限制
 本项目根目录：
 ./
 所有操作必须限制在当前项目目录内。
 禁止：
 - 访问项目外文件
 - 修改父级目录文件
 - 创建项目外文件
 - 修改用户目录中的其他内容
 - 禁止访问服务端仓库
 ## 修改规则
 修改前必须：
 1. 列出将修改的文件
 2. 说明修改原因
 3. 等待确认
 禁止修改：
 node_modules/
 .git/
 build/
 .env
 ## 开发环境
 默认认为已经启动服务，端口为4321
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,25 +1,31 @@
 // @ts-check
-import {defineConfig} from 'astro/config';
+import { defineConfig } from 'astro/config';
 import solidJs from '@astrojs/solid-js';
 import node from '@astrojs/node';
 import sitemap from '@astrojs/sitemap';
 // https://astro.build/config
 export default defineConfig({
  site: 'https://ua42.com',
  output: 'server',
-  server: {
+  integrations: [
-    host: "0.0.0.0",
+    solidJs(),
-  },
+    sitemap()
-  integrations: [solidJs()],
+  ],
  adapter: node({
    mode: 'standalone'
  }),
-  vite: {
+  markdown: {
-    plugins: [],
+    syntaxHighlight: 'shiki',
-    server: {
+    shikiConfig: {
-      watch: {
+      themes: {
-        usePolling: true,
+        light: 'github-light',
        dark: 'one-dark-pro'
      },
      wrap: true,
      transformers: []
    },
-  },
+    remarkPlugins: [],
    rehypePlugins: []
  }
 });
--- a/package.json
+++ b/package.json
@@ -10,22 +10,16 @@
    "deploy": "./scripts/deploy.sh"
  },
  "dependencies": {
-    "@astrojs/node": "11.0.2",
+    "@astrojs/node": "^9.5.1",
    "@astrojs/rss": "^4.0.14",
    "@astrojs/sitemap": "^3.6.0",
    "@astrojs/solid-js": "^5.1.3",
-    "astro": "^7.0.6",
+    "astro": "^5.15.8",
-    "dayjs": "^1.11.21",
+    "fuse.js": "^7.1.0",
    "github-markdown-css": "^5.9.0",
    "jsdom": "^29.1.1",
    "ky": "^2.0.2",
    "modern-normalize": "^3.0.1",
-    "photoswipe": "^5.4.4",
+    "solid-js": "^1.9.10"
    "shiki": "^4.3.1",
    "solid-js": "^1.9.14"
  },
  "volta": {
    "node": "22.21.1"
  },
  "devDependencies": {
    "@types/jsdom": "^28.0.3"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +0,0 @@
 allowBuilds:
  esbuild: true
  sharp: true
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,46 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="placeholder favicon">
  <defs>
    <!-- 轻微渐变底色 -->
    <linearGradient id="g" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#f7f8fb"/>
      <stop offset="1" stop-color="#e6e9f2"/>
    </linearGradient>
    <!-- 圆角外形的蒙版（用来制造中间空缺） -->
    <mask id="holeMask">
      <!-- 全白表示顯示 -->
      <rect x="0" y="0" width="64" height="64" fill="white"/>
      <!-- 中间用黑色（掏空） -->
      <!-- 这里用一个较大的圆角方块作为"空缺" -->
      <rect x="14" y="14" width="36" height="36" rx="8" ry="8" fill="black"/>
    </mask>
    <!-- 描边样式（虚线） -->
    <pattern id="dash" width="6" height="6" patternUnits="userSpaceOnUse">
      <rect width="6" height="6" fill="none"/>
    </pattern>
  </defs>
  <!-- 圆角底板 -->
  <rect x="2" y="2" width="60" height="60" rx="12" ry="12" fill="url(#g)" stroke="#d9dce8" stroke-width="1"/>
  <!-- 在底板上绘制一个较暗的阴影区域，让边缘有质感 -->
  <rect x="2" y="34" width="60" height="28" rx="12" ry="12" fill-opacity="0.03" fill="#000"/>
  <!-- 使用mask把中间挖空（透明） -->
  <g mask="url(#holeMask)">
    <!-- 这层是底色的延伸，挖空后中间变透明 -->
    <rect x="2" y="2" width="60" height="60" rx="12" ry="12" fill="url(#g)" />
  </g>
  <!-- 在被挖空的边缘画一圈圆角虚线作为占位提示 -->
  <rect x="14" y="14" width="36" height="36" rx="8" ry="8"
        fill="none" stroke="#9aa0b6" stroke-width="1.5" stroke-dasharray="3 3" />
  <!-- 中心放置一个小图形（可选）: 一个微小的“文件”轮廓来提示占位 -->
  <g transform="translate(28,20)">
    <path d="M0 0 L8 0 L8 12 L0 12 Z" fill="none" stroke="#9aa0b6" stroke-width="1" stroke-linejoin="round"/>
    <path d="M5 0 L5 3" stroke="#9aa0b6" stroke-width="1" stroke-linecap="round"/>
  </g>
 </svg>
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,4 +0,0 @@
 User-agent: *
 Allow: /
 Sitemap: https://ua42.com/sitemap.xml
--- a/scripts/deploy.sh
+++ b/scripts/deploy.sh
@@ -5,7 +5,7 @@ PROJECT_ROOT=$(cd -- "$(dirname "${BASH_SOURCE[0]}")/.." &> /dev/null && pwd)
 DOCKERFILE_PATH=./scripts/Dockerfile
 IMAGE_NAME=blog
 IMAGE_FILE_NAME=$IMAGE_NAME.tar.gz
-REMOTE_SERVER=01
+REMOTE_SERVER=02
 REMOTE_PATH=/srv/docker/nginx/www
 DOCKER_NETWORK=docker_app-bridge
--- a/src/assets/icon/back-top.svg
+++ b/src/assets/icon/back-top.svg
@@ -1 +0,0 @@
 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1784628432297" class="icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9153" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.1484375" height="200"><path d="M513.407379 0C230.713951 0 1.407379 229.306573 1.407379 512c0 282.693427 229.306573 512 512 512 282.693427 0 512-229.293792 512-512C1025.407379 229.306573 796.100806 0 513.407379 0z m26.17579 817.737837c-6.812352 6.799571-16.756085 10.991787-26.17579 10.991787-9.943733 0-19.37622-4.192216-26.175791-10.991787-6.799571-6.812352-10.991787-16.756085-10.991787-26.699818 0-9.943733 4.192216-19.900247 10.991787-26.699818s16.756085-10.991787 26.175791-10.991787c9.943733 0 19.363439 4.192216 26.17579 10.991787s10.991787 16.756085 10.991787 26.699818c0 9.943733-4.192216 19.887466-10.991787 26.699818z m-26.17579-87.435832c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605z m258.089717-237.678225c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.646726 206.798972c15.184004-15.184004 40.31174-15.184004 55.495743 0l230.354627 230.341845c15.184004 15.171222 15.184004 39.774932 0 55.482963z m0 0" p-id="9154"></path><path d="M771.497096 492.636561c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.659507 206.798972c15.184004-15.184004 40.31174-15.184004 55.495744 0l230.354626 230.341845c15.171222 15.184004 15.171222 39.787713-0.012781 55.495744zM513.407379 730.302005c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605M513.407379 828.729624c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.743304 37.167577 37.691605 0 20.93552-16.756085 37.691605-37.167577 37.691605" fill="#FFFFFF" p-id="9155"></path></svg>
--- a/src/assets/icon/calendar.png
+++ b/src/assets/icon/calendar.png
--- a/src/assets/icon/client.png
+++ b/src/assets/icon/client.png
--- a/src/assets/icon/eye.png
+++ b/src/assets/icon/eye.png
--- a/src/assets/icon/folder.png
+++ b/src/assets/icon/folder.png
--- a/src/assets/icon/github.svg
+++ b/src/assets/icon/github.svg
@@ -1 +0,0 @@
 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1785642324396" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7302" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M695.744 981.312H419.712c-26.816 0-47.296-21.056-47.296-48.64V739.84c0-29.184 6.336-56.768 17.344-81.088-129.28-48.64-214.528-150.72-214.528-264.256 0-53.44 17.344-103.68 50.496-147.52C213.12 204.8 209.92 151.296 213.12 89.664c3.2-27.52 23.68-46.976 48.896-46.976 14.208 0 134.08 1.6 203.52 64.832a504.384 504.384 0 0 1 184.512 0C717.888 44.288 837.696 42.688 853.504 42.688a47.36 47.36 0 0 1 47.36 45.376c4.672 61.568 0 115.072-12.672 157.248 33.152 45.44 50.496 95.68 50.496 147.52 0 113.472-85.184 215.68-214.528 264.32 11.072 25.856 17.344 53.44 17.344 81.024v192.896c1.6 27.52-20.48 50.24-45.76 50.24z m-228.672-97.28h181.376V739.84c0-27.52-12.608-53.504-33.152-71.36a48.96 48.96 0 0 1-15.744-50.24c4.736-17.856 18.944-32.384 36.288-35.648 123.008-24.32 208.192-102.144 208.192-189.696 0-46.976-25.216-82.688-45.76-105.344a47.36 47.36 0 0 1-7.872-55.168c6.336-12.928 15.808-40.512 15.808-89.152-39.488 6.464-85.184 19.456-102.528 45.44a47.552 47.552 0 0 1-50.56 19.392 393.024 393.024 0 0 0-193.92 0c-18.944 4.864-37.888-3.2-50.56-19.456-17.28-25.92-63.04-38.912-102.464-45.376 1.6 48.64 9.472 76.16 15.744 89.152a53.696 53.696 0 0 1-7.872 55.168c-20.48 22.656-45.76 58.368-45.76 105.344 0 87.552 85.184 163.776 208.256 189.696 17.28 3.2 31.552 17.792 36.224 35.648a51.008 51.008 0 0 1-15.744 50.24c-20.48 17.856-33.152 43.776-33.152 71.36v144.256h3.2z" fill="#172B4D" p-id="7303"></path><path d="M403.968 788.416c-212.928 0-309.12-194.56-313.92-202.688-11.008-24.32-1.536-53.44 20.48-64.832a47.424 47.424 0 0 1 63.168 21.12c3.136 6.4 80.448 157.248 241.28 149.12a46.08 46.08 0 0 1 48.896 47.04c1.6 27.52-18.88 50.24-45.696 50.24h-14.208z" fill="#172B4D" p-id="7304"></path></svg>
--- a/src/assets/icon/tag.png
+++ b/src/assets/icon/tag.png
--- 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/BackTop.astro
+++ b/src/components/BackTop.astro
@@ -1,69 +0,0 @@
 ---
 // 后面的 ?url 是 一个导入查询（import query），表示：不要把 SVG 当作组件或源码处理，而是返回这个资源的 URL 字符串。
 import backTopIcon from "@/assets/icon/back-top.svg?url";
 ---
 <button class="back-top" type="button" aria-label="返回顶部" hidden>
  <img src={backTopIcon} alt="">
 </button>
 <script>
  const backTop = document.querySelector<HTMLButtonElement>(".back-top")
  const toggleBackTop = () => {
    if (!backTop) return;
    backTop.hidden = window.scrollY <= 500;
  };
  backTop && backTop.addEventListener("click", () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  });
  window.addEventListener("scroll", toggleBackTop, {passive: true});
  toggleBackTop();
 </script>
 <style>
  .back-top {
    position: fixed;
    right: 150px;
    bottom: 100px;
    width: 44px;
    height: 44px;
    z-index: 999;
    cursor: pointer;
    padding: 0;
    border: none;
    background: transparent;
  }
  .back-top[hidden] {
    display: none;
  }
  .back-top img {
    width: 100%;
    height: 100%;
    display: block;
  }
  :global(.dark) .back-top img {
    filter: invert(1);
  }
  .back-top:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }
  @media (max-width: 768px) {
    .back-top {
      display: none;
    }
  }
 </style>
--- a/src/components/BaseFooter.astro
+++ b/src/components/BaseFooter.astro
@@ -1,46 +1,28 @@
 ---
 import { metadata } from "../consts";
 const year = new Date().getFullYear();
 ---
 <footer>
  <div class="content">
    <span>© 2026 {metadata.siteTitle}</span>
    <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">
      备案号：鄂ICP备2023000060号-2
    </a>
  </div>
 </footer>
 <style>
  footer {
-    background: #22252b;
+    background-color: #1a1a1a;
    height: 70px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: var(--shadow);
  }
  .content {
    color: aliceblue;
    max-width: var(--layout-width);
    margin: 0 auto;
-    color: #fff;
+    color: #f9f8f6;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 14px;
    justify-content: center;
    gap: 12px;
  }
  :global(.dark) footer {
    background: var(--background);
    box-shadow: none;
  }
  :global(.dark) .content {
    color: #ffffff;
  }
 </style>
 <footer>
  <div class="content">
    <a href="https://beian.miit.gov.cn/#/Integrated/index">
      备案号：鄂ICP备2023000060号-2
    </a>
  </div>
 </footer>
--- a/src/components/BaseHeader.astro
+++ b/src/components/BaseHeader.astro
@@ -1,37 +1,10 @@
 ---
 import {metadata} from "../consts";
 import ThemeIcon from './ThemeIcon.astro'
 import GitHubIcon from '@/assets/icon/github.svg?url'
 ---
 <header>
  <nav class="main-nav">
    <h1>
      <a href="/">{metadata.siteTitle}</a>
    </h1>
    <div class="main-nav-right">
      <ul class="menu">
        <li class="menu-item"><a href="/">首页</a></li>
        <li class="menu-item"><a href="/archive">归档</a></li>
        <li class="menu-item"><a target="_blank" href="https://git.ua42.com">
          <img class="github-icon" src={GitHubIcon} alt="GitHub"/>
        </a></li>
        <!--<li class="menu-item"><a href="/">关于</a></li>-->
      </ul>
      <ThemeIcon/>
    </div>
  </nav>
 </header>
 <style>
  header {
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 99999;
-    box-shadow: var(--shadow);
+    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
    flex-shrink: 0;
    background: #fff;
  }
@@ -40,29 +13,7 @@ import GitHubIcon from '@/assets/icon/github.svg?url'
    max-width: var(--layout-width);
    margin: 0 auto;
    height: 100%;
-    padding: 0 32px;
+    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .main-nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  @media (max-width: 768px) {
    .main-nav {
      padding: 16px;
    }
  }
  .main-nav h1 {
    user-select: none;
    cursor: pointer;
    font-size: 24px;
    color: #000000;
  }
  .main-nav .menu {
@@ -71,43 +22,22 @@ import GitHubIcon from '@/assets/icon/github.svg?url'
    gap: 20px;
    height: 100%;
    align-items: center;
    margin-right: 12px;
  }
  .menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .github-icon {
    width: 18px;
    height: 18px;
    display: block;
  }
  /* element: menu-item */
  .main-nav .menu-item a {
    text-decoration: none;
    font-weight: bold;
  }
  .main-nav .menu-item a:hover {
    color: #64748b;
  }
  :global(.dark) header {
    background: var(--background);
    box-shadow: none;
  }
  :global(.dark) .main-nav h1 {
    color: #ffffff;
  }
  :global(.dark) .main-nav .menu-item a:hover {
    color: rgba(255, 255, 255, .8);
  }
  :global(.dark) .github-icon {
    filter: invert(1);
  }
 </style>
 <header>
  <nav class="main-nav">
    <ul class="menu">
      <li class="menu-item"><a href="/">首页</a></li>
    </ul>
  </nav>
 </header>
--- a/src/components/IndexSidebar.astro
+++ b/src/components/IndexSidebar.astro
@@ -1,152 +0,0 @@
 ---
 import Folder from "@/assets/icon/folder.png?url";
 import TagIcon from "@/assets/icon/tag.png?url";
 import type { CategoriesStats,Tag } from "@/types";
 import { createHttp } from "@/lib/request";
 const http = createHttp(Astro.request.headers);
 const { data: categories } =
  await http.get<ApiResponse<CategoriesStats[]>>("categories/stats");
 const { data: tags } =
  await http.get<ApiResponse<Tag[]>>("posts/tags");
 ---
 <aside class="sidebar">
  <div class="widget">
    <h3 class="widget-title">
      <img src={Folder} alt="Folder" />
      文章分类
    </h3>
    <ul class="category-list">
      {
        categories.map((category) => (
          <li>
            <a
              href={`/search?c=${encodeURIComponent(category.code)}`}
              title={`${category.name} · ${category.post_count} 篇`}
            >
              {category.name}
            </a>
            <span class="count">{category.post_count}</span>
          </li>
        ))
      }
    </ul>
  </div>
  <div class="widget">
    <h3 class="widget-title">
      <img src={TagIcon} alt="Tag" />
      标签云
    </h3>
    <div class="tag-cloud">
      {
        tags.map((tag) => (
          <a
            class="tag"
            href={`/search?t=${encodeURIComponent(tag.code)}`}
          >
            {tag.name}
          </a>
        ))
      }
    </div>
  </div>
 </aside>
 <style>
  .sidebar {
    flex-shrink: 0;
    width: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .widget {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 22px;
  }
  .widget-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 8px;
  }
  .widget-title img {
    width: 18px;
    height: 18px;
  }
  /* 分类 & 标签云 */
  .category-list {
    list-style: none;
  }
  .category-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 4px;
    font-size: 14px;
    border-bottom: 1px dashed var(--border);
  }
  .category-list li:last-child {
    border-bottom: none;
  }
  .category-list a:hover {
    color: #4f6df5;
  }
  .category-list .count {
    color: var(--text-secondary);
    font-size: 13px;
  }
  .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .tag {
    font-size: 12px;
    color: var(--tag-text);
    background: var(--tag-bg);
    padding: 3px 10px;
    border-radius: 999px;
    transition: background 0.2s;
  }
  .tag:hover {
    background: var(--tag-hover-bg);
  }
  @media (max-width: 860px) {
    .sidebar {
      width: 100%;
    }
  }
  @media (max-width: 860px) {
    .sidebar {
      gap: 16px;
    }
  }
 </style>
--- a/src/components/IndexView.astro
+++ b/src/components/IndexView.astro
@@ -1,46 +0,0 @@
 ---
 import type {Post} from "@/types/post";
 import IndexSidebar from "@/components/IndexSidebar.astro";
 import PostList from "@/components/Post/List.astro";
 import Pagination from "@/components/Post/Pagination.astro";
 interface Props {
  posts: Post[];
  page: number;
  totalPage: number;
 }
 const {posts, page, totalPage} = Astro.props;
 ---
 <div class="page-content">
  <div class="container">
    <div class="post-container">
      <PostList posts={posts}/>
      <Pagination page={page} totalPage={totalPage}/>
    </div>
    <IndexSidebar/>
  </div>
 </div>
 <style>
  .container {
    flex: 1;
    width: 100%;
    display: flex;
    gap: 28px;
  }
  .post-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1;
  }
  @media (max-width: 860px) {
    .container {
      flex-direction: column;
    }
  }
 </style>
--- a/src/components/LazyImage.astro
+++ b/src/components/LazyImage.astro
@@ -1,131 +0,0 @@
 ---
 interface Props {
  src: string;
  alt?: string;
  width?: number;
  height?: number;
  class?: string;
 }
 const {
  src,
  alt = "",
  width,
  height,
  class: className = ""
 } = Astro.props;
 ---
 <div
  class={`lazy-image ${className}`}
  data-src={src}
  style={`aspect-ratio:${width}/${height}`}
 >
  <div class="placeholder"></div>
  <img
    class="real-image"
    alt={alt}
    width={width}
    height={height}
    loading="lazy"
    decoding="async"
  />
 </div>
 <style>
 .lazy-image {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
 }
 .lazy-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
 .placeholder {
  position: absolute;
  inset: 0;
  background: #f3f4f6;
  background-image: linear-gradient(
    90deg,
    #f3f4f6 0%,
    #e5e7eb 50%,
    #f3f4f6 100%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
 }
@keyframes loading {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
 }
 .real-image {
  opacity: 0;
  transition: opacity .35s ease;
 }
 .real-image.loaded {
  opacity: 1;
 }
 </style>
 <script>
 function initLazyImages() {
  const images = document.querySelectorAll(".lazy-image");
  const observer = new IntersectionObserver(
    entries => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        const container = entry.target as HTMLElement;
        const img = container.querySelector(
          ".real-image"
        ) as HTMLImageElement;
        const src = container.dataset.src;
        if (!src) return;
        img.src = src;
        img.onload = () => {
          img.classList.add("loaded");
          const placeholder =
            container.querySelector(".placeholder");
          placeholder?.remove();
        };
        observer.unobserve(container);
      });
    },
    {
      rootMargin: "300px"
    }
  );
  images.forEach(img => observer.observe(img));
 }
 initLazyImages();
 </script>
--- a/src/components/Link.astro
+++ b/src/components/Link.astro
@@ -0,0 +1,12 @@
 ---
 interface Props {
  href: string;
  class?: string;
 }
 const { href, class: className } = Astro.props;
 ---
 <a href={href} class={className}>
  <slot />
 </a>
--- a/src/components/Post/Item.astro
+++ b/src/components/Post/Item.astro
@@ -1,185 +0,0 @@
 ---
 import type {Post} from '@/types';
 import Eye from "@/assets/icon/eye.png?url";
 import Folder from "@/assets/icon/folder.png?url";
 import Calendar from "@/assets/icon/calendar.png?url";
 import LazyImage from "@/components/LazyImage.astro";
 import {formatDatetime} from "@/lib/format.ts";
 interface Props {
  post: Post
 }
 const {post} = Astro.props;
 const published_at = formatDatetime(post.published_at, 'YYYY-MM-DD')
 ---
 <a href={`/post/${post.slug}`}>
  <article class="post-card">
    <div class="post-cover">
      <LazyImage src={post.cover} alt={post.title}/>
    </div>
    <div class="post-body">
      <div class="post-meta">
                <span>
                  <img src={Calendar} alt="Calendar"/>
                  {published_at}
                </span>
        <span>
                  <img src={Folder} alt="Folder"/>
          {post.category_name}
                </span>
        <span>
                  <img src={Eye} alt="Eye"/>
          {post.view_count}
                </span>
      </div>
      <h3 class="post-title">
        {post.title}
      </h3>
      <div class="post-summary">
        {post.summary}
      </div>
      <div class="tags">
        {post.tags.map(tag =>
          <div class="tag">{tag.name}</div>)}
      </div>
    </div>
  </article>
 </a>
 <style>
  .post-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    gap: 22px;
  }
  @media (hover: hover) and (pointer: fine) {
    .post-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
    }
  }
  .post-cover {
    flex-shrink: 0;
    width: 160px;
    height: 100px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #fff;
    overflow: hidden;
  }
  .post-body {
    flex: 1;
    min-width: 0;
  }
  .post-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .post-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .post-meta span img {
    width: 14px;
    height: 14px;
    display: block;
  }
  .post-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
  }
  .post-summary {
    font-size: 14px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .tag {
    font-size: 12px;
    color: var(--tag-text);
    background: var(--tag-bg);
    padding: 3px 10px;
    border-radius: 999px;
    transition: background 0.2s;
  }
  .tag:hover {
    background: var(--tag-hover-bg);
  }
  @media (max-width: 860px) {
    .post-card {
      padding: 16px;
      gap: 12px;
    }
    .post-cover {
      width: 128px;
      height: 80px;
    }
    .post-title {
      font-size: 18px;
    }
    .post-meta {
      gap: 8px;
      font-size: 12px;
    }
  }
  @media (max-width: 560px) {
    .post-card {
      padding: 12px;
    }
    .post-title {
      font-size: 14px;
      margin-bottom: 4px;
    }
    .post-meta {
      gap: 6px;
      font-size: 12px;
    }
    .post-summary {
      font-size: 12px;
      margin-bottom: 6px;
    }
  }
 </style>
--- a/src/components/Post/List.astro
+++ b/src/components/Post/List.astro
@@ -1,37 +0,0 @@
 ---
 import type {Post} from "@/types/post";
 import PostItem from '@/components/Post/Item.astro'
 interface Props {
  posts: Post[]
 }
 const {posts} = Astro.props
 ---
 <section class="section">
  <div class="post-list">
    {posts.map(post => (
      <PostItem post={post}/>
    ))}
  </div>
 </section>
 <style>
  .section {
    flex: 1;
    height: 100%;
  }
  .post-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  @media (max-width: 860px){
    .post-list{
      gap: 12px;
    }
  }
 </style>
--- a/src/components/Post/Pagination.astro
+++ b/src/components/Post/Pagination.astro
@@ -1,67 +0,0 @@
 ---
 interface Props {
  page: number
  totalPage: number
 }
 const {page, totalPage} = Astro.props
 ---
 <!--分页器-->
 {totalPage > 1 &&
 <nav class="pagination" aria-label="分页">
  {page > 1 ? <a href={`/page/${page - 1}`} class="link">« 上一页</a> : <span class="link disabled">« 上一页</span>}
  {Array.from({length: totalPage}).map((_, index) => {
    if (page === index + 1) {
      return <span class="link current">{index + 1}</span>
    }
    return <a class="link" href={`/page/${index + 1}`}>{index + 1}</a>
  })}
  {page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页 »</a> :
    <span class="link disabled">下一页 »</span>}
 </nav>}
 <style>
  /* ========== 分页 ========== */
  .pagination {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow-x: auto;
  }
  .link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.2s;
    white-space: nowrap;
    margin-left: 8px;
  }
  .link:first-child {
    margin-left: 0;
  }
  .link:hover,
  .link.current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }
  .link.disabled {
    color: var(--text-secondary);
    background: var(--card-bg);
    border-color: var(--border);
    cursor: not-allowed;
  }
 </style>
--- a/src/components/SearchButton.tsx
+++ b/src/components/SearchButton.tsx
@@ -0,0 +1,157 @@
 import { createSignal, Show, For, onMount } from 'solid-js';
 import Fuse from 'fuse.js';
 import type { SearchIndexItem } from '@/utils/search-index';
 export default function SearchButton() {
  const [isExpanded, setIsExpanded] = createSignal(false);
  const [searchQuery, setSearchQuery] = createSignal('');
  const [searchResults, setSearchResults] = createSignal<SearchIndexItem[]>([]);
  const [showResults, setShowResults] = createSignal(false);
  const [searchIndex, setSearchIndex] = createSignal<SearchIndexItem[]>([]);
  const [fuse, setFuse] = createSignal<Fuse<SearchIndexItem> | null>(null);
  let inputRef: HTMLInputElement | undefined;
  let containerRef: HTMLDivElement | undefined;
  // 加载搜索索引
  onMount(async () => {
    try {
      const response = await fetch('/search-index.json');
      const data = await response.json();
      setSearchIndex(data);
      // 初始化 Fuse.js
      const fuseInstance = new Fuse(data, {
        keys: [
          { name: 'title', weight: 3 },
          { name: 'description', weight: 2 },
          { name: 'tags', weight: 2 },
          { name: 'category', weight: 1.5 },
          { name: 'content', weight: 1 },
        ],
        threshold: 0.3,
        includeScore: true,
      });
      setFuse(fuseInstance);
    } catch (error) {
      console.error('Failed to load search index:', error);
    }
    // 点击外部关闭
    document.addEventListener('click', handleClickOutside);
    return () => document.removeEventListener('click', handleClickOutside);
  });
  const handleClickOutside = (event: MouseEvent) => {
    if (containerRef && !containerRef.contains(event.target as Node)) {
      setIsExpanded(false);
      setShowResults(false);
    }
  };
  const handleExpand = () => {
    setIsExpanded(true);
    setTimeout(() => inputRef?.focus(), 100);
  };
  const handleSearch = (query: string) => {
    setSearchQuery(query);
    if (!query.trim()) {
      setShowResults(false);
      setSearchResults([]);
      return;
    }
    const fuseInstance = fuse();
    if (!fuseInstance) return;
    const results = fuseInstance.search(query);
    setSearchResults(results.slice(0, 10).map(r => r.item));
    setShowResults(true);
  };
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      setIsExpanded(false);
      setShowResults(false);
      setSearchQuery('');
    }
  };
  return (
    <div class="search-container" ref={containerRef}>
      <Show
        when={isExpanded()}
        fallback={
          <button
            class="search-button"
            onClick={handleExpand}
            aria-label="搜索"
          >
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <circle cx="11" cy="11" r="8"></circle>
              <path d="m21 21-4.35-4.35"></path>
            </svg>
          </button>
        }
      >
        <div class="search-input-wrapper">
          <input
            ref={inputRef}
            type="text"
            class="search-input"
            placeholder="搜索文章..."
            value={searchQuery()}
            onInput={(e) => handleSearch(e.currentTarget.value)}
            onKeyDown={handleKeyDown}
          />
          <button
            class="search-close"
            onClick={() => {
              setIsExpanded(false);
              setShowResults(false);
              setSearchQuery('');
            }}
          >
            ✕
          </button>
        </div>
      </Show>
      <Show when={showResults() && searchResults().length > 0}>
        <div class="search-results">
          <For each={searchResults()}>
            {(result) => (
              <a href={result.url} class="search-result-item">
                <div class="result-title">{result.title}</div>
                <div class="result-description">{result.description}</div>
                <div class="result-meta">
                  <span class="result-category">{result.category}</span>
                  <span class="result-date">
                    {new Date(result.date).toLocaleDateString('zh-CN')}
                  </span>
                </div>
              </a>
            )}
          </For>
        </div>
      </Show>
      <Show when={showResults() && searchQuery() && searchResults().length === 0}>
        <div class="search-results">
          <div class="no-results">未找到相关文章</div>
        </div>
      </Show>
    </div>
  );
 }
--- a/src/components/SiteFooter.astro
+++ b/src/components/SiteFooter.astro
@@ -0,0 +1,32 @@
 ---
 const currentYear = new Date().getFullYear();
 ---
 <footer class="site-footer">
  <div class="container">
    <p>&copy; {currentYear} 42. All rights reserved.</p>
  </div>
 </footer>
 <style>
  .site-footer {
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
  }
  .container {
    max-width: var(--layout-width);
    margin: 0 auto;
    padding: 0 2rem;
  }
  @media (max-width: 768px) {
    .container {
      padding: 0 1rem;
    }
  }
 </style>
--- a/src/components/SiteHeader.astro
+++ b/src/components/SiteHeader.astro
@@ -0,0 +1,381 @@
 ---
 import ThemeToggle from './ThemeToggle';
 import SearchButton from './SearchButton';
 interface Props {
  currentPath?: string;
 }
 const { currentPath = '/' } = Astro.props;
 const navItems = [
  { label: '首页', href: '/' },
  { label: '标签', href: '/tags' },
  { label: '分类', href: '/categories' },
  { label: '关于', href: '/about' },
 ];
 ---
 <header class="site-header">
  <div class="container">
    <a href="/" class="logo">
      <span class="logo-icon"></span>
      <span class="logo-text">
        <span class="logo-number">42</span><span class="logo-suffix">的博客</span>
      </span>
    </a>
    <nav class="nav">
      {navItems.map(item => (
        <a 
          href={item.href} 
          class:list={['nav-link', { active: currentPath === item.href }]}
        >
          {item.label}
        </a>
      ))}
      <SearchButton client:load />
      <ThemeToggle client:load />
    </nav>
  </div>
 </header>
 <style>
  .site-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
  }
  @supports (backdrop-filter: blur(10px)) {
    .site-header {
      backdrop-filter: blur(10px) saturate(180%);
      -webkit-backdrop-filter: blur(10px) saturate(180%);
      background: rgba(255, 255, 255, 0.9);
    }
    [data-theme="dark"] .site-header {
      background: rgba(9, 9, 11, 0.95);
    }
  }
  .container {
    max-width: var(--layout-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    transition: transform var(--transition-fast);
  }
  .logo:hover {
    transform: scale(1.05);
  }
  .logo-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    flex-shrink: 0;
  }
  .logo-text {
    display: flex;
    align-items: baseline;
  }
  .logo-number {
    color: var(--accent-color);
    font-weight: 700;
  }
  .logo-suffix {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-left: 0.1em;
  }
  .nav {
    display: flex;
    gap: 2rem;
    align-items: center;
  }
  .nav-link {
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    font-weight: 500;
    position: relative;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-color);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
  }
  .nav-link:hover {
    color: var(--text-primary);
    transform: scale(1.02);
  }
  .nav-link:hover::after {
    transform: scaleX(1);
  }
  .nav-link.active {
    color: var(--text-primary);
    font-weight: 600;
  }
  .nav-link.active::after {
    transform: scaleX(1);
  }
  .nav :global(.search-container) {
    position: relative;
  }
  .nav :global(.search-button) {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    cursor: pointer;
  }
  .nav :global(.search-button:hover) {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    box-shadow: var(--shadow-md);
  }
  .nav :global(.search-button svg) {
    color: var(--text-primary);
  }
  .nav :global(.search-button:hover svg) {
    color: white;
  }
  .nav :global(.search-input-wrapper) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 0.5rem 1rem;
    min-width: 280px;
    transition: all var(--transition-base);
  }
  .nav :global(.search-input-wrapper:focus-within) {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
  }
  .nav :global(.search-input) {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.9375rem;
    color: var(--text-primary);
  }
  .nav :global(.search-input::placeholder) {
    color: var(--text-tertiary);
  }
  .nav :global(.search-close) {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
  }
  .nav :global(.search-close:hover) {
    background: var(--bg-tertiary);
    color: var(--text-primary);
  }
  .nav :global(.search-results) {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 400px;
    max-height: 500px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
  }
  .nav :global(.search-result-item) {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
    color: inherit;
  }
  .nav :global(.search-result-item:last-child) {
    border-bottom: none;
  }
  .nav :global(.search-result-item:hover) {
    background: var(--bg-secondary);
  }
  .nav :global(.result-title) {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 0.25rem;
  }
  .nav :global(.result-description) {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nav :global(.result-meta) {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .nav :global(.result-category) {
    color: var(--accent-secondary);
    font-weight: 500;
  }
  .nav :global(.no-results) {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
  }
  .nav :global(.theme-toggle) {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    cursor: pointer;
  }
  .nav :global(.theme-toggle:hover) {
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: var(--shadow-md);
  }
  .nav :global(.theme-toggle .icon-wrapper) {
    position: relative;
    width: 20px;
    height: 20px;
  }
  .nav :global(.theme-toggle .icon) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base), transform var(--transition-base);
    opacity: 0;
    transform: rotate(-90deg) scale(0);
  }
  .nav :global(.theme-toggle .icon.active) {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
  .nav :global(.theme-toggle svg) {
    width: 100%;
    height: 100%;
    color: var(--text-primary);
  }
  .nav :global(.theme-toggle:hover svg) {
    color: white;
  }
  @media (max-width: 768px) {
    .container {
      padding: 0 1rem;
    }
    .nav {
      gap: 1rem;
      font-size: 0.875rem;
    }
    .logo {
      font-size: 1.25rem;
    }
  }
  @media (max-width: 480px) {
    .nav-link:not(:first-child) {
      font-size: 0.8125rem;
    }
    .nav {
      gap: 0.75rem;
    }
  }
 </style>
--- a/src/components/TableOfContents.tsx
+++ b/src/components/TableOfContents.tsx
@@ -0,0 +1,146 @@
 import { createSignal, onMount, onCleanup, For } from 'solid-js';
 import type { Heading } from '@/utils/extract-headings';
 interface Props {
  headings: Heading[];
 }
 export default function TableOfContents(props: Props) {
  const [activeId, setActiveId] = createSignal('');
  const [isOpen, setIsOpen] = createSignal(false);
  onMount(() => {
    // 使用 IntersectionObserver 监听标题元素
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveId(entry.target.id);
          }
        });
      },
      {
        rootMargin: '-100px 0px -66%',
        threshold: 1.0,
      }
    );
    // 观察所有标题元素
    props.headings.forEach((heading) => {
      const element = document.getElementById(heading.id);
      if (element) {
        observer.observe(element);
      }
    });
    onCleanup(() => observer.disconnect());
  });
  const handleClick = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      const top = element.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: 'smooth' });
    }
    setIsOpen(false);
  };
  // 如果标题少于3个，不显示目录
  if (props.headings.length < 3) {
    return null;
  }
  return (
    <>
      {/* 桌面端：侧边固定目录 */}
      <nav class="toc-desktop">
        <div class="toc-title">目录</div>
        <ul class="toc-list">
          <For each={props.headings}>
            {(heading) => (
              <li
                class="toc-item"
                classList={{
                  active: activeId() === heading.id,
                  'level-3': heading.level === 3,
                }}
              >
                <a
                  href={`#${heading.id}`}
                  onClick={(e) => {
                    e.preventDefault();
                    handleClick(heading.id);
                  }}
                >
                  {heading.text}
                </a>
              </li>
            )}
          </For>
        </ul>
      </nav>
      {/* 移动端：浮动按钮 + 抽屉 */}
      <div class="toc-mobile">
        <button
          class="toc-toggle"
          onClick={() => setIsOpen(!isOpen())}
          aria-label="目录"
        >
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <line x1="3" y1="6" x2="21" y2="6"></line>
            <line x1="3" y1="12" x2="21" y2="12"></line>
            <line x1="3" y1="18" x2="21" y2="18"></line>
          </svg>
        </button>
        {isOpen() && (
          <>
            <div class="toc-overlay" onClick={() => setIsOpen(false)} />
            <div class="toc-drawer">
              <div class="toc-drawer-header">
                <span class="toc-drawer-title">目录</span>
                <button
                  class="toc-drawer-close"
                  onClick={() => setIsOpen(false)}
                >
                  ✕
                </button>
              </div>
              <ul class="toc-drawer-list">
                <For each={props.headings}>
                  {(heading) => (
                    <li
                      class="toc-drawer-item"
                      classList={{
                        active: activeId() === heading.id,
                        'level-3': heading.level === 3,
                      }}
                    >
                      <a
                        href={`#${heading.id}`}
                        onClick={(e) => {
                          e.preventDefault();
                          handleClick(heading.id);
                        }}
                      >
                        {heading.text}
                      </a>
                    </li>
                  )}
                </For>
              </ul>
            </div>
          </>
        )}
      </div>
    </>
  );
 }
--- a/src/components/ThemeIcon.astro
+++ b/src/components/ThemeIcon.astro
@@ -1,75 +0,0 @@
 ---
 ---
 <div class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
  <svg aria-hidden="true" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path class="sun" fill-rule="evenodd"
          d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
    <path class="moon" fill-rule="evenodd"
          d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
  </svg>
 </div>
 <style>
  #themeToggle {
    border: 0;
    background: none;
    user-select: none;
  }
  .theme-toggle {
    display: flex;
    align-items: center;
  }
  .sun {
    fill: black;
  }
  .moon {
    fill: transparent;
  }
  :global(.dark) .sun {
    fill: transparent;
  }
  :global(.dark) .moon {
    fill: white;
  }
 </style>
 <script is:inline>
  const meta = document.querySelector('meta[name="theme-color"]');
  const theme = (() => {
    const localStorageTheme = localStorage?.getItem("theme") ?? '';
    if (['dark', 'light'].includes(localStorageTheme)) {
      return localStorageTheme;
    }
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
    return 'light';
  })();
  if (theme === 'light') {
    document.documentElement.classList.remove('dark');
    meta.setAttribute('content', '#ffffff');
  } else {
    document.documentElement.classList.add('dark');
    meta.setAttribute('content', '#0a0a0a');
  }
  window.localStorage.setItem('theme', theme);
  const handleToggleClick = () => {
    const element = document.documentElement;
    element.classList.toggle("dark");
    const isDark = element.classList.contains("dark");
    meta.setAttribute('content', isDark ? '#0a0a0a' : '#ffffff');
    localStorage.setItem("theme", isDark ? "dark" : "light");
  }
  document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
 </script>
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,52 @@
 import { createSignal, onMount } from 'solid-js';
 export default function ThemeToggle() {
  const [theme, setTheme] = createSignal<'light' | 'dark'>('light');
  const [isAnimating, setIsAnimating] = createSignal(false);
  onMount(() => {
    const currentTheme = document.documentElement.getAttribute('data-theme') as 'light' | 'dark';
    setTheme(currentTheme || 'light');
  });
  const toggleTheme = () => {
    setIsAnimating(true);
    setTimeout(() => setIsAnimating(false), 600);
    const newTheme = theme() === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
  };
  return (
    <button
      onClick={toggleTheme}
      class="theme-toggle"
      classList={{ 'is-animating': isAnimating() }}
      aria-label="切换主题"
      title={theme() === 'light' ? '切换到暗色模式' : '切换到亮色模式'}
    >
      <span class="icon-wrapper">
        <span class="icon sun" classList={{ 'active': theme() === 'light' }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="5"/>
            <line x1="12" y1="1" x2="12" y2="3"/>
            <line x1="12" y1="21" x2="12" y2="23"/>
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
            <line x1="1" y1="12" x2="3" y2="12"/>
            <line x1="21" y1="12" x2="23" y2="12"/>
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
          </svg>
        </span>
        <span class="icon moon" classList={{ 'active': theme() === 'dark' }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
          </svg>
        </span>
      </span>
    </button>
  );
 }
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -1,5 +1,7 @@
 export const metadata = {
-  site: "https://ua42.com",
+  siteTitle: "42的博客",
-  siteTitle: "Uroboros",
+  siteDescription: "分享技术、思考与生活",
-  postPageSize: 6
+  siteUrl: "https://ua42.com",
  author: "42",
  postsPerPage: 10,
 }
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -0,0 +1,18 @@
 import { defineCollection, z } from 'astro:content';
 const posts = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
    author: z.string().default('42'),
    image: z.string().optional(),
    tags: z.array(z.string()).default([]),
    category: z.string().default('未分类'),
    draft: z.boolean().default(false),
  }),
 });
 export const collections = { posts };
--- a/src/content/posts/markdown-test.md
+++ b/src/content/posts/markdown-test.md
@@ -0,0 +1,264 @@
 ---
 title: "Markdown 渲染测试"
 description: "测试博客的 Markdown 渲染能力，包括各种元素和代码高亮"
 pubDate: 2024-11-21
 author: "42"
 tags: ["测试", "Markdown", "代码高亮"]
 category: "技术"
 draft: false
 ---
 ## 标题测试
 ### 三级标题
 #### 四级标题
 ##### 五级标题
 ###### 六级标题
 ## 段落和文本格式
 这是一个普通的段落。Lorem ipsum dolor sit amet, consectetur adipiscing elit. 中文和英文混排测试，确保行高和间距合理。
 这是另一个段落，包含**粗体文本**、*斜体文本*和`行内代码`。
 ## 列表测试
 ### 无序列表
 - 第一项
 - 第二项
  - 嵌套项 2.1
  - 嵌套项 2.2
    - 更深层嵌套 2.2.1
 - 第三项
 ### 有序列表
 1. 第一步
 2. 第二步
   1. 子步骤 2.1
   2. 子步骤 2.2
 3. 第三步
 ## 链接测试
 这是一个[内联链接](https://example.com)。
 这是一个[带标题的链接](https://example.com "链接标题")。
 ## 引用块测试
 > 这是一个引用块。
 > 
 > 引用块可以包含多个段落。
 > 
 > 引用块的样式应该与正文有明显区分。
 ## 代码测试
 ### 行内代码
 使用 `const` 和 `let` 声明变量，用 `console.log()` 输出日志。
 ### JavaScript 代码块
 ```javascript
 // JavaScript 示例
 function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
 }
 const result = fibonacci(10);
 console.log(`Fibonacci(10) = ${result}`);
 // ES6+ 特性
 const numbers = [1, 2, 3, 4, 5];
 const doubled = numbers.map(n => n * 2);
 ```
 ### TypeScript 代码块
 ```typescript
 // TypeScript 示例
 interface User {
  id: number;
  name: string;
  email: string;
 }
 class UserService {
  private users: User[] = [];
  addUser(user: User): void {
    this.users.push(user);
  }
  getUserById(id: number): User | undefined {
    return this.users.find(user => user.id === id);
  }
 }
 const service = new UserService();
 service.addUser({ id: 1, name: '张三', email: 'zhang@example.com' });
 ```
 ### Python 代码块
 ```python
 # Python 示例
 def fibonacci(n):
    """计算斐波那契数列第 n 项"""
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)
 # 列表推导式
 squares = [x**2 for x in range(10)]
 # 字典
 user = {
    'name': '李四',
    'age': 25,
    'email': 'li@example.com'
 }
 print(f"用户: {user['name']}, 年龄: {user['age']}")
 ```
 ### CSS 代码块
 ```css
 /* CSS 示例 */
 .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
 }
 .card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
 }
 .card:hover {
  transform: translateY(-5px);
 }
 ```
 ### HTML 代码块
 ```html
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>示例页面</title>
 </head>
 <body>
  <header class="site-header">
    <h1>欢迎</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于</a>
    </nav>
  </header>
  <main>
    <article>
      <h2>文章标题</h2>
      <p>文章内容...</p>
    </article>
  </main>
 </body>
 </html>
 ```
 ### Go 代码块
 ```go
 // Go 示例
 package main
 import (
    "fmt"
    "time"
 )
 type User struct {
    ID    int
    Name  string
    Email string
 }
 func main() {
    user := User{
        ID:    1,
        Name:  "王五",
        Email: "wang@example.com",
    }
    fmt.Printf("用户: %s (ID: %d)\n", user.Name, user.ID)
    // 并发示例
    go func() {
        fmt.Println("并发执行")
    }()
    time.Sleep(time.Second)
 }
 ```
 ## 表格测试
 | 语言       | 类型     | 特点           | 流行度 |
 |-----------|---------|---------------|-------|
 | JavaScript | 动态     | 灵活，生态丰富   | ⭐⭐⭐⭐⭐ |
 | TypeScript | 静态     | 类型安全       | ⭐⭐⭐⭐ |
 | Python    | 动态     | 简洁，易学      | ⭐⭐⭐⭐⭐ |
 | Go        | 静态     | 高性能，并发    | ⭐⭐⭐⭐ |
 | Rust      | 静态     | 内存安全，性能  | ⭐⭐⭐ |
 ## 图片测试
 ![示例图片](https://via.placeholder.com/800x400/667eea/ffffff?text=示例图片)
 ## 分隔线
 ---
 ## 混合内容测试
 让我们结合多种元素：
 1. **列表项包含代码**：使用 `Array.prototype.map()` 进行数组转换
 2. **列表项包含链接**：访问 [MDN 文档](https://developer.mozilla.org)
 3. **列表项包含强调**：这是*非常重要*的一点
 > **提示**：以上测试涵盖了常见的 Markdown 元素。
 > 
 > 确保在亮色和暗色模式下都有良好的显示效果。
 ```typescript
 // 综合示例
 interface Config {
  theme: 'light' | 'dark';
  language: string;
  features: string[];
 }
 const config: Config = {
  theme: 'dark',
  language: 'zh-CN',
  features: ['syntax-highlight', 'responsive', 'dark-mode']
 };
 ```
 ## 结尾
 这个测试文档涵盖了博客系统支持的主要 Markdown 功能。
--- a/src/content/posts/welcome.md
+++ b/src/content/posts/welcome.md
@@ -0,0 +1,30 @@
 ---
 title: "欢迎来到我的博客"
 description: "这是第一篇博客文章，介绍了博客的功能和技术栈。"
 pubDate: 2024-11-21
 author: "42"
 tags: ["博客", "Astro", "SolidJS"]
 category: "技术"
 draft: false
 ---
 ## 欢迎！
 这是使用 Astro + SolidJS 构建的现代化博客系统。
 ### 技术特点
 - **服务端渲染**：基于 Astro 的 SSR 模式，提供极致的首屏加载速度
 - **响应式组件**：使用 SolidJS 构建高性能的交互式组件
 - **TypeScript**：完整的类型支持，提升开发体验
 - **内容管理**：使用 Content Collections 管理文章
 ### 功能亮点
 1. 文章分类和标签系统
 2. 搜索功能
 3. RSS 订阅
 4. 响应式设计
 5. 暗色模式支持
 开始你的阅读之旅吧！
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,56 @@
 ---
 import '@/styles/base.css';
 import { metadata } from '@/consts';
 interface Props {
  title?: string;
  description?: string;
  image?: string;
 }
 const {
  title = metadata.siteTitle,
  description = metadata.siteDescription,
  image = `${metadata.siteUrl}/og-image.jpg`,
 } = Astro.props;
 const fullTitle = title === metadata.siteTitle ? title : `${title} - ${metadata.siteTitle}`;
 ---
 <!doctype html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description} />
    <meta name="generator" content={Astro.generator} />
    <!-- Open Graph -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content={fullTitle} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={image} />
    <meta property="og:url" content={Astro.url} />
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={fullTitle} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={image} />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <title>{fullTitle}</title>
    <script is:inline>
      // 主题切换逻辑
      const theme = localStorage.getItem('theme') ||
        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      document.documentElement.setAttribute('data-theme', theme);
    </script>
  </head>
  <body>
    <slot />
  </body>
 </html>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,42 +1,80 @@
 ---
-import "@/styles/global.css";
+import "@/styles/base.css";
 import BaseHeader from "@/components/BaseHeader.astro";
 import BaseFooter from "@/components/BaseFooter.astro";
 import BackTop from "@/components/BackTop.astro";
 import { metadata } from "@/consts.ts";
 const { siteTitle } = metadata;
 interface Props {
  title?: string;
  description?: string;
 }
 const { title, description } = Astro.props;
 const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
 ---
 <!doctype html>
-<html lang="zh-CN">
+<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
-    <meta name="description" content={description} />
+    <title>{siteTitle}</title>
    <meta name="theme-color" content="#ffffff" />
    <title>{pageTitle}</title>
  </head>
  <body>
    <BaseHeader />
-    <main class="main">
+    <main>
      <div class="grid-background"></div>
      <slot />
    </main>
    <BaseFooter />
    <BackTop />
  </body>
 </html>
 <style>
  html,
  body {
    width: 100%;
    height: 100%;
  }
  body {
    display: flex;
    flex-direction: column;
  }
  main {
    flex: 1;
    max-width: var(--layout-width);
    width: 100%;
    margin: 0 auto;
    padding: 16px;
    position: relative;
  }
  .grid-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #ffffff;
    opacity: 0.3;
    background-image: linear-gradient(#d7edfb 2px, transparent 2px),
      linear-gradient(90deg, #d7edfb 2px, transparent 2px),
      linear-gradient(#d7edfb 1px, transparent 1px),
      linear-gradient(90deg, #d7edfb 1px, #ffffff 1px);
    background-size:
      50px 50px,
      50px 50px,
      10px 10px,
      10px 10px;
    background-position:
      -2px -2px,
      -2px -2px,
      -1px -1px,
      -1px -1px;
  }
 </style>
--- a/src/layouts/PostLayout.astro
+++ b/src/layouts/PostLayout.astro
@@ -0,0 +1,193 @@
 ---
 import BaseLayout from './BaseLayout.astro';
 import { formatDate } from '@/utils/date';
 import type { CollectionEntry } from 'astro:content';
 import SiteHeader from '@/components/SiteHeader.astro';
 import TableOfContents from '@/components/TableOfContents';
 import BackToTop from '@/components/BackToTop';
 import { extractHeadings } from '@/utils/extract-headings';
 import '@/styles/toc.css';
 interface Props {
  post: CollectionEntry<'posts'>;
  readingTime: string;
 }
 const { post, readingTime } = Astro.props;
 const { title, description, pubDate, author, tags, category } = post.data;
 const headings = extractHeadings(post.body);
 ---
 <BaseLayout title={title} description={description}>
  <div class="layout">
    <SiteHeader currentPath="" />
    <main class="main">
      <TableOfContents headings={headings} client:load />
      <BackToTop client:load />
      <article class="post">
        <header class="post-header">
          <h1 class="post-title">{title}</h1>
          <div class="post-meta">
            <div class="meta-row">
              <span class="author">{author}</span>
              <span class="separator">·</span>
              <time datetime={pubDate.toISOString()}>
                {formatDate(pubDate)}
              </time>
            </div>
            <div class="meta-row">
              <span class="reading-time">{readingTime}</span>
              <span class="separator">·</span>
              <span class="category">{category}</span>
            </div>
          </div>
          {tags.length > 0 && (
            <div class="post-tags">
              {tags.map((tag, index) => (
                <a href={`/tags/${tag}`} class="tag">
                  #{tag}{index < tags.length - 1 ? ', ' : ''}
                </a>
              ))}
            </div>
          )}
        </header>
        <div class="post-content">
          <slot />
        </div>
      </article>
    </main>
    <footer class="site-footer">
      <div class="container">
        <p>&copy; {new Date().getFullYear()} {author}. All rights reserved.</p>
      </div>
    </footer>
  </div>
 </BaseLayout>
 <style>
  .layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .site-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
  }
  .main {
    flex: 1;
    max-width: 680px;
    margin: 0 auto;
    padding: 3rem 2rem;
    width: 100%;
  }
  .post-header {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
  }
  .post-title {
    font-size: 2.5rem;
    line-height: 1.3;
    color: var(--text-heading);
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .post-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text-tertiary);
    font-size: 0.9375rem;
    margin-bottom: 1rem;
  }
  .meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .separator {
    opacity: 0.5;
  }
  .category {
    color: var(--accent-secondary);
    font-weight: 600;
  }
  .post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 1rem;
  }
  .tag {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 400;
    transition: color var(--transition-fast);
  }
  .tag:hover {
    color: var(--accent-secondary);
  }
  .post-content {
    margin-bottom: 3rem;
  }
  .site-footer {
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
  }
  @media (max-width: 768px) {
    .main {
      padding: 2rem 1rem;
    }
    .post-title {
      font-size: 2rem;
    }
    .post-meta {
      font-size: 0.875rem;
    }
  }
  @media (max-width: 480px) {
    .main {
      padding: 1.5rem 1rem;
    }
    .post-title {
      font-size: 1.75rem;
    }
    .post-header {
      margin-bottom: 2rem;
      padding-bottom: 1.5rem;
    }
  }
 </style>
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -1,10 +0,0 @@
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 dayjs.extend(utc);
 dayjs.extend(timezone);
 export const formatDatetime = (date: string,format = 'YYYY-MM-DD HH:mm') => {
  return dayjs(date).tz('Asia/Shanghai').format(format);
 };
--- a/src/lib/highlight.js
+++ b/src/lib/highlight.js
@@ -1,85 +0,0 @@
 import {JSDOM} from 'jsdom'
 import {createHighlighter} from 'shiki'
 const highlighter = await createHighlighter({
  themes: ['github-dark-dimmed'],
  langs: [
    "bash",
    "json",
    "yaml",
    "xml",
    "html",
    "css",
    "scss",
    "javascript",
    "typescript",
    "jsx",
    "tsx",
    "vue",
    "markdown",
    "sql",
    "graphql",
    "python",
    "java",
    "go",
    "rust",
    "c",
    "cpp",
    "csharp",
    "php",
    "ruby",
    "kotlin",
    "swift",
    "dockerfile",
    "nginx"
  ]
 })
 const resolveLang = (lang) => {
  const supported = highlighter.getLoadedLanguages?.() || []
  if (!lang) return 'text'
  if (supported.includes(lang)) return lang
  return 'text'
 }
 export const highlightHtmlWithJsdom = async (rawHtml) => {
  const dom = new JSDOM(rawHtml)
  const document = dom.window.document
  const codeElements = document.querySelectorAll('pre code')
  for (const codeEl of codeElements) {
    const preEl = codeEl.parentElement
    if (!preEl || preEl.tagName !== 'PRE') continue
    const codeContent = codeEl.textContent?.trim() || ''
    // 提取语言
    let lang = 'text'
    for (const cls of codeEl.classList) {
      if (cls.startsWith('language-')) {
        lang = cls.slice('language-'.length)
        break
      }
    }
    lang = resolveLang(lang)
    // 生成高亮 HTML
    const highlighted = highlighter.codeToHtml(codeContent, {
      lang,
      theme: 'github-dark-dimmed',
    })
    // 替换 DOM
    const wrapper = document.createElement('div')
    wrapper.innerHTML = highlighted.trim()
    const newNode = wrapper.firstChild
    if (newNode && preEl.parentNode) {
      preEl.parentNode.replaceChild(newNode, preEl)
    }
  }
  return dom.serialize()
 }
--- a/src/lib/request.ts
+++ b/src/lib/request.ts
@@ -1,51 +0,0 @@
 import ky, {type Options} from 'ky'
 type ForwardHeaderSource = Headers | Record<string, string | undefined> | undefined | null
 const api = ky.create({
  baseUrl: import.meta.env.VITE_API_BASE_URL
 });
 const pickHeader = (source: ForwardHeaderSource, name: string): string | undefined => {
  if (!source) return undefined
  if (source instanceof Headers) return source.get(name) ?? undefined
  return source[name] ?? source[name.toLowerCase()]
 }
 const buildForwardHeaders = (source: ForwardHeaderSource): Record<string, string> => {
  const xff = pickHeader(source, 'x-forwarded-for')
  const realIp = pickHeader(source, 'x-real-ip')
  const cfIp = pickHeader(source, 'cf-connecting-ip')
  const ua = pickHeader(source, 'user-agent')
  const referer = pickHeader(source, 'referer')
  const host = pickHeader(source, 'host')
  const proto = pickHeader(source, 'x-forwarded-proto')
  return {
    ...(xff ? {'x-forwarded-for': xff} : {}),
    ...(realIp ? {'x-real-ip': realIp} : {}),
    ...(cfIp ? {'cf-connecting-ip': cfIp} : {}),
    ...(ua ? {'user-agent': ua} : {}),
    ...(referer ? {referer} : {}),
    ...(host ? {host} : {}),
    ...(proto ? {'x-forwarded-proto': proto} : {})
  }
 }
 export const createHttp = (forwardHeadersSource?: ForwardHeaderSource) => {
  const forwardedHeaders = buildForwardHeaders(forwardHeadersSource)
  return {
    get: async <T = unknown>(url: string, options?: Options): Promise<T> => {
      return api.get(url, {
        ...options,
        headers: {
          ...forwardedHeaders,
          ...(options?.headers ?? {})
        }
      }).json<T>()
    }
  };
 }
 export const http = createHttp();
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,29 +0,0 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 ---
 <Layout title="404">
  <div class="not-found">
    <h1>404 Not Found</h1>
    <a class="back-home" href="/">返回首页</a>
  </div>
 </Layout>
 <style>
  .not-found {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
  }
  .back-home {
    background: black;
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
  }
 </style>
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -0,0 +1,283 @@
 ---
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import SiteHeader from '@/components/SiteHeader.astro';
 ---
 <BaseLayout title="关于">
  <div class="layout">
    <SiteHeader currentPath="/about" />
    <main class="main">
      <article class="about-content">
        <h1>关于本站</h1>
        <section>
          <h2>技术栈</h2>
          <p>本博客基于现代化的技术栈构建：</p>
          <ul>
            <li><strong>Astro</strong> - 现代化的静态网站生成器</li>
            <li><strong>SolidJS</strong> - 高性能的响应式UI框架</li>
            <li><strong>TypeScript</strong> - 类型安全的开发体验</li>
            <li><strong>Docker</strong> - 容器化部署方案</li>
          </ul>
        </section>
        <section>
          <h2>关于作者</h2>
          <p>42 - 一个热爱技术、喜欢折腾的开发者。</p>
          <p>在这里分享技术心得、项目经验和生活感悟。</p>
        </section>
        <section>
          <h2>联系方式</h2>
          <p>欢迎通过以下方式与我交流：</p>
          <ul>
            <li>网站：<a href="https://ua42.com">ua42.com</a></li>
            <li>Email: hello@ua42.com</li>
          </ul>
        </section>
      </article>
    </main>
    <footer class="site-footer">
      <div class="container">
        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
      </div>
    </footer>
  </div>
 </BaseLayout>
 <style>
  .layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .site-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
  }
  @supports (backdrop-filter: blur(10px)) {
    .site-header {
      backdrop-filter: blur(10px) saturate(180%);
      -webkit-backdrop-filter: blur(10px) saturate(180%);
      background: rgba(255, 255, 255, 0.9);
    }
    [data-theme="dark"] .site-header {
      background: rgba(15, 23, 42, 0.95);
    }
  }
  .container {
    max-width: var(--layout-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .nav {
    display: flex;
    gap: 2rem;
  }
  .nav a {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
    font-weight: 500;
    position: relative;
  }
  .nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
  }
  .nav a:hover {
    color: var(--text-primary);
  }
  .nav a:hover::after {
    transform: scaleX(1);
  }
  .main {
    flex: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 2rem;
    width: 100%;
  }
  .about-content h1 {
    font-size: 3rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 3rem;
    font-weight: 800;
  }
  .about-content section {
    margin-bottom: 3rem;
    padding: 2rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }
  .about-content section:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
  .about-content h2 {
    font-size: 1.875rem;
    color: var(--text-heading);
    margin-bottom: 1.25rem;
    font-weight: 700;
    position: relative;
    padding-left: 1rem;
  }
  .about-content h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
  }
  .about-content p {
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: 1rem;
  }
  .about-content ul {
    list-style: none;
    padding-left: 0;
    color: var(--text-primary);
  }
  .about-content li {
    margin-bottom: 0.75rem;
    line-height: 1.8;
    padding-left: 1.75rem;
    position: relative;
  }
  .about-content li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
  }
  .about-content a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition-fast);
  }
  .about-content a:hover {
    color: var(--link-hover);
    border-bottom-color: var(--link-hover);
  }
  .site-footer {
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
  }
  @media (max-width: 768px) {
    .container {
      padding: 0 1rem;
    }
    .nav {
      gap: 1rem;
      font-size: 0.875rem;
    }
    .logo {
      font-size: 1.25rem;
    }
    .main {
      padding: 2rem 1rem;
    }
    .about-content h1 {
      font-size: 2rem;
      margin-bottom: 2rem;
    }
    .about-content section {
      padding: 1.5rem;
      margin-bottom: 2rem;
    }
    .about-content h2 {
      font-size: 1.5rem;
    }
  }
  @media (max-width: 480px) {
    .nav a:not(:first-child) {
      font-size: 0.8125rem;
    }
    .about-content h1 {
      font-size: 1.75rem;
    }
    .about-content section {
      padding: 1.25rem;
    }
    .about-content h2 {
      font-size: 1.375rem;
    }
  }
 </style>
--- a/src/pages/archive.astro
+++ b/src/pages/archive.astro
@@ -1,198 +0,0 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 import type {Archive} from "@/types/archive";
 import {createHttp} from "@/lib/request";
 const http = createHttp(Astro.request.headers);
 const {data} = await http.get<ApiResponse<Archive>>("posts/archives");
 ---
 <Layout title="归档">
  <div class="page-content">
    <div class="archive">
      {
        data.map((year) => (
          <div class="archive-year">
            <h2 class="year-title">
              <span class="year-badge">{year.year}</span>
              <span class="year-count">共 {year.total} 篇</span>
            </h2>
            <div>
              {year.list.map((month) => (
                <div class="month-group">
                  <h3 class="month-title">{month.month} 月</h3>
                  <ul class="post-list">
                    {month.list.map((post) => (
                      <li class="post-item">
                        <span class="post-date">
                          {post.published_at_display}
                        </span>
                        <a href={`/post/${post.slug}`}>{post.title}</a>
                        <span class="post-cat">{post.category_name}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        ))
      }
    </div>
  </div>
 </Layout>
 <style>
  :root {
    --border: #e5e7eb;
    --radius: 12px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  .archive {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
  }
  .archive-year {
    margin-bottom: 40px;
  }
  .year-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 18px;
  }
  .year-title .year-badge {
    background: linear-gradient(135deg, #4f6df5, #7b5cf0);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 20px;
  }
  .year-title .year-count {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
  }
  .year-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
  }
  /* 月份分组 */
  .month-group {
    position: relative;
    padding-left: 28px;
    margin-bottom: 24px;
  }
  /* 时间轴竖线 */
  .month-group::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 0;
    width: 2px;
    background: var(--border);
  }
  .month-title {
    position: relative;
    font-size: 17px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
  }
  :global(.dark) .month-title{
    color: inherit;
  }
  /* 月份节点圆点 */
  .month-title::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px var(--tag-bg);
  }
  .post-list {
    list-style: none;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .post-item {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
  }
  .post-item:last-child {
    border-bottom: none;
  }
  .post-item:hover {
    background: #f9faff;
  }
  :global(.dark) .post-item:hover {
    background: none;
  }
  .post-date {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    width: 52px;
  }
  .post-item a {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .post-item a:hover {
    color: var(--primary);
  }
  :global(.dark) .post-item a:hover {
    color: inherit;
  }
  .post-cat {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--primary);
    background: var(--tag-bg);
    padding: 2px 10px;
    border-radius: 999px;
  }
 </style>
--- a/src/pages/categories/[category].astro
+++ b/src/pages/categories/[category].astro
@@ -0,0 +1,292 @@
 ---
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import { getCollection } from 'astro:content';
 import ArticleCard from '@/components/ArticleCard.astro';
 import ThemeToggle from '@/components/ThemeToggle';
 const { category } = Astro.params;
 if (!category) {
  return Astro.redirect('/404');
 }
 const allPosts = await getCollection('posts', ({ data }) => !data.draft);
 const posts = allPosts
  .filter(post => post.data.category === category)
  .sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
 if (posts.length === 0) {
  return Astro.redirect('/categories');
 }
 ---
 <BaseLayout title={`分类: ${category}`}>
  <div class="layout">
    <header class="site-header">
      <div class="container">
        <a href="/" class="logo">42的博客</a>
        <nav class="nav">
          <a href="/">首页</a>
          <a href="/tags">标签</a>
          <a href="/categories">分类</a>
          <a href="/about">关于</a>
          <ThemeToggle client:load />
        </nav>
      </div>
    </header>
    <main class="main">
      <div class="page-header">
        <h1 class="page-title">分类: {category}</h1>
        <p class="post-count">{posts.length} 篇文章</p>
      </div>
      <div class="posts-list">
        {posts.map(post => (
          <ArticleCard post={post} />
        ))}
      </div>
    </main>
    <footer class="site-footer">
      <div class="container">
        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
      </div>
    </footer>
  </div>
 </BaseLayout>
 <style>
  .layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .site-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
  }
  @supports (backdrop-filter: blur(10px)) {
    .site-header {
      backdrop-filter: blur(10px) saturate(180%);
      -webkit-backdrop-filter: blur(10px) saturate(180%);
      background: rgba(255, 255, 255, 0.9);
    }
    [data-theme="dark"] .site-header {
      background: rgba(15, 23, 42, 0.95);
    }
  }
  .container {
    max-width: var(--layout-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform var(--transition-fast);
  }
  .logo:hover {
    transform: scale(1.05);
  }
  .nav {
    display: flex;
    gap: 2rem;
    align-items: center;
  }
  .nav a {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
    font-weight: 500;
    position: relative;
  }
  .nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
  }
  .nav a:hover {
    color: var(--text-primary);
  }
  .nav a:hover::after {
    transform: scaleX(1);
  }
  .nav :global(.theme-toggle) {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    cursor: pointer;
  }
  .nav :global(.theme-toggle:hover) {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: rotate(180deg);
    box-shadow: var(--shadow-md);
  }
  .nav :global(.theme-toggle .icon-wrapper) {
    position: relative;
    width: 20px;
    height: 20px;
  }
  .nav :global(.theme-toggle .icon) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base), transform var(--transition-base);
    opacity: 0;
    transform: rotate(-180deg) scale(0);
  }
  .nav :global(.theme-toggle .icon.active) {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
  .nav :global(.theme-toggle.is-animating) {
    animation: spin 0.6s ease-in-out;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .nav :global(.theme-toggle svg) {
    width: 100%;
    height: 100%;
    color: var(--text-primary);
  }
  .nav :global(.theme-toggle:hover svg) {
    color: white;
  }
  .main {
    flex: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
    width: 100%;
  }
  .page-header {
    margin-bottom: 3rem;
  }
  .page-title {
    font-size: 2.75rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
    font-weight: 800;
  }
  .post-count {
    color: var(--text-tertiary);
    font-size: 1.125rem;
  }
  .posts-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .site-footer {
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
  }
  @media (max-width: 768px) {
    .container {
      padding: 0 1rem;
    }
    .nav {
      gap: 1rem;
      font-size: 0.875rem;
    }
    .logo {
      font-size: 1.25rem;
    }
    .main {
      padding: 2rem 1rem;
    }
    .page-title {
      font-size: 2rem;
    }
    .post-count {
      font-size: 1rem;
    }
    .posts-list {
      gap: 1rem;
    }
  }
  @media (max-width: 480px) {
    .nav a:not(:first-child) {
      font-size: 0.8125rem;
    }
    .page-title {
      font-size: 1.75rem;
    }
  }
 </style>
--- a/src/pages/categories/index.astro
+++ b/src/pages/categories/index.astro
@@ -0,0 +1,358 @@
 ---
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import { getCollection } from 'astro:content';
 import ThemeToggle from '@/components/ThemeToggle';
 const posts = await getCollection('posts', ({ data }) => !data.draft);
 // 统计所有分类
 const categoryCount = new Map<string, number>();
 posts.forEach(post => {
  const category = post.data.category;
  categoryCount.set(category, (categoryCount.get(category) || 0) + 1);
 });
 // 按文章数量排序
 const sortedCategories = Array.from(categoryCount.entries())
  .sort((a, b) => b[1] - a[1]);
 ---
 <BaseLayout title="分类">
  <div class="layout">
    <header class="site-header">
      <div class="container">
        <a href="/" class="logo">42的博客</a>
        <nav class="nav">
          <a href="/">首页</a>
          <a href="/tags">标签</a>
          <a href="/categories">分类</a>
          <a href="/about">关于</a>
          <ThemeToggle client:load />
        </nav>
      </div>
    </header>
    <main class="main">
      <h1 class="page-title">分类</h1>
      <div class="categories-list">
        {sortedCategories.map(([category, count]) => (
          <a href={`/categories/${category}`} class="category-item">
            <span class="category-name">{category}</span>
            <span class="category-count">{count} 篇</span>
          </a>
        ))}
      </div>
    </main>
    <footer class="site-footer">
      <div class="container">
        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
      </div>
    </footer>
  </div>
 </BaseLayout>
 <style>
  .layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .site-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
  }
  @supports (backdrop-filter: blur(10px)) {
    .site-header {
      backdrop-filter: blur(10px) saturate(180%);
      -webkit-backdrop-filter: blur(10px) saturate(180%);
      background: rgba(255, 255, 255, 0.9);
    }
    [data-theme="dark"] .site-header {
      background: rgba(15, 23, 42, 0.95);
    }
  }
  .container {
    max-width: var(--layout-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform var(--transition-fast);
  }
  .logo:hover {
    transform: scale(1.05);
  }
  .nav {
    display: flex;
    gap: 2rem;
    align-items: center;
  }
  .nav a {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
    font-weight: 500;
    position: relative;
  }
  .nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
  }
  .nav a:hover {
    color: var(--text-primary);
  }
  .nav a:hover::after {
    transform: scaleX(1);
  }
  .nav :global(.theme-toggle) {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    cursor: pointer;
  }
  .nav :global(.theme-toggle:hover) {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: rotate(180deg);
    box-shadow: var(--shadow-md);
  }
  .nav :global(.theme-toggle .icon-wrapper) {
    position: relative;
    width: 20px;
    height: 20px;
  }
  .nav :global(.theme-toggle .icon) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base), transform var(--transition-base);
    opacity: 0;
    transform: rotate(-180deg) scale(0);
  }
  .nav :global(.theme-toggle .icon.active) {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
  .nav :global(.theme-toggle.is-animating) {
    animation: spin 0.6s ease-in-out;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .nav :global(.theme-toggle svg) {
    width: 100%;
    height: 100%;
    color: var(--text-primary);
  }
  .nav :global(.theme-toggle:hover svg) {
    color: white;
  }
  .main {
    flex: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
    width: 100%;
  }
  .page-title {
    font-size: 3rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 3rem;
    font-weight: 800;
  }
  .categories-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    animation: fadeInUp 0.6s ease-out;
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .category-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
  }
  .category-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
  }
  .category-item:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent-color);
  }
  .category-item:hover::before {
    transform: scaleX(1);
  }
  .category-name {
    font-size: 1.375rem;
    font-weight: 700;
  }
  .category-count {
    font-size: 0.9rem;
    opacity: 0.8;
  }
  .site-footer {
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
  }
  @media (max-width: 768px) {
    .container {
      padding: 0 1rem;
    }
    .nav {
      gap: 1rem;
      font-size: 0.875rem;
    }
    .logo {
      font-size: 1.25rem;
    }
    .main {
      padding: 2rem 1rem;
    }
    .page-title {
      font-size: 2rem;
      margin-bottom: 2rem;
    }
    .categories-list {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .category-item {
      padding: 1.5rem 1.25rem;
    }
    .category-name {
      font-size: 1.25rem;
    }
    .category-count {
      font-size: 0.875rem;
    }
  }
  @media (max-width: 480px) {
    .nav a:not(:first-child) {
      font-size: 0.8125rem;
    }
    .page-title {
      font-size: 1.75rem;
    }
    .category-item {
      padding: 1.25rem 1rem;
    }
    .category-name {
      font-size: 1.125rem;
    }
  }
 </style>
--- a/src/pages/embed/gitea.astro
+++ b/src/pages/embed/gitea.astro
@@ -1,140 +0,0 @@
 ---
 const noindex = true;
 import {metadata} from '@/consts.ts'
 ---
 <!doctype html>
 <html lang="zh-CN">
 <head>
  <meta charset="UTF-8"/>
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
  />
  <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
  <meta name="generator" content={Astro.generator}/>
  <title>Gitea 入口</title>
  <meta name="theme-color" content="#ffffff"/>
  <meta name="robots" content="noindex, nofollow">
  <style>
    @import "modern-normalize";
    :root {
      --bg: #f6f7f9;
      --card-bg: #ffffff;
      --border: #e5e7eb;
      --text-color: #2b2f36;
      --text-secondary: #6b7280;
      --primary: #4f6df5;
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--text-color);
      font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    .page-container {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 24px 24px 24px 24px;
    }
    .gitea-card {
      width: 100%;
      max-width: 520px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      overflow: hidden;
    }
    .gitea-card__title {
      padding: 14px 20px;
      font-size: 15px;
      font-weight: 600;
      border-bottom: 1px solid var(--border);
    }
    .gitea-content {
      display: flex;
      flex-direction: column;
    }
    .gitea-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 13px 20px;
      font-size: 14px;
    }
    .gitea-item + .gitea-item {
      border-top: 1px solid var(--border);
    }
    .gitea-item:hover {
      background: #fafbfc;
    }
    .gitea-item__label {
      color: var(--text-secondary);
    }
    .gitea-item__link {
      color: var(--primary);
      text-decoration: none;
      white-space: nowrap;
    }
    .gitea-item__link:hover {
      text-decoration: underline;
    }
  </style>
 </head>
 <body>
 <div class="page-container">
  <div class="gitea-card">
    <div class="gitea-card__title">常用入口</div>
    <div class="gitea-content">
      <div class="gitea-item">
        <span class="gitea-item__label">博客地址</span>
        <a class="gitea-item__link" target="_blank" href="https://ua42.com">点击访问</a>
      </div>
      <div class="gitea-item">
        <span class="gitea-item__label">博客管理后台(支持游客查看)</span>
        <a class="gitea-item__link" target="_blank" href="https://admin.ua42.com">点击访问</a>
      </div>
      <div class="gitea-item">
        <span class="gitea-item__label">仓库地址</span>
        <a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin">点击访问</a>
      </div>
      <div class="gitea-item">
        <span class="gitea-item__label">博客服务端仓库</span>
        <a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin/blog-server">点击访问</a>
      </div>
      <div class="gitea-item">
        <span class="gitea-item__label">博客服务端 API文档</span>
        <a class="gitea-item__link" target="_blank" href="https://dev.ua42.com/docs/server-documentation.html">点击访问</a>
      </div>
    </div>
  </div>
 </div>
 </body>
 </html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,25 +1,295 @@
 ---
-import Layout from "@/layouts/Layout.astro";
+import BaseLayout from '@/layouts/BaseLayout.astro';
-import IndexView from "@/components/IndexView.astro";
+import { getCollection } from 'astro:content';
-import type { Post } from "@/types/post";
+import ArticleCard from '@/components/ArticleCard.astro';
-import { createHttp } from "@/lib/request";
+import SiteHeader from '@/components/SiteHeader.astro';
 import { metadata } from "@/consts.ts";
-const http = createHttp(Astro.request.headers);
+const posts = await getCollection('posts', ({ data }) => !data.draft);
 const sortedPosts = posts.sort((a, b) =>
  b.data.pubDate.getTime() - a.data.pubDate.getTime()
 );
-const { list, total } = await http.get<ApiPageResponse<Post>>("posts", {
+// 获取所有标签
-  searchParams: {
+const allTags = [...new Set(posts.flatMap(post => post.data.tags))];
-    page: 1,
+const topTags = allTags.slice(0, 8);
    page_size: metadata.postPageSize,
  },
 });
 const totalPage = Math.ceil(total / metadata.postPageSize);
 ---
-<Layout description="天若有情天亦老，人间正道是沧桑。" title="博客首页">
+<BaseLayout>
-  <IndexView
+  <div class="layout">
-    posts={list}
+    <SiteHeader currentPath="/" />
-    page={1}
+
-    totalPage={totalPage}
+    <main class="main">
-  />
+      <div class="hero">
-</Layout>
+        <div class="hero-content">
          <h1>42的博客</h1>
          <p class="subtitle">分享技术、思考与生活</p>
          <p class="description">在这里记录开发过程中的思考，分享工程实践经验，探索技术的可能性。</p>
        </div>
        <div class="hero-stats">
          <div class="stat-item">
            <div class="stat-number">{sortedPosts.length}</div>
            <div class="stat-label">篇文章</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{allTags.length}</div>
            <div class="stat-label">个标签</div>
          </div>
          <div class="tags-preview">
            <div class="tags-title">热门标签</div>
            <div class="tags-list">
              {topTags.map(tag => (
                <a href={`/tags/${tag}`} class="tag-item">#{tag}</a>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div class="posts-section">
        <h2 class="section-title">最新文章</h2>
        <div class="posts-list">
          {sortedPosts.map(post => (
            <ArticleCard post={post} />
          ))}
        </div>
      </div>
    </main>
    <footer class="site-footer">
      <div class="container">
        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
      </div>
    </footer>
  </div>
 </BaseLayout>
 <style>
  .layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .site-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
  }
  .main {
    flex: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2rem 3rem;
    width: 100%;
  }
  .hero {
    padding: 5rem 0;
    margin-bottom: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
  .hero-content {
    text-align: left;
  }
  .hero h1 {
    font-size: 3rem;
    color: var(--text-heading);
    margin-bottom: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    position: relative;
  }
  .hero h1::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 80px;
    height: 5px;
    background: var(--accent-color);
    border-radius: 2px;
  }
  .subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    margin-top: 1.5rem;
  }
  .description {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 500px;
  }
  .hero-stats {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .stat-item {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--accent-color);
  }
  .stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent-color);
    line-height: 1;
  }
  .stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
  }
  .tags-preview {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
  }
  .tags-title {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-weight: 600;
  }
  .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .tag-item {
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: color var(--transition-fast);
  }
  .tag-item:hover {
    color: var(--accent-secondary);
  }
  .posts-section {
    margin-bottom: 3rem;
  }
  .section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 2rem;
    padding-left: 1rem;
    border-left: 4px solid var(--accent-color);
  }
  .posts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .site-footer {
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
  }
  @media (max-width: 992px) {
    .hero {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    .hero-stats {
      flex-direction: row;
      gap: 1rem;
    }
    .stat-item {
      flex: 1;
    }
    .tags-preview {
      grid-column: 1 / -1;
    }
  }
  @media (max-width: 768px) {
    .main {
      padding: 0 1rem 2rem;
    }
    .hero {
      padding: 3rem 0;
      margin-bottom: 3rem;
    }
    .hero h1 {
      font-size: 2.25rem;
    }
    .subtitle {
      font-size: 1.25rem;
    }
    .description {
      font-size: 1rem;
    }
    .hero-stats {
      flex-direction: column;
    }
    .stat-number {
      font-size: 2.5rem;
    }
  }
  @media (max-width: 480px) {
    .hero {
      padding: 2rem 0;
      margin-bottom: 2rem;
    }
    .hero h1 {
      font-size: 2rem;
    }
    .subtitle {
      font-size: 1.125rem;
    }
    .description {
      font-size: 0.9375rem;
    }
    .stat-number {
      font-size: 2rem;
    }
  }
 </style>
--- a/src/pages/page/[...page].astro
+++ b/src/pages/page/[...page].astro
@@ -1,36 +0,0 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 import type { Post } from "@/types/post";
 import { createHttp } from "@/lib/request";
 import { metadata } from "@/consts.ts";
 import IndexView from "@/components/IndexView.astro";
 const { page } = Astro.params;
 if (isNaN(Number(page))) {
  return Astro.redirect("/");
 }
 const http = createHttp(Astro.request.headers);
 const { list, total } = await http.get<ApiPageResponse<Post>>("posts", {
  searchParams: {
    page,
    page_size: metadata.postPageSize,
  },
 });
 const totalPage = Math.ceil(total / metadata.postPageSize);
 if (totalPage < Number(page)) {
  return Astro.redirect("/404");
 }
 ---
 <Layout description="天若有情天亦老，人间正道是沧桑。" title="博客首页">
  <IndexView
    posts={list}
    page={Number(page)}
    totalPage={totalPage}
  />
 </Layout>
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -1,212 +0,0 @@
 ---
 import "@/styles/github-markdown.css";
 import "@/styles/github-markdown-reset.css";
 import "photoswipe/dist/photoswipe.css";
 import Layout from "@/layouts/Layout.astro";
 import { createHttp } from "@/lib/request.ts";
 import { highlightHtmlWithJsdom } from "@/lib/highlight.js";
 import { formatDatetime } from "@/lib/format.ts";
 import type { Post } from "@/types";
 const { slug } = Astro.params;
 let data: Post;
 const http = createHttp(Astro.request.headers);
 try {
  const res = await http.get<ApiResponse<Post>>(`posts/${slug}`);
  data = res.data;
 } catch (error) {
  return Astro.redirect("/404");
 }
 const content = await highlightHtmlWithJsdom(data.content);
 const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
 ---
 <Layout title={data.title} description={data.summary}>
  <div class="page-content">
    <div class="post">
      <h1 class="post-title">{data.title}</h1>
      <div class="post-meta">
        <div class="published-at">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-calendar-days-icon lucide-calendar-days"
          >
            <path d="M8 2v4"></path>
            <path d="M16 2v4"></path>
            <rect width="18" height="18" x="3" y="4" rx="2"></rect>
            <path d="M3 10h18"></path>
            <path d="M8 14h.01"></path>
            <path d="M12 14h.01"></path>
            <path d="M16 14h.01"></path>
            <path d="M8 18h.01"></path>
            <path d="M12 18h.01"></path>
            <path d="M16 18h.01"></path>
          </svg>
          {published_at}
        </div>
        <div class="post-view">
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5122"
          >
            <path
              d="M509.618 415.795c-42.695 0-77.253 38.372-77.253 85.738 0 47.352 34.558 86.22 77.253 86.22 42.667 0 76.716-38.867 76.716-86.22 0-47.352-34.049-85.738-76.716-85.738z m1.9-177.9c-211.548 0-383.265 159.859-383.265 274.587 0 114.727 171.717 273.624 383.266 273.624 212.484 0 384.227-162.522 384.227-273.624 0-111.088-171.743-274.587-384.227-274.587z m-1.446 452.006c-89.7 0-162.134-81.71-162.134-181.903 0-101.157 72.435-182.397 162.134-182.397 90.183 0 163.1 81.241 163.1 182.397 0 100.206-72.917 181.903-163.1 181.903z"
              p-id="5123"></path>
          </svg>
          {data.view_count}
        </div>
      </div>
      <div class="markdown-body" data-color-mode="dark" set:html={content} />
    </div>
  </div>
 </Layout>
 <style>
  .post {
    background: #fff;
    border-radius: 12px;
    overflow: auto;
    padding: 24px;
    box-shadow: var(--shadow);
  }
  .post-title {
    margin-bottom: 16px;
    font-size: 32px;
  }
  .post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .published-at {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 14px;
  }
  .published-at svg {
    width: 18px;
    height: 18px;
  }
  :global(.markdown-body img) {
    object-fit: contain;
    height: auto !important;
  }
  .post-view {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #6b7280;
    padding-right: 12px;
    font-size: 14px;
  }
  .post-view svg {
    width: 20px;
    height: 20px;
    fill: currentColor; /* 让填充跟随 color */
    stroke: currentColor; /* 让描边也跟随 color */
  }
  @media (max-width: 768px) {
    .post-title {
      font-size: 20px;
    }
    .post {
      padding: 12px;
    }
  }
  :global(.dark) .post {
    background: var(--card-bg);
    box-shadow: none;
    border: none;
  }
 </style>
 <script>
  import PhotoSwipeLightbox from "photoswipe/lightbox";
  const init = async () => {
    const post = document.querySelector(".post")!;
    const images = Array.from(post.querySelectorAll("img"));
    const waitImageLoaded = (img: HTMLImageElement) => {
      if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
        return Promise.resolve();
      }
      return new Promise<void>((resolve) => {
        img.addEventListener("load", () => resolve(), { once: true });
        img.addEventListener("error", () => resolve(), { once: true });
      });
    };
    await Promise.all(
      images.map(async (img) => {
        if (img.closest("a")) return;
        await waitImageLoaded(img);
        const link = document.createElement("a");
        link.href = img.currentSrc || img.src;
        link.target = "_blank";
        link.rel = "noreferrer";
        link.dataset.pswpWidth = String(img.naturalWidth || img.width || 1200);
        link.dataset.pswpHeight = String(
          img.naturalHeight || img.height || 800,
        );
        img.parentNode?.insertBefore(link, img);
        link.appendChild(img);
      }),
    );
    const lightbox = new PhotoSwipeLightbox({
      gallery: ".post",
      children: "a[data-pswp-width]",
      pswpModule: () => import("photoswipe"),
      padding: {
        top: 48,
        right: 24,
        bottom: 48,
        left: 24,
      },
      bgOpacity: 0.5,
      tapAction: "close",
      bgClickAction: "close",
    });
    lightbox.init();
  };
  init();
 </script>
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -0,0 +1,24 @@
 ---
 import { getCollection, getEntry } from 'astro:content';
 import PostLayout from '@/layouts/PostLayout.astro';
 import { getReadingTime } from '@/utils/reading-time';
 const { slug } = Astro.params;
 if (!slug) {
  return Astro.redirect('/404');
 }
 const post = await getEntry('posts', slug);
 if (!post || post.data.draft) {
  return Astro.redirect('/404');
 }
 const { Content } = await post.render();
 const readingTime = getReadingTime(post.body);
 ---
 <PostLayout post={post} readingTime={readingTime}>
  <Content />
 </PostLayout>
--- a/src/pages/rss.xml.ts
+++ b/src/pages/rss.xml.ts
@@ -0,0 +1,25 @@
 import rss from '@astrojs/rss';
 import { getCollection } from 'astro:content';
 import { metadata } from '@/consts';
 import type { APIContext } from 'astro';
 export async function GET(context: APIContext) {
  const posts = await getCollection('posts', ({ data }) => !data.draft);
  return rss({
    title: metadata.siteTitle,
    description: metadata.siteDescription,
    site: context.site || metadata.siteUrl,
    items: posts
      .sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime())
      .map(post => ({
        title: post.data.title,
        description: post.data.description,
        pubDate: post.data.pubDate,
        link: `/posts/${post.slug}/`,
        categories: [post.data.category, ...post.data.tags],
        author: post.data.author,
      })),
    customData: `<language>zh-CN</language>`,
  });
 }
--- a/src/pages/search-index.json.ts
+++ b/src/pages/search-index.json.ts
@@ -0,0 +1,14 @@
 import type { APIRoute } from 'astro';
 import { generateSearchIndex } from '@/utils/search-index';
 export const GET: APIRoute = async () => {
  const searchIndex = await generateSearchIndex();
  return new Response(JSON.stringify(searchIndex), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'public, max-age=3600',
    },
  });
 };
--- a/src/pages/search.astro
+++ b/src/pages/search.astro
@@ -1,214 +0,0 @@
 ---
 import Layout from '@/layouts/Layout.astro'
 import type {CategoriesStats, Post, Tag} from "@/types";
 import {createHttp} from "@/lib/request.ts";
 import PostList from "@/components/Post/List.astro";
 const http = createHttp(Astro.request.headers);
 const searchParams = Astro.url.searchParams;
 const t = searchParams.get("t") ?? "";
 const c = searchParams.get("c") ?? "";
 const [{data: categories}, {data: tags}] = await Promise.all([
  http.get<ApiResponse<CategoriesStats[]>>("categories/stats"),
  http.get<ApiResponse<Tag[]>>("posts/tags"),
 ] as const)
 let f_count = 0
 const findCategory = categories.find(item => {
  if (item.code === c) {
    f_count++
  }
  return item.code === c
 })
 const findTag = tags.find(item => {
  if (item.code === t) {
    f_count++
  }
  return item.code === t
 })
 // 搜索条件必须匹配 不允许非法值
 const {data:posts} = await http.get<ApiResponse<Post[]>>("posts/search", {
  searchParams: {
    category_code: findCategory?.code ?? "",
    tag_code: findTag?.code ?? "",
  }
 })
 const count = posts.length
 const pageTitle =
  f_count === 0 ? "所有文章" : [findCategory?.name, findTag?.name]
    .filter(Boolean)
    .join(" · ")
 const pageDescription =
  f_count === 0
    ? "浏览全部文章，按分类和标签筛选你感兴趣的内容。"
    : `浏览${pageTitle}相关文章，共 ${count} 篇。`
 const buildSearchUrl = (type: 'category' | 'tag', code: string) => {
  const params = new URLSearchParams()
  if (findTag?.code) {
    params.set('t', findTag.code)
  }
  if (findCategory?.code) {
    params.set('c', findCategory.code)
  }
  if (type === 'category') {
    if (c === code) {
      params.delete('c')
    } else {
      params.set('c', code)
    }
  } else {
    if (t === code) {
      params.delete('t')
    } else {
      params.set('t', code)
    }
  }
  const query = params.toString()
  return query ? `/search?${query}` : '/search'
 }
 ---
 <Layout title={pageTitle} description={pageDescription}>
  <div class="page-content search-page">
    <header class="search-header">
      <h1 class="search-title">
        {pageTitle}
      </h1>
      <div class="search-count">共 <span>{count}</span> 篇</div>
    </header>
    <div class="filter-group">
      <div class="nav-group">
        <div class="nav-label">分类:</div>
        <div class="nav-chips">
          {categories.map(item =>
            <a href={buildSearchUrl("category", item.code)}
               class={item.code === findCategory?.code ? 'chip active' : 'chip'}>{item.name}</a>)}
        </div>
      </div>
      <div class="nav-group">
        <div class="nav-label">标签:</div>
        <div class="nav-chips">
          {tags.map(item =>
            <a href={buildSearchUrl("tag", item.code)}
               class={item.code === findTag?.code ? 'chip active' : 'chip'}>{item.name}</a>)}
        </div>
      </div>
    </div>
    {posts.length > 0 ?
      <PostList posts={posts}/> :
      <div class="no-result">没有找到相关文章</div>}
  </div>
 </Layout>
 <style>
  .search-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 auto;
    max-width: 860px;
    width: 100%;
  }
  .search-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 16px 20px;
  }
  .search-count {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
  }
  .search-count span {
    color: var(--tag-text);
  }
  .search-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
  }
  .filter-group {
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .nav-group {
    display: flex;
    gap: 12px;
    min-width: 0;
  }
  .nav-label {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
  }
  .nav-chips {
    flex: 1;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }
  .chip {
    color: var(--tag-text);
    border-radius: 999px;
    background: var(--tag-bg);
    padding: 4px 8px;
    font-size: 12px;
    user-select: none;
    transition: background 0.2s;
    cursor: pointer;
  }
  .chip.active, .chip:hover {
    background: #3b82f6;
    color: white;
  }
  :global(.dark) .chip.active,
  :global(.dark) .chip:hover {
    background: #d1d5db;
    color: black;
  }
  .no-result {
    text-align: center;
    font-size: 14px;
    margin-top: 32px;
    color: var(--text-secondary);
  }
 </style>
--- a/src/pages/sitemap-pages.xml.ts
+++ b/src/pages/sitemap-pages.xml.ts
@@ -1,33 +0,0 @@
 import type {APIRoute} from 'astro';
 import {metadata} from "@/consts";
 const site = metadata.site
 const staticUrls = [
  '',
  '/archive',
  '/search',
 ];
 export const GET: APIRoute = async () => {
  const urls = staticUrls
    .filter((url, index, array) => {
      return array.indexOf(url) === index;
    });
  const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
              ${urls.map((url) => `<url>
                <loc>${site}${url}</loc>
              </url>`
  )
    .join('\n')}
 </urlset>`;
  return new Response(xml, {
    status: 200,
    headers: {
      'Content-Type': 'application/xml; charset=utf-8',
      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
    },
  });
 };
--- a/src/pages/sitemap-posts.xml.ts
+++ b/src/pages/sitemap-posts.xml.ts
@@ -1,35 +0,0 @@
 import type {APIRoute} from 'astro';
 import {metadata} from "@/consts";
 import {createHttp} from "@/lib/request.ts";
 import type {PostForSitemap} from "@/types";
 import dayjs from "dayjs";
 const site = metadata.site
 export const GET: APIRoute = async (context) => {
  const http = createHttp(context.request.headers);
  const {data} = await http.get<ApiResponse<PostForSitemap[]>>("posts/sitemap")
  const urls = data
    .filter((url, index, array) => {
      return array.indexOf(url) === index;
    });
  const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
              ${urls.map((post) => `<url>
                <loc>${site}/post/${post.slug}</loc>
                <lastmod>${dayjs(post.updated_at || post.created_at).toISOString()}</lastmod>
              </url>`
  )
    .join('\n')}
 </urlset>`;
  return new Response(xml, {
    status: 200,
    headers: {
      'Content-Type': 'application/xml; charset=utf-8',
      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
    },
  });
 };
--- a/src/pages/sitemap.xml.ts
+++ b/src/pages/sitemap.xml.ts
@@ -1,21 +0,0 @@
 import type {APIRoute} from 'astro';
 import {metadata} from "@/consts";
 const site = metadata.site
 export const GET: APIRoute = () => {
  const xml = `<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>${site}/sitemap-pages.xml</loc>
  </sitemap>
  <sitemap>
    <loc>${site}/sitemap-posts.xml</loc>
  </sitemap>
 </sitemapindex>`;
  return new Response(xml, {
    headers: {
      'Content-Type': 'application/xml; charset=utf-8',
    },
  });
 };
--- a/src/pages/tags/[tag].astro
+++ b/src/pages/tags/[tag].astro
@@ -0,0 +1,407 @@
 ---
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import { getCollection } from 'astro:content';
 import { formatDate } from '@/utils/date';
 import { getReadingTime } from '@/utils/reading-time';
 import ThemeToggle from '@/components/ThemeToggle';
 export async function getStaticPaths() {
  const posts = await getCollection('posts', ({ data }) => !data.draft);
  const tags = new Set<string>();
  posts.forEach(post => {
    post.data.tags.forEach(tag => tags.add(tag));
  });
  return Array.from(tags).map(tag => ({
    params: { tag },
    props: {
      posts: posts.filter(post => post.data.tags.includes(tag))
        .sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime())
    },
  }));
 }
 const { tag } = Astro.params;
 const { posts } = Astro.props;
 ---
 <BaseLayout title={`标签: ${tag}`}>
  <div class="layout">
    <header class="site-header">
      <div class="container">
        <a href="/" class="logo">42的博客</a>
        <nav class="nav">
          <a href="/">首页</a>
          <a href="/tags">标签</a>
          <a href="/categories">分类</a>
          <a href="/about">关于</a>
          <ThemeToggle client:load />
        </nav>
      </div>
    </header>
    <main class="main">
      <div class="page-header">
        <h1 class="page-title">标签: #{tag}</h1>
        <p class="post-count">{posts.length} 篇文章</p>
      </div>
      <div class="posts-list">
        {posts.map(post => {
          const readingTime = getReadingTime(post.body);
          return (
            <article class="post-card">
              <a href={`/posts/${post.slug}`} class="post-link">
                <h2 class="post-title">{post.data.title}</h2>
                <p class="post-description">{post.data.description}</p>
                <div class="post-meta">
                  <time datetime={post.data.pubDate.toISOString()}>
                    {formatDate(post.data.pubDate)}
                  </time>
                  <span class="separator">·</span>
                  <span>{readingTime}</span>
                  <span class="separator">·</span>
                  <span class="category">{post.data.category}</span>
                </div>
              </a>
            </article>
          );
        })}
      </div>
    </main>
    <footer class="site-footer">
      <div class="container">
        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
      </div>
    </footer>
  </div>
 </BaseLayout>
 <style>
  .layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .site-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
  }
  @supports (backdrop-filter: blur(10px)) {
    .site-header {
      backdrop-filter: blur(10px) saturate(180%);
      -webkit-backdrop-filter: blur(10px) saturate(180%);
      background: rgba(255, 255, 255, 0.9);
    }
    [data-theme="dark"] .site-header {
      background: rgba(15, 23, 42, 0.95);
    }
  }
  .container {
    max-width: var(--layout-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform var(--transition-fast);
  }
  .logo:hover {
    transform: scale(1.05);
  }
  .nav {
    display: flex;
    gap: 2rem;
    align-items: center;
  }
  .nav a {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
    font-weight: 500;
    position: relative;
  }
  .nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
  }
  .nav a:hover {
    color: var(--text-primary);
  }
  .nav a:hover::after {
    transform: scaleX(1);
  }
  .nav :global(.theme-toggle) {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    cursor: pointer;
  }
  .nav :global(.theme-toggle:hover) {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: rotate(180deg);
    box-shadow: var(--shadow-md);
  }
  .nav :global(.theme-toggle .icon-wrapper) {
    position: relative;
    width: 20px;
    height: 20px;
  }
  .nav :global(.theme-toggle .icon) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base), transform var(--transition-base);
    opacity: 0;
    transform: rotate(-180deg) scale(0);
  }
  .nav :global(.theme-toggle .icon.active) {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
  .nav :global(.theme-toggle.is-animating) {
    animation: spin 0.6s ease-in-out;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .nav :global(.theme-toggle svg) {
    width: 100%;
    height: 100%;
    color: var(--text-primary);
  }
  .nav :global(.theme-toggle:hover svg) {
    color: white;
  }
  .main {
    flex: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
    width: 100%;
  }
  .page-header {
    margin-bottom: 3rem;
  }
  .page-title {
    font-size: 2.75rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
    font-weight: 800;
  }
  .post-count {
    color: var(--text-tertiary);
    font-size: 1.125rem;
  }
  .posts-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .post-card {
    padding: 2rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
    position: relative;
    overflow: hidden;
  }
  .post-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
  }
  .post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    background: var(--bg-primary);
  }
  .post-card:hover::before {
    transform: scaleX(1);
  }
  .post-link {
    display: block;
    color: inherit;
  }
  .post-title {
    font-size: 1.75rem;
    color: var(--text-heading);
    margin-bottom: 0.75rem;
    line-height: 1.3;
    font-weight: 700;
    transition: color var(--transition-base);
  }
  .post-card:hover .post-title {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .post-description {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
  }
  .post-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-tertiary);
    font-size: 0.875rem;
  }
  .separator {
    opacity: 0.5;
  }
  .site-footer {
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
  }
  @media (max-width: 768px) {
    .container {
      padding: 0 1rem;
    }
    .nav {
      gap: 1rem;
      font-size: 0.875rem;
    }
    .logo {
      font-size: 1.25rem;
    }
    .main {
      padding: 2rem 1rem;
    }
    .page-title {
      font-size: 2rem;
    }
    .post-count {
      font-size: 1rem;
    }
    .posts-list {
      gap: 1rem;
    }
    .post-card {
      padding: 1.5rem;
    }
    .post-title {
      font-size: 1.5rem;
    }
    .post-description {
      font-size: 0.9375rem;
    }
  }
  @media (max-width: 480px) {
    .nav a:not(:first-child) {
      font-size: 0.8125rem;
    }
    .page-title {
      font-size: 1.75rem;
    }
    .post-card {
      padding: 1.25rem;
    }
    .post-title {
      font-size: 1.375rem;
    }
  }
 </style>
--- a/src/pages/tags/index.astro
+++ b/src/pages/tags/index.astro
@@ -0,0 +1,346 @@
 ---
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import { getCollection } from 'astro:content';
 import SiteHeader from '@/components/SiteHeader.astro';
 const posts = await getCollection('posts', ({ data }) => !data.draft);
 // 统计所有标签
 const tagCount = new Map<string, number>();
 posts.forEach(post => {
  post.data.tags.forEach(tag => {
    tagCount.set(tag, (tagCount.get(tag) || 0) + 1);
  });
 });
 // 按文章数量排序
 const sortedTags = Array.from(tagCount.entries())
  .sort((a, b) => b[1] - a[1]);
 ---
 <BaseLayout title="标签">
  <div class="layout">
    <SiteHeader currentPath="/tags" />
    <main class="main">
      <h1 class="page-title">标签</h1>
      <div class="tags-cloud">
        {sortedTags.map(([tag, count]) => (
          <a href={`/tags/${tag}`} class="tag-item">
            <span class="tag-name">#{tag}</span>
            <span class="tag-count">{count}</span>
          </a>
        ))}
      </div>
    </main>
    <footer class="site-footer">
      <div class="container">
        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
      </div>
    </footer>
  </div>
 </BaseLayout>
 <style>
  .layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .site-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
  }
  @supports (backdrop-filter: blur(10px)) {
    .site-header {
      backdrop-filter: blur(10px) saturate(180%);
      -webkit-backdrop-filter: blur(10px) saturate(180%);
      background: rgba(255, 255, 255, 0.9);
    }
    [data-theme="dark"] .site-header {
      background: rgba(15, 23, 42, 0.95);
    }
  }
  .container {
    max-width: var(--layout-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform var(--transition-fast);
  }
  .logo:hover {
    transform: scale(1.05);
  }
  .nav {
    display: flex;
    gap: 2rem;
    align-items: center;
  }
  .nav a {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
    font-weight: 500;
    position: relative;
  }
  .nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
  }
  .nav a:hover {
    color: var(--text-primary);
  }
  .nav a:hover::after {
    transform: scaleX(1);
  }
  .nav :global(.theme-toggle) {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    cursor: pointer;
  }
  .nav :global(.theme-toggle:hover) {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: rotate(180deg);
    box-shadow: var(--shadow-md);
  }
  .nav :global(.theme-toggle .icon-wrapper) {
    position: relative;
    width: 20px;
    height: 20px;
  }
  .nav :global(.theme-toggle .icon) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base), transform var(--transition-base);
    opacity: 0;
    transform: rotate(-180deg) scale(0);
  }
  .nav :global(.theme-toggle .icon.active) {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
  .nav :global(.theme-toggle.is-animating) {
    animation: spin 0.6s ease-in-out;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .nav :global(.theme-toggle svg) {
    width: 100%;
    height: 100%;
    color: var(--text-primary);
  }
  .nav :global(.theme-toggle:hover svg) {
    color: white;
  }
  .main {
    flex: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
    width: 100%;
  }
  .page-title {
    font-size: 3rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 3rem;
    font-weight: 800;
  }
  .tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    animation: fadeInUp 0.6s ease-out;
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .tag-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
  }
  .tag-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--gradient-primary);
    transform: scaleY(0);
    transition: transform var(--transition-base);
  }
  .tag-item:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent-color);
  }
  .tag-item:hover::before {
    transform: scaleY(1);
  }
  .tag-name {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .tag-count {
    font-size: 0.9rem;
    opacity: 0.8;
  }
  .site-footer {
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
  }
  @media (max-width: 768px) {
    .container {
      padding: 0 1rem;
    }
    .nav {
      gap: 1rem;
      font-size: 0.875rem;
    }
    .logo {
      font-size: 1.25rem;
    }
    .main {
      padding: 2rem 1rem;
    }
    .page-title {
      font-size: 2rem;
      margin-bottom: 2rem;
    }
    .tags-cloud {
      gap: 0.75rem;
    }
    .tag-item {
      padding: 0.75rem 1.25rem;
    }
    .tag-name {
      font-size: 1rem;
    }
    .tag-count {
      font-size: 0.875rem;
    }
  }
  @media (max-width: 480px) {
    .nav a:not(:first-child) {
      font-size: 0.8125rem;
    }
    .page-title {
      font-size: 1.75rem;
    }
    .tag-item {
      padding: 0.625rem 1rem;
    }
    .tag-name {
      font-size: 0.9375rem;
    }
  }
 </style>
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -0,0 +1,171 @@
@import "modern-normalize";
@import "./reset.css";
@import "./typography.css";
@import "./enhancements.css";
 :root {
  --layout-width: 1200px;
  --content-width: 680px;
  /* 亮色模式 */
  --bg-primary: #ffffff;
  --bg-secondary: #fafaf9;
  --bg-tertiary: #f5f5f4;
  --text-primary: #18181b;
  --text-secondary: #71717a;
  --text-tertiary: #a1a1aa;
  --text-heading: #09090b;
  --link-color: #0891b2;
  --link-hover: #0e7490;
  --accent-color: #d97706;
  --accent-secondary: #0891b2;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --border-color: #e5e7eb;
  --border-light: #f3f4f6;
  /* 代码相关 */
  --code-inline-bg: #f4f5f7;
  --code-inline-color: #e91e63;
  --code-inline-border: #e5e7eb;
  --code-block-bg: #f6f8fa;
  --code-block-border: #e5e7eb;
  --code-line-number: #9ca3af;
  --code-highlight-bg: #fff9db;
  /* Markdown 元素 */
  --quote-border: #3b82f6;
  --quote-bg: #f8f9fa;
  --table-border: #e5e7eb;
  --table-header-bg: #f0f2f5;
  --table-stripe-bg: #f8f9fa;
  --link-underline: #3b82f6;
  /* 间距规范 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 2.5rem;
  --spacing-3xl: 3rem;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  /* 装饰线条颜色（替代渐变） */
  --accent-line: var(--accent-color);
  --accent-line-secondary: var(--accent-secondary);
  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  /* 过渡 */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 [data-theme="dark"] {
  /* 暗色模式 */
  --bg-primary: #09090b;
  --bg-secondary: #18181b;
  --bg-tertiary: #27272a;
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --text-heading: #fafafa;
  --link-color: #06b6d4;
  --link-hover: #22d3ee;
  --accent-color: #fbbf24;
  --accent-secondary: #06b6d4;
  --success-color: #34d399;
  --warning-color: #fbbf24;
  --border-color: #27272a;
  --border-light: #18181b;
  /* 代码相关 */
  --code-inline-bg: #1e293b;
  --code-inline-color: #f472b6;
  --code-inline-border: #334155;
  --code-block-bg: #1e293b;
  --code-block-border: #334155;
  --code-line-number: #64748b;
  --code-highlight-bg: #374151;
  /* Markdown 元素 */
  --quote-border: #60a5fa;
  --quote-bg: #1e293b;
  --table-border: #334155;
  --table-header-bg: #1e293b;
  --table-stripe-bg: #0f172a;
  --link-underline: #60a5fa;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
  /* 暗色模式装饰线条 */
  --accent-line: var(--accent-color);
  --accent-line-secondary: var(--accent-secondary);
 }
 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
 }
 html {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
 }
 body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color var(--transition-base), color var(--transition-base);
  min-height: 100vh;
  position: relative;
 }
 a {
  color: inherit;
  text-decoration: none;
 }
 img,
 picture,
 video,
 canvas,
 svg {
  display: block;
  max-width: 100%;
 }
 input,
 button,
 textarea,
 select {
  font: inherit;
 }
 button {
  cursor: pointer;
  border: none;
  background: none;
 }
--- a/src/styles/css-reset.css
+++ b/src/styles/css-reset.css
@@ -1,10 +0,0 @@
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
 a {
    color: inherit;
    text-decoration: none;
 }
--- a/src/styles/enhancements.css
+++ b/src/styles/enhancements.css
@@ -0,0 +1,295 @@
 /* UI/UX 增强样式 */
 /* 选中文本样式 */
 ::selection {
  background: var(--accent-color);
  color: white;
 }
 ::-moz-selection {
  background: var(--accent-color);
  color: white;
 }
 /* 滚动条样式 */
 ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
 }
 ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
 }
 ::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: var(--radius-sm);
  transition: background var(--transition-base);
 }
 ::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
 }
 /* Focus 样式增强 */
 *:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
 }
 button:focus-visible,
 a:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
 }
 /* 按钮基础样式增强 */
 button {
  -webkit-tap-highlight-color: transparent;
 }
 /* 平滑过渡类 */
 .fade-in {
  animation: fadeIn 0.3s ease-out;
 }
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
 }
 /* 链接悬停效果 */
 a {
  position: relative;
 }
 /* 响应式图片 */
 img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
 }
 /* 代码块增强 */
 pre {
  position: relative;
 }
 /* Shiki 代码块样式适配 */
 .astro-code,
 .shiki {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  line-height: 1.6;
  font-size: 0.875rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--code-block-border);
 }
 /* 代码块滚动条样式 */
 pre::-webkit-scrollbar,
 .astro-code::-webkit-scrollbar,
 .shiki::-webkit-scrollbar {
  height: 8px;
 }
 pre::-webkit-scrollbar-track,
 .astro-code::-webkit-scrollbar-track,
 .shiki::-webkit-scrollbar-track {
  background: transparent;
 }
 pre::-webkit-scrollbar-thumb,
 .astro-code::-webkit-scrollbar-thumb,
 .shiki::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: var(--radius-sm);
 }
 pre::-webkit-scrollbar-thumb:hover,
 .astro-code::-webkit-scrollbar-thumb:hover,
 .shiki::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
 }
 /* 移动端代码块优化 */
@media (max-width: 768px) {
  .astro-code,
  .shiki,
  article pre {
    padding: 1rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-md);
  }
 }
 /* 加载动画 */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
 }
 .skeleton {
  animation: shimmer 2s infinite;
  background: linear-gradient(
    to right,
    var(--bg-secondary) 0%,
    var(--bg-tertiary) 50%,
    var(--bg-secondary) 100%
  );
  background-size: 1000px 100%;
 }
 /* 工具提示基础样式 */
 [data-tooltip] {
  position: relative;
  cursor: help;
 }
 [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 0.5rem 0.75rem;
  background: var(--text-heading);
  color: white;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 1000;
 }
 [data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
 }
 /* 徽章样式 */
 .badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--accent-color);
  color: white;
 }
 /* 分隔线增强 */
 hr {
  margin: 2rem 0;
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--border-color),
    transparent
  );
 }
 /* 引用块增强样式 */
 blockquote {
  position: relative;
  isolation: isolate;
 }
 /* 响应式视频容器 */
 .video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
 }
 .video-container iframe,
 .video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
 }
 /* 打印样式优化 */
@media print {
  body {
    background: white;
    color: black;
  }
  .site-header,
  .site-footer,
  .theme-toggle,
  nav {
    display: none;
  }
  article {
    max-width: 100%;
  }
  a {
    color: black;
    text-decoration: underline;
  }
  pre,
  code {
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
 }
 /* 减少动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
 }
 /* 暗色模式特定增强 */
 [data-theme="dark"] img {
  opacity: 0.9;
 }
 [data-theme="dark"] img:hover {
  opacity: 1;
 }
 /* 高对比度模式支持 */
@media (prefers-contrast: high) {
  :root {
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  }
  button,
  a {
    outline: 2px solid currentColor;
  }
 }
--- a/src/styles/github-markdown-reset.css
+++ b/src/styles/github-markdown-reset.css
@@ -1,18 +0,0 @@
 .markdown-body pre code{
    font-size: 1.1em;
 }
 .markdown-body h1,
 .markdown-body h2,
 .markdown-body h3,
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
    border-bottom: none ;
 }
@media (max-width: 768px) {
  .markdown-body pre code{
    font-size: inherit;
  }
 }
--- a/src/styles/github-markdown.css
+++ b/src/styles/github-markdown.css
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,64 +0,0 @@
@import "modern-normalize";
@import "css-reset.css";
 :root {
  --layout-width: 1080px;
  --background: #f6f7f9;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.10);
  --card-bg: #ffffff;
  --text-color: #2b2f36;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
  --primary: #4f6df5;
  --tag-bg: #eef1fe;
  --tag-text: #4f6df5;
  --tag-hover-bg: #dfe6fd;
 }
 .dark {
  --background: #0a0a0a;
  --card-bg: #161b22;
  --text-color: #ffffff;
  --text-secondary: #e5e7eb;
  --border: #e5e7eb;
  --primary: #1e293b;
  --tag-bg: #27272a;
  --tag-text: #f3f4f6;
  --tag-hover-bg: #334155;
 }
 html,
 body {
  min-height: 100vh;
  font-size: 16px;
  background: var(--background);
  color: var(--text-color);
 }
 body {
  display: flex;
  flex-direction: column;
 }
 .main {
  flex: 1;
  display: flex;
  flex-direction: column;
 }
 .page-content {
  width: 100%;
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
 }
@media (max-width: 768px) {
  .page-content {
    padding: 16px;
  }
 }
--- a/src/styles/reset.css
+++ b/src/styles/reset.css
@@ -0,0 +1,11 @@
 /* css reset */
 a {
  text-decoration: none;
  color: inherit;
 }
 ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
 }
--- a/src/styles/toc.css
+++ b/src/styles/toc.css
@@ -0,0 +1,263 @@
 /* 文章目录（TOC）样式 */
 /* 桌面端：侧边固定目录 */
 .toc-desktop {
  position: fixed;
  left: max(1rem, calc((100vw - var(--layout-width)) / 2 - 240px));
  top: 120px;
  width: 200px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  display: none;
 }
@media (min-width: 1400px) {
  .toc-desktop {
    display: block;
  }
 }
 .toc-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
 }
 .toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
 }
 .toc-item {
  margin-bottom: 0.5rem;
  position: relative;
 }
 .toc-item.level-3 {
  padding-left: 1rem;
 }
 .toc-item a {
  display: block;
  padding: 0.25rem 0;
  padding-left: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all var(--transition-fast);
  line-height: 1.5;
 }
 .toc-item a:hover {
  color: var(--text-primary);
  border-left-color: var(--text-tertiary);
 }
 .toc-item.active a {
  color: var(--accent-color);
  font-weight: 600;
  border-left-color: var(--accent-color);
  border-left-width: 3px;
 }
 /* 移动端：浮动按钮 + 抽屉 */
 .toc-mobile {
  display: block;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
 }
@media (min-width: 1400px) {
  .toc-mobile {
    display: none;
  }
 }
 .toc-toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-color);
  color: white;
  border: none;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
 }
 .toc-toggle:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
 }
 .toc-toggle:active {
  transform: scale(0.95);
 }
 .toc-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  animation: fadeIn 0.2s ease-out;
 }
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
 }
 .toc-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 60vh;
  background: var(--bg-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-xl);
  z-index: 201;
  animation: slideUp 0.3s ease-out;
  overflow: hidden;
  display: flex;
  flex-direction: column;
 }
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
 }
 .toc-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
 }
 .toc-drawer-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-heading);
 }
 .toc-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
 }
 .toc-drawer-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
 }
 .toc-drawer-list {
  list-style: none;
  padding: 1rem;
  margin: 0;
  overflow-y: auto;
  flex: 1;
 }
 .toc-drawer-item {
  margin-bottom: 0.5rem;
 }
 .toc-drawer-item.level-3 {
  padding-left: 1rem;
 }
 .toc-drawer-item a {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
 }
 .toc-drawer-item a:active {
  transform: scale(0.98);
 }
 .toc-drawer-item:hover a {
  background: var(--bg-secondary);
  color: var(--text-primary);
 }
 .toc-drawer-item.active a {
  background: var(--bg-secondary);
  color: var(--accent-color);
  font-weight: 600;
  border-left-color: var(--accent-color);
 }
 /* 返回顶部按钮 */
 .back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-secondary);
  color: white;
  border: none;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  z-index: 50;
  animation: fadeIn 0.3s ease-out;
 }
 .back-to-top:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
 }
 .back-to-top:active {
  transform: scale(0.95);
 }
 /* 当有TOC按钮时，调整返回顶部按钮位置 */
@media (max-width: 1399px) {
  .back-to-top {
    bottom: 5.5rem;
  }
 }
--- a/src/styles/typography.css
+++ b/src/styles/typography.css
@@ -0,0 +1,267 @@
 /* 排版样式 */
 article {
  line-height: 1.75;
  color: var(--text-primary);
  font-size: 1.125rem; /* 18px */
 }
 article h1,
 article h2,
 article h3,
 article h4,
 article h5,
 article h6 {
  margin-top: 3em;
  margin-bottom: 1em;
  line-height: 1.4;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.02em;
  scroll-margin-top: 5rem;
  position: relative;
 }
 article h1:first-child,
 article h2:first-child,
 article h3:first-child,
 article h4:first-child {
  margin-top: 0;
 }
 article h1 {
  font-size: 2.5rem;
  color: var(--text-heading);
  position: relative;
  padding-bottom: 0.5rem;
 }
 article h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--accent-color);
  border-radius: 2px;
 }
 article h2 { 
  font-size: 1.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-color);
 }
 article h3 { 
  font-size: 1.5rem;
  font-weight: 600;
 }
 article h4 { 
  font-size: 1.375rem;
 }
 article h5 {
  font-size: 1.125rem;
 }
 article h6 {
  font-size: 1rem;
  color: var(--text-secondary);
 }
 article p {
  margin-bottom: 1.75em;
 }
 article a {
  color: var(--link-color);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  background-image: linear-gradient(var(--link-color), var(--link-color));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size var(--transition-base), color var(--transition-base);
  font-weight: 500;
 }
 article a:hover {
  color: var(--link-hover);
  background-size: 100% 2px;
 }
 article ul,
 article ol {
  margin-bottom: 1.5em;
  padding-left: 2em;
 }
 article ul {
  list-style-type: disc;
 }
 article ol {
  list-style-type: decimal;
 }
 article li {
  margin-bottom: 0.5em;
  line-height: 1.8;
 }
 article li > ul,
 article li > ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
 }
 article ul ul {
  list-style-type: circle;
 }
 article ul ul ul {
  list-style-type: square;
 }
 article code {
  padding: 0.25rem 0.5rem;
  background: var(--code-inline-bg);
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  color: var(--code-inline-color);
  font-weight: 500;
  border: 1px solid var(--code-inline-border);
 }
 article pre {
  margin-bottom: 1.5em;
  padding: 1.5em;
  background: var(--code-block-bg);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--code-block-border);
  position: relative;
  line-height: 1.6;
 }
 article pre::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent-color);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
 }
 article pre code {
  padding: 0;
  background: none;
  font-size: 0.875rem;
  border: none;
  color: inherit;
  font-weight: 400;
  display: block;
 }
 article blockquote {
  margin: 2em 0;
  padding: 1.5em 1.5em 1.5em 2em;
  border-left: 6px solid var(--accent-color);
  background: var(--quote-bg);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-style: italic;
  position: relative;
  box-shadow: var(--shadow-sm);
 }
 article blockquote p {
  margin-bottom: 0.5em;
 }
 article blockquote p:last-child {
  margin-bottom: 0;
 }
 article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: 2em 0;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
 }
 article img:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow-xl);
 }
 article hr {
  margin: 3em 0;
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-color), transparent);
 }
 /* 表格样式 */
 article table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--table-border);
 }
 article thead {
  background: var(--table-header-bg);
 }
 article th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-heading);
  border-bottom: 2px solid var(--table-border);
  font-size: 0.9375rem;
 }
 article td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--table-border);
  color: var(--text-primary);
 }
 article tr:last-child td {
  border-bottom: none;
 }
 article tbody tr {
  transition: background var(--transition-fast);
 }
 article tbody tr:nth-child(even) {
  background: var(--table-stripe-bg);
 }
 article tbody tr:hover {
  background: var(--bg-secondary);
 }
 /* 移动端表格滚动 */
@media (max-width: 768px) {
  article table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
 }
--- a/src/types/archive.ts
+++ b/src/types/archive.ts
@@ -1,21 +0,0 @@
 type ArchiveYear = {
  year: number;
  total: number;
  list: ArchiveMonth[];
 };
 type ArchivePost = {
  id: number;
  slug: string;
  title: string;
  published_at: string;
  published_at_display: string;
  category_name: string;
 };
 type ArchiveMonth = {
  month: number;
  list: ArchivePost[];
 };
 export type Archive = ArchiveYear[];
--- a/src/types/client.ts
+++ b/src/types/client.ts
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -1,29 +0,0 @@
 /** 基础 API 响应结构 */
 declare interface ApiResponse<T = unknown> {
  msg?: string
  data: T
 }
 /** 分页响应结构 */
 declare interface ApiPageResponse<T = unknown> {
  msg?: string
  /** 当前页码 */
  page: number
  /** 每页数量 */
  pageSize: number
  /** 业务数据列表 */
  list: T[]
  /** 总记录数 */
  total: number
 }
 /** 错误响应结构 - 当请求失败时的响应格式 */
 declare interface ApiErrorResponse {
  msg: string
 }
 /** 通用请求参数类型 */
 declare interface Pagination {
  page?: number
  pageSize?: number
 }
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1 +0,0 @@
 export * from './post.ts'
--- a/src/types/post.ts
+++ b/src/types/post.ts
@@ -1,32 +1,19 @@
-export type Tag = {
+import type { CollectionEntry } from 'astro:content';
  id: number
  code: string
  name: string
 }
-export type Post = {
+export type Post = CollectionEntry<'posts'>;
 export interface PostMetadata {
  title: string;
-  summary: string;
+  description: string;
-  slug: string;
+  pubDate: Date;
-  cover: string;
+  updatedDate?: Date;
-  category_name: string;
+  author: string;
-  category_code: string;
+  image?: string;
-  category_id?: number;
+  tags: string[];
-  published_at: string;
+  category: string;
-  view_count: number;
+  draft: boolean;
  content: string;
  tags: Tag[]
 }
-export type CategoriesStats = {
+export interface PostWithReadingTime extends Post {
-  id: number;
+  readingTime: string;
  name: string;
  code: string
  post_count: number;
 }
 export type PostForSitemap = {
  slug: string
  created_at: string
  updated_at: 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}`,
  }));
 }
		`@@ -1 +0,0 @@`
			`VITE_API_BASE_URL=http://127.0.0.1:8080/api/`
		`@@ -1 +0,0 @@`
			`VITE_API_BASE_URL=https://admin.ua42.com/api/`
		`@@ -1 +0,0 @@`
			<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1784628432297" class="icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9153" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.1484375" height="200"><path d="M513.407379 0C230.713951 0 1.407379 229.306573 1.407379 512c0 282.693427 229.306573 512 512 512 282.693427 0 512-229.293792 512-512C1025.407379 229.306573 796.100806 0 513.407379 0z m26.17579 817.737837c-6.812352 6.799571-16.756085 10.991787-26.17579 10.991787-9.943733 0-19.37622-4.192216-26.175791-10.991787-6.799571-6.812352-10.991787-16.756085-10.991787-26.699818 0-9.943733 4.192216-19.900247 10.991787-26.699818s16.756085-10.991787 26.175791-10.991787c9.943733 0 19.363439 4.192216 26.17579 10.991787s10.991787 16.756085 10.991787 26.699818c0 9.943733-4.192216 19.887466-10.991787 26.699818z m-26.17579-87.435832c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605z m258.089717-237.678225c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.646726 206.798972c15.184004-15.184004 40.31174-15.184004 55.495743 0l230.354627 230.341845c15.184004 15.171222 15.184004 39.774932 0 55.482963z m0 0" p-id="9154"></path><path d="M771.497096 492.636561c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.659507 206.798972c15.184004-15.184004 40.31174-15.184004 55.495744 0l230.354626 230.341845c15.171222 15.184004 15.171222 39.787713-0.012781 55.495744zM513.407379 730.302005c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605M513.407379 828.729624c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.743304 37.167577 37.691605 0 20.93552-16.756085 37.691605-37.167577 37.691605" fill="#FFFFFF" p-id="9155"></path></svg>