style: 修复样式异常

.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

.env

@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://127.0.0.1:8080/api/

.env.production

@@ -0,0 +1 @@
+VITE_API_BASE_URL=https://admin.ua42.com/api/

.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

.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 内联
-- 非关键样式延迟加载
-- 图片懒加载和响应式图片
-- 字体加载策略优化
-- 代码高亮渲染速度快

AGENTS.md

@@ -0,0 +1,34 @@
+# Project Scope Rules
+
+## 文件范围限制
+
+本项目根目录：
+
+./
+
+所有操作必须限制在当前项目目录内。
+
+禁止：
+- 访问项目外文件
+- 修改父级目录文件
+- 创建项目外文件
+- 修改用户目录中的其他内容
+- 禁止访问服务端仓库
+
+## 修改规则
+
+修改前必须：
+1. 列出将修改的文件
+2. 说明修改原因
+3. 等待确认
+
+禁止修改：
+
+node_modules/
+.git/
+build/
+.env
+
+## 开发环境
+
+默认认为已经启动服务，端口为4321

astro.config.mjs

@@ -2,30 +2,24 @@
 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()
+  },
-  ],
+  integrations: [solidJs()],
   adapter: node({
     mode: 'standalone'
   }),
-  markdown: {
+  vite: {
-    syntaxHighlight: 'shiki',
+    plugins: [],
-    shikiConfig: {
+    server: {
-      themes: {
+      watch: {
-        light: 'github-light',
+        usePolling: true,
-        dark: 'one-dark-pro'
+      },
     },
-      wrap: true,
-      transformers: []
   },
-    remarkPlugins: [],
-    rehypePlugins: []
-  }
 });

package.json

@@ -10,16 +10,22 @@
     "deploy": "./scripts/deploy.sh"
   },
   "dependencies": {
-    "@astrojs/node": "^9.5.1",
+    "@astrojs/node": "11.0.2",
-    "@astrojs/rss": "^4.0.14",
-    "@astrojs/sitemap": "^3.6.0",
     "@astrojs/solid-js": "^5.1.3",
-    "astro": "^5.15.8",
+    "astro": "^7.0.6",
-    "fuse.js": "^7.1.0",
+    "dayjs": "^1.11.21",
+    "github-markdown-css": "^5.9.0",
+    "jsdom": "^29.1.1",
+    "ky": "^2.0.2",
     "modern-normalize": "^3.0.1",
-    "solid-js": "^1.9.10"
+    "photoswipe": "^5.4.4",
+    "shiki": "^4.3.1",
+    "solid-js": "^1.9.14"
   },
   "volta": {
     "node": "22.21.1"
+  },
+  "devDependencies": {
+    "@types/jsdom": "^28.0.3"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  esbuild: true
+  sharp: true

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>

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://ua42.com/sitemap.xml

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
 

src/assets/icon/back-top.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1784628432297" class="icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9153" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.1484375" height="200"><path d="M513.407379 0C230.713951 0 1.407379 229.306573 1.407379 512c0 282.693427 229.306573 512 512 512 282.693427 0 512-229.293792 512-512C1025.407379 229.306573 796.100806 0 513.407379 0z m26.17579 817.737837c-6.812352 6.799571-16.756085 10.991787-26.17579 10.991787-9.943733 0-19.37622-4.192216-26.175791-10.991787-6.799571-6.812352-10.991787-16.756085-10.991787-26.699818 0-9.943733 4.192216-19.900247 10.991787-26.699818s16.756085-10.991787 26.175791-10.991787c9.943733 0 19.363439 4.192216 26.17579 10.991787s10.991787 16.756085 10.991787 26.699818c0 9.943733-4.192216 19.887466-10.991787 26.699818z m-26.17579-87.435832c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605z m258.089717-237.678225c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.646726 206.798972c15.184004-15.184004 40.31174-15.184004 55.495743 0l230.354627 230.341845c15.184004 15.171222 15.184004 39.774932 0 55.482963z m0 0" p-id="9154"></path><path d="M771.497096 492.636561c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.659507 206.798972c15.184004-15.184004 40.31174-15.184004 55.495744 0l230.354626 230.341845c15.171222 15.184004 15.171222 39.787713-0.012781 55.495744zM513.407379 730.302005c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605M513.407379 828.729624c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.743304 37.167577 37.691605 0 20.93552-16.756085 37.691605-37.167577 37.691605" fill="#FFFFFF" p-id="9155"></path></svg>

src/assets/icon/github.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1785642324396" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7302" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M695.744 981.312H419.712c-26.816 0-47.296-21.056-47.296-48.64V739.84c0-29.184 6.336-56.768 17.344-81.088-129.28-48.64-214.528-150.72-214.528-264.256 0-53.44 17.344-103.68 50.496-147.52C213.12 204.8 209.92 151.296 213.12 89.664c3.2-27.52 23.68-46.976 48.896-46.976 14.208 0 134.08 1.6 203.52 64.832a504.384 504.384 0 0 1 184.512 0C717.888 44.288 837.696 42.688 853.504 42.688a47.36 47.36 0 0 1 47.36 45.376c4.672 61.568 0 115.072-12.672 157.248 33.152 45.44 50.496 95.68 50.496 147.52 0 113.472-85.184 215.68-214.528 264.32 11.072 25.856 17.344 53.44 17.344 81.024v192.896c1.6 27.52-20.48 50.24-45.76 50.24z m-228.672-97.28h181.376V739.84c0-27.52-12.608-53.504-33.152-71.36a48.96 48.96 0 0 1-15.744-50.24c4.736-17.856 18.944-32.384 36.288-35.648 123.008-24.32 208.192-102.144 208.192-189.696 0-46.976-25.216-82.688-45.76-105.344a47.36 47.36 0 0 1-7.872-55.168c6.336-12.928 15.808-40.512 15.808-89.152-39.488 6.464-85.184 19.456-102.528 45.44a47.552 47.552 0 0 1-50.56 19.392 393.024 393.024 0 0 0-193.92 0c-18.944 4.864-37.888-3.2-50.56-19.456-17.28-25.92-63.04-38.912-102.464-45.376 1.6 48.64 9.472 76.16 15.744 89.152a53.696 53.696 0 0 1-7.872 55.168c-20.48 22.656-45.76 58.368-45.76 105.344 0 87.552 85.184 163.776 208.256 189.696 17.28 3.2 31.552 17.792 36.224 35.648a51.008 51.008 0 0 1-15.744 50.24c-20.48 17.856-33.152 43.776-33.152 71.36v144.256h3.2z" fill="#172B4D" p-id="7303"></path><path d="M403.968 788.416c-212.928 0-309.12-194.56-313.92-202.688-11.008-24.32-1.536-53.44 20.48-64.832a47.424 47.424 0 0 1 63.168 21.12c3.136 6.4 80.448 157.248 241.28 149.12a46.08 46.08 0 0 1 48.896 47.04c1.6 27.52-18.88 50.24-45.696 50.24h-14.208z" fill="#172B4D" p-id="7304"></path></svg>

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>

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>
-  );
-}

