style: 博客标题在列表中超长的问题

style: 微调color
style: 调整滚动条样式
2026-08-19 00:20:52 +08:00 · 2026-08-17 22:32:07 +08:00 · 2026-08-16 15:57:32 +08:00 · 2026-08-16 15:55:07 +08:00 · 2026-08-16 15:49:40 +08:00 · 2026-08-16 15:41:52 +08:00
79 changed files with 4782 additions and 8986 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,10 @@
 node_modules/
 .git/
 .idea/
 dist/
 .astro/
 .vscode/
 .claude/
 *.tar.gz
 *.log
 .DS_Store
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,9 @@
 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
@@ -0,0 +1 @@
 VITE_API_BASE_URL=http://127.0.0.1:8080/api/
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1 @@
 VITE_API_BASE_URL=https://admin.ua42.com/api/
--- a/.gitignore
+++ b/.gitignore
@@ -13,10 +13,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 # environment variables
 .env
 .env.production
 # macOS-specific files
 .DS_Store
@@ -25,3 +21,5 @@ 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
@@ -1,510 +0,0 @@
 # 博客样式优化设计
 ## 目标
 优化博客的整体视觉呈现，确保风格统一、样式美观，并增强 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
@@ -0,0 +1,34 @@
 # Project Scope Rules
 ## 文件范围限制
 本项目根目录：
 ./
 所有操作必须限制在当前项目目录内。
 禁止：
 - 访问项目外文件
 - 修改父级目录文件
 - 创建项目外文件
 - 修改用户目录中的其他内容
 - 禁止访问服务端仓库
 ## 修改规则
 修改前必须：
 1. 列出将修改的文件
 2. 说明修改原因
 3. 等待确认
 禁止修改：
 node_modules/
 .git/
 build/
 .env
 ## 开发环境
 默认认为已经启动服务，端口为4321
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,31 +1,22 @@
 // @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',
-  integrations: [
+  server: {
-    solidJs(),
+    host: "0.0.0.0",
-    sitemap()
+  },
  ],
  adapter: node({
    mode: 'standalone'
  }),
-  markdown: {
+  vite: {
-    syntaxHighlight: 'shiki',
+    server: {
-    shikiConfig: {
+      ...(process.argv.includes('dev')
-      themes: {
+        ? {watch: {usePolling: true}}
-        light: 'github-light',
+        : {}),
-        dark: 'one-dark-pro'
+    }
      },
      wrap: true,
      transformers: []
    },
    remarkPlugins: [],
    rehypePlugins: []
  }
 });
--- a/package.json
+++ b/package.json
@@ -10,16 +10,20 @@
    "deploy": "./scripts/deploy.sh"
  },
  "dependencies": {
-    "@astrojs/node": "^9.5.1",
+    "@astrojs/node": "11.0.2",
-    "@astrojs/rss": "^4.0.14",
+    "astro": "^7.0.6",
-    "@astrojs/sitemap": "^3.6.0",
+    "clipboard": "^2.0.11",
-    "@astrojs/solid-js": "^5.1.3",
+    "dayjs": "^1.11.21",
-    "astro": "^5.15.8",
+    "jsdom": "^29.1.1",
-    "fuse.js": "^7.1.0",
+    "ky": "^2.0.2",
    "modern-normalize": "^3.0.1",
-    "solid-js": "^1.9.10"
+    "photoswipe": "^5.4.4",
    "shiki": "^4.3.1"
  },
  "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
@@ -0,0 +1,3 @@
 allowBuilds:
  esbuild: true
  sharp: true
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,46 +0,0 @@
 <?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
@@ -0,0 +1,4 @@
 User-agent: *
 Allow: /
 Sitemap: https://ua42.com/sitemap.xml
--- a/scripts/Dockerfile
+++ b/scripts/Dockerfile
@@ -1,12 +1,13 @@
 FROM alpine:3.22 AS base
 WORKDIR /app
-RUN apk add --no-cache --update nodejs pnpm
+RUN apk add --no-cache --update nodejs
 FROM base AS install
 RUN apk add --no-cache pnpm
 ENV NODE_ENV=production
 COPY package.json pnpm-lock.yaml ./
-RUN pnpm install
+RUN pnpm install --frozen-lockfile
 FROM install AS build
 COPY . .
--- a/scripts/deploy.sh
+++ b/scripts/deploy.sh
@@ -5,7 +5,7 @@ PROJECT_ROOT=$(cd -- "$(dirname "${BASH_SOURCE[0]}")/.." &> /dev/null && pwd)
 DOCKERFILE_PATH=./scripts/Dockerfile
 IMAGE_NAME=blog
 IMAGE_FILE_NAME=$IMAGE_NAME.tar.gz
-REMOTE_SERVER=02
+REMOTE_SERVER=01
 REMOTE_PATH=/srv/docker/nginx/www
 DOCKER_NETWORK=docker_app-bridge
--- a/src/components/ArticleCard.astro
+++ b/src/components/ArticleCard.astro
@@ -1,181 +0,0 @@
 ---
 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
@@ -1,44 +0,0 @@
 import { createSignal, onMount, onCleanup, Show } from 'solid-js';
 export default function BackToTop() {
  const [isVisible, setIsVisible] = createSignal(false);
  onMount(() => {
    const handleScroll = () => {
      setIsVisible(window.scrollY > 800);
    };
    window.addEventListener('scroll', handleScroll);
    onCleanup(() => window.removeEventListener('scroll', handleScroll));
  });
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };
  return (
    <Show when={isVisible()}>
      <button
        class="back-to-top"
        onClick={scrollToTop}
        aria-label="返回顶部"
      >
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M18 15l-6-6-6 6"></path>
        </svg>
      </button>
    </Show>
  );
 }
--- a/src/components/BaseFooter.astro
+++ b/src/components/BaseFooter.astro
@@ -1,28 +0,0 @@
 <style>
  footer {
    background-color: #1a1a1a;
    height: 70px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .content {
    color: aliceblue;
    max-width: var(--layout-width);
    margin: 0 auto;
    color: #f9f8f6;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 14px;
    justify-content: center;
  }
 </style>
 <footer>
  <div class="content">
    <a href="https://beian.miit.gov.cn/#/Integrated/index">
      备案号：鄂ICP备2023000060号-2
    </a>
  </div>
 </footer>
--- a/src/components/BaseHeader.astro
+++ b/src/components/BaseHeader.astro
@@ -1,43 +0,0 @@
 <style>
  header {
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 99999;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
    flex-shrink: 0;
    background: #fff;
  }
  .main-nav {
    max-width: var(--layout-width);
    margin: 0 auto;
    height: 100%;
    padding: 0 16px;
  }
  .main-nav .menu {
    list-style: none;
    display: flex;
    gap: 20px;
    height: 100%;
    align-items: center;
  }
  /* element: menu-item */
  .main-nav .menu-item a {
    text-decoration: none;
    font-weight: bold;
  }
  .main-nav .menu-item a:hover {
  }
 </style>
 <header>
  <nav class="main-nav">
    <ul class="menu">
      <li class="menu-item"><a href="/">首页</a></li>
    </ul>
  </nav>
 </header>
--- a/src/components/IndexPage.astro
+++ b/src/components/IndexPage.astro
@@ -0,0 +1,40 @@
 ---
 import PostList from "@/components/Post/List.astro";
 import Pagination from "@/components/Post/Pagination.astro";
 import type {Post} from "@/types";
 interface Props {
  posts: Post[]
  page: number
  totalPage: number
 }
 const {posts, page, totalPage} = Astro.props
 ---
 <main>
  <div class="intro">
    <p>did you stand too close to the fire?<br>
      like a liar looking for forgiveness from a stone.</p>
  </div>
  <PostList posts={posts}/>
  <Pagination page={page} totalPage={totalPage}/>
 </main>
 <style>
  .intro {
    border-bottom: var(--border-secondary);
    line-height: 2;
    font-size: 15px;
    color: var(--text-secondary);
    padding-bottom: 32px;
    margin-bottom: 12px;
  }
  @media (max-width: 640px) {
    .intro{
      padding-bottom: 24px;
    }
  }
 </style>
--- a/src/components/LazyImage.astro
+++ b/src/components/LazyImage.astro
@@ -0,0 +1,130 @@
 ---
 interface Props {
  src: string;
  alt?: string;
  width?: number;
  height?: number;
  class?: string;
 }
 const {
  src,
  alt = "",
  width,
  height,
  class: className = ""
 } = Astro.props;
 ---
 <div
  class={`lazy-image ${className}`}
  data-src={src}
  style={`aspect-ratio:${width}/${height}`}
 >
  <div class="placeholder"></div>
  <img
    class="real-image"
    alt={alt}
    width={width}
    height={height}
    loading="lazy"
    decoding="async"
  />
 </div>
 <style>
 .lazy-image {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
 }
 .lazy-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
 .placeholder {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    #f3f4f6 0%,
    #e5e7eb 50%,
    #f3f4f6 100%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
 }
@keyframes loading {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
 }
 .real-image {
  opacity: 0;
  transition: opacity .35s ease;
 }
 .real-image.loaded {
  opacity: 1;
 }
 </style>
 <script>
 function initLazyImages() {
  const images = document.querySelectorAll(".lazy-image");
  const observer = new IntersectionObserver(
    entries => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        const container = entry.target as HTMLElement;
        const img = container.querySelector(
          ".real-image"
        ) as HTMLImageElement;
        const src = container.dataset.src;
        if (!src) return;
        img.src = src;
        img.onload = () => {
          img.classList.add("loaded");
          const placeholder =
            container.querySelector(".placeholder");
          placeholder?.remove();
        };
        observer.unobserve(container);
      });
    },
    {
      rootMargin: "300px"
    }
  );
  images.forEach(img => observer.observe(img));
 }
 initLazyImages();
 </script>
