feat: ai2

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

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

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

 *.tar
 *.gz
-
-.claude
--- a/.qoder/quests/blog-style-adjustment-and-feature-expansion.md
+++ b/.qoder/quests/blog-style-adjustment-and-feature-expansion.md
--- a/.qoder/quests/blog-style-optimization.md
+++ b/.qoder/quests/blog-style-optimization.md
--- a/.qoder/quests/personal-blog-design.md
+++ b/.qoder/quests/personal-blog-design.md
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,34 +0,0 @@
-# Project Scope Rules
-
-## 文件范围限制
-
-本项目根目录：
-
-./
-
-所有操作必须限制在当前项目目录内。
-
-禁止：
- 访问项目外文件
- 修改父级目录文件
- 创建项目外文件
- 修改用户目录中的其他内容
- 禁止访问服务端仓库
-
-## 修改规则
-
-修改前必须：
-1. 列出将修改的文件
-2. 说明修改原因
-3. 等待确认
-
-禁止修改：
-
-node_modules/
-.git/
-build/
-.env
-
-## 开发环境
-
-默认认为已经启动服务，端口为4321
--- a/IMPLEMENTATION.md
+++ b/IMPLEMENTATION.md
@@ -0,0 +1,166 @@
+# 个人博客实现总结
+
+## 项目概述
+
+基于设计文档成功实现了一个现代化、美观的个人博客系统,使用 Astro + SolidJS 技术栈。
+
+## 已实现功能
+
+### 核心页面
+- ✅ **首页**: Hero 区域 + 文章卡片列表
+- ✅ **文章详情页**: 完整的 Markdown 渲染和样式
+- ✅ **关于页面**: 个人简介、技能标签云、联系方式
+
+### 核心组件
+- ✅ **Layout**: 基础布局,支持自定义标题和描述
+- ✅ **BaseHeader**: 导航栏,包含主题切换功能
+- ✅ **BaseFooter**: 页脚,版权信息和社交链接
+- ✅ **ThemeToggle**: 明暗主题切换(SolidJS 组件)
+- ✅ **PostCard**: 文章卡片,带悬停效果
+- ✅ **Tag**: 彩色标签,自动配色
+
+### 设计系统
+- ✅ **CSS 变量**: 完整的色彩、字体、间距、阴影、圆角定义
+- ✅ **明暗主题**: 支持主题切换,保存到 localStorage
+- ✅ **响应式设计**: 适配移动端、平板和桌面
+- ✅ **动画过渡**: 统一的过渡效果
+
+### 内容管理
+- ✅ **Content Collections**: 使用 Astro 的类型安全内容管理
+- ✅ **示例文章**: 5 篇高质量示例博客文章
+- ✅ **Markdown 样式**: 完整的 Markdown 元素样式优化
+
+## 技术栈
+
+- **框架**: Astro 5.15.8
+- **UI 库**: SolidJS 1.9.10
+- **语言**: TypeScript
+- **包管理**: PNPM
+- **Node 版本**: 22.21.1 (Volta)
+
+## 项目结构
+
+```
+blog/
+├── src/
+│   ├── components/       # 组件
+│   │   ├── BaseHeader.astro
+│   │   ├── BaseFooter.astro
+│   │   ├── ThemeToggle.tsx
+│   │   ├── PostCard.astro
+│   │   └── Tag.astro
+│   ├── content/          # 内容
+│   │   ├── config.ts     # Content Collections 配置
+│   │   └── posts/        # 博客文章
+│   │       ├── welcome.md
+│   │       ├── css-variables.md
+│   │       ├── astro-introduction.md
+│   │       ├── typescript-best-practices.md
+│   │       └── responsive-design.md
+│   ├── layouts/          # 布局
+│   │   └── Layout.astro
+│   ├── pages/            # 页面路由
+│   │   ├── index.astro   # 首页
+│   │   ├── about.astro   # 关于页面
+│   │   └── posts/
+│   │       └── [...slug].astro  # 文章详情页
+│   ├── styles/           # 样式
+│   │   ├── base.css      # 设计系统
+│   │   └── reset.css
+│   └── consts.ts         # 配置常量
+├── astro.config.mjs      # Astro 配置
+└── package.json
+```
+
+## 设计特色
+
+### 视觉设计
+- **现代简约**: 简洁的设计语言,突出内容
+- **优雅配色**: 和谐的明暗双主题
+- **流畅交互**: 平滑的动画过渡
+- **渐变元素**: Hero 区域标题渐变效果
+
+### 用户体验
+- **快速加载**: 利用 Astro 的静态生成
+- **主题切换**: 支持明暗模式,跟随系统偏好
+- **响应式**: 完美适配各种设备
+- **易读排版**: 舒适的行高、字号和行宽
+
+### 技术亮点
+- **类型安全**: Content Collections 提供类型检查
+- **SEO 友好**: 正确的 meta 标签和语义化 HTML
+- **性能优化**: 预渲染静态页面
+- **可维护性**: 组件化设计,CSS 变量系统
+
+## 启动项目
+
+```bash
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm dev
+
+# 构建生产版本
+pnpm build
+
+# 预览构建结果
+pnpm preview
+```
+
+## 访问地址
+
+- 本地开发: http://localhost:4322
+- 首页: http://localhost:4322/
+- 关于: http://localhost:4322/about
+- 文章示例: http://localhost:4322/posts/welcome
+
+## 自定义配置
+
+编辑 `/src/consts.ts` 修改博客配置:
+
+```typescript
+export const metadata = {
+  siteTitle: "你的博客名称",
+  siteDescription: "你的博客描述",
+  author: "你的名字",
+  email: "your-email@example.com",
+  githubUrl: "https://github.com/yourusername",
+  // ... 更多配置
+}
+```
+
+## 添加新文章
+
+1. 在 `/src/content/posts/` 创建新的 `.md` 文件
+2. 添加 frontmatter:
+
+```markdown
+---
+title: "文章标题"
+date: 2024-11-21
+summary: "文章摘要"
+tags: ["标签1", "标签2"]
+---
+
+文章内容...
+```
+
+3. 文章会自动出现在首页列表
+
+## 主题定制
+
+修改 `/src/styles/base.css` 中的 CSS 变量:
+
+```css
+:root {
+  --accent-color: #0066FF;  /* 主题色 */
+  --text-h1: 36px;          /* 标题字号 */
+  --space-md: 16px;         /* 间距 */
+  /* ... 更多变量 */
+}
+```
+
+## 总结
+
+成功按照设计文档实现了一个功能完整、美观现代的个人博客系统。所有核心功能都已实现并测试通过,可以直接使用或进一步定制。
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,22 +1,14 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import solidJs from '@astrojs/solid-js';
 import node from '@astrojs/node';

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

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

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

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