src/components/BackTop.astro

@@ -0,0 +1,69 @@
+---
+// 后面的 ?url 是 一个导入查询（import query），表示：不要把 SVG 当作组件或源码处理，而是返回这个资源的 URL 字符串。
+import backTopIcon from "@/assets/icon/back-top.svg?url";
+---
+
+<button class="back-top" type="button" aria-label="返回顶部" hidden>
+  <img src={backTopIcon} alt="">
+</button>
+
+<script>
+  const backTop = document.querySelector<HTMLButtonElement>(".back-top")
+
+  const toggleBackTop = () => {
+    if (!backTop) return;
+
+    backTop.hidden = window.scrollY <= 500;
+  };
+
+  backTop && backTop.addEventListener("click", () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  });
+
+  window.addEventListener("scroll", toggleBackTop, {passive: true});
+
+  toggleBackTop();
+</script>
+
+<style>
+  .back-top {
+    position: fixed;
+    right: 150px;
+    bottom: 100px;
+    width: 44px;
+    height: 44px;
+    z-index: 999;
+    cursor: pointer;
+    padding: 0;
+    border: none;
+    background: transparent;
+  }
+
+  .back-top[hidden] {
+    display: none;
+  }
+
+  .back-top img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  :global(.dark) .back-top img {
+    filter: invert(1);
+  }
+
+  .back-top:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 4px;
+  }
+
+  @media (max-width: 768px) {
+    .back-top {
+      display: none;
+    }
+  }
+</style>

src/components/BaseFooter.astro

@@ -1,28 +1,46 @@
+---
+import { metadata } from "../consts";
+
+const year = new Date().getFullYear();
+---
+
+<footer>
+  <div class="content">
+    <span>© 2026 {metadata.siteTitle}</span>
+    <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">
+      备案号：鄂ICP备2023000060号-2
+    </a>
+  </div>
+</footer>
+
+
 <style>
   footer {
-    background-color: #1a1a1a;
+    background: #22252b;
     height: 70px;
     overflow: hidden;
     flex-shrink: 0;
+    box-shadow: var(--shadow);
   }
 
   .content {
-    color: aliceblue;
     max-width: var(--layout-width);
     margin: 0 auto;
-    color: #f9f8f6;
+    color: #fff;
     display: flex;
     align-items: center;
     height: 100%;
     font-size: 14px;
     justify-content: center;
+    gap: 12px;
+  }
+
+  :global(.dark) footer {
+    background: var(--background);
+    box-shadow: none;
+  }
+
+  :global(.dark) .content {
+    color: #ffffff;
   }
 </style>
-
-<footer>
-  <div class="content">
-    <a href="https://beian.miit.gov.cn/#/Integrated/index">
-      备案号：鄂ICP备2023000060号-2
-    </a>
-  </div>
-</footer>

src/components/BaseHeader.astro

@@ -1,10 +1,37 @@
+---
+import {metadata} from "../consts";
+import ThemeIcon from './ThemeIcon.astro'
+import GitHubIcon from '@/assets/icon/github.svg?url'
+---
+
+<header>
+  <nav class="main-nav">
+    <h1>
+      <a href="/">{metadata.siteTitle}</a>
+    </h1>
+
+    <div class="main-nav-right">
+      <ul class="menu">
+        <li class="menu-item"><a href="/">首页</a></li>
+        <li class="menu-item"><a href="/archive">归档</a></li>
+        <li class="menu-item"><a target="_blank" href="https://git.ua42.com">
+          <img class="github-icon" src={GitHubIcon} alt="GitHub"/>
+        </a></li>
+        <!--<li class="menu-item"><a href="/">关于</a></li>-->
+      </ul>
+
+      <ThemeIcon/>
+    </div>
+  </nav>
+</header>
+
 <style>
   header {
     height: 60px;
     position: sticky;
     top: 0;
     z-index: 99999;
-    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
+    box-shadow: var(--shadow);
     flex-shrink: 0;
     background: #fff;
   }
@@ -13,7 +40,29 @@
     max-width: var(--layout-width);
     margin: 0 auto;
     height: 100%;