--- a/src/components/Link.astro
+++ b/src/components/Link.astro
@@ -1,12 +0,0 @@
 ---
 interface Props {
  href: string;
  class?: string;
 }
 const { href, class: className } = Astro.props;
 ---
 <a href={href} class={className}>
  <slot />
 </a>
--- a/src/components/Post/List.astro
+++ b/src/components/Post/List.astro
@@ -0,0 +1,83 @@
 ---
 import type {Post} from "@/types";
 import {formatDatetime} from '@/lib/format.ts'
 interface Props {
  posts: Post[]
 }
 const {posts} = Astro.props
 ---
 <div class="posts">
  {posts.map(item => (
    <div class="post">
      <span class="d">{formatDatetime(item.published_at, 'YY.MM.DD')}</span>
      <h2><a href=`/post/${item.slug}`>{item.title}</a></h2>
      <span class="arrow">→</span>
    </div>
  ))}
 </div>
 <style>
  .posts {
  }
  .post {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 26px 0;
    border-bottom: var(--border-secondary);
  }
  .post .d {
    font-size: 14px;
    color: var(--text-meta);
    min-width: 80px;
    letter-spacing: 1px;
  }
  .post h2 {
    font-size: 16px;
    font-weight: normal;
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .post h2 a {
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .post h2 a:hover {
    color: var(--text-title-hover);
    text-decoration: underline;
    text-underline-offset: 6px;
  }
  .post .arrow {
    color: #d0d0d0;
    font-size: 14px;
    transition: transform 0.2s, color 0.2s;
  }
  .post:hover .arrow {
    color: #334155;
  }
  @media (max-width: 640px) {
    .post .d {
      min-width: 64px;
    }
    .post h2 {
      font-size: 15px;
    }
  }
 </style>
--- a/src/components/Post/Pagination.astro
+++ b/src/components/Post/Pagination.astro
@@ -0,0 +1,49 @@
 ---
 interface Props {
  page: number
  totalPage: number
 }
 const {page, totalPage} = Astro.props
 ---
 <!--分页器-->
 {totalPage > 1 &&
 <nav class="pagination" aria-label="分页">
  {Array.from({length: totalPage}).map((_, index) => {
    if (page === index + 1) {
      return <span class="link current">{index + 1}</span>
    }
    return <a class="link" href={`/page/${index + 1}`}>{index + 1}</a>
  })}
  {page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页</a> :
    <span class="link disabled">下一页</span>}
 </nav>}
 <style>
  /* ========== 分页 ========== */
  .pagination {
    width: 100%;
    text-align: right;
    white-space: nowrap;
    margin-top: 32px;
    font-size: 13px;
  }
  .link {
    display: inline-block;
    margin: 0 12px;
    line-height: 1;
    color: var(--text-secondary);
  }
  .current{
    color: var(--text-primary);
    font-weight: bold;
  }
  .link.disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
  }
 </style>
--- a/src/components/SearchButton.tsx
+++ b/src/components/SearchButton.tsx
@@ -1,157 +0,0 @@
 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
@@ -1,32 +0,0 @@
 ---
 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
@@ -1,381 +0,0 @@
 ---
 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
@@ -1,146 +0,0 @@
 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
@@ -0,0 +1,76 @@
 ---
 ---
 <div class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
  <svg aria-hidden="true" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path class="sun" fill-rule="evenodd"
          d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
    <path class="moon" fill-rule="evenodd"
          d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
  </svg>
 </div>
 <style>
  #themeToggle {
    border: 0;
    background: none;
    user-select: none;
  }
  .theme-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .sun {
    fill: black;
  }
  .moon {
    fill: transparent;
  }
  :global(.dark) .sun {
    fill: transparent;
  }
  :global(.dark) .moon {
    fill: white;
  }
 </style>
 <script is:inline>
  const meta = document.querySelector('meta[name="theme-color"]');
  const theme = (() => {
    const localStorageTheme = localStorage?.getItem("theme") ?? '';
    if (['dark', 'light'].includes(localStorageTheme)) {
      return localStorageTheme;
    }
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
    return 'light';
  })();
  if (theme === 'light') {
    document.documentElement.classList.remove('dark');
    meta.setAttribute('content', '#ffffff');
  } else {
    document.documentElement.classList.add('dark');
    meta.setAttribute('content', '#0a0a0a');
  }
  window.localStorage.setItem('theme', theme);
  const handleToggleClick = () => {
    const element = document.documentElement;
    element.classList.toggle("dark");
    const isDark = element.classList.contains("dark");
    meta.setAttribute('content', isDark ? '#0a0a0a' : '#ffffff');
    localStorage.setItem("theme", isDark ? "dark" : "light");
  }
  document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
 </script>
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -1,52 +0,0 @@
 import { createSignal, onMount } from 'solid-js';
 export default function ThemeToggle() {
  const [theme, setTheme] = createSignal<'light' | 'dark'>('light');
  const [isAnimating, setIsAnimating] = createSignal(false);
  onMount(() => {
    const currentTheme = document.documentElement.getAttribute('data-theme') as 'light' | 'dark';
    setTheme(currentTheme || 'light');
  });
  const toggleTheme = () => {
    setIsAnimating(true);
    setTimeout(() => setIsAnimating(false), 600);
    const newTheme = theme() === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
  };
  return (
    <button
      onClick={toggleTheme}
      class="theme-toggle"
      classList={{ 'is-animating': isAnimating() }}
      aria-label="切换主题"
      title={theme() === 'light' ? '切换到暗色模式' : '切换到亮色模式'}
    >
      <span class="icon-wrapper">
        <span class="icon sun" classList={{ 'active': theme() === 'light' }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="5"/>
            <line x1="12" y1="1" x2="12" y2="3"/>
            <line x1="12" y1="21" x2="12" y2="23"/>
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
            <line x1="1" y1="12" x2="3" y2="12"/>
            <line x1="21" y1="12" x2="23" y2="12"/>
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
          </svg>
        </span>
        <span class="icon moon" classList={{ 'active': theme() === 'dark' }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
          </svg>
        </span>
      </span>
    </button>
  );
 }
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -1,7 +1,7 @@
-export const metadata = {
+export const siteConfig = {
-  siteTitle: "42的博客",
+  site: "https://ua42.com",
-  siteDescription: "分享技术、思考与生活",
+  siteTitle: "Uroboros",
-  siteUrl: "https://ua42.com",
+  postPageSize: 7,
-  author: "42",
+  description: "一个人的自留地 ，不欢迎我，也不欢迎你。",
-  postsPerPage: 10,
+  git: "https://git.ua42.com"
 }
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -1,18 +0,0 @@
 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
@@ -1,264 +0,0 @@
 ---
 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
@@ -1,30 +0,0 @@
 ---
 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
@@ -1,56 +0,0 @@
 ---
 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,80 +1,69 @@
 ---
-import "@/styles/base.css";
+import "@/styles/global.css";
 import {siteConfig} from "@/consts.ts";
 import PageHeader from "./PageHeader.astro";
 import PageFooter from "./PageFooter.astro";
-import BaseHeader from "@/components/BaseHeader.astro";
+const {siteTitle} = siteConfig;
 import BaseFooter from "@/components/BaseFooter.astro";
-import { metadata } from "@/consts.ts";
+interface Props {
-const { siteTitle } = metadata;
+  title?: string;
  description?: string;
 }
 const {title, description} = Astro.props;
 const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
 ---
 <!doctype html>
-<html lang="en">
+<html lang="zh-CN">
-  <head>
+<head>
-    <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
-    <meta
+  <meta
-      name="viewport"
+    name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
-    />
+  />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
-    <meta name="generator" content={Astro.generator} />
+  <meta name="generator" content={Astro.generator}/>
-    <title>{siteTitle}</title>
+  <meta name="description" content={description}/>
-  </head>
+  <meta name="theme-color" content="#ffffff"/>
-  <body>
+  <title>{pageTitle}</title>
-    <BaseHeader />
+</head>
-    <main>
+<body>
-      <div class="grid-background"></div>
+<div class="container">
-      <slot />
+  <PageHeader/>
-    </main>
+  <main>
-    <BaseFooter />
+    <slot></slot>
-  </body>
+  </main>
  <PageFooter />
 </div>
 </body>
 </html>
 <style>
  html,
  body {
-    width: 100%;
+    background: var(--background);
    height: 100%;
  }
-  body {
+  .container {
    width: 100%;
    max-width: var(--layout-width);
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
  }
  main {
    flex: 1;
-    max-width: var(--layout-width);
+    padding: 24px 0;
    width: 100%;
    margin: 0 auto;
    padding: 16px;
    position: relative;
  }
-  .grid-background {
+  @media (max-width: 640px) {
-    position: absolute;
+    .container {
-    top: 0;
+      padding: 16px;
-    left: 0;
+    }
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #ffffff;
    opacity: 0.3;
    background-image: linear-gradient(#d7edfb 2px, transparent 2px),
      linear-gradient(90deg, #d7edfb 2px, transparent 2px),
      linear-gradient(#d7edfb 1px, transparent 1px),
      linear-gradient(90deg, #d7edfb 1px, #ffffff 1px);
    background-size:
      50px 50px,
      50px 50px,
      10px 10px,
      10px 10px;
    background-position:
      -2px -2px,
      -2px -2px,
      -1px -1px,
      -1px -1px;
  }
 </style>
--- a/src/layouts/PageFooter.astro
+++ b/src/layouts/PageFooter.astro
@@ -0,0 +1,26 @@
 <footer>
  <div>© 2026 Uroboros</div>
  <a href="https://beian.miit.gov.cn" target="_blank">备案号：鄂ICP备2023000060号-2</a>
 </footer>
 <style>
  footer {
    flex-shrink: 0;
    min-height: 0;
    height: 84px;
    padding-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    gap: 12px;
    color: var(--text-secondary);
  }
  @media (max-width: 640px) {
    footer {
      height: 64px;
      padding-bottom: 0;
    }
  }
 </style>
--- a/src/layouts/PageHeader.astro
+++ b/src/layouts/PageHeader.astro
@@ -0,0 +1,56 @@
 ---
 import {siteConfig} from "@/consts.ts";
 import ThemeIcon from "@/components/ThemeIcon.astro";
 const {siteTitle,git} = siteConfig;
 ---
 <header>
  <a href="/"><h1>{siteTitle}</h1></a>
  <nav>
    <a href="/archive">归档</a>
    <a target="_blank" href={git}>git</a>
    <ThemeIcon />
  </nav>
 </header>
 <style>
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--border-primary);
    margin-top: 32px;
    padding-bottom: 24px;
  }
  nav {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--text-secondary);
  }
  nav a:hover {
    color: var(--text-primary);
  }
  h1 {
    font-size: 24px;
    font-weight: 600;
  }
  @media (max-width: 640px) {
    header {
      margin-top: 12px;
      margin-bottom: 0;
    }
    h1 {
      font-size: 20px;
      font-weight: normal;
    }
  }
 </style>
--- a/src/layouts/PostLayout.astro
+++ b/src/layouts/PostLayout.astro
@@ -1,193 +0,0 @@
 ---
 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
@@ -0,0 +1,10 @@
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 dayjs.extend(utc);
 dayjs.extend(timezone);
 export const formatDatetime = (date: string,format = 'YYYY-MM-DD HH:mm') => {
  return dayjs(date).tz('Asia/Shanghai').format(format);
 };
--- a/src/lib/processHtml.ts
+++ b/src/lib/processHtml.ts
@@ -0,0 +1,115 @@
 import {JSDOM} from 'jsdom'
 import {createHighlighter} from 'shiki'
 const DEFAULT_THEME = 'github-dark-dimmed'
 const highlighter = await createHighlighter({
  themes: [DEFAULT_THEME],
  langs: []
 })
 const SUPPORTED_LANGS = [
  "bash", "json", "yaml", "xml", "html", "css", "scss",
  "javascript", "typescript", "jsx", "tsx", "vue",
  "markdown", "sql", "python", "go", "dockerfile", "nginx"
 ] as const
 const loadedLangs = new Set<string>(['text'])
 type SupportedLang = typeof SUPPORTED_LANGS[number]
 const supportedSet = new Set<string>(SUPPORTED_LANGS)
 const ensureLangLoaded = async (lang: string): Promise<string> => {
  if (lang === 'text' || loadedLangs.has(lang)) return lang
  if (!supportedSet.has(lang)) return 'text'
  try {
    await highlighter.loadLanguage(lang as SupportedLang)
    loadedLangs.add(lang)
    return lang
  } catch {
    return 'text'
  }
 }
 export const processHtmlWithJsdom = async (rawHtml: string) => {
  const dom = new JSDOM(rawHtml)
  const document = dom.window.document
  const codeBlocks = document.querySelectorAll('pre code')
  for (const codeBlock of codeBlocks) {
    const preEl = codeBlock.parentElement
    if (!preEl || preEl.tagName !== 'PRE') continue
    const codeContent = codeBlock.textContent || ''
    let lang = 'text'
    for (const cls of codeBlock.classList) {
      if (cls.startsWith('language-')) {
        lang = cls.slice('language-'.length)
        break
      }
    }
    lang = await ensureLangLoaded(lang)   // ← 唯一改动点：按需加载
    const highlighted = highlighter.codeToHtml(codeContent, {
      lang,
      theme: DEFAULT_THEME,
    })
    // 替换 DOM
    const wrapper = document.createElement('div')
    wrapper.innerHTML = highlighted.trim()
    const newNode = wrapper.firstElementChild
    if (newNode && preEl.parentNode) {
      const container = document.createElement('div')
      container.className = 'code-block'
      const header = document.createElement('div')
      header.className = 'code-header'
      const headerLeft = document.createElement('div')
      headerLeft.className = 'code-header-left'
      const headerRight = document.createElement('div')
      headerRight.className = 'code-header-right'
      // 装饰点
      const actions = document.createElement('div')
      actions.className = 'code-actions'
      const close = document.createElement('span')
      close.className = 'dot close'
      const minimize = document.createElement('span')
      minimize.className = 'dot minimize'
      const maximize = document.createElement('span')
      maximize.className = 'dot maximize'
      actions.append(close, minimize, maximize)
      // 显示语言
      const langDisplay = document.createElement('div')
      langDisplay.className = 'code-language'
      langDisplay.textContent = lang ? lang : 'text'
      const copyBtn = document.createElement('div')
      copyBtn.className = 'code-copy-btn'
      copyBtn.textContent = '复制代码'
      headerLeft.append(actions, langDisplay)
      headerRight.append(copyBtn)
      header.append(headerLeft, headerRight)
      container.append(header, newNode)
      preEl.parentNode.replaceChild(container, preEl)
    }
  }
  return document.body.innerHTML
 }
--- a/src/lib/request.ts
+++ b/src/lib/request.ts
@@ -0,0 +1,51 @@
 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
@@ -0,0 +1,18 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 ---
 <Layout title="404" description="这里什么也没有">
  <div class="not-found">
    <h1>404 NOT FOUND</h1>
  </div>
 </Layout>
 <style>
  .not-found{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
 </style>
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,283 +0,0 @@
 ---
 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
@@ -0,0 +1,135 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 import type {Archive} from "@/types/archive";
 import {createHttp} from "@/lib/request";
 const http = createHttp(Astro.request.headers);
 const {data} = await http.get<ApiResponse<Archive>>("posts/archives");
 ---
 <Layout title="归档" description="">
  <div class="archive">
    {
      data.map((year) => (
        <div class="archive-year">
          <h2 class="year-title">
            <span class="year-badge">{year.year}年</span>
            <span class="year-count">共 {year.total} 篇</span>
          </h2>
          <div>
            {year.list.map((month) => (
              <div class="month-group">
                <h3 class="month-title">{month.month} 月</h3>
                <ul class="post-list">
                  {month.list.map((post) => (
                    <li class="post-item">
                        <span class="post-date">
                          {post.published_at_display}
                        </span>
                      <a class="post-title" href={`/post/${post.slug}`}>{post.title}</a>
                      <span class="post-cat">{post.category_name}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      ))
    }
  </div>
 </Layout>
 <style>
  .archive {
  }
  .archive-year {
  }
  .year-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    font-size: 28px;
    margin-bottom: 24px;
  }
  .year-badge {
  }
  .year-count {
    font-size: 14px;
    font-weight: normal;
  }
  .month-group {
    padding: 12px 0;
  }
  .month-title {
    color: var(--text-primary);
    font-weight: normal;
  }
  .post-list {
    padding: 12px 0;
    display: flex;
    flex-direction: column;
  }
  .post-item {
    display: flex;
    gap: 24px;
    font-size: 14px;
    border-bottom: var(--border-secondary);
    padding: 18px 0;
    align-items: center;
  }
  .post-item:last-child {
    border-bottom: none;
  }
  .post-date {
    color: var(--text-meta);
  }
  .post-title {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-primary);
    font-size: 16px;
    text-underline-offset: 4px;
    line-height: 24px;
  }
  .post-title:hover{
    color: var(--text-title-hover);
    text-decoration: underline;
  }
  .post-cat {
    color: var(--text-meta);
    font-size: 14px;
  }
  @media (max-width: 640px) {
    .year-title{
      font-size: 24px;
    }
    .post-title{
      font-size: 15px;
    }
  }
 </style>
--- a/src/pages/categories/[category].astro
+++ b/src/pages/categories/[category].astro
@@ -1,292 +0,0 @@
 ---
 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
@@ -1,358 +0,0 @@
 ---
 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
@@ -0,0 +1,139 @@
 ---
 const noindex = true;
 ---
 <!doctype html>
 <html lang="zh-CN">
 <head>
  <meta charset="UTF-8"/>
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
  />
  <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
  <meta name="generator" content={Astro.generator}/>
  <title>Gitea 入口</title>
  <meta name="theme-color" content="#ffffff"/>
  <meta name="robots" content="noindex, nofollow">
  <style>
    @import "modern-normalize";
    :root {
      --bg: #f6f7f9;
      --card-bg: #ffffff;
      --border: #e5e7eb;
      --text-color: #2b2f36;
      --text-secondary: #6b7280;
      --primary: #4f6df5;
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--text-color);
      font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    .page-container {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 24px 24px 24px 24px;
    }
    .gitea-card {
      width: 100%;
      max-width: 520px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      overflow: hidden;
    }
    .gitea-card__title {
      padding: 14px 20px;
      font-size: 15px;
      font-weight: 600;
      border-bottom: 1px solid var(--border);
    }
    .gitea-content {
      display: flex;
      flex-direction: column;
    }
    .gitea-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 13px 20px;
      font-size: 14px;
    }
    .gitea-item + .gitea-item {
      border-top: 1px solid var(--border);
    }
    .gitea-item:hover {
      background: #fafbfc;
    }
    .gitea-item__label {
      color: var(--text-secondary);
    }
    .gitea-item__link {
      color: var(--primary);
      text-decoration: none;
      white-space: nowrap;
    }
    .gitea-item__link:hover {
      text-decoration: underline;
    }
  </style>
 </head>
 <body>
 <div class="page-container">
  <div class="gitea-card">
    <div class="gitea-card__title">常用入口</div>
    <div class="gitea-content">
      <div class="gitea-item">
        <span class="gitea-item__label">博客地址</span>
        <a class="gitea-item__link" target="_blank" href="https://ua42.com">点击访问</a>
      </div>
      <div class="gitea-item">
        <span class="gitea-item__label">博客管理后台(支持游客查看)</span>
        <a class="gitea-item__link" target="_blank" href="https://admin.ua42.com">点击访问</a>
      </div>
      <div class="gitea-item">
        <span class="gitea-item__label">仓库地址</span>
        <a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin">点击访问</a>
      </div>
      <div class="gitea-item">
        <span class="gitea-item__label">博客服务端仓库</span>
        <a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin/blog-server">点击访问</a>
      </div>
      <div class="gitea-item">
        <span class="gitea-item__label">博客服务端 API文档</span>
        <a class="gitea-item__link" target="_blank" href="https://dev.ua42.com/docs/server-documentation.html">点击访问</a>
      </div>
    </div>
  </div>
 </div>
 </body>
 </html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,295 +1,23 @@
 ---
-import BaseLayout from '@/layouts/BaseLayout.astro';
+import Layout from "@/layouts/Layout.astro";
-import { getCollection } from 'astro:content';
+import {siteConfig} from "@/consts.ts";
-import ArticleCard from '@/components/ArticleCard.astro';
+import {createHttp} from "@/lib/request.ts";
-import SiteHeader from '@/components/SiteHeader.astro';
+import type {Post} from "@/types";
 import IndexPage from "@/components/IndexPage.astro";
-const posts = await getCollection('posts', ({ data }) => !data.draft);
+const {postPageSize, description} = siteConfig;
 const sortedPosts = posts.sort((a, b) =>
  b.data.pubDate.getTime() - a.data.pubDate.getTime()
 );
-// 获取所有标签
+const http = createHttp(Astro.request.headers);
-const allTags = [...new Set(posts.flatMap(post => post.data.tags))];
+
-const topTags = allTags.slice(0, 8);
+const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
  searchParams: {
    page: 1,
    page_size: postPageSize,
  },
 });
 const totalPage = Math.ceil(total / postPageSize);
 ---
-<BaseLayout>
+<Layout title="博客首页" description={description}>
-  <div class="layout">
+  <IndexPage page={1} totalPage={totalPage} posts={list}/>
-    <SiteHeader currentPath="/" />
+</Layout>
    <main class="main">
      <div class="hero">
        <div class="hero-content">
          <h1>42的博客</h1>
          <p class="subtitle">分享技术、思考与生活</p>
          <p class="description">在这里记录开发过程中的思考，分享工程实践经验，探索技术的可能性。</p>
        </div>
        <div class="hero-stats">
          <div class="stat-item">
            <div class="stat-number">{sortedPosts.length}</div>
            <div class="stat-label">篇文章</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{allTags.length}</div>
            <div class="stat-label">个标签</div>
          </div>
          <div class="tags-preview">
            <div class="tags-title">热门标签</div>
            <div class="tags-list">
              {topTags.map(tag => (
                <a href={`/tags/${tag}`} class="tag-item">#{tag}</a>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div class="posts-section">
        <h2 class="section-title">最新文章</h2>
        <div class="posts-list">
          {sortedPosts.map(post => (
            <ArticleCard post={post} />
          ))}
        </div>
      </div>
    </main>
    <footer class="site-footer">
      <div class="container">
        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
      </div>
    </footer>
  </div>
 </BaseLayout>
 <style>
  .layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .site-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
  }
  .main {
    flex: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2rem 3rem;
    width: 100%;
  }
  .hero {
    padding: 5rem 0;
    margin-bottom: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
  .hero-content {
    text-align: left;
  }
  .hero h1 {
    font-size: 3rem;
    color: var(--text-heading);
    margin-bottom: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    position: relative;
  }
  .hero h1::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 80px;
    height: 5px;
    background: var(--accent-color);
    border-radius: 2px;
  }
  .subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    margin-top: 1.5rem;
  }
  .description {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 500px;
  }
  .hero-stats {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .stat-item {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--accent-color);
  }
  .stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent-color);
    line-height: 1;
  }
  .stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
  }
  .tags-preview {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
  }
  .tags-title {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-weight: 600;
  }
  .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .tag-item {
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: color var(--transition-fast);
  }
  .tag-item:hover {
    color: var(--accent-secondary);
  }
  .posts-section {
    margin-bottom: 3rem;
  }
  .section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 2rem;
    padding-left: 1rem;
    border-left: 4px solid var(--accent-color);
  }
  .posts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .site-footer {
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
  }
  @media (max-width: 992px) {
    .hero {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    .hero-stats {
      flex-direction: row;
      gap: 1rem;
    }
    .stat-item {
      flex: 1;
    }
    .tags-preview {
      grid-column: 1 / -1;
    }
  }
  @media (max-width: 768px) {
    .main {
      padding: 0 1rem 2rem;
    }
    .hero {
      padding: 3rem 0;
      margin-bottom: 3rem;
    }
    .hero h1 {
      font-size: 2.25rem;
    }
    .subtitle {
      font-size: 1.25rem;
    }
    .description {
      font-size: 1rem;
    }
    .hero-stats {
      flex-direction: column;
    }
    .stat-number {
      font-size: 2.5rem;
    }
  }
  @media (max-width: 480px) {
    .hero {
      padding: 2rem 0;
      margin-bottom: 2rem;
    }
    .hero h1 {
      font-size: 2rem;
    }
    .subtitle {
      font-size: 1.125rem;
    }
    .description {
      font-size: 0.9375rem;
    }
    .stat-number {
      font-size: 2rem;
    }
  }
 </style>
--- a/src/pages/page/[...page].astro
+++ b/src/pages/page/[...page].astro
@@ -0,0 +1,34 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 import {siteConfig} from "@/consts.ts";
 import {createHttp} from "@/lib/request.ts";
 import type {Post} from "@/types";
 import IndexPage from "@/components/IndexPage.astro";
 const {page} = Astro.params;
 const pageInt = Number(page);
 if (isNaN(pageInt) || pageInt <= 1) {
  return Astro.redirect("/");
 }
 const {postPageSize,description} = siteConfig;
 const http = createHttp(Astro.request.headers);
 const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
  searchParams: {
    page: pageInt,
    page_size: postPageSize,
  },
 });
 const totalPage = Math.ceil(total / postPageSize);
 if (totalPage < pageInt) {
  return Astro.redirect("/404");
 }
 ---
 <Layout title="博客首页" description={description}>
  <IndexPage page={pageInt} totalPage={totalPage} posts={list}/>
 </Layout>
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -0,0 +1,237 @@
 ---
 import "@/styles/github-markdown.css";
 import "@/styles/github-markdown-reset.css";
 import "photoswipe/dist/photoswipe.css";
 import Layout from '@/layouts/Layout.astro';
 import {createHttp} from "@/lib/request.ts";
 import type {Post} from "@/types";
 import {processHtmlWithJsdom} from "@/lib/processHtml.ts";
 import {formatDatetime} from "@/lib/format.ts";
 const {slug} = Astro.params;
 const http = createHttp(Astro.request.headers);
 let data: Post;
 try {
  const res = await http.get<ApiResponse<Post>>(`posts/${slug}`);
  data = res.data;
 } catch (error) {
  return Astro.redirect("/404");
 }
 const content = await processHtmlWithJsdom(data.content);
 const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
 ---
 <Layout title={data.title} description={data.summary}>
  <article>
    <div class="meta">
      <div class="meta-left">
        <span>{data.category_name} · {data.category_code.toUpperCase()}</span>
        <span>{published_at}</span>
      </div>
      <div class="meta-view-count">{data.view_count} 次阅读</div>
    </div>
    <h1>{data.title}</h1>
    {data.cover &&
      <div>
        <img class="cover" src={data.cover} alt={data.title}>
      </div>
    }
    <p class="summary">{data.summary}</p>
    <div class="divider"></div>
    <div class="markdown-body" data-color-mode="dark" set:html={content}/>
    {
      data.tags.length > 0 &&
      <div class="tags">
        {data.tags.map(tag => <span>{tag.name}</span>)}
      </div>
    }
  </article>
 </Layout>
 <style>
  article {
    width: 100%;
    margin: 0 auto;
    flex: 1;
    flex-shrink: 0;
  }
  .cover {
    width: 100%;
    margin-bottom: 20px;
  }
  .meta {
    color: var(--text-meta);
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .meta-left {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .meta-view-count:hover {
    color: var(--text-primary);
  }
  h1 {
    font-size: 28px;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 20px;
  }
  .summary {
    font-size: 14px;
    margin-bottom: 20px;
    color: var(--text-meta);
    line-height: 1.4;
  }
  .divider {
    border-bottom: var(--border-secondary);
  }
  .markdown-body {
    margin-top: 24px;
    line-height: 1.8;
    font-size: 15px;
    color: var(--article-text-color);
  }
  .tags {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .tags span {
    font-size: 12px;
    color: var(--text-secondary);
    border: var(--border-primary);
    border-radius: 20px;
    padding: 8px 16px;
  }
  @media (max-width: 640px) {
    h1{
      font-size: 24px;
    }
  }
 </style>
 <script>
  import PhotoSwipeLightbox from "photoswipe/lightbox";
  import ClipboardJS from "clipboard";
  const init = async () => {
    const article = document.querySelector(".markdown-body")!;
    const images = Array.from(article.querySelectorAll("img"));
    if(images.length === 0) return
    const waitImageLoaded = (img: HTMLImageElement) => {
      if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
        return Promise.resolve();
      }
      return new Promise<void>((resolve) => {
        img.addEventListener("load", () => resolve(), {once: true});
        img.addEventListener("error", () => resolve(), {once: true});
      });
    };
    await Promise.all(
      images.map(async (img) => {
        if (img.closest("a")) return;
        await waitImageLoaded(img);
        const link = document.createElement("a");
        link.href = img.currentSrc || img.src;
        link.target = "_blank";
        link.rel = "noreferrer";
        link.dataset.pswpWidth = String(img.naturalWidth || img.width || 1200);
        link.dataset.pswpHeight = String(
          img.naturalHeight || img.height || 800,
        );
        img.parentNode?.insertBefore(link, img);
        link.appendChild(img);
      }),
    );
    const lightbox = new PhotoSwipeLightbox({
      gallery: ".markdown-body",
      children: "a[data-pswp-width]",
      pswpModule: () => import("photoswipe"),
      padding: {
        top: 48,
        right: 24,
        bottom: 48,
        left: 24,
      },
      bgOpacity: 0.5,
      tapAction: "close",
      bgClickAction: "close",
    });
    lightbox.init();
  };
  init();
  const copyTimers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();
  // 代码块复制功能
  const clipboard = new ClipboardJS(".code-copy-btn", {
    text: (el) => {
      const sibling = el.closest(".code-header")?.nextElementSibling;
      return sibling?.textContent.trim() || "";
    }
  });
  clipboard.on("success", (e) => {
    const btn = e.trigger as HTMLElement;
    // 清理当前按钮之前的定时器
    const oldTimer = copyTimers.get(btn);
    if (oldTimer) {
      clearTimeout(oldTimer);
    }
    const originalText = btn.textContent || "";
    btn.textContent = "✓ 代码已复制";
    const timer = setTimeout(() => {
      btn.textContent = originalText;
      copyTimers.delete(btn);
    }, 2000);
    copyTimers.set(btn, timer);
    e.clearSelection();
  });
 </script>
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -1,24 +0,0 @@
 ---
 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
@@ -1,25 +0,0 @@
 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
@@ -1,14 +0,0 @@
 import type { APIRoute } from 'astro';
 import { generateSearchIndex } from '@/utils/search-index';
 export const GET: APIRoute = async () => {
  const searchIndex = await generateSearchIndex();
  return new Response(JSON.stringify(searchIndex), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'public, max-age=3600',
    },
  });
 };
--- a/src/pages/sitemap-pages.xml.ts
+++ b/src/pages/sitemap-pages.xml.ts
@@ -0,0 +1,32 @@
 import type {APIRoute} from 'astro';
 import {siteConfig} from "@/consts";
 const site = siteConfig.site
 const staticUrls = [
  '',
  '/archive'
 ];
 export const GET: APIRoute = async () => {
  const urls = staticUrls
    .filter((url, index, array) => {
      return array.indexOf(url) === index;
    });
  const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
              ${urls.map((url) => `<url>
                <loc>${site}${url}</loc>
              </url>`
  )
    .join('\n')}
 </urlset>`;
  return new Response(xml, {
    status: 200,
    headers: {
      'Content-Type': 'application/xml; charset=utf-8',
      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
    },
  });
 };
--- a/src/pages/sitemap-posts.xml.ts
+++ b/src/pages/sitemap-posts.xml.ts
@@ -0,0 +1,35 @@
 import type {APIRoute} from 'astro';
 import {siteConfig} from "@/consts";
 import {createHttp} from "@/lib/request.ts";
 import type {PostForSitemap} from "@/types";
 import dayjs from "dayjs";
 const site =siteConfig.site
 export const GET: APIRoute = async (context) => {
  const http = createHttp(context.request.headers);
  const {data} = await http.get<ApiResponse<PostForSitemap[]>>("posts/sitemap")
  const urls = data
    .filter((url, index, array) => {
      return array.indexOf(url) === index;
    });
  const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
              ${urls.map((post) => `<url>
                <loc>${site}/post/${post.slug}</loc>
                <lastmod>${dayjs(post.updated_at || post.created_at).toISOString()}</lastmod>
              </url>`
  )
    .join('\n')}
 </urlset>`;
  return new Response(xml, {
    status: 200,
    headers: {
      'Content-Type': 'application/xml; charset=utf-8',
      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
    },
  });
 };
--- a/src/pages/sitemap.xml.ts
+++ b/src/pages/sitemap.xml.ts
@@ -0,0 +1,21 @@
 import type {APIRoute} from 'astro';
 import {siteConfig} from "@/consts";
 const site = siteConfig.site
 export const GET: APIRoute = () => {
  const xml = `<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>${site}/sitemap-pages.xml</loc>
  </sitemap>
  <sitemap>
    <loc>${site}/sitemap-posts.xml</loc>
  </sitemap>
 </sitemapindex>`;
  return new Response(xml, {
    headers: {
      'Content-Type': 'application/xml; charset=utf-8',
    },
  });
 };
--- a/src/pages/tags/[tag].astro
+++ b/src/pages/tags/[tag].astro
@@ -1,407 +0,0 @@
 ---
 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
@@ -1,346 +0,0 @@
 ---
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import { getCollection } from 'astro:content';
 import SiteHeader from '@/components/SiteHeader.astro';
 const posts = await getCollection('posts', ({ data }) => !data.draft);
 // 统计所有标签
 const tagCount = new Map<string, number>();
 posts.forEach(post => {
  post.data.tags.forEach(tag => {
    tagCount.set(tag, (tagCount.get(tag) || 0) + 1);
  });
 });
 // 按文章数量排序
 const sortedTags = Array.from(tagCount.entries())
  .sort((a, b) => b[1] - a[1]);
 ---
 <BaseLayout title="标签">
  <div class="layout">
    <SiteHeader currentPath="/tags" />
    <main class="main">
      <h1 class="page-title">标签</h1>
      <div class="tags-cloud">
        {sortedTags.map(([tag, count]) => (
          <a href={`/tags/${tag}`} class="tag-item">
            <span class="tag-name">#{tag}</span>
            <span class="tag-count">{count}</span>
          </a>
        ))}
      </div>
    </main>
    <footer class="site-footer">
      <div class="container">
        <p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
      </div>
    </footer>
  </div>
 </BaseLayout>
 <style>
  .layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .site-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
  }
  @supports (backdrop-filter: blur(10px)) {
    .site-header {
      backdrop-filter: blur(10px) saturate(180%);
      -webkit-backdrop-filter: blur(10px) saturate(180%);
      background: rgba(255, 255, 255, 0.9);
    }
    [data-theme="dark"] .site-header {
      background: rgba(15, 23, 42, 0.95);
    }
  }
  .container {
    max-width: var(--layout-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform var(--transition-fast);
  }
  .logo:hover {
    transform: scale(1.05);
  }
  .nav {
    display: flex;
    gap: 2rem;
    align-items: center;
  }
  .nav a {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
    font-weight: 500;
    position: relative;
  }
  .nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
  }
  .nav a:hover {
    color: var(--text-primary);
  }
  .nav a:hover::after {
    transform: scaleX(1);
  }
  .nav :global(.theme-toggle) {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    cursor: pointer;
  }
  .nav :global(.theme-toggle:hover) {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: rotate(180deg);
    box-shadow: var(--shadow-md);
  }
  .nav :global(.theme-toggle .icon-wrapper) {
    position: relative;
    width: 20px;
    height: 20px;
  }
  .nav :global(.theme-toggle .icon) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base), transform var(--transition-base);
    opacity: 0;
    transform: rotate(-180deg) scale(0);
  }
  .nav :global(.theme-toggle .icon.active) {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
  .nav :global(.theme-toggle.is-animating) {
    animation: spin 0.6s ease-in-out;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .nav :global(.theme-toggle svg) {
    width: 100%;
    height: 100%;
    color: var(--text-primary);
  }
  .nav :global(.theme-toggle:hover svg) {
    color: white;
  }
  .main {
    flex: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
    width: 100%;
  }
  .page-title {
    font-size: 3rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 3rem;
    font-weight: 800;
  }
  .tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    animation: fadeInUp 0.6s ease-out;
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .tag-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
  }
  .tag-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--gradient-primary);
    transform: scaleY(0);
    transition: transform var(--transition-base);
  }
  .tag-item:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent-color);
  }
  .tag-item:hover::before {
    transform: scaleY(1);
  }
  .tag-name {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .tag-count {
    font-size: 0.9rem;
    opacity: 0.8;
  }
  .site-footer {
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
  }
  @media (max-width: 768px) {
    .container {
      padding: 0 1rem;
    }
    .nav {
      gap: 1rem;
      font-size: 0.875rem;
    }
    .logo {
      font-size: 1.25rem;
    }
    .main {
      padding: 2rem 1rem;
    }
    .page-title {
      font-size: 2rem;
      margin-bottom: 2rem;
    }
    .tags-cloud {
      gap: 0.75rem;
    }
    .tag-item {
      padding: 0.75rem 1.25rem;
    }
    .tag-name {
      font-size: 1rem;
    }
    .tag-count {
      font-size: 0.875rem;
    }
  }
  @media (max-width: 480px) {
    .nav a:not(:first-child) {
      font-size: 0.8125rem;
    }
    .page-title {
      font-size: 1.75rem;
    }
    .tag-item {
      padding: 0.625rem 1rem;
    }
    .tag-name {
      font-size: 0.9375rem;
    }
  }
 </style>
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1,171 +0,0 @@
@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
@@ -0,0 +1,13 @@
 * {
  margin: 0;
  padding: 0;
 }
 a {
    color: inherit;
    text-decoration: none;
 }
 ul,li{
  list-style: none;
 }
--- a/src/styles/enhancements.css
+++ b/src/styles/enhancements.css
@@ -1,295 +0,0 @@
 /* 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
@@ -0,0 +1,84 @@
 .markdown-body pre code {
  font-size: 14px;
  line-height: 1.6;
 }
 .markdown-body h1,
 .markdown-body h2,
 .markdown-body h3,
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
  border-bottom: none;
 }
@media (max-width: 768px) {
  .markdown-body pre code {
    font-size: inherit;
  }
 }
 .markdown-body .highlight pre,
 .markdown-body pre {
  border-radius: 0 0 8px 8px;
 }
 .markdown-body img {
  margin: 12px 0 12px;
 }
 .code-block {
 }
 .code-header {
  height: 36px;
  background: var(--code-block-header-bg);
  display: flex;
  justify-content: space-between;
  color: var(--text-primary);
  align-items: center;
  padding: 0 12px;
  font-size: 14px;
  border-radius: 8px 8px 0 0;
 }
 .code-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
 }
 .code-actions {
  display: flex;
  align-items: center;
  gap: 7px;
 }
 .code-actions .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
 }
 .code-actions .close {
  background: #ff5f57;
 }
 .code-actions .minimize {
  background: #febc2e;
 }
 .code-actions .maximize {
  background: #28c840;
 }
 .code-copy-btn {
  font-size: 12px;
  cursor: pointer;
  user-select: none;
 }
 .code-copy-btn:hover {
  color: var(--code-block-copy-btn-hover-color);
 }
--- a/src/styles/github-markdown.css
+++ b/src/styles/github-markdown.css
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,65 @@
@import "modern-normalize";
@import "css-reset.css";
 :root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --layout-width: 760px;
  --background: #ffffff;
  --border-primary: 1px solid #dcdcdc;
  --border-secondary: 1px solid #eee;
  --text-primary: #030712;
  --text-secondary: #3f3f46;
  --text-disabled: #d1d5db;
  --text-meta: #71717a;
  --article-text-color: #404040;
  --text-title-hover: #000;
  --code-block-header-bg: #f5f5f4;
  --code-block-copy-btn-hover-color: #6b7280;
 }
 .dark {
  --background: #0a0a0a;
  --border-primary: 1px solid #52525b;
  --border-secondary: 1px solid #525252;
  --text-primary: #e4e4e7;
  --text-secondary: #d1d5db;
  --text-disabled: #6b7280;
  --text-meta: #d4d4d8;
  --article-text-color: #d4d4d8;
  --text-title-hover: #fff;
  --code-block-header-bg: #374151;
  --code-block-copy-btn-hover-color: #9ca3af;
 }
 html,
 body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  font-family: var(--font-family), serif;
  color: var(--text-primary);
 }
 ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
 }
 /* 滚动条轨道 */
 ::-webkit-scrollbar-track {
  background: transparent;
 }
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
  background: rgba(139,139,139,.5);
  border-radius: 999px;
 }
 /* 鼠标悬停 */
 ::-webkit-scrollbar-thumb:hover {
  background: rgba(139,139,139,.7);
 }