--- a/src/components/ArticleCard.astro
+++ b/src/components/ArticleCard.astro
--- a/src/components/BaseFooter.astro
+++ b/src/components/BaseFooter.astro
@@ -0,0 +1,107 @@
+---
+import { metadata } from "@/consts";
+const { siteTitle, icpNumber, githubUrl } = metadata;
+const currentYear = new Date().getFullYear();
+---
+
+<footer>
+  <div class="content">
+    <div class="footer-left">
+      <p class="copyright">&copy; {currentYear} {siteTitle}</p>
+      {icpNumber && (
+        <a href="https://beian.miit.gov.cn/#/Integrated/index" class="icp" target="_blank" rel="noopener">
+          {icpNumber}
+        </a>
+      )}
+    </div>
+    <div class="footer-center">
+      <span class="powered">Powered by Astro</span>
+    </div>
+    <div class="footer-right">
+      {githubUrl && (
+        <a href={githubUrl} class="social-link" target="_blank" rel="noopener" aria-label="GitHub">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          </svg>
+        </a>
+      )}
+    </div>
+  </div>
+</footer>
+
+<style>
+  footer {
+    background-color: var(--bg-secondary);
+    border-top: 1px solid var(--border-color);
+    padding: var(--space-lg) 0;
+    flex-shrink: 0;
+    transition: background-color var(--transition-slow), border-color var(--transition-slow);
+  }
+
+  .content {
+    max-width: var(--layout-width);
+    margin: 0 auto;
+    padding: 0 var(--space-md);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--text-secondary);
+    font-size: var(--text-small);
+  }
+
+  .footer-left,
+  .footer-center,
+  .footer-right {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+  }
+
+  .copyright,
+  .powered {
+    margin: 0;
+    font-size: var(--text-tiny);
+  }
+
+  .icp {
+    color: var(--text-secondary);
+    font-size: var(--text-tiny);
+    transition: color var(--transition-fast);
+  }
+
+  .icp:hover {
+    color: var(--accent-color);
+  }
+
+  .social-link {
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-sm);
+    border-radius: var(--radius-sm);
+    transition: color var(--transition-fast), background-color var(--transition-fast);
+  }
+
+  .social-link:hover {
+    color: var(--accent-color);
+    background-color: var(--border-color);
+    text-decoration: none;
+  }
+
+  /* 响应式设计 */
+  @media (max-width: 640px) {
+    .content {
+      flex-direction: column;
+      gap: var(--space-sm);
+      text-align: center;
+    }
+
+    .footer-left,
+    .footer-center,
+    .footer-right {
+      flex-direction: column;
+      gap: var(--space-xs);
+    }
+  }
+</style>
--- a/src/components/BaseHeader.astro
+++ b/src/components/BaseHeader.astro
@@ -0,0 +1,125 @@
+---
+import ThemeToggle from "./ThemeToggle";
+import { metadata } from "@/consts";
+const { siteTitle } = metadata;
+---
+
+<header>
+  <nav class="main-nav">
+    <div class="nav-left">
+      <a href="/" class="site-logo">{siteTitle}</a>
+      <ul class="menu">
+        <li class="menu-item"><a href="/">首页</a></li>
+        <li class="menu-item"><a href="/about">关于</a></li>
+      </ul>
+    </div>
+    <div class="nav-right">
+      <ThemeToggle client:load />
+    </div>
+  </nav>
+</header>
+
+<style>
+  header {
+    height: 64px;
+    position: sticky;
+    top: 0;
+    z-index: 99999;
+    background: var(--bg-secondary);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0;
+    transition: background-color var(--transition-slow), border-color var(--transition-slow);
+  }
+
+  .main-nav {
+    max-width: var(--layout-width);
+    margin: 0 auto;
+    height: 100%;
+    padding: 0 var(--space-md);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .nav-left {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xl);
+  }
+
+  .site-logo {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--text-primary);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+  }
+
+  .site-logo:hover {
+    color: var(--accent-color);
+    text-decoration: none;
+  }
+
+  .menu {
+    list-style: none;
+    display: flex;
+    gap: var(--space-lg);
+    margin: 0;
+    padding: 0;
+  }
+
+  .menu-item a {
+    text-decoration: none;
+    font-weight: 500;
+    color: var(--text-primary);
+    transition: color var(--transition-fast);
+    font-size: var(--text-small);
+  }
+
+  .menu-item a:hover {
+    color: var(--accent-color);
+    text-decoration: none;
+  }
+
+  .nav-right {
+    display: flex;
+    align-items: center;
+  }
+
+  :global(.theme-toggle) {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: var(--space-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-primary);
+    border-radius: var(--radius-sm);
+    transition: background-color var(--transition-fast), color var(--transition-fast);
+  }
+
+  :global(.theme-toggle:hover) {
+    background-color: var(--border-color);
+  }
+
+  /* 响应式设计 */
+  @media (max-width: 640px) {
+    .nav-left {
+      gap: var(--space-md);
+    }
+
+    .site-logo {
+      font-size: 18px;
+    }
+
+    .menu {
+      gap: var(--space-md);
+    }
+
+    .menu-item a {
+      font-size: var(--text-tiny);
+    }
+  }
+</style>
--- a/src/components/IndexPage.astro
+++ b/src/components/IndexPage.astro
@@ -1,40 +0,0 @@
---
-import PostList from "@/components/Post/List.astro";
-import Pagination from "@/components/Post/Pagination.astro";
-import type {Post} from "@/types";
-
-interface Props {
-  posts: Post[]
-  page: number
-  totalPage: number
-}
-
-const {posts, page, totalPage} = Astro.props
---
-<main>
-  <div class="intro">
-    <p>did you stand too close to the fire?<br>
-      like a liar looking for forgiveness from a stone.</p>
-  </div>
-
-  <PostList posts={posts}/>
-  <Pagination page={page} totalPage={totalPage}/>
-</main>
-
-
-<style>
-  .intro {
-    border-bottom: var(--border-secondary);
-    line-height: 2;
-    font-size: 15px;
-    color: var(--text-secondary);
-    padding-bottom: 32px;
-    margin-bottom: 12px;
-  }
-
-  @media (max-width: 640px) {
-    .intro{
-      padding-bottom: 24px;
-    }
-  }
-</style>
--- a/src/components/LazyImage.astro
+++ b/src/components/LazyImage.astro
@@ -1,130 +0,0 @@
---
-interface Props {
-  src: string;
-  alt?: string;
-  width?: number;
-  height?: number;
-  class?: string;
-}
-
-const {
-  src,
-  alt = "",
-  width,
-  height,
-  class: className = ""
-} = Astro.props;
---
-
-<div
-  class={`lazy-image ${className}`}
-  data-src={src}
-  style={`aspect-ratio:${width}/${height}`}
->
-  <div class="placeholder"></div>
-
-  <img
-    class="real-image"
-    alt={alt}
-    width={width}
-    height={height}
-    loading="lazy"
-    decoding="async"
-  />
-</div>
-
-
-<style>
-.lazy-image {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-}
-
-.lazy-image img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.placeholder {
-  position: absolute;
-  inset: 0;
-  background-image: linear-gradient(
-    90deg,
-    #f3f4f6 0%,
-    #e5e7eb 50%,
-    #f3f4f6 100%
-  );
-  background-size: 200% 100%;
-  animation: loading 1.5s infinite;
-}
-
-@keyframes loading {
-  from {
-    background-position: 200% 0;
-  }
-
-  to {
-    background-position: -200% 0;
-  }
-}
-
-.real-image {
-  opacity: 0;
-  transition: opacity .35s ease;
-}
-
-.real-image.loaded {
-  opacity: 1;
-}
-</style>
-
-
-<script>
-function initLazyImages() {
-  const images = document.querySelectorAll(".lazy-image");
-
-  const observer = new IntersectionObserver(
-    entries => {
-      entries.forEach(entry => {
-
-        if (!entry.isIntersecting) return;
-
-        const container = entry.target as HTMLElement;
-        const img = container.querySelector(
-          ".real-image"
-        ) as HTMLImageElement;
-
-        const src = container.dataset.src;
-
-        if (!src) return;
-
-        img.src = src;
-
-        img.onload = () => {
-          img.classList.add("loaded");
-
-          const placeholder =
-            container.querySelector(".placeholder");
-
-          placeholder?.remove();
-        };
-
-        observer.unobserve(container);
-      });
-    },
-    {
-      rootMargin: "300px"
-    }
-  );
-
-
-  images.forEach(img => observer.observe(img));
-}
-
-
-initLazyImages();
-</script>
--- a/src/components/Post/List.astro
+++ b/src/components/Post/List.astro
@@ -1,83 +0,0 @@
---
-import type {Post} from "@/types";
-import {formatDatetime} from '@/lib/format.ts'
-
-interface Props {
-  posts: Post[]
-}
-const {posts} = Astro.props
---
-
-<div class="posts">
-  {posts.map(item => (
-    <div class="post">
-      <span class="d">{formatDatetime(item.published_at, 'YY.MM.DD')}</span>
-      <h2><a href=`/post/${item.slug}`>{item.title}</a></h2>
-      <span class="arrow">→</span>
-    </div>
-  ))}
-</div>
-
-<style>
-  .posts {
-
-  }
-
-  .post {
-    display: flex;
-    align-items: baseline;
-    gap: 20px;
-    padding: 26px 0;
-    border-bottom: var(--border-secondary);
-  }
-
-  .post .d {
-    font-size: 14px;
-    color: var(--text-meta);
-    min-width: 80px;
-    letter-spacing: 1px;
-  }
-
-  .post h2 {
-    font-size: 16px;
-    font-weight: normal;
-    flex: 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .post h2 a {
-    color: var(--text-primary);
-    text-decoration: none;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .post h2 a:hover {
-    color: var(--text-title-hover);
-    text-decoration: underline;
-    text-underline-offset: 6px;
-  }
-
-  .post .arrow {
-    color: #d0d0d0;
-    font-size: 14px;
-    transition: transform 0.2s, color 0.2s;
-  }
-
-  .post:hover .arrow {
-    color: #334155;
-  }
-
-  @media (max-width: 640px) {
-    .post .d {
-      min-width: 64px;
-    }
-
-    .post h2 {
-      font-size: 15px;
-    }
-  }
-</style>
--- a/src/components/Post/Pagination.astro
+++ b/src/components/Post/Pagination.astro
@@ -1,49 +0,0 @@
---
-interface Props {
-  page: number
-  totalPage: number
-}
-
-const {page, totalPage} = Astro.props
---
-
-<!--分页器-->
-{totalPage > 1 &&
-<nav class="pagination" aria-label="分页">
-  {Array.from({length: totalPage}).map((_, index) => {
-    if (page === index + 1) {
-      return <span class="link current">{index + 1}</span>
-    }
-    return <a class="link" href={`/page/${index + 1}`}>{index + 1}</a>
-  })}
-  {page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页</a> :
-    <span class="link disabled">下一页</span>}
-</nav>}
-
-<style>
-  /* ========== 分页 ========== */
-  .pagination {
-    width: 100%;
-    text-align: right;
-    white-space: nowrap;
-    margin-top: 32px;
-    font-size: 13px;
-  }
-
-  .link {
-    display: inline-block;
-    margin: 0 12px;
-    line-height: 1;
-    color: var(--text-secondary);
-  }
-
-  .current{
-    color: var(--text-primary);
-    font-weight: bold;
-  }
-
-  .link.disabled {
-    color: var(--text-disabled);
-    cursor: not-allowed;
-  }
-</style>
--- a/src/components/PostCard.astro
+++ b/src/components/PostCard.astro
@@ -0,0 +1,152 @@
+---
+import Tag from "./Tag.astro";
+
+interface Props {
+  title: string;
+  date: Date;
+  summary: string;
+  slug: string;
+  tags?: string[];
+  readingTime?: number;
+}
+
+const { title, date, summary, slug, tags = [], readingTime } = Astro.props;
+
+// 格式化日期
+const formatDate = (date: Date) => {
+  return new Intl.DateTimeFormat("zh-CN", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }).format(date);
+};
+
+// 计算阅读时长（如果没有提供）
+const calculateReadingTime = (text: string) => {
+  const wordsPerMinute = 200;
+  const wordCount = text.length;
+  return Math.ceil(wordCount / wordsPerMinute);
+};
+
+const estimatedReadingTime = readingTime || calculateReadingTime(summary);
+---
+
+<article class="post-card">
+  <a href={`/posts/${slug}`} class="card-link">
+    <div class="card-content">
+      <h2 class="post-title">{title}</h2>
+      
+      <div class="post-meta">
+        <time class="post-date" datetime={date.toISOString()}>
+          {formatDate(date)}
+        </time>
+        <span class="reading-time">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <circle cx="12" cy="12" r="10" stroke-width="2"/>
+            <polyline points="12 6 12 12 16 14" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+          {estimatedReadingTime} 分钟阅读
+        </span>
+      </div>
+
+      <p class="post-summary">{summary}</p>
+
+      {tags.length > 0 && (
+        <div class="post-tags">
+          {tags.map((tag) => <Tag tag={tag} size="small" />)}
+        </div>
+      )}
+    </div>
+  </a>
+</article>
+
+<style>
+  .post-card {
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-slow);
+  }
+
+  .post-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--accent-color);
+  }
+
+  .card-link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .card-content {
+    padding: var(--space-lg);
+  }
+
+  .post-title {
+    font-size: var(--text-h3);
+    line-height: var(--line-h3);
+    font-weight: 700;
+    margin: 0 0 var(--space-md) 0;
+    color: var(--text-primary);
+    transition: color var(--transition-fast);
+  }
+
+  .post-card:hover .post-title {
+    color: var(--accent-color);
+  }
+
+  .post-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    margin-bottom: var(--space-md);
+    font-size: var(--text-small);
+    color: var(--text-secondary);
+  }
+
+  .post-date {
+    font-size: var(--text-tiny);
+  }
+
+  .reading-time {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    font-size: var(--text-tiny);
+  }
+
+  .post-summary {
+    font-size: var(--text-base);
+    line-height: var(--line-base);
+    color: var(--text-secondary);
+    margin: 0 0 var(--space-md) 0;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  .post-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+  }
+
+  /* 响应式设计 */
+  @media (max-width: 640px) {
+    .card-content {
+      padding: var(--space-md);
+    }
+
+    .post-title {
+      font-size: 20px;
+    }
+
+    .post-summary {
+      font-size: var(--text-small);
+    }
+  }
+</style>
--- a/src/components/SiteFooter.astro
+++ b/src/components/SiteFooter.astro
--- a/src/components/SiteHeader.astro
+++ b/src/components/SiteHeader.astro
--- a/src/components/Tag.astro
+++ b/src/components/Tag.astro
@@ -0,0 +1,51 @@
+---
+interface Props {
+  tag: string;
+  size?: "small" | "medium";
+}
+
+const { tag, size = "small" } = Astro.props;
+
+// 为不同标签生成不同的颜色
+const getTagColor = (tag: string) => {
+  const colors = [
+    { bg: "#E3F2FD", text: "#1976D2" },
+    { bg: "#F3E5F5", text: "#7B1FA2" },
+    { bg: "#E8F5E9", text: "#388E3C" },
+    { bg: "#FFF3E0", text: "#F57C00" },
+    { bg: "#FCE4EC", text: "#C2185B" },
+    { bg: "#E0F2F1", text: "#00796B" },
+  ];
+  const index = tag.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) % colors.length;
+  return colors[index];
+};
+
+const tagColor = getTagColor(tag);
+---
+
+<span class={`tag tag-${size}`} style={`background-color: ${tagColor.bg}; color: ${tagColor.text};`}>
+  {tag}
+</span>
+
+<style>
+  .tag {
+    display: inline-block;
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-sm);
+    font-weight: 500;
+    transition: transform var(--transition-fast), opacity var(--transition-fast);
+  }
+
+  .tag-small {
+    font-size: var(--text-tiny);
+  }
+
+  .tag-medium {
+    font-size: var(--text-small);
+  }
+
+  .tag:hover {
+    transform: translateY(-2px);
+    opacity: 0.8;
+  }
+</style>
--- a/src/components/ThemeIcon.astro
+++ b/src/components/ThemeIcon.astro
@@ -1,76 +0,0 @@
---
---
-<div class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
-  <svg aria-hidden="true" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path class="sun" fill-rule="evenodd"
-          d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
-    <path class="moon" fill-rule="evenodd"
-          d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
-  </svg>
-</div>
-
-<style>
-  #themeToggle {
-    border: 0;
-    background: none;
-    user-select: none;
-  }
-
-  .theme-toggle {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  .sun {
-    fill: black;
-  }
-
-  .moon {
-    fill: transparent;
-  }
-
-  :global(.dark) .sun {
-    fill: transparent;
-  }
-
-  :global(.dark) .moon {
-    fill: white;
-  }
-</style>
-
-<script is:inline>
-  const meta = document.querySelector('meta[name="theme-color"]');
-
-  const theme = (() => {
-    const localStorageTheme = localStorage?.getItem("theme") ?? '';
-    if (['dark', 'light'].includes(localStorageTheme)) {
-      return localStorageTheme;
-    }
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-    return 'light';
-  })();
-
-  if (theme === 'light') {
-    document.documentElement.classList.remove('dark');
-    meta.setAttribute('content', '#ffffff');
-  } else {
-    document.documentElement.classList.add('dark');
-    meta.setAttribute('content', '#0a0a0a');
-  }
-
-  window.localStorage.setItem('theme', theme);
-
-  const handleToggleClick = () => {
-    const element = document.documentElement;
-    element.classList.toggle("dark");
-
-    const isDark = element.classList.contains("dark");
-    meta.setAttribute('content', isDark ? '#0a0a0a' : '#ffffff');
-    localStorage.setItem("theme", isDark ? "dark" : "light");
-  }
-
-  document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
-</script>
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,49 @@
+import { createSignal, onMount } from "solid-js";
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = createSignal<"light" | "dark">("light");
+
+  onMount(() => {
+    // 从 localStorage 读取主题设置，或使用系统偏好
+    const savedTheme = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const initialTheme = savedTheme || (prefersDark ? "dark" : "light");
+    
+    setTheme(initialTheme as "light" | "dark");
+    document.documentElement.setAttribute("data-theme", initialTheme);
+  });
+
+  const toggleTheme = () => {
+    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"
+      aria-label="切换主题"
+      title={theme() === "light" ? "切换到暗色模式" : "切换到亮色模式"}
+    >
+      {theme() === "light" ? (
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      ) : (
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <circle cx="12" cy="12" r="5" stroke-width="2"/>
+          <line x1="12" y1="1" x2="12" y2="3" stroke-width="2" stroke-linecap="round"/>
+          <line x1="12" y1="21" x2="12" y2="23" stroke-width="2" stroke-linecap="round"/>
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke-width="2" stroke-linecap="round"/>
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke-width="2" stroke-linecap="round"/>
+          <line x1="1" y1="12" x2="3" y2="12" stroke-width="2" stroke-linecap="round"/>
+          <line x1="21" y1="12" x2="23" y2="12" stroke-width="2" stroke-linecap="round"/>
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke-width="2" stroke-linecap="round"/>
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      )}
+    </button>
+  );
+}
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -1,7 +1,31 @@
-export const siteConfig = {
-  site: "https://ua42.com",
-  siteTitle: "Uroboros",
-  postPageSize: 7,
-  description: "一个人的自留地 ，不欢迎我，也不欢迎你。",
-  git: "https://git.ua42.com"
+export const metadata = {
+  siteTitle: "42的博客",
+  siteDescription: "分享技术与思考的个人空间",
+  author: "42",
+  email: "your-email@example.com",
+  githubUrl: "https://github.com/yourusername",
+  icpNumber: "鄂ICP备2023000060号-2",
+  
+  // Hero 区域配置
+  heroTitle: "42的博客",
+  heroDescription: "在这里记录技术学习、生活思考和创作分享",
+  
+  // 关于页面配置
+  aboutBio: `我是一名热爱编程的开发者，专注于 Web 开发和技术写作。
+
+这个博客用于记录我的学习历程、技术心得和生活感悟。希望通过分享，能够帮助到更多的人。
+
+欢迎与我交流探讨！`,
+  
+  skills: [
+    "JavaScript",
+    "TypeScript",
+    "React",
+    "Vue",
+    "Node.js",
+    "Astro",
+    "CSS",
+    "HTML",
+    "Git",
+  ],
 }
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -0,0 +1,17 @@
+import { defineCollection, z } from 'astro:content';
+
+const postsCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    date: z.date(),
+    summary: z.string(),
+    tags: z.array(z.string()).optional(),
+    cover: z.string().optional(),
+    author: z.string().optional(),
+  }),
+});
+
+export const collections = {
+  posts: postsCollection,
+};
--- a/src/content/posts/astro-introduction.md
+++ b/src/content/posts/astro-introduction.md
@@ -0,0 +1,160 @@
+---
+title: "Astro 框架初探"
+date: 2024-11-15
+summary: "Astro 是一个现代化的静态网站生成器，它专注于性能和开发体验。本文将介绍 Astro 的核心概念、特点以及如何使用它构建快速的网站。"
+tags: ["Astro", "前端框架", "Web开发"]
+---
+
+# Astro 框架初探
+
+在现代 Web 开发中，选择合适的框架至关重要。今天我们来聊聊 Astro —— 一个专注于性能的现代化静态网站生成器。
+
+## Astro 是什么？
+
+Astro 是一个为构建内容驱动网站而设计的 Web 框架。它的核心理念是：
+
+> **默认发送零 JavaScript 到浏览器**
+
+这听起来很激进，但正是这个理念让 Astro 网站极其快速。
+
+## 核心特性
+
+### 1. 群岛架构（Islands Architecture）
+
+Astro 引入了"群岛架构"的概念：
+
+```astro
+---
+// 静态内容，不需要 JavaScript
+---
+
+<div>
+  <h1>这是静态内容</h1>
+  
+  <!-- 这是一个"岛屿"，只有这部分会发送 JS -->
+  <InteractiveComponent client:load />
+  
+  <p>又是静态内容</p>
+</div>
+```
+
+### 2. 框架无关
+
+Astro 支持多种前端框架，你可以混合使用：
+
+```astro
+---
+import ReactComponent from './React.jsx';
+import VueComponent from './Vue.vue';
+import SolidComponent from './Solid.tsx';
+---
+
+<ReactComponent client:visible />
+<VueComponent client:idle />
+<SolidComponent client:load />
+```
+
+### 3. 内置优化
+
+Astro 自动优化你的网站：
+
+- 自动代码分割
+- CSS 自动提取和内联
+- 图片优化
+- 资源预加载
+
+## 客户端指令
+
+Astro 提供了灵活的客户端加载策略：
+
+| 指令 | 说明 |
+|------|------|
+| `client:load` | 页面加载时立即加载组件 |
+| `client:idle` | 浏览器空闲时加载 |
+| `client:visible` | 组件进入视口时加载 |
+| `client:media` | 媒体查询匹配时加载 |
+| `client:only` | 仅在客户端渲染 |
+
+## Content Collections
+
+Astro 的 Content Collections 提供了类型安全的内容管理：
+
+```typescript
+// src/content/config.ts
+import { defineCollection, z } from 'astro:content';
+
+const blog = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    date: z.date(),
+    tags: z.array(z.string()),
+  }),
+});
+
+export const collections = { blog };
+```
+
+使用时：
+
+```astro
+---
+import { getCollection } from 'astro:content';
+
+const posts = await getCollection('blog');
+---
+
+{posts.map(post => (
+  <article>
+    <h2>{post.data.title}</h2>
+    <time>{post.data.date}</time>
+  </article>
+))}
+```
+
+## 性能对比
+
+让我们看看 Astro 与其他框架的性能对比：
+
+- **Lighthouse 得分**：通常能达到满分 100
+- **首次内容绘制（FCP）**：通常 < 1s
+- **JavaScript 体积**：可以接近 0KB
+
+## 适用场景
+
+Astro 特别适合：
+
+1. **博客和文档站点**：内容为主，交互较少
+2. **营销网站**：追求极致性能
+3. **电子商务**：产品展示页面
+4. **作品集网站**：展示型网站
+
+## 开始使用
+
+创建一个 Astro 项目非常简单：
+
+```bash
+# 使用官方模板
+npm create astro@latest
+
+# 选择模板
+# - Empty (空白项目)
+# - Blog (博客模板)
+# - Portfolio (作品集)
+# - Documentation (文档站)
+```
+
+## 我的使用体验
+
+在使用 Astro 构建这个博客的过程中，我最喜欢的几点：
+
+1. **开发体验优秀**：热更新快，调试方便
+2. **性能出色**：页面加载速度极快
+3. **灵活性高**：可以根据需要选择使用哪些功能
+4. **学习曲线平缓**：如果你懂 HTML/CSS/JS，上手很快
+
+## 总结
+
+Astro 是一个专注于性能和开发体验的优秀框架。如果你正在构建内容驱动的网站，强烈推荐尝试 Astro。
+
+它的"群岛架构"理念和零 JavaScript 默认策略，为现代 Web 开发提供了新的思路。
--- a/src/content/posts/css-variables.md
+++ b/src/content/posts/css-variables.md
@@ -0,0 +1,145 @@
+---
+title: "深入理解 CSS 变量"
+date: 2024-11-18
+summary: "CSS 变量（也称为 CSS 自定义属性）是现代 CSS 的强大功能。本文将深入探讨 CSS 变量的使用方法、最佳实践以及如何在实际项目中应用它们。"
+tags: ["CSS", "前端开发"]
+---
+
+# 深入理解 CSS 变量
+
+CSS 变量（CSS Custom Properties）为我们提供了一种在 CSS 中定义和使用变量的方式，这极大地提高了样式的可维护性和灵活性。
+
+## 什么是 CSS 变量？
+
+CSS 变量允许我们在 CSS 中定义可重用的值。它们使用 `--` 前缀定义，并通过 `var()` 函数使用。
+
+```css
+:root {
+  --primary-color: #0066FF;
+  --spacing-unit: 8px;
+}
+
+.button {
+  background-color: var(--primary-color);
+  padding: var(--spacing-unit);
+}
+```
+
+## CSS 变量的优势
+
+### 1. 提高可维护性
+
+使用变量可以将重复的值集中管理，修改时只需改变变量定义：
+
+```css
+:root {
+  --text-primary: #1A1A1A;
+  --text-secondary: #666666;
+}
+
+/* 在多处使用 */
+h1 { color: var(--text-primary); }
+p { color: var(--text-secondary); }
+```
+
+### 2. 支持主题切换
+
+CSS 变量可以轻松实现主题切换功能：
+
+```css
+/* 明亮主题 */
+:root {
+  --bg-color: #FFFFFF;
+  --text-color: #000000;
+}
+
+/* 暗黑主题 */
+[data-theme="dark"] {
+  --bg-color: #0F0F0F;
+  --text-color: #E5E5E5;
+}
+```
+
+### 3. 动态计算
+
+CSS 变量可以与 `calc()` 函数结合使用：
+
+```css
+:root {
+  --base-size: 16px;
+  --scale: 1.5;
+}
+
+.heading {
+  font-size: calc(var(--base-size) * var(--scale));
+}
+```
+
+## 实际应用场景
+
+### 设计系统
+
+在构建设计系统时，CSS 变量是核心工具：
+
+```css
+:root {
+  /* 色彩系统 */
+  --color-primary: #0066FF;
+  --color-secondary: #7B1FA2;
+  --color-success: #388E3C;
+  --color-warning: #F57C00;
+  --color-error: #C2185B;
+  
+  /* 间距系统 */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+  
+  /* 阴影系统 */
+  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
+  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
+}
+```
+
+### 响应式设计
+
+CSS 变量可以在媒体查询中重新定义：
+
+```css
+:root {
+  --container-width: 1200px;
+  --font-size: 16px;
+}
+
+@media (max-width: 768px) {
+  :root {
+    --container-width: 100%;
+    --font-size: 14px;
+  }
+}
+```
+
+## 最佳实践
+
+1. **使用语义化命名**：`--primary-color` 比 `--blue` 更好
+2. **分层组织**：将变量按功能分组
+3. **提供回退值**：`var(--color, #000)` 
+4. **避免过度使用**：不是所有值都需要变量化
+
+## 浏览器兼容性
+
+现代浏览器都已支持 CSS 变量，覆盖率超过 98%。对于不支持的浏览器，可以使用回退方案：
+
+```css
+.element {
+  color: #0066FF; /* 回退值 */
+  color: var(--primary-color);
+}
+```
+
+## 总结
+
+CSS 变量是现代 CSS 开发的重要工具，它提高了代码的可维护性、灵活性和可读性。通过合理使用 CSS 变量，我们可以构建更加优雅和可维护的样式系统。
--- a/src/content/posts/responsive-design.md
+++ b/src/content/posts/responsive-design.md
@@ -0,0 +1,281 @@
+---
+title: "响应式设计的艺术"
+date: 2024-11-05
+summary: "响应式设计不仅仅是适配不同屏幕尺寸，更是创造流畅、一致的用户体验。本文将探讨响应式设计的核心原则、实用技巧和常见挑战。"
+tags: ["CSS", "响应式设计", "UX"]
+---
+
+# 响应式设计的艺术
+
+在移动设备占据主导地位的今天,响应式设计已经不是可选项,而是必需品。让我们深入探讨如何打造优秀的响应式网站。
+
+## 核心原则
+
+### 移动优先
+
+从最小屏幕开始设计,逐步增强:
+
+```css
+/* 基础样式 - 移动端 */
+.container {
+  width: 100%;
+  padding: 16px;
+}
+
+/* 平板 */
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+    margin: 0 auto;
+  }
+}
+
+/* 桌面 */
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1200px;
+  }
+}
+```
+
+### 流式布局
+
+使用相对单位而非固定像素:
+
+```css
+/* ❌ 固定布局 */
+.sidebar {
+  width: 300px;
+}
+
+/* ✅ 流式布局 */
+.sidebar {
+  width: 25%;
+  min-width: 250px;
+  max-width: 400px;
+}
+```
+
+### 弹性图片
+
+确保图片自适应容器:
+
+```css
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+```
+
+## 现代布局技术
+
+### Flexbox
+
+适合一维布局:
+
+```css
+.nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+@media (max-width: 640px) {
+  .nav {
+    flex-direction: column;
+  }
+}
+```
+
+### Grid
+
+适合二维布局:
+
+```css
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 24px;
+}
+```
+
+这段代码会自动调整列数,无需媒体查询!
+
+### Container Queries
+
+容器查询让组件真正独立:
+
+```css
+.card-container {
+  container-type: inline-size;
+}
+
+@container (min-width: 400px) {
+  .card {
+    display: flex;
+    gap: 16px;
+  }
+}
+```
+
+## 断点策略
+
+不要只关注设备,关注内容:
+
+```css
+:root {
+  /* 基于内容的断点 */
+  --bp-small: 640px;
+  --bp-medium: 768px;
+  --bp-large: 1024px;
+  --bp-xlarge: 1280px;
+}
+```
+
+常用断点参考:
+
+| 类型 | 尺寸 |
+|------|------|
+| 手机 | < 640px |
+| 平板 | 640px - 1024px |
+| 桌面 | > 1024px |
+| 超大屏 | > 1280px |
+
+## 响应式排版
+
+### 流式字体
+
+使用 `clamp()` 实现流畅的字体缩放:
+
+```css
+h1 {
+  font-size: clamp(2rem, 5vw, 4rem);
+}
+
+p {
+  font-size: clamp(1rem, 2vw, 1.125rem);
+  line-height: 1.6;
+}
+```
+
+### 可读性优化
+
+控制行宽以提高可读性:
+
+```css
+.content {
+  max-width: 65ch; /* 约 65 个字符宽度 */
+  margin: 0 auto;
+}
+```
+
+## 触摸优化
+
+### 可点击区域
+
+确保触摸目标足够大:
+
+```css
+.button,
+.link {
+  min-height: 44px; /* iOS 建议最小尺寸 */
+  min-width: 44px;
+  padding: 12px 24px;
+}
+```
+
+### 悬停状态
+
+移动端没有真正的 hover:
+
+```css
+/* 仅在支持 hover 的设备上显示 */
+@media (hover: hover) {
+  .card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+  }
+}
+```
+
+## 性能考虑
+
+### 响应式图片
+
+使用 `srcset` 和 `sizes`:
+
+```html
+<img
+  src="image-800.jpg"
+  srcset="
+    image-400.jpg 400w,
+    image-800.jpg 800w,
+    image-1200.jpg 1200w
+  "
+  sizes="
+    (max-width: 640px) 100vw,
+    (max-width: 1024px) 50vw,
+    800px
+  "
+  alt="描述"
+>
+```
+
+### 延迟加载
+
+非首屏图片延迟加载:
+
+```html
+<img src="image.jpg" loading="lazy" alt="描述">
+```
+
+## 调试技巧
+
+### Chrome DevTools
+
+1. 切换设备模拟
+2. 查看断点效果
+3. 测试不同屏幕尺寸
+4. 模拟网络速度
+
+### 有用的 CSS
+
+调试边框:
+
+```css
+/* 开发时使用 */
+* {
+  outline: 1px solid red;
+}
+```
+
+## 常见陷阱
+
+1. **固定高度**: 避免使用固定高度,使用 `min-height` 代替
+2. **像素完美**: 不同设备有差异是正常的
+3. **忽略横屏**: 记得测试横屏模式
+4. **过多断点**: 保持简单,不要为每个设备单独设置
+
+## 检查清单
+
+- [ ] 移动端优先设计
+- [ ] 触摸目标至少 44x44px
+- [ ] 图片响应式处理
+- [ ] 测试常见断点
+- [ ] 检查横屏模式
+- [ ] 优化加载性能
+- [ ] 测试真实设备
+
+## 总结
+
+响应式设计是一门艺术,需要在美观、性能和用户体验之间找到平衡。记住:
+
+- 从小屏幕开始
+- 使用现代布局技术
+- 关注性能
+- 在真实设备上测试
+
+优秀的响应式设计应该让用户感觉不到它的存在 —— 一切都是那么自然流畅。
--- a/src/content/posts/typescript-best-practices.md
+++ b/src/content/posts/typescript-best-practices.md
@@ -0,0 +1,237 @@
+---
+title: "TypeScript 最佳实践"
+date: 2024-11-10
+summary: "TypeScript 为 JavaScript 带来了类型安全，但如何正确使用它以获得最佳开发体验？本文总结了一些 TypeScript 开发中的最佳实践和常见陷阱。"
+tags: ["TypeScript", "JavaScript", "编程"]
+---
+
+# TypeScript 最佳实践
+
+TypeScript 已经成为现代前端开发的标配。正确使用 TypeScript 可以显著提高代码质量和开发效率，但不当使用也可能适得其反。
+
+## 基础类型定义
+
+### 使用类型推断
+
+TypeScript 的类型推断很强大，不需要每个地方都显式标注类型：
+
+```typescript
+// ❌ 不必要的类型标注
+const count: number = 0;
+const name: string = "TypeScript";
+
+// ✅ 利用类型推断
+const count = 0;
+const name = "TypeScript";
+```
+
+### 优先使用接口而非类型别名
+
+对于对象类型，接口通常是更好的选择：
+
+```typescript
+// ✅ 使用接口
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+// ❌ 避免过度使用 type
+type User = {
+  id: number;
+  name: string;
+  email: string;
+}
+```
+
+但是对于联合类型、元组等，type 更合适：
+
+```typescript
+type Status = "pending" | "success" | "error";
+type Point = [number, number];
+```
+
+## 高级类型技巧
+
+### 使用泛型提高复用性
+
+```typescript
+// 通用的 API 响应类型
+interface ApiResponse<T> {
+  data: T;
+  status: number;
+  message: string;
+}
+
+// 使用
+type UserResponse = ApiResponse<User>;
+type PostsResponse = ApiResponse<Post[]>;
+```
+
+### 善用工具类型
+
+TypeScript 内置了许多工具类型：
+
+```typescript
+interface Todo {
+  title: string;
+  description: string;
+  completed: boolean;
+}
+
+// Partial - 所有属性变为可选
+type PartialTodo = Partial<Todo>;
+
+// Pick - 选择部分属性
+type TodoPreview = Pick<Todo, "title" | "completed">;
+
+// Omit - 排除某些属性
+type TodoInfo = Omit<Todo, "completed">;
+
+// Readonly - 所有属性变为只读
+type ReadonlyTodo = Readonly<Todo>;
+```
+
+## 类型守卫
+
+使用类型守卫让代码更安全：
+
+```typescript
+function isString(value: unknown): value is string {
+  return typeof value === "string";
+}
+
+function processValue(value: string | number) {
+  if (isString(value)) {
+    // TypeScript 知道这里 value 是 string
+    console.log(value.toUpperCase());
+  } else {
+    // 这里 value 是 number
+    console.log(value.toFixed(2));
+  }
+}
+```
+
+## 避免 any
+
+`any` 类型会破坏类型安全，应该尽量避免：
+
+```typescript
+// ❌ 使用 any
+function process(data: any) {
+  return data.value;
+}
+
+// ✅ 使用 unknown 并做类型检查
+function process(data: unknown) {
+  if (typeof data === "object" && data !== null && "value" in data) {
+    return (data as { value: any }).value;
+  }
+  throw new Error("Invalid data");
+}
+
+// ✅ 或者定义明确的类型
+interface Data {
+  value: string;
+}
+
+function process(data: Data) {
+  return data.value;
+}
+```
+
+## 严格模式配置
+
+在 `tsconfig.json` 中启用严格模式：
+
+```json
+{
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true
+  }
+}
+```
+
+## 处理 null 和 undefined
+
+启用 `strictNullChecks` 后，需要明确处理可能的 null/undefined：
+
+```typescript
+interface User {
+  name: string;
+  age?: number;
+}
+
+function greet(user: User) {
+  // ❌ 可能出错
+  console.log(`Hello, ${user.name}. You are ${user.age} years old.`);
+  
+  // ✅ 正确处理
+  console.log(`Hello, ${user.name}. You are ${user.age ?? "unknown"} years old.`);
+  
+  // ✅ 或使用可选链
+  console.log(`Age: ${user.age?.toString() ?? "not provided"}`);
+}
+```
+
+## 枚举的使用
+
+优先使用常量对象或联合类型而非枚举：
+
+```typescript
+// ❌ 枚举会生成额外代码
+enum Direction {
+  Up,
+  Down,
+  Left,
+  Right
+}
+
+// ✅ 使用 const 对象
+const Direction = {
+  Up: 0,
+  Down: 1,
+  Left: 2,
+  Right: 3
+} as const;
+
+// ✅ 或使用联合类型
+type Direction = "up" | "down" | "left" | "right";
+```
+
+## 函数重载
+
+对于复杂的函数签名，使用函数重载：
+
+```typescript
+function createElement(tag: "div"): HTMLDivElement;
+function createElement(tag: "span"): HTMLSpanElement;
+function createElement(tag: "button"): HTMLButtonElement;
+function createElement(tag: string): HTMLElement {
+  return document.createElement(tag);
+}
+
+// 使用时会有精确的类型推断
+const div = createElement("div"); // HTMLDivElement
+const span = createElement("span"); // HTMLSpanElement
+```
+
+## 总结
+
+TypeScript 的类型系统非常强大，但需要正确使用才能发挥其优势：
+
+1. 充分利用类型推断
+2. 避免使用 `any`
+3. 启用严格模式
+4. 使用类型守卫和工具类型
+5. 明确处理 null/undefined
+
+遵循这些最佳实践，可以让你的 TypeScript 代码更安全、更易维护。
--- a/src/content/posts/welcome.md
+++ b/src/content/posts/welcome.md
@@ -0,0 +1,62 @@
+---
+title: "欢迎来到我的博客"
+date: 2024-11-20
+summary: "这是我的第一篇博客文章，在这里我将分享关于 Web 开发、技术学习和生活思考的内容。让我们一起开启这段精彩的旅程！"
+tags: ["博客", "日常"]
+---
+
+# 欢迎来到我的博客
+
+你好！欢迎来到我的个人博客。这是一个全新的开始，我将在这里记录和分享我的技术学习、开发经验和生活感悟。
+
+## 为什么写博客？
+
+写博客有很多好处：
+
+1. **知识沉淀**：将学到的知识系统化整理，加深理解
+2. **经验分享**：帮助遇到类似问题的人，传递价值
+3. **自我提升**：通过写作锻炼表达能力和思维能力
+4. **记录成长**：回顾过去，见证自己的进步
+
+## 博客内容规划
+
+在这个博客中，我计划分享以下几类内容：
+
+### 技术文章
+
+- Web 开发相关的技术文章
+- 编程语言学习心得
+- 开发工具使用技巧
+- 项目实战经验
+
+### 学习笔记
+
+记录学习新技术的过程和心得体会，包括但不限于：
+
+```javascript
+// 比如学习 JavaScript 的一些技巧
+const greet = (name) => {
+  console.log(`Hello, ${name}!`);
+};
+
+greet("World");
+```
+
+### 生活随笔
+
+技术之外，生活中的思考和感悟同样重要。
+
+## 关于这个博客
+
+这个博客使用 [Astro](https://astro.build) 构建，它是一个现代化的静态网站生成器，具有以下特点：
+
+- 🚀 极快的页面加载速度
+- 🎨 优雅的开发体验
+- 📝 完善的 Markdown 支持
+- 🌙 内置主题切换功能
+
+## 最后
+
+感谢你的访问！如果你对我的文章有任何建议或想法，欢迎与我交流。
+
+让我们一起在技术的世界里探索前行！
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,10 +1,10 @@
 ---
-import "@/styles/global.css";
-import {siteConfig} from "@/consts.ts";
-import PageHeader from "./PageHeader.astro";
-import PageFooter from "./PageFooter.astro";
+import "@/styles/base.css";

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

 interface Props {
  title?: string;
@@ -12,7 +12,10 @@ interface Props {
 }

 const { title, description } = Astro.props;
+const { siteTitle, siteDescription } = metadata;
+
 const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
+const pageDescription = description || siteDescription;
 ---

 <!doctype html>
@@ -23,47 +26,53 @@ const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
-  <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
-  <meta name="description" content={description}/>
-  <meta name="theme-color" content="#ffffff"/>
+    <meta name="description" content={pageDescription} />
    <title>{pageTitle}</title>
+    
+    <!-- 预加载主题脚本，防止闪烁 -->
+    <script is:inline>
+      // 立即应用保存的主题，防止页面闪烁
+      const savedTheme = localStorage.getItem("theme");
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      const theme = savedTheme || (prefersDark ? "dark" : "light");
+      document.documentElement.setAttribute("data-theme", theme);
+    </script>
  </head>
  <body>
-<div class="container">
-  <PageHeader/>
+    <BaseHeader />
    <main>
-    <slot></slot>
+      <slot />
    </main>
-  <PageFooter />
-</div>
+    <BaseFooter />
  </body>
 </html>

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

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

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

+  /* 响应式设计 */
  @media (max-width: 640px) {
-    .container {
-      padding: 16px;
+    main {
+      padding: var(--space-sm);
    }
  }
 </style>
--- a/src/layouts/PageFooter.astro
+++ b/src/layouts/PageFooter.astro
@@ -1,26 +0,0 @@
-<footer>
-  <div>© 2026 Uroboros</div>
-  <a href="https://beian.miit.gov.cn" target="_blank">备案号：鄂ICP备2023000060号-2</a>
-</footer>
-
-<style>
-  footer {
-    flex-shrink: 0;
-    min-height: 0;
-    height: 84px;
-    padding-bottom: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 13px;
-    gap: 12px;
-    color: var(--text-secondary);
-  }
-
-  @media (max-width: 640px) {
-    footer {
-      height: 64px;
-      padding-bottom: 0;
-    }
-  }
-</style>
--- a/src/layouts/PageHeader.astro
+++ b/src/layouts/PageHeader.astro
@@ -1,56 +0,0 @@
---
-import {siteConfig} from "@/consts.ts";
-import ThemeIcon from "@/components/ThemeIcon.astro";
-
-const {siteTitle,git} = siteConfig;
---
-
-<header>
-  <a href="/"><h1>{siteTitle}</h1></a>
-  <nav>
-    <a href="/archive">归档</a>
-    <a target="_blank" href={git}>git</a>
-
-    <ThemeIcon />
-  </nav>
-</header>
-
-<style>
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: var(--border-primary);
-    margin-top: 32px;
-    padding-bottom: 24px;
-  }
-
-  nav {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    font-size: 14px;
-    color: var(--text-secondary);
-  }
-
-  nav a:hover {
-    color: var(--text-primary);
-  }
-
-  h1 {
-    font-size: 24px;
-    font-weight: 600;
-  }
-
-  @media (max-width: 640px) {
-    header {
-      margin-top: 12px;
-      margin-bottom: 0;
-    }
-
-    h1 {
-      font-size: 20px;
-      font-weight: normal;
-    }
-  }
-</style>
--- a/src/layouts/PostLayout.astro
+++ b/src/layouts/PostLayout.astro
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -1,10 +0,0 @@
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-export const formatDatetime = (date: string,format = 'YYYY-MM-DD HH:mm') => {
-  return dayjs(date).tz('Asia/Shanghai').format(format);
-};
--- a/src/lib/processHtml.ts
+++ b/src/lib/processHtml.ts
@@ -1,115 +0,0 @@
-import {JSDOM} from 'jsdom'
-import {createHighlighter} from 'shiki'
-
-const DEFAULT_THEME = 'github-dark-dimmed'
-
-const highlighter = await createHighlighter({
-  themes: [DEFAULT_THEME],
-  langs: []
-})
-
-const SUPPORTED_LANGS = [
-  "bash", "json", "yaml", "xml", "html", "css", "scss",
-  "javascript", "typescript", "jsx", "tsx", "vue",
-  "markdown", "sql", "python", "go", "dockerfile", "nginx"
-] as const
-
-const loadedLangs = new Set<string>(['text'])
-
-type SupportedLang = typeof SUPPORTED_LANGS[number]
-
-const supportedSet = new Set<string>(SUPPORTED_LANGS)
-
-const ensureLangLoaded = async (lang: string): Promise<string> => {
-  if (lang === 'text' || loadedLangs.has(lang)) return lang
-  if (!supportedSet.has(lang)) return 'text'
-  try {
-    await highlighter.loadLanguage(lang as SupportedLang)
-    loadedLangs.add(lang)
-    return lang
-  } catch {
-    return 'text'
-  }
-}
-
-export const processHtmlWithJsdom = async (rawHtml: string) => {
-  const dom = new JSDOM(rawHtml)
-  const document = dom.window.document
-
-  const codeBlocks = document.querySelectorAll('pre code')
-
-  for (const codeBlock of codeBlocks) {
-    const preEl = codeBlock.parentElement
-    if (!preEl || preEl.tagName !== 'PRE') continue
-
-    const codeContent = codeBlock.textContent || ''
-    let lang = 'text'
-    for (const cls of codeBlock.classList) {
-      if (cls.startsWith('language-')) {
-        lang = cls.slice('language-'.length)
-        break
-      }
-    }
-
-    lang = await ensureLangLoaded(lang)   // ← 唯一改动点：按需加载
-
-    const highlighted = highlighter.codeToHtml(codeContent, {
-      lang,
-      theme: DEFAULT_THEME,
-    })
-
-    // 替换 DOM
-    const wrapper = document.createElement('div')
-    wrapper.innerHTML = highlighted.trim()
-
-    const newNode = wrapper.firstElementChild
-    if (newNode && preEl.parentNode) {
-      const container = document.createElement('div')
-      container.className = 'code-block'
-
-      const header = document.createElement('div')
-      header.className = 'code-header'
-
-      const headerLeft = document.createElement('div')
-      headerLeft.className = 'code-header-left'
-
-      const headerRight = document.createElement('div')
-      headerRight.className = 'code-header-right'
-
-      // 装饰点
-      const actions = document.createElement('div')
-      actions.className = 'code-actions'
-
-      const close = document.createElement('span')
-      close.className = 'dot close'
-
-      const minimize = document.createElement('span')
-      minimize.className = 'dot minimize'
-
-      const maximize = document.createElement('span')
-      maximize.className = 'dot maximize'
-
-      actions.append(close, minimize, maximize)
-
-      // 显示语言
-      const langDisplay = document.createElement('div')
-      langDisplay.className = 'code-language'
-      langDisplay.textContent = lang ? lang : 'text'
-
-      const copyBtn = document.createElement('div')
-      copyBtn.className = 'code-copy-btn'
-      copyBtn.textContent = '复制代码'
-
-      headerLeft.append(actions, langDisplay)
-      headerRight.append(copyBtn)
-
-      header.append(headerLeft, headerRight)
-
-      container.append(header, newNode)
-
-      preEl.parentNode.replaceChild(container, preEl)
-    }
-  }
-
-  return document.body.innerHTML
-}
--- a/src/lib/request.ts
+++ b/src/lib/request.ts
@@ -1,51 +0,0 @@
-import ky, {type Options} from 'ky'
-
-type ForwardHeaderSource = Headers | Record<string, string | undefined> | undefined | null
-
-const api = ky.create({
-  baseUrl: import.meta.env.VITE_API_BASE_URL
-});
-
-const pickHeader = (source: ForwardHeaderSource, name: string): string | undefined => {
-  if (!source) return undefined
-  if (source instanceof Headers) return source.get(name) ?? undefined
-  return source[name] ?? source[name.toLowerCase()]
-}
-
-const buildForwardHeaders = (source: ForwardHeaderSource): Record<string, string> => {
-  const xff = pickHeader(source, 'x-forwarded-for')
-  const realIp = pickHeader(source, 'x-real-ip')
-  const cfIp = pickHeader(source, 'cf-connecting-ip')
-  const ua = pickHeader(source, 'user-agent')
-  const referer = pickHeader(source, 'referer')
-  const host = pickHeader(source, 'host')
-  const proto = pickHeader(source, 'x-forwarded-proto')
-
-  return {
-    ...(xff ? {'x-forwarded-for': xff} : {}),
-    ...(realIp ? {'x-real-ip': realIp} : {}),
-    ...(cfIp ? {'cf-connecting-ip': cfIp} : {}),
-    ...(ua ? {'user-agent': ua} : {}),
-    ...(referer ? {referer} : {}),
-    ...(host ? {host} : {}),
-    ...(proto ? {'x-forwarded-proto': proto} : {})
-  }
-}
-
-export const createHttp = (forwardHeadersSource?: ForwardHeaderSource) => {
-  const forwardedHeaders = buildForwardHeaders(forwardHeadersSource)
-
-  return {
-    get: async <T = unknown>(url: string, options?: Options): Promise<T> => {
-      return api.get(url, {
-        ...options,
-        headers: {
-          ...forwardedHeaders,
-          ...(options?.headers ?? {})
-        }
-      }).json<T>()
-    }
-  };
-}
-
-export const http = createHttp();
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,18 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro";
---
-
-<Layout title="404" description="这里什么也没有">
-  <div class="not-found">
-    <h1>404 NOT FOUND</h1>
-  </div>
-</Layout>
-
-<style>
-  .not-found{
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-</style>
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -0,0 +1,298 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import Tag from "@/components/Tag.astro";
+import { metadata } from "@/consts";
+
+const { author, email, githubUrl, aboutBio, skills } = metadata;
+---
+
+<Layout title="关于" description="关于我和这个博客">
+  <article class="about">
+    <!-- 个人简介区域 -->
+    <section class="profile-section">
+      <div class="avatar-container">
+        <div class="avatar">
+          <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="50" cy="50" r="50" fill="url(#gradient)"/>
+            <circle cx="50" cy="35" r="15" fill="white" opacity="0.9"/>
+            <path d="M25 75 Q25 55, 50 55 T75 75" fill="white" opacity="0.9"/>
+            <defs>
+              <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" style="stop-color:#0066FF;stop-opacity:1" />
+                <stop offset="100%" style="stop-color:#7B1FA2;stop-opacity:1" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+      </div>
+      
+      <h1 class="page-title">关于我</h1>
+      
+      <div class="bio">
+        {aboutBio.split('\n\n').map((paragraph: string) => (
+          <p>{paragraph}</p>
+        ))}
+      </div>
+    </section>
+
+    <!-- 技能标签云 -->
+    <section class="skills-section">
+      <h2 class="section-title">技能标签</h2>
+      <div class="skills-cloud">
+        {skills.map((skill: string) => (
+          <Tag tag={skill} size="medium" />
+        ))}
+      </div>
+    </section>
+
+    <!-- 联系方式 -->
+    <section class="contact-section">
+      <h2 class="section-title">联系方式</h2>
+      <div class="contact-links">
+        {email && (
+          <a href={`mailto:${email}`} class="contact-link">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke-width="2"/>
+              <polyline points="22,6 12,13 2,6" stroke-width="2"/>
+            </svg>
+            <span>Email</span>
+          </a>
+        )}
+        
+        {githubUrl && (
+          <a href={githubUrl} class="contact-link" target="_blank" rel="noopener">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+            </svg>
+            <span>GitHub</span>
+          </a>
+        )}
+      </div>
+    </section>
+
+    <!-- 关于博客 -->
+    <section class="blog-info-section">
+      <h2 class="section-title">关于这个博客</h2>
+      <div class="blog-info">
+        <p>
+          这个博客使用 <a href="https://astro.build" target="_blank" rel="noopener">Astro</a> 
+          构建，配合 <a href="https://www.solidjs.com" target="_blank" rel="noopener">SolidJS</a> 
+          实现交互功能。
+        </p>
+        <p>
+          设计追求简洁、优雅和高性能，支持明暗主题切换，提供舒适的阅读体验。
+        </p>
+        <div class="tech-stack">
+          <div class="tech-item">
+            <strong>框架</strong>
+            <span>Astro</span>
+          </div>
+          <div class="tech-item">
+            <strong>UI 库</strong>
+            <span>SolidJS</span>
+          </div>
+          <div class="tech-item">
+            <strong>语言</strong>
+            <span>TypeScript</span>
+          </div>
+          <div class="tech-item">
+            <strong>样式</strong>
+            <span>CSS Variables</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  </article>
+</Layout>
+
+<style>
+  .about {
+    max-width: var(--content-width);
+    margin: 0 auto;
+  }
+
+  /* 个人简介区域 */
+  .profile-section {
+    text-align: center;
+    margin-bottom: var(--space-2xl);
+    padding-bottom: var(--space-2xl);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .avatar-container {
+    margin-bottom: var(--space-xl);
+  }
+
+  .avatar {
+    width: 120px;
+    height: 120px;
+    margin: 0 auto;
+    border-radius: 50%;
+    overflow: hidden;
+    box-shadow: var(--shadow-md);
+  }
+
+  .avatar svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .page-title {
+    font-size: var(--text-h1);
+    line-height: var(--line-h1);
+    font-weight: 800;
+    margin: 0 0 var(--space-lg) 0;
+    color: var(--text-primary);
+  }
+
+  .bio {
+    max-width: 600px;
+    margin: 0 auto;
+    text-align: left;
+  }
+
+  .bio p {
+    font-size: var(--text-base);
+    line-height: var(--line-base);
+    color: var(--text-secondary);
+    margin-bottom: var(--space-md);
+  }
+
+  /* 技能区域 */
+  .skills-section {
+    margin-bottom: var(--space-2xl);
+    padding-bottom: var(--space-2xl);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .section-title {
+    font-size: var(--text-h2);
+    line-height: var(--line-h2);
+    font-weight: 700;
+    margin: 0 0 var(--space-lg) 0;
+    color: var(--text-primary);
+  }
+
+  .skills-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-md);
+    justify-content: center;
+  }
+
+  /* 联系方式区域 */
+  .contact-section {
+    margin-bottom: var(--space-2xl);
+    padding-bottom: var(--space-2xl);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .contact-links {
+    display: flex;
+    gap: var(--space-lg);
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .contact-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md) var(--space-lg);
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    text-decoration: none;
+    transition: all var(--transition-base);
+    font-weight: 500;
+  }
+
+  .contact-link:hover {
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+  }
+
+  /* 博客信息区域 */
+  .blog-info-section {
+    margin-bottom: var(--space-2xl);
+  }
+
+  .blog-info p {
+    font-size: var(--text-base);
+    line-height: var(--line-base);
+    color: var(--text-secondary);
+    margin-bottom: var(--space-md);
+  }
+
+  .blog-info a {
+    color: var(--accent-color);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color var(--transition-fast);
+  }
+
+  .blog-info a:hover {
+    border-bottom-color: var(--accent-color);
+  }
+
+  .tech-stack {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: var(--space-md);
+    margin-top: var(--space-lg);
+  }
+
+  .tech-item {
+    padding: var(--space-md);
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+  }
+
+  .tech-item strong {
+    font-size: var(--text-small);
+    color: var(--text-secondary);
+    font-weight: 600;
+  }
+
+  .tech-item span {
+    font-size: var(--text-base);
+    color: var(--text-primary);
+    font-weight: 500;
+  }
+
+  /* 响应式设计 */
+  @media (max-width: 640px) {
+    .page-title {
+      font-size: 28px;
+    }
+
+    .section-title {
+      font-size: 24px;
+    }
+
+    .bio {
+      text-align: left;
+    }
+
+    .contact-links {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .contact-link {
+      justify-content: center;
+    }
+
+    .tech-stack {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
--- a/src/pages/archive.astro
+++ b/src/pages/archive.astro
@@ -1,135 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro";
-import type {Archive} from "@/types/archive";
-import {createHttp} from "@/lib/request";
-
-const http = createHttp(Astro.request.headers);
-
-const {data} = await http.get<ApiResponse<Archive>>("posts/archives");
---
-
-
-<Layout title="归档" description="">
-  <div class="archive">
-    {
-      data.map((year) => (
-        <div class="archive-year">
-          <h2 class="year-title">
-            <span class="year-badge">{year.year}年</span>
-            <span class="year-count">共 {year.total} 篇</span>
-          </h2>
-          <div>
-            {year.list.map((month) => (
-              <div class="month-group">
-                <h3 class="month-title">{month.month} 月</h3>
-                <ul class="post-list">
-                  {month.list.map((post) => (
-                    <li class="post-item">
-                        <span class="post-date">
-                          {post.published_at_display}
-                        </span>
-                      <a class="post-title" href={`/post/${post.slug}`}>{post.title}</a>
-                      <span class="post-cat">{post.category_name}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-        </div>
-      ))
-    }
-  </div>
-</Layout>
-
-<style>
-  .archive {
-
-  }
-
-  .archive-year {
-
-  }
-
-  .year-title {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    color: var(--text-primary);
-    font-size: 28px;
-    margin-bottom: 24px;
-  }
-
-  .year-badge {
-
-  }
-
-  .year-count {
-    font-size: 14px;
-    font-weight: normal;
-  }
-
-  .month-group {
-    padding: 12px 0;
-  }
-
-  .month-title {
-    color: var(--text-primary);
-    font-weight: normal;
-  }
-
-  .post-list {
-    padding: 12px 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .post-item {
-    display: flex;
-    gap: 24px;
-    font-size: 14px;
-    border-bottom: var(--border-secondary);
-    padding: 18px 0;
-    align-items: center;
-  }
-
-  .post-item:last-child {
-    border-bottom: none;
-  }
-
-  .post-date {
-    color: var(--text-meta);
-  }
-
-  .post-title {
-    flex: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    color: var(--text-primary);
-    font-size: 16px;
-    text-underline-offset: 4px;
-    line-height: 24px;
-  }
-
-  .post-title:hover{
-    color: var(--text-title-hover);
-    text-decoration: underline;
-  }
-
-  .post-cat {
-    color: var(--text-meta);
-    font-size: 14px;
-  }
-
-  @media (max-width: 640px) {
-    .year-title{
-      font-size: 24px;
-    }
-
-    .post-title{
-      font-size: 15px;
-    }
-  }
-
-</style>
--- a/src/pages/categories/[category].astro
+++ b/src/pages/categories/[category].astro
--- a/src/pages/categories/index.astro
+++ b/src/pages/categories/index.astro
--- a/src/pages/embed/gitea.astro
+++ b/src/pages/embed/gitea.astro
@@ -1,139 +0,0 @@
---
-const noindex = true;
---
-
-<!doctype html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8"/>
-  <meta
-    name="viewport"
-    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
-  />
-  <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
-  <meta name="generator" content={Astro.generator}/>
-  <title>Gitea 入口</title>
-  <meta name="theme-color" content="#ffffff"/>
-  <meta name="robots" content="noindex, nofollow">
-  <style>
-    @import "modern-normalize";
-
-    :root {
-      --bg: #f6f7f9;
-      --card-bg: #ffffff;
-      --border: #e5e7eb;
-      --text-color: #2b2f36;
-      --text-secondary: #6b7280;
-      --primary: #4f6df5;
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-
-    body {
-      margin: 0;
-      min-height: 100vh;
-      background: var(--bg);
-      color: var(--text-color);
-      font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    .page-container {
-      height: 100vh;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 24px 24px 24px 24px;
-    }
-
-    .gitea-card {
-      width: 100%;
-      max-width: 520px;
-      background: var(--card-bg);
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-      overflow: hidden;
-    }
-
-    .gitea-card__title {
-      padding: 14px 20px;
-      font-size: 15px;
-      font-weight: 600;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .gitea-content {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .gitea-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 16px;
-      padding: 13px 20px;
-      font-size: 14px;
-    }
-
-    .gitea-item + .gitea-item {
-      border-top: 1px solid var(--border);
-    }
-
-    .gitea-item:hover {
-      background: #fafbfc;
-    }
-
-    .gitea-item__label {
-      color: var(--text-secondary);
-    }
-
-    .gitea-item__link {
-      color: var(--primary);
-      text-decoration: none;
-      white-space: nowrap;
-    }
-
-    .gitea-item__link:hover {
-      text-decoration: underline;
-    }
-  </style>
-</head>
-<body>
-<div class="page-container">
-  <div class="gitea-card">
-    <div class="gitea-card__title">常用入口</div>
-    <div class="gitea-content">
-      <div class="gitea-item">
-        <span class="gitea-item__label">博客地址</span>
-        <a class="gitea-item__link" target="_blank" href="https://ua42.com">点击访问</a>
-      </div>
-
-      <div class="gitea-item">
-        <span class="gitea-item__label">博客管理后台(支持游客查看)</span>
-        <a class="gitea-item__link" target="_blank" href="https://admin.ua42.com">点击访问</a>
-      </div>
-
-      <div class="gitea-item">
-        <span class="gitea-item__label">仓库地址</span>
-        <a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin">点击访问</a>
-      </div>
-
-      <div class="gitea-item">
-        <span class="gitea-item__label">博客服务端仓库</span>
-        <a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin/blog-server">点击访问</a>
-      </div>
-
-      <div class="gitea-item">
-        <span class="gitea-item__label">博客服务端 API文档</span>
-        <a class="gitea-item__link" target="_blank" href="https://dev.ua42.com/docs/server-documentation.html">点击访问</a>
-      </div>
-    </div>
-  </div>
-</div>
-</body>
-</html>
-
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,23 +1,119 @@
 ---
 import Layout from "@/layouts/Layout.astro";
-import {siteConfig} from "@/consts.ts";
-import {createHttp} from "@/lib/request.ts";
-import type {Post} from "@/types";
-import IndexPage from "@/components/IndexPage.astro";
+import PostCard from "@/components/PostCard.astro";
+import { getCollection } from "astro:content";
+import { metadata } from "@/consts";

-const {postPageSize, description} = siteConfig;
+const { heroTitle, heroDescription } = metadata;

-const http = createHttp(Astro.request.headers);
-
-const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
-  searchParams: {
-    page: 1,
-    page_size: postPageSize,
-  },
-});
-const totalPage = Math.ceil(total / postPageSize);
+// 获取所有文章并按日期排序
+const posts = (await getCollection("posts")).sort(
+  (a, b) => b.data.date.getTime() - a.data.date.getTime()
+);
 ---

-<Layout title="博客首页" description={description}>
-  <IndexPage page={1} totalPage={totalPage} posts={list}/>
+<Layout title="首页">
+  <!-- Hero 区域 -->
+  <section class="hero">
+    <div class="hero-content">
+      <h1 class="hero-title">{heroTitle}</h1>
+      <p class="hero-description">{heroDescription}</p>
+    </div>
+  </section>
+
+  <!-- 文章列表 -->
+  <section class="posts-section">
+    <h2 class="section-title">最新文章</h2>
+    <div class="posts-grid">
+      {posts.map((post) => (
+        <PostCard
+          title={post.data.title}
+          date={post.data.date}
+          summary={post.data.summary}
+          slug={post.slug}
+          tags={post.data.tags}
+        />
+      ))}
+    </div>
+  </section>
 </Layout>
+
+<style>
+  /* Hero 区域样式 */
+  .hero {
+    padding: var(--space-2xl) 0;
+    text-align: center;
+    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--space-2xl);
+  }
+
+  .hero-content {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 0 var(--space-md);
+  }
+
+  .hero-title {
+    font-size: var(--text-h1);
+    line-height: var(--line-h1);
+    font-weight: 800;
+    margin: 0 0 var(--space-md) 0;
+    color: var(--text-primary);
+    background: linear-gradient(135deg, var(--accent-color) 0%, #7B1FA2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .hero-description {
+    font-size: var(--text-h3);
+    line-height: var(--line-h3);
+    color: var(--text-secondary);
+    margin: 0;
+  }
+
+  /* 文章区域 */
+  .posts-section {
+    margin-bottom: var(--space-2xl);
+  }
+
+  .section-title {
+    font-size: var(--text-h2);
+    line-height: var(--line-h2);
+    font-weight: 700;
+    margin: 0 0 var(--space-xl) 0;
+    color: var(--text-primary);
+  }
+
+  .posts-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: var(--space-lg);
+  }
+
+  /* 响应式设计 */
+  @media (max-width: 640px) {
+    .hero {
+      padding: var(--space-xl) 0;
+      margin-bottom: var(--space-xl);
+    }
+
+    .hero-title {
+      font-size: 32px;
+    }
+
+    .hero-description {
+      font-size: 18px;
+    }
+
+    .posts-grid {
+      grid-template-columns: 1fr;
+      gap: var(--space-md);
+    }
+
+    .section-title {
+      font-size: 24px;
+    }
+  }
+</style>
--- a/src/pages/page/[...page].astro
+++ b/src/pages/page/[...page].astro
@@ -1,34 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro";
-import {siteConfig} from "@/consts.ts";
-import {createHttp} from "@/lib/request.ts";
-import type {Post} from "@/types";
-import IndexPage from "@/components/IndexPage.astro";
-const {page} = Astro.params;
-
-const pageInt = Number(page);
-
-if (isNaN(pageInt) || pageInt <= 1) {
-  return Astro.redirect("/");
-}
-
-const {postPageSize,description} = siteConfig;
-
-const http = createHttp(Astro.request.headers);
-
-const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
-  searchParams: {
-    page: pageInt,
-    page_size: postPageSize,
-  },
-});
-const totalPage = Math.ceil(total / postPageSize);
-
-if (totalPage < pageInt) {
-  return Astro.redirect("/404");
-}
---
-
-<Layout title="博客首页" description={description}>
-  <IndexPage page={pageInt} totalPage={totalPage} posts={list}/>
-</Layout>
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -1,237 +0,0 @@
---
-import "@/styles/github-markdown.css";
-import "@/styles/github-markdown-reset.css";
-import "photoswipe/dist/photoswipe.css";
-
-import Layout from '@/layouts/Layout.astro';
-import {createHttp} from "@/lib/request.ts";
-import type {Post} from "@/types";
-import {processHtmlWithJsdom} from "@/lib/processHtml.ts";
-import {formatDatetime} from "@/lib/format.ts";
-
-const {slug} = Astro.params;
-
-const http = createHttp(Astro.request.headers);
-
-let data: Post;
-
-try {
-  const res = await http.get<ApiResponse<Post>>(`posts/${slug}`);
-  data = res.data;
-} catch (error) {
-  return Astro.redirect("/404");
-}
-
-const content = await processHtmlWithJsdom(data.content);
-const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
---
-
-<Layout title={data.title} description={data.summary}>
-  <article>
-    <div class="meta">
-      <div class="meta-left">
-        <span>{data.category_name} · {data.category_code.toUpperCase()}</span>
-        <span>{published_at}</span>
-      </div>
-
-      <div class="meta-view-count">{data.view_count} 次阅读</div>
-    </div>
-    <h1>{data.title}</h1>
-
-    {data.cover &&
-      <div>
-        <img class="cover" src={data.cover} alt={data.title}>
-      </div>
-    }
-
-    <p class="summary">{data.summary}</p>
-
-    <div class="divider"></div>
-
-    <div class="markdown-body" data-color-mode="dark" set:html={content}/>
-
-    {
-      data.tags.length > 0 &&
-      <div class="tags">
-        {data.tags.map(tag => <span>{tag.name}</span>)}
-      </div>
-    }
-  </article>
-</Layout>
-
-<style>
-  article {
-    width: 100%;
-    margin: 0 auto;
-    flex: 1;
-    flex-shrink: 0;
-  }
-
-  .cover {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-
-  .meta {
-    color: var(--text-meta);
-    font-size: 13px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-  }
-
-  .meta-left {
-    display: flex;
-    gap: 16px;
-    flex-wrap: wrap;
-  }
-
-  .meta-view-count:hover {
-    color: var(--text-primary);
-  }
-
-  h1 {
-    font-size: 28px;
-    line-height: 1.4;
-    font-weight: 500;
-    margin-bottom: 20px;
-  }
-
-  .summary {
-    font-size: 14px;
-    margin-bottom: 20px;
-    color: var(--text-meta);
-    line-height: 1.4;
-  }
-
-  .divider {
-    border-bottom: var(--border-secondary);
-  }
-
-  .markdown-body {
-    margin-top: 24px;
-    line-height: 1.8;
-    font-size: 15px;
-    color: var(--article-text-color);
-  }
-
-  .tags {
-    margin-top: 24px;
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-  }
-
-  .tags span {
-    font-size: 12px;
-    color: var(--text-secondary);
-    border: var(--border-primary);
-    border-radius: 20px;
-    padding: 8px 16px;
-  }
-
-  @media (max-width: 640px) {
-    h1{
-      font-size: 24px;
-    }
-  }
-</style>
-
-<script>
-  import PhotoSwipeLightbox from "photoswipe/lightbox";
-  import ClipboardJS from "clipboard";
-
-  const init = async () => {
-    const article = document.querySelector(".markdown-body")!;
-    const images = Array.from(article.querySelectorAll("img"));
-
-    if(images.length === 0) return
-
-    const waitImageLoaded = (img: HTMLImageElement) => {
-      if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
-        return Promise.resolve();
-      }
-
-      return new Promise<void>((resolve) => {
-        img.addEventListener("load", () => resolve(), {once: true});
-        img.addEventListener("error", () => resolve(), {once: true});
-      });
-    };
-
-    await Promise.all(
-      images.map(async (img) => {
-        if (img.closest("a")) return;
-
-        await waitImageLoaded(img);
-
-        const link = document.createElement("a");
-
-        link.href = img.currentSrc || img.src;
-        link.target = "_blank";
-        link.rel = "noreferrer";
-        link.dataset.pswpWidth = String(img.naturalWidth || img.width || 1200);
-        link.dataset.pswpHeight = String(
-          img.naturalHeight || img.height || 800,
-        );
-
-        img.parentNode?.insertBefore(link, img);
-        link.appendChild(img);
-      }),
-    );
-
-    const lightbox = new PhotoSwipeLightbox({
-      gallery: ".markdown-body",
-      children: "a[data-pswp-width]",
-      pswpModule: () => import("photoswipe"),
-
-      padding: {
-        top: 48,
-        right: 24,
-        bottom: 48,
-        left: 24,
-      },
-      bgOpacity: 0.5,
-      tapAction: "close",
-      bgClickAction: "close",
-    });
-
-    lightbox.init();
-  };
-
-  init();
-
-
-  const copyTimers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();
-
-  // 代码块复制功能
-  const clipboard = new ClipboardJS(".code-copy-btn", {
-    text: (el) => {
-      const sibling = el.closest(".code-header")?.nextElementSibling;
-      return sibling?.textContent.trim() || "";
-    }
-  });
-
-  clipboard.on("success", (e) => {
-    const btn = e.trigger as HTMLElement;
-
-    // 清理当前按钮之前的定时器
-    const oldTimer = copyTimers.get(btn);
-    if (oldTimer) {
-      clearTimeout(oldTimer);
-    }
-
-    const originalText = btn.textContent || "";
-
-    btn.textContent = "✓ 代码已复制";
-
-    const timer = setTimeout(() => {
-      btn.textContent = originalText;
-      copyTimers.delete(btn);
-    }, 2000);
-
-    copyTimers.set(btn, timer);
-
-    e.clearSelection();
-  });
-</script>
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -0,0 +1,344 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import Tag from "@/components/Tag.astro";
+import { getCollection } from "astro:content";
+
+export const prerender = true;
+
+export async function getStaticPaths() {
+  const posts = await getCollection("posts");
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+const { Content } = await post.render();
+
+// 格式化日期
+const formatDate = (date: Date) => {
+  return new Intl.DateTimeFormat("zh-CN", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }).format(date);
+};
+
+// 计算阅读时间
+const calculateReadingTime = (text: string) => {
+  const wordsPerMinute = 200;
+  const wordCount = text.length;
+  return Math.ceil(wordCount / wordsPerMinute);
+};
+
+const readingTime = calculateReadingTime(post.body);
+---
+
+<Layout title={post.data.title} description={post.data.summary}>
+  <article class="post">
+    <!-- 文章头部 -->
+    <header class="post-header">
+      <h1 class="post-title">{post.data.title}</h1>
+      
+      <div class="post-meta">
+        <time class="post-date" datetime={post.data.date.toISOString()}>
+          {formatDate(post.data.date)}
+        </time>
+        <span class="separator">·</span>
+        <span class="reading-time">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <circle cx="12" cy="12" r="10" stroke-width="2"/>
+            <polyline points="12 6 12 12 16 14" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+          {readingTime} 分钟阅读
+        </span>
+      </div>
+
+      {post.data.tags && post.data.tags.length > 0 && (
+        <div class="post-tags">
+          {post.data.tags.map((tag) => <Tag tag={tag} size="medium" />)}
+        </div>
+      )}
+    </header>
+
+    <!-- 文章内容 -->
+    <div class="post-content">
+      <Content />
+    </div>
+
+    <!-- 文章底部操作 -->
+    <footer class="post-footer">
+      <a href="/" class="back-button">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        返回首页
+      </a>
+    </footer>
+  </article>
+</Layout>
+
+<style>
+  .post {
+    max-width: var(--content-width);
+    margin: 0 auto;
+  }
+
+  /* 文章头部 */
+  .post-header {
+    margin-bottom: var(--space-2xl);
+    padding-bottom: var(--space-xl);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .post-title {
+    font-size: var(--text-h1);
+    line-height: var(--line-h1);
+    font-weight: 800;
+    margin: 0 0 var(--space-lg) 0;
+    color: var(--text-primary);
+  }
+
+  .post-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-size: var(--text-small);
+    color: var(--text-secondary);
+    margin-bottom: var(--space-md);
+  }
+
+  .post-date {
+    font-size: var(--text-small);
+  }
+
+  .separator {
+    color: var(--border-color);
+  }
+
+  .reading-time {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    font-size: var(--text-small);
+  }
+
+  .post-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+  }
+
+  /* 文章内容样式 */
+  .post-content {
+    color: var(--text-primary);
+    line-height: var(--line-base);
+  }
+
+  /* Markdown 元素样式 */
+  .post-content :global(h1),
+  .post-content :global(h2),
+  .post-content :global(h3),
+  .post-content :global(h4),
+  .post-content :global(h5),
+  .post-content :global(h6) {
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-top: var(--space-xl);
+    margin-bottom: var(--space-md);
+    line-height: 1.3;
+  }
+
+  .post-content :global(h1) {
+    font-size: var(--text-h1);
+    margin-top: var(--space-2xl);
+  }
+
+  .post-content :global(h2) {
+    font-size: var(--text-h2);
+    padding-bottom: var(--space-sm);
+    border-bottom: 2px solid var(--border-color);
+  }
+
+  .post-content :global(h3) {
+    font-size: var(--text-h3);
+  }
+
+  .post-content :global(p) {
+    margin: var(--space-md) 0;
+    line-height: var(--line-base);
+  }
+
+  .post-content :global(a) {
+    color: var(--accent-color);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color var(--transition-fast);
+  }
+
+  .post-content :global(a:hover) {
+    border-bottom-color: var(--accent-color);
+  }
+
+  .post-content :global(strong) {
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+
+  .post-content :global(em) {
+    font-style: italic;
+  }
+
+  /* 列表样式 */
+  .post-content :global(ul),
+  .post-content :global(ol) {
+    margin: var(--space-md) 0;
+    padding-left: var(--space-xl);
+  }
+
+  .post-content :global(li) {
+    margin: var(--space-sm) 0;
+    line-height: var(--line-base);
+  }
+
+  .post-content :global(li::marker) {
+    color: var(--accent-color);
+  }
+
+  /* 引用样式 */
+  .post-content :global(blockquote) {
+    margin: var(--space-lg) 0;
+    padding: var(--space-md) var(--space-lg);
+    border-left: 4px solid var(--accent-color);
+    background-color: var(--bg-secondary);
+    font-style: italic;
+    color: var(--text-secondary);
+  }
+
+  .post-content :global(blockquote p) {
+    margin: var(--space-sm) 0;
+  }
+
+  /* 代码样式 */
+  .post-content :global(code) {
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    background-color: var(--border-color);
+    padding: 2px 6px;
+    border-radius: 4px;
+  }
+
+  .post-content :global(pre) {
+    margin: var(--space-lg) 0;
+    padding: var(--space-md);
+    background-color: #1e1e1e;
+    border-radius: var(--radius-sm);
+    overflow-x: auto;
+  }
+
+  .post-content :global(pre code) {
+    background-color: transparent;
+    padding: 0;
+    color: #d4d4d4;
+  }
+
+  /* 表格样式 */
+  .post-content :global(table) {
+    width: 100%;
+    border-collapse: collapse;
+    margin: var(--space-lg) 0;
+    font-size: var(--text-small);
+  }
+
+  .post-content :global(th),
+  .post-content :global(td) {
+    padding: var(--space-sm) var(--space-md);
+    border: 1px solid var(--border-color);
+    text-align: left;
+  }
+
+  .post-content :global(th) {
+    background-color: var(--bg-secondary);
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+
+  .post-content :global(tr:nth-child(even)) {
+    background-color: var(--bg-secondary);
+  }
+
+  /* 图片样式 */
+  .post-content :global(img) {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-md);
+    margin: var(--space-lg) 0;
+    box-shadow: var(--shadow-sm);
+  }
+
+  /* 分割线 */
+  .post-content :global(hr) {
+    border: none;
+    border-top: 1px solid var(--border-color);
+    margin: var(--space-xl) 0;
+  }
+
+  /* 文章底部 */
+  .post-footer {
+    margin-top: var(--space-2xl);
+    padding-top: var(--space-xl);
+    border-top: 1px solid var(--border-color);
+  }
+
+  .back-button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-sm) var(--space-md);
+    color: var(--text-primary);
+    text-decoration: none;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    transition: all var(--transition-base);
+    font-size: var(--text-small);
+  }
+
+  .back-button:hover {
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+    color: white;
+    transform: translateX(-4px);
+  }
+
+  /* 响应式设计 */
+  @media (max-width: 640px) {
+    .post-title {
+      font-size: 28px;
+    }
+
+    .post-meta {
+      flex-wrap: wrap;
+    }
+
+    .post-content :global(h1) {
+      font-size: 28px;
+    }
+
+    .post-content :global(h2) {
+      font-size: 24px;
+    }
+
+    .post-content :global(h3) {
+      font-size: 20px;
+    }
+
+    .post-content :global(pre) {
+      font-size: 14px;
+    }
+
+    .post-content :global(table) {
+      font-size: var(--text-tiny);
+    }
+  }
+</style>
--- a/src/pages/sitemap-pages.xml.ts
+++ b/src/pages/sitemap-pages.xml.ts
@@ -1,32 +0,0 @@
-import type {APIRoute} from 'astro';
-import {siteConfig} from "@/consts";
-
-const site = siteConfig.site
-
-const staticUrls = [
-  '',
-  '/archive'
-];
-
-export const GET: APIRoute = async () => {
-  const urls = staticUrls
-    .filter((url, index, array) => {
-      return array.indexOf(url) === index;
-    });
-
-  const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-              ${urls.map((url) => `<url>
-                <loc>${site}${url}</loc>
-              </url>`
-  )
-    .join('\n')}
-</urlset>`;
-
-  return new Response(xml, {
-    status: 200,
-    headers: {
-      'Content-Type': 'application/xml; charset=utf-8',
-      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
-    },
-  });
-};
--- a/src/pages/sitemap-posts.xml.ts
+++ b/src/pages/sitemap-posts.xml.ts
@@ -1,35 +0,0 @@
-import type {APIRoute} from 'astro';
-import {siteConfig} from "@/consts";
-import {createHttp} from "@/lib/request.ts";
-import type {PostForSitemap} from "@/types";
-import dayjs from "dayjs";
-
-const site =siteConfig.site
-
-export const GET: APIRoute = async (context) => {
-  const http = createHttp(context.request.headers);
-
-  const {data} = await http.get<ApiResponse<PostForSitemap[]>>("posts/sitemap")
-
-  const urls = data
-    .filter((url, index, array) => {
-      return array.indexOf(url) === index;
-    });
-
-  const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-              ${urls.map((post) => `<url>
-                <loc>${site}/post/${post.slug}</loc>
-                <lastmod>${dayjs(post.updated_at || post.created_at).toISOString()}</lastmod>
-              </url>`
-  )
-    .join('\n')}
-</urlset>`;
-
-  return new Response(xml, {
-    status: 200,
-    headers: {
-      'Content-Type': 'application/xml; charset=utf-8',
-      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
-    },
-  });
-};
--- a/src/pages/sitemap.xml.ts
+++ b/src/pages/sitemap.xml.ts
@@ -1,21 +0,0 @@
-import type {APIRoute} from 'astro';
-import {siteConfig} from "@/consts";
-
-const site = siteConfig.site
-
-export const GET: APIRoute = () => {
-  const xml = `<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  <sitemap>
-    <loc>${site}/sitemap-pages.xml</loc>
-  </sitemap>
-  <sitemap>
-    <loc>${site}/sitemap-posts.xml</loc>
-  </sitemap>
-</sitemapindex>`;
-
-  return new Response(xml, {
-    headers: {
-      'Content-Type': 'application/xml; charset=utf-8',
-    },
-  });
-};
--- a/src/pages/tags/[tag].astro
+++ b/src/pages/tags/[tag].astro
--- a/src/pages/tags/index.astro
+++ b/src/pages/tags/index.astro
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -0,0 +1,123 @@
+@import "modern-normalize";
+@import "./reset.css";
+
+:root {
+  /* 布局宽度 */
+  --layout-width: 1200px;
+  --content-width: 800px;
+  
+  /* 明亮主题配色 */
+  --bg-primary: #FAFAFA;
+  --bg-secondary: #FFFFFF;
+  --text-primary: #1A1A1A;
+  --text-secondary: #666666;
+  --accent-color: #0066FF;
+  --border-color: #E5E5E5;
+  
+  /* 字体家族 */
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;
+  
+  /* 字体尺寸 */
+  --text-h1: 36px;
+  --text-h2: 28px;
+  --text-h3: 22px;
+  --text-base: 17px;
+  --text-small: 14px;
+  --text-tiny: 12px;
+  
+  /* 行高 */
+  --line-h1: 1.3;
+  --line-h2: 1.4;
+  --line-h3: 1.4;
+  --line-base: 1.8;
+  --line-small: 1.6;
+  --line-tiny: 1.5;
+  
+  /* 间距系统 (8px base) */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+  --space-2xl: 48px;
+  
+  /* 圆角 */
+  --radius-sm: 6px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  
+  /* 阴影 */
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+  
+  /* 过渡动画 */
+  --transition-fast: 150ms ease-in-out;
+  --transition-base: 200ms ease-out;
+  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 暗黑主题 */
+[data-theme="dark"] {
+  --bg-primary: #0F0F0F;
+  --bg-secondary: #1A1A1A;
+  --text-primary: #E5E5E5;
+  --text-secondary: #A0A0A0;
+  --accent-color: #3B82F6;
+  --border-color: #2A2A2A;
+  
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+
+/* 全局样式 */
+html {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--line-base);
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  transition: background-color var(--transition-slow), color var(--transition-slow);
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* 链接样式 */
+a {
+  color: var(--accent-color);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* 代码样式 */
+code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background-color: var(--border-color);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+pre {
+  font-family: var(--font-mono);
+  overflow-x: auto;
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
--- a/src/styles/css-reset.css
+++ b/src/styles/css-reset.css
@@ -1,13 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-}
-
-a {
-    color: inherit;
-    text-decoration: none;
-}
-
-ul,li{
-  list-style: none;
-}
--- a/src/styles/enhancements.css
+++ b/src/styles/enhancements.css
--- a/src/styles/github-markdown-reset.css
+++ b/src/styles/github-markdown-reset.css
@@ -1,84 +0,0 @@
-.markdown-body pre code {
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.markdown-body h1,
-.markdown-body h2,
-.markdown-body h3,
-.markdown-body h4,
-.markdown-body h5,
-.markdown-body h6 {
-  border-bottom: none;
-}
-
-@media (max-width: 768px) {
-  .markdown-body pre code {
-    font-size: inherit;
-  }
-}
-
-.markdown-body .highlight pre,
-.markdown-body pre {
-  border-radius: 0 0 8px 8px;
-}
-
-.markdown-body img {
-  margin: 12px 0 12px;
-}
-
-.code-block {
-}
-
-.code-header {
-  height: 36px;
-  background: var(--code-block-header-bg);
-  display: flex;
-  justify-content: space-between;
-  color: var(--text-primary);
-  align-items: center;
-  padding: 0 12px;
-  font-size: 14px;
-  border-radius: 8px 8px 0 0;
-}
-
-.code-header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.code-actions {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-}
-
-.code-actions .dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  display: block;
-}
-
-.code-actions .close {
-  background: #ff5f57;
-}
-
-.code-actions .minimize {
-  background: #febc2e;
-}
-
-.code-actions .maximize {
-  background: #28c840;
-}
-
-.code-copy-btn {
-  font-size: 12px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.code-copy-btn:hover {
-  color: var(--code-block-copy-btn-hover-color);
-}
--- a/src/styles/github-markdown.css
+++ b/src/styles/github-markdown.css
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,65 +0,0 @@
-@import "modern-normalize";
-@import "css-reset.css";
-
-:root {
-  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --layout-width: 760px;
-
-  --background: #ffffff;
-  --border-primary: 1px solid #dcdcdc;
-  --border-secondary: 1px solid #eee;
-  --text-primary: #030712;
-  --text-secondary: #3f3f46;
-  --text-disabled: #d1d5db;
-  --text-meta: #71717a;
-  --article-text-color: #404040;
-  --text-title-hover: #000;
-
-  --code-block-header-bg: #f5f5f4;
-  --code-block-copy-btn-hover-color: #6b7280;
-}
-
-.dark {
-  --background: #0a0a0a;
-  --border-primary: 1px solid #52525b;
-  --border-secondary: 1px solid #525252;
-  --text-primary: #e4e4e7;
-  --text-secondary: #d1d5db;
-  --text-disabled: #6b7280;
-  --text-meta: #d4d4d8;
-  --article-text-color: #d4d4d8;
-  --text-title-hover: #fff;
-
-  --code-block-header-bg: #374151;
-  --code-block-copy-btn-hover-color: #9ca3af;
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
-  font-family: var(--font-family), serif;
-  color: var(--text-primary);
-}
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-/* 滚动条轨道 */
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-/* 滚动条滑块 */
-::-webkit-scrollbar-thumb {
-  background: rgba(139,139,139,.5);
-  border-radius: 999px;
-}
-
-/* 鼠标悬停 */
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(139,139,139,.7);
-}
--- a/src/styles/reset.css
+++ b/src/styles/reset.css
@@ -0,0 +1,11 @@
+/* css reset */
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul, ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
--- a/src/styles/typography.css
+++ b/src/styles/typography.css
--- a/src/types/archive.ts
+++ b/src/types/archive.ts
@@ -1,21 +0,0 @@
-type ArchiveYear = {
-  year: number;
-  total: number;
-  list: ArchiveMonth[];
-};
-
-type ArchivePost = {
-  id: number;
-  slug: string;
-  title: string;
-  published_at: string;
-  published_at_display: string;
-  category_name: string;
-};
-
-type ArchiveMonth = {
-  month: number;
-  list: ArchivePost[];
-};
-
-export type Archive = ArchiveYear[];
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -1,29 +0,0 @@
-/** 基础 API 响应结构 */
-declare interface ApiResponse<T = unknown> {
-  msg?: string
-  data: T
-}
-
-/** 分页响应结构 */
-declare interface ApiPageResponse<T = unknown> {
-  msg?: string
-  /** 当前页码 */
-  page: number
-  /** 每页数量 */
-  pageSize: number
-  /** 业务数据列表 */
-  list: T[]
-  /** 总记录数 */
-  total: number
-}
-
-/** 错误响应结构 - 当请求失败时的响应格式 */
-declare interface ApiErrorResponse {
-  msg: string
-}
-
-/** 通用请求参数类型 */
-declare interface Pagination {
-  page?: number
-  pageSize?: number
-}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1 +0,0 @@
-export * from './post.ts'
--- a/src/types/post.ts
+++ b/src/types/post.ts
@@ -1,32 +0,0 @@
-export type Tag = {
-  id: number
-  code: string
-  name: string
-}
-
-export type Post = {
-  title: string;
-  summary: string;
-  slug: string;
-  cover: string;
-  category_name: string;
-  category_code: string;
-  category_id?: number;
-  published_at: string;
-  view_count: number;
-  content: string;
-  tags: Tag[]
-}
-
-export type CategoriesStats = {
-  id: number;
-  name: string;
-  code: string
-  post_count: number;
-}
-
-export type PostForSitemap = {
-  slug: string
-  created_at: string
-  updated_at: string
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,8 @@
      "@/*": [
        "src/*"
      ]
-    }
+    },
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
  }
 }
Author	SHA1	Message	Date
xy	351184b4c1	feat: ai2	2025-11-21 13:11:03 +08:00
xy	081f072a39	feat: a2	2025-11-21 12:26:58 +08:00
				`@@ -1 +0,0 @@`
				`VITE_API_BASE_URL=http://127.0.0.1:8080/api/`
				`@@ -1 +0,0 @@`
				`VITE_API_BASE_URL=https://admin.ua42.com/api/`