-    padding: 0 16px;
+    padding: 0 32px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .main-nav-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  @media (max-width: 768px) {
+    .main-nav {
+      padding: 16px;
+    }
+  }
+
+  .main-nav h1 {
+    user-select: none;
+    cursor: pointer;
+    font-size: 24px;
+    color: #000000;
   }
 
   .main-nav .menu {
@@ -22,22 +71,43 @@
     gap: 20px;
     height: 100%;
     align-items: center;
+    margin-right: 12px;
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .github-icon {
+    width: 18px;
+    height: 18px;
+    display: block;
   }
 
-  /* element: menu-item */
   .main-nav .menu-item a {
     text-decoration: none;
-    font-weight: bold;
   }
 
   .main-nav .menu-item a:hover {
+    color: #64748b;
+  }
+
+  :global(.dark) header {
+    background: var(--background);
+    box-shadow: none;
+  }
+
+  :global(.dark) .main-nav h1 {
+    color: #ffffff;
+  }
+
+  :global(.dark) .main-nav .menu-item a:hover {
+    color: rgba(255, 255, 255, .8);
+  }
+
+  :global(.dark) .github-icon {
+    filter: invert(1);
   }
 </style>
-
-<header>
-  <nav class="main-nav">
-    <ul class="menu">
-      <li class="menu-item"><a href="/">首页</a></li>
-    </ul>
-  </nav>
-</header>

src/components/IndexSidebar.astro

@@ -0,0 +1,152 @@
+---
+import Folder from "@/assets/icon/folder.png?url";
+import TagIcon from "@/assets/icon/tag.png?url";
+import type { CategoriesStats,Tag } from "@/types";
+import { createHttp } from "@/lib/request";
+const http = createHttp(Astro.request.headers);
+
+const { data: categories } =
+  await http.get<ApiResponse<CategoriesStats[]>>("categories/stats");
+
+const { data: tags } =
+  await http.get<ApiResponse<Tag[]>>("posts/tags");
+---
+
+<aside class="sidebar">
+  <div class="widget">
+    <h3 class="widget-title">
+      <img src={Folder} alt="Folder" />
+      文章分类
+    </h3>
+    <ul class="category-list">
+      {
+        categories.map((category) => (
+          <li>
+            <a
+              href={`/search?c=${encodeURIComponent(category.code)}`}
+              title={`${category.name} · ${category.post_count} 篇`}
+            >
+              {category.name}
+            </a>
+            <span class="count">{category.post_count}</span>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+
+  <div class="widget">
+    <h3 class="widget-title">
+      <img src={TagIcon} alt="Tag" />
+      标签云
+    </h3>
+    <div class="tag-cloud">
+      {
+        tags.map((tag) => (
+          <a
+            class="tag"
+            href={`/search?t=${encodeURIComponent(tag.code)}`}
+          >
+            {tag.name}
+          </a>
+        ))
+      }
+    </div>
+  </div>
+</aside>
+
+<style>
+  .sidebar {
+    flex-shrink: 0;
+    width: 300px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .widget {
+    background: var(--card-bg);
+    border-radius: 12px;
+    box-shadow: var(--shadow);
+    padding: 22px;
+  }
+
+  .widget-title {
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    gap: 8px;
+  }
+
+  .widget-title img {
+    width: 18px;
+    height: 18px;
+  }
+
+  /* 分类 & 标签云 */
+  .category-list {
+    list-style: none;
+  }
+
+  .category-list li {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 4px;
+    font-size: 14px;
+    border-bottom: 1px dashed var(--border);
+  }
+
+  .category-list li:last-child {
+    border-bottom: none;
+  }
+
+  .category-list a:hover {
+    color: #4f6df5;
+  }
+
+  .category-list .count {
+    color: var(--text-secondary);
+    font-size: 13px;
+  }
+
+  .tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .tags {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .tag {
+    font-size: 12px;
+    color: var(--tag-text);
+    background: var(--tag-bg);
+    padding: 3px 10px;
+    border-radius: 999px;
+    transition: background 0.2s;
+  }
+
+  .tag:hover {
+    background: var(--tag-hover-bg);
+  }
+
+  @media (max-width: 860px) {
+    .sidebar {
+      width: 100%;
+    }
+  }
+
+  @media (max-width: 860px) {
+    .sidebar {
+      gap: 16px;
+    }
+  }
+</style>

src/components/IndexView.astro

@@ -0,0 +1,46 @@
+---
+import type {Post} from "@/types/post";
+import IndexSidebar from "@/components/IndexSidebar.astro";
+import PostList from "@/components/Post/List.astro";
+import Pagination from "@/components/Post/Pagination.astro";
+
+interface Props {
+  posts: Post[];
+  page: number;
+  totalPage: number;
+}
+
+const {posts, page, totalPage} = Astro.props;
+---
+
+<div class="page-content">
+  <div class="container">
+    <div class="post-container">
+      <PostList posts={posts}/>
+      <Pagination page={page} totalPage={totalPage}/>
+    </div>
+    <IndexSidebar/>
+  </div>
+</div>
+
+<style>
+  .container {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    gap: 28px;
+  }
+
+  .post-container {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    flex: 1;
+  }
+
+  @media (max-width: 860px) {
+    .container {
+      flex-direction: column;
+    }
+  }
+</style>

src/components/LazyImage.astro

@@ -0,0 +1,131 @@
+---
+interface Props {
+  src: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  class?: string;
+}
+
+const {
+  src,
+  alt = "",
+  width,
+  height,
+  class: className = ""
+} = Astro.props;
+---
+
+<div
+  class={`lazy-image ${className}`}
+  data-src={src}
+  style={`aspect-ratio:${width}/${height}`}
+>
+  <div class="placeholder"></div>
+
+  <img
+    class="real-image"
+    alt={alt}
+    width={width}
+    height={height}
+    loading="lazy"
+    decoding="async"
+  />
+</div>
+
+
+<style>
+.lazy-image {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.lazy-image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.placeholder {
+  position: absolute;
+  inset: 0;
+  background: #f3f4f6;
+  background-image: linear-gradient(
+    90deg,
+    #f3f4f6 0%,
+    #e5e7eb 50%,
+    #f3f4f6 100%
+  );
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}
+
+.real-image {
+  opacity: 0;
+  transition: opacity .35s ease;
+}
+
+.real-image.loaded {
+  opacity: 1;
+}
+</style>
+
+
+<script>
+function initLazyImages() {
+  const images = document.querySelectorAll(".lazy-image");
+
+  const observer = new IntersectionObserver(
+    entries => {
+      entries.forEach(entry => {
+
+        if (!entry.isIntersecting) return;
+
+        const container = entry.target as HTMLElement;
+        const img = container.querySelector(
+          ".real-image"
+        ) as HTMLImageElement;
+
+        const src = container.dataset.src;
+
+        if (!src) return;
+
+        img.src = src;
+
+        img.onload = () => {
+          img.classList.add("loaded");
+
+          const placeholder =
+            container.querySelector(".placeholder");
+
+          placeholder?.remove();
+        };
+
+        observer.unobserve(container);
+      });
+    },
+    {
+      rootMargin: "300px"
+    }
+  );
+
+
+  images.forEach(img => observer.observe(img));
+}
+
+
+initLazyImages();
+</script>

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>

src/components/Post/Item.astro

@@ -0,0 +1,185 @@
+---
+import type {Post} from '@/types';
+import Eye from "@/assets/icon/eye.png?url";
+import Folder from "@/assets/icon/folder.png?url";
+import Calendar from "@/assets/icon/calendar.png?url";
+import LazyImage from "@/components/LazyImage.astro";
+import {formatDatetime} from "@/lib/format.ts";
+
+interface Props {
+  post: Post
+}
+
+const {post} = Astro.props;
+const published_at = formatDatetime(post.published_at, 'YYYY-MM-DD')
+---
+
+<a href={`/post/${post.slug}`}>
+  <article class="post-card">
+    <div class="post-cover">
+      <LazyImage src={post.cover} alt={post.title}/>
+    </div>
+    <div class="post-body">
+      <div class="post-meta">
+                <span>
+                  <img src={Calendar} alt="Calendar"/>
+                  {published_at}
+                </span>
+        <span>
+                  <img src={Folder} alt="Folder"/>
+          {post.category_name}
+                </span>
+        <span>
+                  <img src={Eye} alt="Eye"/>
+          {post.view_count}
+                </span>
+      </div>
+      <h3 class="post-title">
+        {post.title}
+      </h3>
+      <div class="post-summary">
+        {post.summary}
+      </div>
+      <div class="tags">
+        {post.tags.map(tag =>
+          <div class="tag">{tag.name}</div>)}
+      </div>
+    </div>
+  </article>
+</a>
+
+<style>
+  .post-card {
+    background: var(--card-bg);
+    border-radius: 12px;
+    box-shadow: var(--shadow);
+    padding: 16px;
+    transition: transform 0.2s, box-shadow 0.2s;
+    display: flex;
+    gap: 22px;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .post-card:hover {
+      transform: translateY(-3px);
+      box-shadow: var(--shadow-hover);
+    }
+  }
+
+  .post-cover {
+    flex-shrink: 0;
+    width: 160px;
+    height: 100px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 40px;
+    color: #fff;
+    overflow: hidden;
+  }
+
+  .post-body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .post-meta {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-bottom: 6px;
+    display: flex;
+    gap: 14px;
+    flex-wrap: wrap;
+  }
+
+  .post-meta span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .post-meta span img {
+    width: 14px;
+    height: 14px;
+    display: block;
+  }
+
+  .post-title {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 8px;
+    line-height: 1.4;
+  }
+
+  .post-summary {
+    font-size: 14px;
+    color: var(--text-secondary);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    margin-bottom: 12px;
+  }
+
+  .tags {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .tag {
+    font-size: 12px;
+    color: var(--tag-text);
+    background: var(--tag-bg);
+    padding: 3px 10px;
+    border-radius: 999px;
+    transition: background 0.2s;
+  }
+
+  .tag:hover {
+    background: var(--tag-hover-bg);
+  }
+
+  @media (max-width: 860px) {
+    .post-card {
+      padding: 16px;
+      gap: 12px;
+    }
+
+    .post-cover {
+      width: 128px;
+      height: 80px;
+    }
+
+    .post-title {
+      font-size: 18px;
+    }
+
+    .post-meta {
+      gap: 8px;
+      font-size: 12px;
+    }
+  }
+
+  @media (max-width: 560px) {
+    .post-card {
+      padding: 12px;
+    }
+
+    .post-title {
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+
+    .post-meta {
+      gap: 6px;
+      font-size: 12px;
+    }
+
+    .post-summary {
+      font-size: 12px;
+      margin-bottom: 6px;
+    }
+  }
+</style>

src/components/Post/List.astro

@@ -0,0 +1,37 @@
+---
+import type {Post} from "@/types/post";
+import PostItem from '@/components/Post/Item.astro'
+
+interface Props {
+  posts: Post[]
+}
+
+const {posts} = Astro.props
+---
+
+<section class="section">
+  <div class="post-list">
+    {posts.map(post => (
+      <PostItem post={post}/>
+    ))}
+  </div>
+</section>
+
+<style>
+  .section {
+    flex: 1;
+    height: 100%;
+  }
+
+  .post-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  @media (max-width: 860px){
+    .post-list{
+      gap: 12px;
+    }
+  }
+</style>

src/components/Post/Pagination.astro

@@ -0,0 +1,67 @@
+---
+interface Props {
+  page: number
+  totalPage: number
+}
+
+const {page, totalPage} = Astro.props
+---
+
+<!--分页器-->
+{totalPage > 1 &&
+<nav class="pagination" aria-label="分页">
+  {page > 1 ? <a href={`/page/${page - 1}`} class="link">« 上一页</a> : <span class="link disabled">« 上一页</span>}
+  {Array.from({length: totalPage}).map((_, index) => {
+    if (page === index + 1) {
+      return <span class="link current">{index + 1}</span>
+    }
+    return <a class="link" href={`/page/${index + 1}`}>{index + 1}</a>
+  })}
+  {page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页 »</a> :
+    <span class="link disabled">下一页 »</span>}
+</nav>}
+
+<style>
+  /* ========== 分页 ========== */
+  .pagination {
+    width: 100%;
+    text-align: center;
+    white-space: nowrap;
+    overflow-x: auto;
+  }
+
+  .link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 38px;
+    height: 38px;
+    padding: 0 12px;
+    border-radius: 8px;
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    font-size: 14px;
+    color: var(--text-secondary);
+    transition: all 0.2s;
+    white-space: nowrap;
+    margin-left: 8px;
+  }
+
+  .link:first-child {
+    margin-left: 0;
+  }
+
+  .link:hover,
+  .link.current {
+    background: var(--primary);
+    border-color: var(--primary);
+    color: #fff;
+  }
+
+  .link.disabled {
+    color: var(--text-secondary);
+    background: var(--card-bg);
+    border-color: var(--border);
+    cursor: not-allowed;
+  }
+</style>

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>
-  );
-}

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>

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>

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>
-    </>
-  );
-}

src/components/ThemeIcon.astro

@@ -0,0 +1,75 @@
+---
+---
+<div class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
+  <svg aria-hidden="true" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path class="sun" fill-rule="evenodd"
+          d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
+    <path class="moon" fill-rule="evenodd"
+          d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
+  </svg>
+</div>
+
+<style>
+  #themeToggle {
+    border: 0;
+    background: none;
+    user-select: none;
+  }
+
+  .theme-toggle {
+    display: flex;
+    align-items: center;
+  }
+
+  .sun {
+    fill: black;
+  }
+
+  .moon {
+    fill: transparent;
+  }
+
+  :global(.dark) .sun {
+    fill: transparent;
+  }
+
+  :global(.dark) .moon {
+    fill: white;
+  }
+</style>
+
+<script is:inline>
+  const meta = document.querySelector('meta[name="theme-color"]');
+
+  const theme = (() => {
+    const localStorageTheme = localStorage?.getItem("theme") ?? '';
+    if (['dark', 'light'].includes(localStorageTheme)) {
+      return localStorageTheme;
+    }
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    return 'light';
+  })();
+
+  if (theme === 'light') {
+    document.documentElement.classList.remove('dark');
+    meta.setAttribute('content', '#ffffff');
+  } else {
+    document.documentElement.classList.add('dark');
+    meta.setAttribute('content', '#0a0a0a');
+  }
+
+  window.localStorage.setItem('theme', theme);
+
+  const handleToggleClick = () => {
+    const element = document.documentElement;
+    element.classList.toggle("dark");
+
+    const isDark = element.classList.contains("dark");
+    meta.setAttribute('content', isDark ? '#0a0a0a' : '#ffffff');
+    localStorage.setItem("theme", isDark ? "dark" : "light");
+  }
+
+  document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
+</script>

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>
-  );
-}

src/consts.ts

@@ -1,7 +1,5 @@
 export const metadata = {
-  siteTitle: "42的博客",
+  site: "https://ua42.com",
-  siteDescription: "分享技术、思考与生活",
+  siteTitle: "Uroboros",
-  siteUrl: "https://ua42.com",
+  postPageSize: 6
-  author: "42",
-  postsPerPage: 10,
 }

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 };

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 功能。

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. 暗色模式支持
-
-开始你的阅读之旅吧！

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>