--- a/src/styles/reset.css
+++ b/src/styles/reset.css
@@ -1,11 +0,0 @@
 /* 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
@@ -1,263 +0,0 @@
 /* 文章目录（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
@@ -1,267 +0,0 @@
 /* 排版样式 */
 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
@@ -0,0 +1,21 @@
 type ArchiveYear = {
  year: number;
  total: number;
  list: ArchiveMonth[];
 };
 type ArchivePost = {
  id: number;
  slug: string;
  title: string;
  published_at: string;
  published_at_display: string;
  category_name: string;
 };
 type ArchiveMonth = {
  month: number;
  list: ArchivePost[];
 };
 export type Archive = ArchiveYear[];
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -0,0 +1,29 @@
 /** 基础 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
@@ -0,0 +1 @@
 export * from './post.ts'
--- a/src/types/post.ts
+++ b/src/types/post.ts
@@ -1,19 +1,32 @@
-import type { CollectionEntry } from 'astro:content';
+export type Tag = {
  id: number
  code: string
  name: string
 }
-export type Post = CollectionEntry<'posts'>;
+export type Post = {
 export interface PostMetadata {
  title: string;
-  description: string;
+  summary: string;
-  pubDate: Date;
+  slug: string;
-  updatedDate?: Date;
+  cover: string;
-  author: string;
+  category_name: string;
-  image?: string;
+  category_code: string;
-  tags: string[];
+  category_id?: number;
-  category: string;
+  published_at: string;
-  draft: boolean;
+  view_count: number;
  content: string;
  tags: Tag[]
 }
-export interface PostWithReadingTime extends Post {
+export type CategoriesStats = {
-  readingTime: string;
+  id: number;
  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
@@ -1,15 +0,0 @@
 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
@@ -1,29 +0,0 @@
 // 提取文章标题的工具函数
 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
@@ -1,19 +0,0 @@
 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
@@ -1,28 +0,0 @@
 // 搜索索引生成工具
 import { getCollection } from 'astro:content';
 export interface SearchIndexItem {
  id: string;
  title: string;
  description: string;
  content: string;
  category: string;
  tags: string[];
  date: string;
  url: string;
 }
 export async function generateSearchIndex(): Promise<SearchIndexItem[]> {
  const posts = await getCollection('posts', ({ data }) => !data.draft);
  return posts.map(post => ({
    id: post.slug,
    title: post.data.title,
    description: post.data.description,
    content: post.body.slice(0, 500), // 仅索引前500字符
    category: post.data.category,
    tags: post.data.tags,
    date: post.data.pubDate.toISOString(),
    url: `/posts/${post.slug}`,
  }));
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,8 +13,6 @@
      "@/*": [
        "src/*"
      ]
-    },
+    }
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
-}
+}
Author	SHA1	Message	Date
xy	61ec9071e5	style: 博客标题在列表中超长的问题	2026-08-19 00:20:52 +08:00
xy	1ee413d11b	style: 微调color	2026-08-17 22:32:07 +08:00
xy	ebb570f0e1	style: 调整滚动条样式	2026-08-16 15:57:32 +08:00
xy	21cb0610e1	style: 调整滚动条样式	2026-08-16 15:55:07 +08:00
xy	3867a7f6cc	style: 代码块主题调整	2026-08-16 15:49:40 +08:00
xy	ce2185a4c0	style: theme icon cursor	2026-08-16 15:41:52 +08:00
xy	abe1790ac1	feat: 暗色主题、主题切换按钮	2026-08-16 15:40:26 +08:00
xy	be2e6f1ae0	feat: 删除无用依赖，shiki lang使用懒加载方式加载语言	2026-08-16 13:29:58 +08:00
xy	070a63133d	feat: 调整404文案	2026-08-16 11:15:04 +08:00
xy	7eb0ae75fb	feat: 404界面、微调ui	2026-08-16 11:14:34 +08:00
xy	fef7f239c9	style: 微调移动端ui	2026-08-16 00:11:16 +08:00
xy	6385b36f6d	style: 调整cover样式	2026-08-15 23:40:31 +08:00
xy	76247eee92	feat: 显示封面	2026-08-15 23:26:08 +08:00
xy	87f2732028	style: 调整ui	2026-08-15 22:37:05 +08:00
xy	65fc12dab6	style: 优化移动端ui	2026-08-15 22:35:50 +08:00
xy	7638a2ae0e	style: 优化移动端ui	2026-08-15 22:33:09 +08:00
xy	4a224b58f4	feat: 归档页面	2026-08-15 22:23:32 +08:00
xy	390437b4bb	style: 优化移动端ui	2026-08-15 21:48:37 +08:00
xy	80d461f0e2	style: 优化移动端ui	2026-08-15 21:45:31 +08:00
xy	560f6f29ea	refactor: v2	2026-08-15 20:55:56 +08:00
xy	990d4b0728	style: 修复样式异常	2026-08-15 12:40:12 +08:00
xy	f7929be18d	fix: sitemap路径拼写不正确的问题	2026-08-15 00:25:55 +08:00
xy	963722996e	chore: 更新robot.txt	2026-08-14 23:56:44 +08:00
xy	e4c362030d	feat: 动态sitemap.xml	2026-08-14 23:55:52 +08:00
xy	d7bbb7b70b	style: 调整移动端视觉	2026-08-14 22:40:26 +08:00
xy	555135aedb	fix: 用户手动输入query条件导致的搜索异常问题	2026-08-14 21:28:41 +08:00
xy	b3038603e8	refactor: 重写filter页面更新为search	2026-08-14 21:08:45 +08:00
xy	37d720ebc3	chore: update .gitignore	2026-08-14 14:23:43 +08:00
xy	25e5249739	style: 调整封面尺寸	2026-08-13 17:20:25 +08:00
xy	a99c165ba3	refactor: filter页面使用图片懒加载组件	2026-08-13 12:10:10 +08:00
xy	60131d6fa9	feat: 图片lazy loading	2026-08-12 18:15:41 +08:00
xy	67070e5fc4	style: 调整gitea嵌入页面样式	2026-08-08 22:24:50 +08:00
xy	ecf730bda7	feat: 根据分类和tag筛选文章	2026-08-05 20:38:48 +08:00
xy	f7b7f7d320	style: 优化暗黑模式下标签样式	2026-08-02 16:46:40 +08:00
xy	67ec0bffee	feat: add github entry	2026-08-02 11:49:08 +08:00
xy	03822cffee	docs: update gitea docs	2026-08-02 11:41:52 +08:00
xy	e2ccdb68b4	feat: 移动端隐藏back top、调整post list样式	2026-08-01 23:19:24 +08:00
xy	9d0540ecfc	feat: 更新gitea模板	2026-08-01 20:18:16 +08:00
xy	2ead477997	feat: 调整back top position	2026-08-01 17:11:15 +08:00
xy	3100c1c1e9	feat: 调整api路径	2026-07-31 00:38:57 +08:00
xy	a91ee9ac55	feat: update embed gitea	2026-07-29 22:03:17 +08:00
xy	6a8c75fc94	feat: 更新嵌入页面	2026-07-27 19:38:16 +08:00
xy	44bafa1435	feat: 更新嵌入页面	2026-07-27 19:27:04 +08:00
xy	7807f98709	feat: 完善暗色主题	2026-07-26 13:47:07 +08:00
xy	965dbbce41	feat: 更新favicon	2026-07-24 22:17:40 +08:00
xy	f3f0b43b6d	feat: 更新tag icon	2026-07-24 22:12:05 +08:00
xy	4d3b6e4ce2	feat: 完善暗色主题	2026-07-24 22:05:03 +08:00
xy	790a867313	feat: 标签云	2026-07-24 21:53:09 +08:00
xy	bc6fdb6149	feat: 修改环境变量	2026-07-24 21:36:59 +08:00
xy	54eae0e738	feat: 博客标签	2026-07-24 21:18:57 +08:00
xy	2346842ef5	feat: update .gitignore	2026-07-22 17:58:10 +08:00
xy	c9d6ce3464	feat: 去除访问统计信息	2026-07-22 17:27:36 +08:00
xy	aa4f3389a3	fix: 错删字段导致的bug	2026-07-22 00:22:25 +08:00
xy	e8738cca3c	feat: 删除字段	2026-07-22 00:15:49 +08:00
xy	17b1bf1e8a	feat: 博客归档	2026-07-22 00:14:42 +08:00
xy	634824ff44	feat: 样式调整	2026-07-21 18:14:41 +08:00
xy	60d8f66ad0	feat: 样式调整	2026-07-20 23:38:03 +08:00
xy	0b18d55712	feat: 调整布局	2026-07-20 23:19:16 +08:00
xy	1ddaabe64b	fix: ts类型错误，lightbox错误将link识别为图片的问题	2026-07-20 23:15:22 +08:00
xy	a5f4d0a28d	feat: 首页改版	2026-07-20 22:14:20 +08:00
xy	95320835b6	feat: 删除博客图片圆角	2026-07-18 22:07:12 +08:00
xy	a0db85f1f2	fix: astro 注释问题	2026-07-18 22:06:15 +08:00
xy	b34a041052	fix: back top 图片不展示的问题	2026-07-18 22:01:16 +08:00
xy	aa4da842d6	feat: 返回顶部	2026-07-18 21:48:21 +08:00
xy	f77f8d13d1	feat: 样式调整	2026-07-18 21:03:04 +08:00
xy	ed73a3fe72	feat: 修改网站元素	2026-07-18 18:49:39 +08:00
xy	f1cb633cb3	feat: PhotoSwipe 配置点击关闭	2026-07-17 18:40:04 +08:00
xy	9909d8d7a5	feat: 文章图片预览	2026-07-17 18:24:01 +08:00
xy	c7766edb01	fix: 切换暗色主题时 meta theme-color不会被修改的问题	2026-07-13 16:06:43 +08:00
xy	ba14074509	feat: 完善暗色主题移动端适配 meta theme color	2026-07-13 16:00:44 +08:00
xy	36b04537b4	feat: 暗黑主题	2026-07-13 00:04:11 +08:00
xy	0b9c253402	fix: 获取真实请求ip(解决使用docker部署时,ssr请求无法获取用户真实ip的问题，解决方案：转发astro headers)	2026-07-11 23:54:59 +08:00
xy	4dcee7790b	feat: 调整博客正文样式	2026-07-10 20:14:24 +08:00
xy	66717405db	feat: 显示博客访问量	2026-07-10 20:07:24 +08:00
xy	712f556d67	feat: 文章分页	2026-07-10 18:59:54 +08:00
xy	540168d30f	feat: 404 page	2026-07-09 16:23:45 +08:00
xy	26ce6ed4ef	feat: 修改网站title	2026-07-09 15:35:21 +08:00
xy	df4bb9212b	feat: seo优化	2026-07-08 22:54:08 +08:00
xy	bbacb11bce	feat: 新版ui	2026-07-08 18:11:58 +08:00
xy	4fe81f1e48	feat: 修复时区问题	2026-07-07 23:49:06 +08:00
xy	3c9ef565b3	feat: 脚本部署	2026-07-06 23:58:49 +08:00
xy	59664d139d	feat: 基础文章编辑功能	2026-07-06 18:54:15 +08:00
xy	12e521891a	feat: 基础文章编辑功能	2026-07-06 14:20:21 +08:00
xy	e67829562d	feat: 归档渲染	2026-07-05 22:33:50 +08:00
xy	4c20ee73d3	feat: 调整样式	2025-11-24 21:29:14 +08:00
		`@@ -0,0 +1 @@`
							`VITE_API_BASE_URL=http://127.0.0.1:8080/api/`
		`@@ -0,0 +1 @@`
							`VITE_API_BASE_URL=https://admin.ua42.com/api/`