src/layouts/Layout.astro

@@ -1,80 +1,42 @@
 ---
-import "@/styles/base.css";
+import "@/styles/global.css";
 
 import BaseHeader from "@/components/BaseHeader.astro";
 import BaseFooter from "@/components/BaseFooter.astro";
+import BackTop from "@/components/BackTop.astro";
 
 import { metadata } from "@/consts.ts";
 const { siteTitle } = metadata;
+
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const { title, description } = Astro.props;
+const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
 ---
 
 <!doctype html>
-<html lang="en">
+<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.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="generator" content={Astro.generator} />
-    <title>{siteTitle}</title>
+    <meta name="description" content={description} />
+    <meta name="theme-color" content="#ffffff" />
+    <title>{pageTitle}</title>
   </head>
   <body>
     <BaseHeader />
-    <main>
+    <main class="main">
-      <div class="grid-background"></div>
       <slot />
     </main>
     <BaseFooter />
+    <BackTop />
   </body>
 </html>
-
-<style>
-  html,
-  body {
-    width: 100%;
-    height: 100%;
-  }
-
-  body {
-    display: flex;
-    flex-direction: column;
-  }
-
-  main {
-    flex: 1;
-    max-width: var(--layout-width);
-    width: 100%;
-    margin: 0 auto;
-    padding: 16px;
-    position: relative;
-  }
-
-  .grid-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    background-color: #ffffff;
-    opacity: 0.3;
-    background-image: linear-gradient(#d7edfb 2px, transparent 2px),
-      linear-gradient(90deg, #d7edfb 2px, transparent 2px),
-      linear-gradient(#d7edfb 1px, transparent 1px),
-      linear-gradient(90deg, #d7edfb 1px, #ffffff 1px);
-    background-size:
-      50px 50px,
-      50px 50px,
-      10px 10px,
-      10px 10px;
-    background-position:
-      -2px -2px,
-      -2px -2px,
-      -1px -1px,
-      -1px -1px;
-  }
-</style>

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>

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);
+};

src/lib/highlight.js

@@ -0,0 +1,85 @@
+import {JSDOM} from 'jsdom'
+import {createHighlighter} from 'shiki'
+
+const highlighter = await createHighlighter({
+  themes: ['github-dark-dimmed'],
+  langs: [
+    "bash",
+    "json",
+    "yaml",
+    "xml",
+    "html",
+    "css",
+    "scss",
+    "javascript",
+    "typescript",
+    "jsx",
+    "tsx",
+    "vue",
+    "markdown",
+    "sql",
+    "graphql",
+    "python",
+    "java",
+    "go",
+    "rust",
+    "c",
+    "cpp",
+    "csharp",
+    "php",
+    "ruby",
+    "kotlin",
+    "swift",
+    "dockerfile",
+    "nginx"
+  ]
+})
+
+const resolveLang = (lang) => {
+  const supported = highlighter.getLoadedLanguages?.() || []
+  if (!lang) return 'text'
+  if (supported.includes(lang)) return lang
+  return 'text'
+}
+
+export const highlightHtmlWithJsdom = async (rawHtml) => {
+  const dom = new JSDOM(rawHtml)
+  const document = dom.window.document
+
+  const codeElements = document.querySelectorAll('pre code')
+
+  for (const codeEl of codeElements) {
+    const preEl = codeEl.parentElement
+    if (!preEl || preEl.tagName !== 'PRE') continue
+
+    const codeContent = codeEl.textContent?.trim() || ''
+
+    // 提取语言
+    let lang = 'text'
+    for (const cls of codeEl.classList) {
+      if (cls.startsWith('language-')) {
+        lang = cls.slice('language-'.length)
+        break
+      }
+    }
+
+    lang = resolveLang(lang)
+
+    // 生成高亮 HTML
+    const highlighted = highlighter.codeToHtml(codeContent, {
+      lang,
+      theme: 'github-dark-dimmed',
+    })
+
+    // 替换 DOM
+    const wrapper = document.createElement('div')
+    wrapper.innerHTML = highlighted.trim()
+
+    const newNode = wrapper.firstChild
+    if (newNode && preEl.parentNode) {
+      preEl.parentNode.replaceChild(newNode, preEl)
+    }
+  }
+
+  return dom.serialize()
+}

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();

src/pages/404.astro

@@ -0,0 +1,29 @@
+---
+import Layout from "@/layouts/Layout.astro";
+---
+
+<Layout title="404">
+  <div class="not-found">
+    <h1>404 Not Found</h1>
+    <a class="back-home" href="/">返回首页</a>
+  </div>
+</Layout>
+
+<style>
+  .not-found {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .back-home {
+    background: black;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 12px;
+  }
+</style>

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>

src/pages/archive.astro

@@ -0,0 +1,198 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import type {Archive} from "@/types/archive";
+import {createHttp} from "@/lib/request";
+
+const http = createHttp(Astro.request.headers);
+
+const {data} = await http.get<ApiResponse<Archive>>("posts/archives");
+---
+
+<Layout title="归档">
+  <div class="page-content">
+    <div class="archive">
+      {
+        data.map((year) => (
+          <div class="archive-year">
+            <h2 class="year-title">
+              <span class="year-badge">{year.year}</span>
+              <span class="year-count">共 {year.total} 篇</span>
+            </h2>
+            <div>
+              {year.list.map((month) => (
+                <div class="month-group">
+                  <h3 class="month-title">{month.month} 月</h3>
+                  <ul class="post-list">
+                    {month.list.map((post) => (
+                      <li class="post-item">
+                        <span class="post-date">
+                          {post.published_at_display}
+                        </span>
+                        <a href={`/post/${post.slug}`}>{post.title}</a>
+                        <span class="post-cat">{post.category_name}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</Layout>
+
+<style>
+  :root {
+    --border: #e5e7eb;
+    --radius: 12px;
+    --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  }
+
+  .archive {
+    width: 100%;
+    max-width: 860px;
+    margin: 0 auto;
+  }
+
+  .archive-year {
+    margin-bottom: 40px;
+  }
+
+  .year-title {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 18px;
+  }
+
+  .year-title .year-badge {
+    background: linear-gradient(135deg, #4f6df5, #7b5cf0);
+    color: #fff;
+    padding: 8px 16px;
+    border-radius: 999px;
+    font-size: 20px;
+  }
+
+  .year-title .year-count {
+    font-size: 13px;
+    color: var(--text-secondary);
+    font-weight: 400;
+  }
+
+  .year-title::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--border);
+  }
+
+  /* 月份分组 */
+  .month-group {
+    position: relative;
+    padding-left: 28px;
+    margin-bottom: 24px;
+  }
+
+  /* 时间轴竖线 */
+  .month-group::before {
+    content: "";
+    position: absolute;
+    left: 7px;
+    top: 8px;
+    bottom: 0;
+    width: 2px;
+    background: var(--border);
+  }
+
+  .month-title {
+    position: relative;
+    font-size: 17px;
+    font-weight: 700;
+    color: var(--primary);
+    margin-bottom: 10px;
+  }
+
+  :global(.dark) .month-title{
+    color: inherit;
+  }
+
+  /* 月份节点圆点 */
+  .month-title::before {
+    content: "";
+    position: absolute;
+    left: -26px;
+    top: 8px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--primary);
+    box-shadow: 0 0 0 3px var(--tag-bg);
+  }
+
+  .post-list {
+    list-style: none;
+    background: var(--card-bg);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    overflow: hidden;
+  }
+
+  .post-item {
+    display: flex;
+    align-items: baseline;
+    gap: 14px;
+    padding: 18px 20px;
+    border-bottom: 1px solid var(--border);
+    transition: background 0.2s;
+  }
+
+  .post-item:last-child {
+    border-bottom: none;
+  }
+
+  .post-item:hover {
+    background: #f9faff;
+  }
+
+  :global(.dark) .post-item:hover {
+    background: none;
+  }
+
+  .post-date {
+    flex-shrink: 0;
+    font-size: 13px;
+    color: var(--text-secondary);
+    font-variant-numeric: tabular-nums;
+    width: 52px;
+  }
+
+  .post-item a {
+    flex: 1;
+    min-width: 0;
+    font-size: 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .post-item a:hover {
+    color: var(--primary);
+  }
+
+  :global(.dark) .post-item a:hover {
+    color: inherit;
+  }
+
+  .post-cat {
+    flex-shrink: 0;
+    font-size: 12px;
+    color: var(--primary);
+    background: var(--tag-bg);
+    padding: 2px 10px;
+    border-radius: 999px;
+  }
+</style>

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>

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>

src/pages/embed/gitea.astro

@@ -0,0 +1,140 @@
+---
+const noindex = true;
+import {metadata} from '@/consts.ts'
+---
+
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8"/>
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+  />
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
+  <meta name="generator" content={Astro.generator}/>
+  <title>Gitea 入口</title>
+  <meta name="theme-color" content="#ffffff"/>
+  <meta name="robots" content="noindex, nofollow">
+  <style>
+    @import "modern-normalize";
+
+    :root {
+      --bg: #f6f7f9;
+      --card-bg: #ffffff;
+      --border: #e5e7eb;
+      --text-color: #2b2f36;
+      --text-secondary: #6b7280;
+      --primary: #4f6df5;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background: var(--bg);
+      color: var(--text-color);
+      font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .page-container {
+      height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 24px 24px 24px 24px;
+    }
+
+    .gitea-card {
+      width: 100%;
+      max-width: 520px;
+      background: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      overflow: hidden;
+    }
+
+    .gitea-card__title {
+      padding: 14px 20px;
+      font-size: 15px;
+      font-weight: 600;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .gitea-content {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .gitea-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 13px 20px;
+      font-size: 14px;
+    }
+
+    .gitea-item + .gitea-item {
+      border-top: 1px solid var(--border);
+    }
+
+    .gitea-item:hover {
+      background: #fafbfc;
+    }
+
+    .gitea-item__label {
+      color: var(--text-secondary);
+    }
+
+    .gitea-item__link {
+      color: var(--primary);
+      text-decoration: none;
+      white-space: nowrap;
+    }
+
+    .gitea-item__link:hover {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+<div class="page-container">
+  <div class="gitea-card">
+    <div class="gitea-card__title">常用入口</div>
+    <div class="gitea-content">
+      <div class="gitea-item">
+        <span class="gitea-item__label">博客地址</span>
+        <a class="gitea-item__link" target="_blank" href="https://ua42.com">点击访问</a>
+      </div>
+
+      <div class="gitea-item">
+        <span class="gitea-item__label">博客管理后台(支持游客查看)</span>
+        <a class="gitea-item__link" target="_blank" href="https://admin.ua42.com">点击访问</a>
+      </div>
+
+      <div class="gitea-item">
+        <span class="gitea-item__label">仓库地址</span>
+        <a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin">点击访问</a>
+      </div>
+
+      <div class="gitea-item">
+        <span class="gitea-item__label">博客服务端仓库</span>
+        <a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin/blog-server">点击访问</a>
+      </div>
+
+      <div class="gitea-item">
+        <span class="gitea-item__label">博客服务端 API文档</span>
+        <a class="gitea-item__link" target="_blank" href="https://dev.ua42.com/docs/server-documentation.html">点击访问</a>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>
+

src/pages/index.astro

@@ -1,295 +1,25 @@
 ---
-import BaseLayout from '@/layouts/BaseLayout.astro';
+import Layout from "@/layouts/Layout.astro";
-import { getCollection } from 'astro:content';
+import IndexView from "@/components/IndexView.astro";
-import ArticleCard from '@/components/ArticleCard.astro';
+import type { Post } from "@/types/post";
-import SiteHeader from '@/components/SiteHeader.astro';
+import { createHttp } from "@/lib/request";
+import { metadata } from "@/consts.ts";
 
-const posts = await getCollection('posts', ({ data }) => !data.draft);
+const http = createHttp(Astro.request.headers);
-const sortedPosts = posts.sort((a, b) =>
-  b.data.pubDate.getTime() - a.data.pubDate.getTime()
-);
 
-// 获取所有标签
+const { list, total } = await http.get<ApiPageResponse<Post>>("posts", {
-const allTags = [...new Set(posts.flatMap(post => post.data.tags))];
+  searchParams: {
-const topTags = allTags.slice(0, 8);
+    page: 1,
+    page_size: metadata.postPageSize,
+  },
+});
+const totalPage = Math.ceil(total / metadata.postPageSize);
 ---
 
-<BaseLayout>
+<Layout description="天若有情天亦老，人间正道是沧桑。" title="博客首页">
-  <div class="layout">
+  <IndexView
-    <SiteHeader currentPath="/" />
+    posts={list}
-
+    page={1}
-    <main class="main">
+    totalPage={totalPage}
-      <div class="hero">
+  />
-        <div class="hero-content">
+</Layout>
-          <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>

src/pages/page/[...page].astro

@@ -0,0 +1,36 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import type { Post } from "@/types/post";
+import { createHttp } from "@/lib/request";
+import { metadata } from "@/consts.ts";
+import IndexView from "@/components/IndexView.astro";
+
+const { page } = Astro.params;
+
+if (isNaN(Number(page))) {
+  return Astro.redirect("/");
+}
+
+const http = createHttp(Astro.request.headers);
+
+const { list, total } = await http.get<ApiPageResponse<Post>>("posts", {
+  searchParams: {
+    page,
+    page_size: metadata.postPageSize,
+  },
+});
+
+const totalPage = Math.ceil(total / metadata.postPageSize);
+
+if (totalPage < Number(page)) {
+  return Astro.redirect("/404");
+}
+---
+
+<Layout description="天若有情天亦老，人间正道是沧桑。" title="博客首页">
+  <IndexView
+    posts={list}
+    page={Number(page)}
+    totalPage={totalPage}
+  />
+</Layout>

src/pages/post/[...slug].astro

@@ -0,0 +1,212 @@
+---
+import "@/styles/github-markdown.css";
+import "@/styles/github-markdown-reset.css";
+import "photoswipe/dist/photoswipe.css";
+
+import Layout from "@/layouts/Layout.astro";
+import { createHttp } from "@/lib/request.ts";
+import { highlightHtmlWithJsdom } from "@/lib/highlight.js";
+import { formatDatetime } from "@/lib/format.ts";
+import type { Post } from "@/types";
+
+const { slug } = Astro.params;
+
+let data: Post;
+
+const http = createHttp(Astro.request.headers);
+
+try {
+  const res = await http.get<ApiResponse<Post>>(`posts/${slug}`);
+  data = res.data;
+} catch (error) {
+  return Astro.redirect("/404");
+}
+const content = await highlightHtmlWithJsdom(data.content);
+const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
+---
+
+<Layout title={data.title} description={data.summary}>
+  <div class="page-content">
+    <div class="post">
+      <h1 class="post-title">{data.title}</h1>
+
+      <div class="post-meta">
+        <div class="published-at">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-calendar-days-icon lucide-calendar-days"
+          >
+            <path d="M8 2v4"></path>
+            <path d="M16 2v4"></path>
+            <rect width="18" height="18" x="3" y="4" rx="2"></rect>
+            <path d="M3 10h18"></path>
+            <path d="M8 14h.01"></path>
+            <path d="M12 14h.01"></path>
+            <path d="M16 14h.01"></path>
+            <path d="M8 18h.01"></path>
+            <path d="M12 18h.01"></path>
+            <path d="M16 18h.01"></path>
+          </svg>
+          {published_at}
+        </div>
+
+        <div class="post-view">
+          <svg
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="5122"
+          >
+            <path
+              d="M509.618 415.795c-42.695 0-77.253 38.372-77.253 85.738 0 47.352 34.558 86.22 77.253 86.22 42.667 0 76.716-38.867 76.716-86.22 0-47.352-34.049-85.738-76.716-85.738z m1.9-177.9c-211.548 0-383.265 159.859-383.265 274.587 0 114.727 171.717 273.624 383.266 273.624 212.484 0 384.227-162.522 384.227-273.624 0-111.088-171.743-274.587-384.227-274.587z m-1.446 452.006c-89.7 0-162.134-81.71-162.134-181.903 0-101.157 72.435-182.397 162.134-182.397 90.183 0 163.1 81.241 163.1 182.397 0 100.206-72.917 181.903-163.1 181.903z"
+              p-id="5123"></path>
+          </svg>
+          {data.view_count}
+        </div>
+      </div>
+
+      <div class="markdown-body" data-color-mode="dark" set:html={content} />
+    </div>
+  </div>
+</Layout>
+
+<style>
+  .post {
+    background: #fff;
+    border-radius: 12px;
+    overflow: auto;
+    padding: 24px;
+    box-shadow: var(--shadow);
+  }
+
+  .post-title {
+    margin-bottom: 16px;
+    font-size: 32px;
+  }
+
+  .post-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+
+  .published-at {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #6b7280;
+    font-size: 14px;
+  }
+
+  .published-at svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  :global(.markdown-body img) {
+    object-fit: contain;
+    height: auto !important;
+  }
+
+  .post-view {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: #6b7280;
+    padding-right: 12px;
+    font-size: 14px;
+  }
+
+  .post-view svg {
+    width: 20px;
+    height: 20px;
+    fill: currentColor; /* 让填充跟随 color */
+    stroke: currentColor; /* 让描边也跟随 color */
+  }
+
+  @media (max-width: 768px) {
+    .post-title {
+      font-size: 20px;
+    }
+
+    .post {
+      padding: 12px;
+    }
+  }
+
+  :global(.dark) .post {
+    background: var(--card-bg);
+    box-shadow: none;
+    border: none;
+  }
+</style>
+
+<script>
+  import PhotoSwipeLightbox from "photoswipe/lightbox";
+
+  const init = async () => {
+    const post = document.querySelector(".post")!;
+    const images = Array.from(post.querySelectorAll("img"));
+
+    const waitImageLoaded = (img: HTMLImageElement) => {
+      if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
+        return Promise.resolve();
+      }
+
+      return new Promise<void>((resolve) => {
+        img.addEventListener("load", () => resolve(), { once: true });
+        img.addEventListener("error", () => resolve(), { once: true });
+      });
+    };
+
+    await Promise.all(
+      images.map(async (img) => {
+        if (img.closest("a")) return;
+
+        await waitImageLoaded(img);
+
+        const link = document.createElement("a");
+
+        link.href = img.currentSrc || img.src;
+        link.target = "_blank";
+        link.rel = "noreferrer";
+        link.dataset.pswpWidth = String(img.naturalWidth || img.width || 1200);
+        link.dataset.pswpHeight = String(
+          img.naturalHeight || img.height || 800,
+        );
+
+        img.parentNode?.insertBefore(link, img);
+        link.appendChild(img);
+      }),
+    );
+
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: ".post",
+      children: "a[data-pswp-width]",
+      pswpModule: () => import("photoswipe"),
+
+      padding: {
+        top: 48,
+        right: 24,
+        bottom: 48,
+        left: 24,
+      },
+      bgOpacity: 0.5,
+      tapAction: "close",
+      bgClickAction: "close",
+    });
+
+    lightbox.init();
+  };
+
+  init();
+</script>

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>

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>`,
-  });
-}

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',
-    },
-  });
-};

src/pages/search.astro

@@ -0,0 +1,214 @@
+---
+import Layout from '@/layouts/Layout.astro'
+import type {CategoriesStats, Post, Tag} from "@/types";
+import {createHttp} from "@/lib/request.ts";
+import PostList from "@/components/Post/List.astro";
+
+const http = createHttp(Astro.request.headers);
+
+const searchParams = Astro.url.searchParams;
+const t = searchParams.get("t") ?? "";
+const c = searchParams.get("c") ?? "";
+
+const [{data: categories}, {data: tags}] = await Promise.all([
+  http.get<ApiResponse<CategoriesStats[]>>("categories/stats"),
+  http.get<ApiResponse<Tag[]>>("posts/tags"),
+] as const)
+
+let f_count = 0
+const findCategory = categories.find(item => {
+  if (item.code === c) {
+    f_count++
+  }
+  return item.code === c
+})
+
+const findTag = tags.find(item => {
+  if (item.code === t) {
+    f_count++
+  }
+  return item.code === t
+})
+
+// 搜索条件必须匹配 不允许非法值
+const {data:posts} = await http.get<ApiResponse<Post[]>>("posts/search", {
+  searchParams: {
+    category_code: findCategory?.code ?? "",
+    tag_code: findTag?.code ?? "",
+  }
+})
+
+const count = posts.length
+
+const pageTitle =
+  f_count === 0 ? "所有文章" : [findCategory?.name, findTag?.name]
+    .filter(Boolean)
+    .join(" · ")
+
+const pageDescription =
+  f_count === 0
+    ? "浏览全部文章，按分类和标签筛选你感兴趣的内容。"
+    : `浏览${pageTitle}相关文章，共 ${count} 篇。`
+
+const buildSearchUrl = (type: 'category' | 'tag', code: string) => {
+  const params = new URLSearchParams()
+
+  if (findTag?.code) {
+    params.set('t', findTag.code)
+  }
+
+  if (findCategory?.code) {
+    params.set('c', findCategory.code)
+  }
+
+  if (type === 'category') {
+    if (c === code) {
+      params.delete('c')
+    } else {
+      params.set('c', code)
+    }
+  } else {
+    if (t === code) {
+      params.delete('t')
+    } else {
+      params.set('t', code)
+    }
+  }
+
+  const query = params.toString()
+
+  return query ? `/search?${query}` : '/search'
+}
+---
+<Layout title={pageTitle} description={pageDescription}>
+  <div class="page-content search-page">
+    <header class="search-header">
+      <h1 class="search-title">
+        {pageTitle}
+      </h1>
+      <div class="search-count">共 <span>{count}</span> 篇</div>
+    </header>
+
+    <div class="filter-group">
+      <div class="nav-group">
+        <div class="nav-label">分类:</div>
+        <div class="nav-chips">
+          {categories.map(item =>
+            <a href={buildSearchUrl("category", item.code)}
+               class={item.code === findCategory?.code ? 'chip active' : 'chip'}>{item.name}</a>)}
+        </div>
+      </div>
+
+      <div class="nav-group">
+        <div class="nav-label">标签:</div>
+        <div class="nav-chips">
+          {tags.map(item =>
+            <a href={buildSearchUrl("tag", item.code)}
+               class={item.code === findTag?.code ? 'chip active' : 'chip'}>{item.name}</a>)}
+        </div>
+      </div>
+    </div>
+
+    {posts.length > 0 ?
+      <PostList posts={posts}/> :
+      <div class="no-result">没有找到相关文章</div>}
+  </div>
+</Layout>
+
+
+<style>
+  .search-page {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    margin: 0 auto;
+    max-width: 860px;
+    width: 100%;
+  }
+
+  .search-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+    background: var(--card-bg);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    padding: 16px 20px;
+  }
+
+  .search-count {
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .search-count span {
+    color: var(--tag-text);
+  }
+
+  .search-title {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  .filter-group {
+    background: var(--card-bg);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    padding: 14px 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+
+  .nav-group {
+    display: flex;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .nav-label {
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .nav-chips {
+    flex: 1;
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .chip {
+    color: var(--tag-text);
+    border-radius: 999px;
+    background: var(--tag-bg);
+    padding: 4px 8px;
+    font-size: 12px;
+    user-select: none;
+    transition: background 0.2s;
+    cursor: pointer;
+  }
+
+  .chip.active, .chip:hover {
+    background: #3b82f6;
+    color: white;
+  }
+
+  :global(.dark) .chip.active,
+  :global(.dark) .chip:hover {
+    background: #d1d5db;
+    color: black;
+  }
+
+  .no-result {
+    text-align: center;
+    font-size: 14px;
+    margin-top: 32px;
+    color: var(--text-secondary);
+  }
+</style>

src/pages/sitemap-pages.xml.ts

@@ -0,0 +1,33 @@
+import type {APIRoute} from 'astro';
+import {metadata} from "@/consts";
+
+const site = metadata.site
+
+const staticUrls = [
+  '',
+  '/archive',
+  '/search',
+];
+
+export const GET: APIRoute = async () => {
+  const urls = staticUrls
+    .filter((url, index, array) => {
+      return array.indexOf(url) === index;
+    });
+
+  const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+              ${urls.map((url) => `<url>
+                <loc>${site}${url}</loc>
+              </url>`
+  )
+    .join('\n')}
+</urlset>`;
+
+  return new Response(xml, {
+    status: 200,
+    headers: {
+      'Content-Type': 'application/xml; charset=utf-8',
+      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
+    },
+  });
+};

src/pages/sitemap-posts.xml.ts

@@ -0,0 +1,35 @@
+import type {APIRoute} from 'astro';
+import {metadata} from "@/consts";
+import {createHttp} from "@/lib/request.ts";
+import type {PostForSitemap} from "@/types";
+import dayjs from "dayjs";
+
+const site = metadata.site
+
+export const GET: APIRoute = async (context) => {
+  const http = createHttp(context.request.headers);
+
+  const {data} = await http.get<ApiResponse<PostForSitemap[]>>("posts/sitemap")
+
+  const urls = data
+    .filter((url, index, array) => {
+      return array.indexOf(url) === index;
+    });
+
+  const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+              ${urls.map((post) => `<url>
+                <loc>${site}/post/${post.slug}</loc>
+                <lastmod>${dayjs(post.updated_at || post.created_at).toISOString()}</lastmod>
+              </url>`
+  )
+    .join('\n')}
+</urlset>`;
+
+  return new Response(xml, {
+    status: 200,
+    headers: {
+      'Content-Type': 'application/xml; charset=utf-8',
+      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
+    },
+  });
+};

src/pages/sitemap.xml.ts

@@ -0,0 +1,21 @@
+import type {APIRoute} from 'astro';
+import {metadata} from "@/consts";
+
+const site = metadata.site
+
+export const GET: APIRoute = () => {
+  const xml = `<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <sitemap>
+    <loc>${site}/sitemap-pages.xml</loc>
+  </sitemap>
+  <sitemap>
+    <loc>${site}/sitemap-posts.xml</loc>
+  </sitemap>
+</sitemapindex>`;
+
+  return new Response(xml, {
+    headers: {
+      'Content-Type': 'application/xml; charset=utf-8',
+    },
+  });
+};

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>

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>

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;
-}
-

src/styles/css-reset.css

@@ -0,0 +1,10 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}

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;
-  }
-}

src/styles/github-markdown-reset.css

@@ -0,0 +1,18 @@
+.markdown-body pre code{
+    font-size: 1.1em;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+    border-bottom: none ;
+}
+
+@media (max-width: 768px) {
+  .markdown-body pre code{
+    font-size: inherit;
+  }
+}

src/styles/global.css

@@ -0,0 +1,64 @@
+@import "modern-normalize";
+@import "css-reset.css";
+
+:root {
+  --layout-width: 1080px;
+  --background: #f6f7f9;
+  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.10);
+  --card-bg: #ffffff;
+  --text-color: #2b2f36;
+  --text-secondary: #6b7280;
+  --border: #e5e7eb;
+  --primary: #4f6df5;
+  --tag-bg: #eef1fe;
+  --tag-text: #4f6df5;
+  --tag-hover-bg: #dfe6fd;
+}
+
+.dark {
+  --background: #0a0a0a;
+  --card-bg: #161b22;
+  --text-color: #ffffff;
+  --text-secondary: #e5e7eb;
+  --border: #e5e7eb;
+  --primary: #1e293b;
+  --tag-bg: #27272a;
+  --tag-text: #f3f4f6;
+  --tag-hover-bg: #334155;
+}
+
+html,
+body {
+  min-height: 100vh;
+  font-size: 16px;
+  background: var(--background);
+  color: var(--text-color);
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-content {
+  width: 100%;
+  max-width: var(--layout-width);
+  margin: 0 auto;
+  padding: 32px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 768px) {
+  .page-content {
+    padding: 16px;
+  }
+}

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;
-}

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;
-  }
-}

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;
-  }
-}

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[];

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
+}

src/types/index.ts

@@ -0,0 +1 @@
+export * from './post.ts'

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
 }

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',
-  });
-}

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;
-}

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} 分钟`;
-}

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}`,
-  }));
-}