style: 修复样式异常

fix: sitemap路径拼写不正确的问题
chore: 更新robot.txt
2026-08-15 12:40:12 +08:00 · 2026-08-15 00:25:55 +08:00 · 2026-08-14 23:56:44 +08:00 · 2026-08-14 23:55:52 +08:00 · 2026-08-14 22:40:26 +08:00 · 2026-08-14 21:28:41 +08:00
81 changed files with 5757 additions and 5488 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,9 @@
 root = true
 [*]
 charset = utf-8
 indent_style = space
 indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
--- a/.env
+++ b/.env
@@ -0,0 +1 @@
 VITE_API_BASE_URL=http://127.0.0.1:8080/api/
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1 @@
 VITE_API_BASE_URL=https://admin.ua42.com/api/
--- a/.gitignore
+++ b/.gitignore
@@ -13,10 +13,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 # environment variables
 .env
 .env.production
 # macOS-specific files
 .DS_Store
@@ -25,3 +21,5 @@ pnpm-debug.log*
 *.tar
 *.gz
 .claude
--- a/.qoder/quests/blog-style-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
@@ -0,0 +1,34 @@
 # Project Scope Rules
 ## 文件范围限制
 本项目根目录：
 ./
 所有操作必须限制在当前项目目录内。
 禁止：
 - 访问项目外文件
 - 修改父级目录文件
 - 创建项目外文件
 - 修改用户目录中的其他内容
 - 禁止访问服务端仓库
 ## 修改规则
 修改前必须：
 1. 列出将修改的文件
 2. 说明修改原因
 3. 等待确认
 禁止修改：
 node_modules/
 .git/
 build/
 .env
 ## 开发环境
 默认认为已经启动服务，端口为4321
--- a/IMPLEMENTATION.md
+++ b/IMPLEMENTATION.md
@@ -1,166 +0,0 @@
 # 个人博客实现总结
 ## 项目概述
 基于设计文档成功实现了一个现代化、美观的个人博客系统,使用 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,5 +1,5 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import {defineConfig} from 'astro/config';
 import solidJs from '@astrojs/solid-js';
 import node from '@astrojs/node';
@@ -7,8 +7,19 @@ import node from '@astrojs/node';
 export default defineConfig({
  site: 'https://ua42.com',
  output: 'server',
  server: {
    host: "0.0.0.0",
  },
  integrations: [solidJs()],
  adapter: node({
    mode: 'standalone'
-  })
+  }),
  vite: {
    plugins: [],
    server: {
      watch: {
        usePolling: true,
      },
    },
  },
 });
--- a/package.json
+++ b/package.json
@@ -10,13 +10,22 @@
    "deploy": "./scripts/deploy.sh"
  },
  "dependencies": {
-    "@astrojs/node": "^9.5.1",
+    "@astrojs/node": "11.0.2",
    "@astrojs/solid-js": "^5.1.3",
-    "astro": "^5.15.8",
+    "astro": "^7.0.6",
    "dayjs": "^1.11.21",
    "github-markdown-css": "^5.9.0",
    "jsdom": "^29.1.1",
    "ky": "^2.0.2",
    "modern-normalize": "^3.0.1",
-    "solid-js": "^1.9.10"
+    "photoswipe": "^5.4.4",
    "shiki": "^4.3.1",
    "solid-js": "^1.9.14"
  },
  "volta": {
    "node": "22.21.1"
  },
  "devDependencies": {
    "@types/jsdom": "^28.0.3"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
 allowBuilds:
  esbuild: true
  sharp: true
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,46 +0,0 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="placeholder favicon">
  <defs>
    <!-- 轻微渐变底色 -->
    <linearGradient id="g" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#f7f8fb"/>
      <stop offset="1" stop-color="#e6e9f2"/>
    </linearGradient>
    <!-- 圆角外形的蒙版（用来制造中间空缺） -->
    <mask id="holeMask">
      <!-- 全白表示顯示 -->
      <rect x="0" y="0" width="64" height="64" fill="white"/>
      <!-- 中间用黑色（掏空） -->
      <!-- 这里用一个较大的圆角方块作为"空缺" -->
      <rect x="14" y="14" width="36" height="36" rx="8" ry="8" fill="black"/>
    </mask>
    <!-- 描边样式（虚线） -->
    <pattern id="dash" width="6" height="6" patternUnits="userSpaceOnUse">
      <rect width="6" height="6" fill="none"/>
    </pattern>
  </defs>
  <!-- 圆角底板 -->
  <rect x="2" y="2" width="60" height="60" rx="12" ry="12" fill="url(#g)" stroke="#d9dce8" stroke-width="1"/>
  <!-- 在底板上绘制一个较暗的阴影区域，让边缘有质感 -->
  <rect x="2" y="34" width="60" height="28" rx="12" ry="12" fill-opacity="0.03" fill="#000"/>
  <!-- 使用mask把中间挖空（透明） -->
  <g mask="url(#holeMask)">
    <!-- 这层是底色的延伸，挖空后中间变透明 -->
    <rect x="2" y="2" width="60" height="60" rx="12" ry="12" fill="url(#g)" />
  </g>
  <!-- 在被挖空的边缘画一圈圆角虚线作为占位提示 -->
  <rect x="14" y="14" width="36" height="36" rx="8" ry="8"
        fill="none" stroke="#9aa0b6" stroke-width="1.5" stroke-dasharray="3 3" />
  <!-- 中心放置一个小图形（可选）: 一个微小的“文件”轮廓来提示占位 -->
  <g transform="translate(28,20)">
    <path d="M0 0 L8 0 L8 12 L0 12 Z" fill="none" stroke="#9aa0b6" stroke-width="1" stroke-linejoin="round"/>
    <path d="M5 0 L5 3" stroke="#9aa0b6" stroke-width="1" stroke-linecap="round"/>
  </g>
 </svg>
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,4 @@
 User-agent: *
 Allow: /
 Sitemap: https://ua42.com/sitemap.xml
--- a/scripts/deploy.sh
+++ b/scripts/deploy.sh
@@ -5,7 +5,7 @@ PROJECT_ROOT=$(cd -- "$(dirname "${BASH_SOURCE[0]}")/.." &> /dev/null && pwd)
 DOCKERFILE_PATH=./scripts/Dockerfile
 IMAGE_NAME=blog
 IMAGE_FILE_NAME=$IMAGE_NAME.tar.gz
-REMOTE_SERVER=02
+REMOTE_SERVER=01
 REMOTE_PATH=/srv/docker/nginx/www
 DOCKER_NETWORK=docker_app-bridge
--- a/src/assets/icon/back-top.svg
+++ b/src/assets/icon/back-top.svg
@@ -0,0 +1 @@
 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1784628432297" class="icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9153" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.1484375" height="200"><path d="M513.407379 0C230.713951 0 1.407379 229.306573 1.407379 512c0 282.693427 229.306573 512 512 512 282.693427 0 512-229.293792 512-512C1025.407379 229.306573 796.100806 0 513.407379 0z m26.17579 817.737837c-6.812352 6.799571-16.756085 10.991787-26.17579 10.991787-9.943733 0-19.37622-4.192216-26.175791-10.991787-6.799571-6.812352-10.991787-16.756085-10.991787-26.699818 0-9.943733 4.192216-19.900247 10.991787-26.699818s16.756085-10.991787 26.175791-10.991787c9.943733 0 19.363439 4.192216 26.17579 10.991787s10.991787 16.756085 10.991787 26.699818c0 9.943733-4.192216 19.887466-10.991787 26.699818z m-26.17579-87.435832c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605z m258.089717-237.678225c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.646726 206.798972c15.184004-15.184004 40.31174-15.184004 55.495743 0l230.354627 230.341845c15.184004 15.171222 15.184004 39.774932 0 55.482963z m0 0" p-id="9154"></path><path d="M771.497096 492.636561c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.659507 206.798972c15.184004-15.184004 40.31174-15.184004 55.495744 0l230.354626 230.341845c15.171222 15.184004 15.171222 39.787713-0.012781 55.495744zM513.407379 730.302005c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605M513.407379 828.729624c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.743304 37.167577 37.691605 0 20.93552-16.756085 37.691605-37.167577 37.691605" fill="#FFFFFF" p-id="9155"></path></svg>
--- a/src/assets/icon/calendar.png
+++ b/src/assets/icon/calendar.png
--- a/src/assets/icon/client.png
+++ b/src/assets/icon/client.png
--- a/src/assets/icon/eye.png
+++ b/src/assets/icon/eye.png
--- a/src/assets/icon/folder.png
+++ b/src/assets/icon/folder.png
--- a/src/assets/icon/github.svg
+++ b/src/assets/icon/github.svg
@@ -0,0 +1 @@
 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1785642324396" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7302" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M695.744 981.312H419.712c-26.816 0-47.296-21.056-47.296-48.64V739.84c0-29.184 6.336-56.768 17.344-81.088-129.28-48.64-214.528-150.72-214.528-264.256 0-53.44 17.344-103.68 50.496-147.52C213.12 204.8 209.92 151.296 213.12 89.664c3.2-27.52 23.68-46.976 48.896-46.976 14.208 0 134.08 1.6 203.52 64.832a504.384 504.384 0 0 1 184.512 0C717.888 44.288 837.696 42.688 853.504 42.688a47.36 47.36 0 0 1 47.36 45.376c4.672 61.568 0 115.072-12.672 157.248 33.152 45.44 50.496 95.68 50.496 147.52 0 113.472-85.184 215.68-214.528 264.32 11.072 25.856 17.344 53.44 17.344 81.024v192.896c1.6 27.52-20.48 50.24-45.76 50.24z m-228.672-97.28h181.376V739.84c0-27.52-12.608-53.504-33.152-71.36a48.96 48.96 0 0 1-15.744-50.24c4.736-17.856 18.944-32.384 36.288-35.648 123.008-24.32 208.192-102.144 208.192-189.696 0-46.976-25.216-82.688-45.76-105.344a47.36 47.36 0 0 1-7.872-55.168c6.336-12.928 15.808-40.512 15.808-89.152-39.488 6.464-85.184 19.456-102.528 45.44a47.552 47.552 0 0 1-50.56 19.392 393.024 393.024 0 0 0-193.92 0c-18.944 4.864-37.888-3.2-50.56-19.456-17.28-25.92-63.04-38.912-102.464-45.376 1.6 48.64 9.472 76.16 15.744 89.152a53.696 53.696 0 0 1-7.872 55.168c-20.48 22.656-45.76 58.368-45.76 105.344 0 87.552 85.184 163.776 208.256 189.696 17.28 3.2 31.552 17.792 36.224 35.648a51.008 51.008 0 0 1-15.744 50.24c-20.48 17.856-33.152 43.776-33.152 71.36v144.256h3.2z" fill="#172B4D" p-id="7303"></path><path d="M403.968 788.416c-212.928 0-309.12-194.56-313.92-202.688-11.008-24.32-1.536-53.44 20.48-64.832a47.424 47.424 0 0 1 63.168 21.12c3.136 6.4 80.448 157.248 241.28 149.12a46.08 46.08 0 0 1 48.896 47.04c1.6 27.52-18.88 50.24-45.696 50.24h-14.208z" fill="#172B4D" p-id="7304"></path></svg>
--- a/src/assets/icon/tag.png
+++ b/src/assets/icon/tag.png
--- a/src/components/ArticleCard.astro
+++ b/src/components/ArticleCard.astro
--- a/src/components/BackTop.astro
+++ b/src/components/BackTop.astro
@@ -0,0 +1,69 @@
 ---
 // 后面的 ?url 是 一个导入查询（import query），表示：不要把 SVG 当作组件或源码处理，而是返回这个资源的 URL 字符串。
 import backTopIcon from "@/assets/icon/back-top.svg?url";
 ---
 <button class="back-top" type="button" aria-label="返回顶部" hidden>
  <img src={backTopIcon} alt="">
 </button>
 <script>
  const backTop = document.querySelector<HTMLButtonElement>(".back-top")
  const toggleBackTop = () => {
    if (!backTop) return;
    backTop.hidden = window.scrollY <= 500;
  };
  backTop && backTop.addEventListener("click", () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  });
  window.addEventListener("scroll", toggleBackTop, {passive: true});
  toggleBackTop();
 </script>
 <style>
  .back-top {
    position: fixed;
    right: 150px;
    bottom: 100px;
    width: 44px;
    height: 44px;
    z-index: 999;
    cursor: pointer;
    padding: 0;
    border: none;
    background: transparent;
  }
  .back-top[hidden] {
    display: none;
  }
  .back-top img {
    width: 100%;
    height: 100%;
    display: block;
  }
  :global(.dark) .back-top img {
    filter: invert(1);
  }
  .back-top:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }
  @media (max-width: 768px) {
    .back-top {
      display: none;
    }
  }
 </style>
--- a/src/components/BaseFooter.astro
+++ b/src/components/BaseFooter.astro
@@ -1,107 +1,46 @@
 ---
-import { metadata } from "@/consts";
+import { metadata } from "../consts";
-const { siteTitle, icpNumber, githubUrl } = metadata;
+
-const currentYear = new Date().getFullYear();
+const year = new Date().getFullYear();
 ---
 <footer>
  <div class="content">
-    <div class="footer-left">
+    <span>© 2026 {metadata.siteTitle}</span>
-      <p class="copyright">&copy; {currentYear} {siteTitle}</p>
+    <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">
-      {icpNumber && (
+      备案号：鄂ICP备2023000060号-2
        <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);
+    background: #22252b;
-    border-top: 1px solid var(--border-color);
+    height: 70px;
-    padding: var(--space-lg) 0;
+    overflow: hidden;
    flex-shrink: 0;
-    transition: background-color var(--transition-slow), border-color var(--transition-slow);
+    box-shadow: var(--shadow);
  }
  .content {
    max-width: var(--layout-width);
    margin: 0 auto;
-    padding: 0 var(--space-md);
+    color: #fff;
    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;
    height: 100%;
    font-size: 14px;
    justify-content: center;
-    padding: var(--space-sm);
+    gap: 12px;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
  }
-  .social-link:hover {
+  :global(.dark) footer {
-    color: var(--accent-color);
+    background: var(--background);
-    background-color: var(--border-color);
+    box-shadow: none;
    text-decoration: none;
  }
-  /* 响应式设计 */
+  :global(.dark) .content {
-  @media (max-width: 640px) {
+    color: #ffffff;
    .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
@@ -1,125 +1,113 @@
 ---
-import ThemeToggle from "./ThemeToggle";
+import {metadata} from "../consts";
-import { metadata } from "@/consts";
+import ThemeIcon from './ThemeIcon.astro'
-const { siteTitle } = metadata;
+import GitHubIcon from '@/assets/icon/github.svg?url'
 ---
 <header>
  <nav class="main-nav">
-    <div class="nav-left">
+    <h1>
-      <a href="/" class="site-logo">{siteTitle}</a>
+      <a href="/">{metadata.siteTitle}</a>
    </h1>
    <div class="main-nav-right">
      <ul class="menu">
        <li class="menu-item"><a href="/">首页</a></li>
-        <li class="menu-item"><a href="/about">关于</a></li>
+        <li class="menu-item"><a href="/archive">归档</a></li>
        <li class="menu-item"><a target="_blank" href="https://git.ua42.com">
          <img class="github-icon" src={GitHubIcon} alt="GitHub"/>
        </a></li>
        <!--<li class="menu-item"><a href="/">关于</a></li>-->
      </ul>
-    </div>
+
-    <div class="nav-right">
+      <ThemeIcon/>
      <ThemeToggle client:load />
    </div>
  </nav>
 </header>
 <style>
  header {
-    height: 64px;
+    height: 60px;
    position: sticky;
    top: 0;
    z-index: 99999;
-    background: var(--bg-secondary);
+    box-shadow: var(--shadow);
    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);
+    background: #fff;
  }
  .main-nav {
    max-width: var(--layout-width);
    margin: 0 auto;
    height: 100%;
-    padding: 0 var(--space-md);
+    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
-  .nav-left {
+  .main-nav-right {
    display: flex;
    align-items: center;
-    gap: var(--space-xl);
+    gap: 12px;
  }
-  .site-logo {
+  @media (max-width: 768px) {
-    font-size: 20px;
+    .main-nav {
-    font-weight: 700;
+      padding: 16px;
-    color: var(--text-primary);
+    }
    text-decoration: none;
    transition: color var(--transition-fast);
  }
-  .site-logo:hover {
+  .main-nav h1 {
-    color: var(--accent-color);
+    user-select: none;
-    text-decoration: none;
+    cursor: pointer;
    font-size: 24px;
    color: #000000;
  }
-  .menu {
+  .main-nav .menu {
    list-style: none;
    display: flex;
-    gap: var(--space-lg);
+    gap: 20px;
-    margin: 0;
+    height: 100%;
    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;
    margin-right: 12px;
  }
-  :global(.theme-toggle) {
+  .menu-item {
    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) {
+  .github-icon {
-    background-color: var(--border-color);
+    width: 18px;
    height: 18px;
    display: block;
  }
-  /* 响应式设计 */
+  .main-nav .menu-item a {
-  @media (max-width: 640px) {
+    text-decoration: none;
    .nav-left {
      gap: var(--space-md);
  }
-    .site-logo {
+  .main-nav .menu-item a:hover {
-      font-size: 18px;
+    color: #64748b;
  }
-    .menu {
+  :global(.dark) header {
-      gap: var(--space-md);
+    background: var(--background);
    box-shadow: none;
  }
-    .menu-item a {
+  :global(.dark) .main-nav h1 {
-      font-size: var(--text-tiny);
+    color: #ffffff;
  }
  :global(.dark) .main-nav .menu-item a:hover {
    color: rgba(255, 255, 255, .8);
  }
  :global(.dark) .github-icon {
    filter: invert(1);
  }
 </style>
--- a/src/components/IndexSidebar.astro
+++ b/src/components/IndexSidebar.astro
@@ -0,0 +1,152 @@
 ---
 import Folder from "@/assets/icon/folder.png?url";
 import TagIcon from "@/assets/icon/tag.png?url";
 import type { CategoriesStats,Tag } from "@/types";
 import { createHttp } from "@/lib/request";
 const http = createHttp(Astro.request.headers);
 const { data: categories } =
  await http.get<ApiResponse<CategoriesStats[]>>("categories/stats");
 const { data: tags } =
  await http.get<ApiResponse<Tag[]>>("posts/tags");
 ---
 <aside class="sidebar">
  <div class="widget">
    <h3 class="widget-title">
      <img src={Folder} alt="Folder" />
      文章分类
    </h3>
    <ul class="category-list">
      {
        categories.map((category) => (
          <li>
            <a
              href={`/search?c=${encodeURIComponent(category.code)}`}
              title={`${category.name} · ${category.post_count} 篇`}
            >
              {category.name}
            </a>
            <span class="count">{category.post_count}</span>
          </li>
        ))
      }
    </ul>
  </div>
  <div class="widget">
    <h3 class="widget-title">
      <img src={TagIcon} alt="Tag" />
      标签云
    </h3>
    <div class="tag-cloud">
      {
        tags.map((tag) => (
          <a
            class="tag"
            href={`/search?t=${encodeURIComponent(tag.code)}`}
          >
            {tag.name}
          </a>
        ))
      }
    </div>
  </div>
 </aside>
 <style>
  .sidebar {
    flex-shrink: 0;
    width: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .widget {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 22px;
  }
  .widget-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 8px;
  }
  .widget-title img {
    width: 18px;
    height: 18px;
  }
  /* 分类 & 标签云 */
  .category-list {
    list-style: none;
  }
  .category-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 4px;
    font-size: 14px;
    border-bottom: 1px dashed var(--border);
  }
  .category-list li:last-child {
    border-bottom: none;
  }
  .category-list a:hover {
    color: #4f6df5;
  }
  .category-list .count {
    color: var(--text-secondary);
    font-size: 13px;
  }
  .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .tag {
    font-size: 12px;
    color: var(--tag-text);
    background: var(--tag-bg);
    padding: 3px 10px;
    border-radius: 999px;
    transition: background 0.2s;
  }
  .tag:hover {
    background: var(--tag-hover-bg);
  }
  @media (max-width: 860px) {
    .sidebar {
      width: 100%;
    }
  }
  @media (max-width: 860px) {
    .sidebar {
      gap: 16px;
    }
  }
 </style>
--- a/src/components/IndexView.astro
+++ b/src/components/IndexView.astro
@@ -0,0 +1,46 @@
 ---
 import type {Post} from "@/types/post";
 import IndexSidebar from "@/components/IndexSidebar.astro";
 import PostList from "@/components/Post/List.astro";
 import Pagination from "@/components/Post/Pagination.astro";
 interface Props {
  posts: Post[];
  page: number;
  totalPage: number;
 }
 const {posts, page, totalPage} = Astro.props;
 ---
 <div class="page-content">
  <div class="container">
    <div class="post-container">
      <PostList posts={posts}/>
      <Pagination page={page} totalPage={totalPage}/>
    </div>
    <IndexSidebar/>
  </div>
 </div>
 <style>
  .container {
    flex: 1;
    width: 100%;
    display: flex;
    gap: 28px;
  }
  .post-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1;
  }
  @media (max-width: 860px) {
    .container {
      flex-direction: column;
    }
  }
 </style>
--- a/src/components/LazyImage.astro
+++ b/src/components/LazyImage.astro
@@ -0,0 +1,131 @@
 ---
 interface Props {
  src: string;
  alt?: string;
  width?: number;
  height?: number;
  class?: string;
 }
 const {
  src,
  alt = "",
  width,
  height,
  class: className = ""
 } = Astro.props;
 ---
 <div
  class={`lazy-image ${className}`}
  data-src={src}
  style={`aspect-ratio:${width}/${height}`}
 >
  <div class="placeholder"></div>
  <img
    class="real-image"
    alt={alt}
    width={width}
    height={height}
    loading="lazy"
    decoding="async"
  />
 </div>
 <style>
 .lazy-image {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
 }
 .lazy-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
 .placeholder {
  position: absolute;
  inset: 0;
  background: #f3f4f6;
  background-image: linear-gradient(
    90deg,
    #f3f4f6 0%,
    #e5e7eb 50%,
    #f3f4f6 100%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
 }
@keyframes loading {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
 }
 .real-image {
  opacity: 0;
  transition: opacity .35s ease;
 }
 .real-image.loaded {
  opacity: 1;
 }
 </style>
 <script>
 function initLazyImages() {
  const images = document.querySelectorAll(".lazy-image");
  const observer = new IntersectionObserver(
    entries => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        const container = entry.target as HTMLElement;
        const img = container.querySelector(
          ".real-image"
        ) as HTMLImageElement;
        const src = container.dataset.src;
        if (!src) return;
        img.src = src;
        img.onload = () => {
          img.classList.add("loaded");
          const placeholder =
            container.querySelector(".placeholder");
          placeholder?.remove();
        };
        observer.unobserve(container);
      });
    },
    {
      rootMargin: "300px"
    }
  );
  images.forEach(img => observer.observe(img));
 }
 initLazyImages();
 </script>
--- a/src/components/Post/Item.astro
+++ b/src/components/Post/Item.astro
@@ -0,0 +1,185 @@
 ---
 import type {Post} from '@/types';
 import Eye from "@/assets/icon/eye.png?url";
 import Folder from "@/assets/icon/folder.png?url";
 import Calendar from "@/assets/icon/calendar.png?url";
 import LazyImage from "@/components/LazyImage.astro";
 import {formatDatetime} from "@/lib/format.ts";
 interface Props {
  post: Post
 }
 const {post} = Astro.props;
 const published_at = formatDatetime(post.published_at, 'YYYY-MM-DD')
 ---
 <a href={`/post/${post.slug}`}>
  <article class="post-card">
    <div class="post-cover">
      <LazyImage src={post.cover} alt={post.title}/>
    </div>
    <div class="post-body">
      <div class="post-meta">
                <span>
                  <img src={Calendar} alt="Calendar"/>
                  {published_at}
                </span>
        <span>
                  <img src={Folder} alt="Folder"/>
          {post.category_name}
                </span>
        <span>
                  <img src={Eye} alt="Eye"/>
          {post.view_count}
                </span>
      </div>
      <h3 class="post-title">
        {post.title}
      </h3>
      <div class="post-summary">
        {post.summary}
      </div>
      <div class="tags">
        {post.tags.map(tag =>
          <div class="tag">{tag.name}</div>)}
      </div>
    </div>
  </article>
 </a>
 <style>
  .post-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    gap: 22px;
  }
  @media (hover: hover) and (pointer: fine) {
    .post-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
    }
  }
  .post-cover {
    flex-shrink: 0;
    width: 160px;
    height: 100px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #fff;
    overflow: hidden;
  }
  .post-body {
    flex: 1;
    min-width: 0;
  }
  .post-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .post-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .post-meta span img {
    width: 14px;
    height: 14px;
    display: block;
  }
  .post-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
  }
  .post-summary {
    font-size: 14px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .tag {
    font-size: 12px;
    color: var(--tag-text);
    background: var(--tag-bg);
    padding: 3px 10px;
    border-radius: 999px;
    transition: background 0.2s;
  }
  .tag:hover {
    background: var(--tag-hover-bg);
  }
  @media (max-width: 860px) {
    .post-card {
      padding: 16px;
      gap: 12px;
    }
    .post-cover {
      width: 128px;
      height: 80px;
    }
    .post-title {
      font-size: 18px;
    }
    .post-meta {
      gap: 8px;
      font-size: 12px;
    }
  }
  @media (max-width: 560px) {
    .post-card {
      padding: 12px;
    }
    .post-title {
      font-size: 14px;
      margin-bottom: 4px;
    }
    .post-meta {
      gap: 6px;
      font-size: 12px;
    }
    .post-summary {
      font-size: 12px;
      margin-bottom: 6px;
    }
  }
 </style>
--- a/src/components/Post/List.astro
+++ b/src/components/Post/List.astro
@@ -0,0 +1,37 @@
 ---
 import type {Post} from "@/types/post";
 import PostItem from '@/components/Post/Item.astro'
 interface Props {
  posts: Post[]
 }
 const {posts} = Astro.props
 ---
 <section class="section">
  <div class="post-list">
    {posts.map(post => (
      <PostItem post={post}/>
    ))}
  </div>
 </section>
 <style>
  .section {
    flex: 1;
    height: 100%;
  }
  .post-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  @media (max-width: 860px){
    .post-list{
      gap: 12px;
    }
  }
 </style>
--- a/src/components/Post/Pagination.astro
+++ b/src/components/Post/Pagination.astro
@@ -0,0 +1,67 @@
 ---
 interface Props {
  page: number
  totalPage: number
 }
 const {page, totalPage} = Astro.props
 ---
 <!--分页器-->
 {totalPage > 1 &&
 <nav class="pagination" aria-label="分页">
  {page > 1 ? <a href={`/page/${page - 1}`} class="link">« 上一页</a> : <span class="link disabled">« 上一页</span>}
  {Array.from({length: totalPage}).map((_, index) => {
    if (page === index + 1) {
      return <span class="link current">{index + 1}</span>
    }
    return <a class="link" href={`/page/${index + 1}`}>{index + 1}</a>
  })}
  {page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页 »</a> :
    <span class="link disabled">下一页 »</span>}
 </nav>}
 <style>
  /* ========== 分页 ========== */
  .pagination {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow-x: auto;
  }
  .link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.2s;
    white-space: nowrap;
    margin-left: 8px;
  }
  .link:first-child {
    margin-left: 0;
  }
  .link:hover,
  .link.current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }
  .link.disabled {
    color: var(--text-secondary);
    background: var(--card-bg);
    border-color: var(--border);
    cursor: not-allowed;
  }
 </style>
--- a/src/components/PostCard.astro
+++ b/src/components/PostCard.astro
@@ -1,152 +0,0 @@
 ---
 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
@@ -1,51 +0,0 @@
 ---
 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
@@ -0,0 +1,75 @@
 ---
 ---
 <div class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
  <svg aria-hidden="true" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path class="sun" fill-rule="evenodd"
          d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
    <path class="moon" fill-rule="evenodd"
          d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
  </svg>
 </div>
 <style>
  #themeToggle {
    border: 0;
    background: none;
    user-select: none;
  }
  .theme-toggle {
    display: flex;
    align-items: center;
  }
  .sun {
    fill: black;
  }
  .moon {
    fill: transparent;
  }
  :global(.dark) .sun {
    fill: transparent;
  }
  :global(.dark) .moon {
    fill: white;
  }
 </style>
 <script is:inline>
  const meta = document.querySelector('meta[name="theme-color"]');
  const theme = (() => {
    const localStorageTheme = localStorage?.getItem("theme") ?? '';
    if (['dark', 'light'].includes(localStorageTheme)) {
      return localStorageTheme;
    }
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
    return 'light';
  })();
  if (theme === 'light') {
    document.documentElement.classList.remove('dark');
    meta.setAttribute('content', '#ffffff');
  } else {
    document.documentElement.classList.add('dark');
    meta.setAttribute('content', '#0a0a0a');
  }
  window.localStorage.setItem('theme', theme);
  const handleToggleClick = () => {
    const element = document.documentElement;
    element.classList.toggle("dark");
    const isDark = element.classList.contains("dark");
    meta.setAttribute('content', isDark ? '#0a0a0a' : '#ffffff');
    localStorage.setItem("theme", isDark ? "dark" : "light");
  }
  document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
 </script>
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -1,49 +0,0 @@
 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,31 +1,5 @@
 export const metadata = {
-  siteTitle: "42的博客",
+  site: "https://ua42.com",
-  siteDescription: "分享技术与思考的个人空间",
+  siteTitle: "Uroboros",
-  author: "42",
+  postPageSize: 6
  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
@@ -1,17 +0,0 @@
 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
@@ -1,160 +0,0 @@
 ---
 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
@@ -1,145 +0,0 @@
 ---
 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
@@ -1,281 +0,0 @@
 ---
 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
@@ -1,237 +0,0 @@
 ---
 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
@@ -1,62 +0,0 @@
 ---
 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,12 @@
 ---
-import "@/styles/base.css";
+import "@/styles/global.css";
 import BaseHeader from "@/components/BaseHeader.astro";
 import BaseFooter from "@/components/BaseFooter.astro";
 import BackTop from "@/components/BackTop.astro";
 import { metadata } from "@/consts.ts";
 const { siteTitle } = metadata;
 interface Props {
  title?: string;
@@ -12,10 +14,7 @@ interface Props {
 }
 const { title, description } = Astro.props;
 const { siteTitle, siteDescription } = metadata;
 const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
 const pageDescription = description || siteDescription;
 ---
 <!doctype html>
@@ -26,53 +25,18 @@ const pageDescription = description || siteDescription;
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="generator" content={Astro.generator} />
-    <meta name="description" content={pageDescription} />
+    <meta name="description" content={description} />
    <meta name="theme-color" content="#ffffff" />
    <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>
    <BaseHeader />
-    <main>
+    <main class="main">
      <slot />
    </main>
    <BaseFooter />
    <BackTop />
  </body>
 </html>
 <style>
  html,
  body {
    width: 100%;
    min-height: 100vh;
  }
  body {
    display: flex;
    flex-direction: column;
  }
  main {
    flex: 1;
    max-width: var(--layout-width);
    width: 100%;
    margin: 0 auto;
    padding: var(--space-md);
  }
  /* 响应式设计 */
  @media (max-width: 640px) {
    main {
      padding: var(--space-sm);
    }
  }
 </style>
--- a/src/layouts/PostLayout.astro
+++ b/src/layouts/PostLayout.astro
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -0,0 +1,10 @@
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 dayjs.extend(utc);
 dayjs.extend(timezone);
 export const formatDatetime = (date: string,format = 'YYYY-MM-DD HH:mm') => {
  return dayjs(date).tz('Asia/Shanghai').format(format);
 };
--- a/src/lib/highlight.js
+++ b/src/lib/highlight.js
@@ -0,0 +1,85 @@
 import {JSDOM} from 'jsdom'
 import {createHighlighter} from 'shiki'
 const highlighter = await createHighlighter({
  themes: ['github-dark-dimmed'],
  langs: [
    "bash",
    "json",
    "yaml",
    "xml",
    "html",
    "css",
    "scss",
    "javascript",
    "typescript",
    "jsx",
    "tsx",
    "vue",
    "markdown",
    "sql",
    "graphql",
    "python",
    "java",
    "go",
    "rust",
    "c",
    "cpp",
    "csharp",
    "php",
    "ruby",
    "kotlin",
    "swift",
    "dockerfile",
    "nginx"
  ]
 })
 const resolveLang = (lang) => {
  const supported = highlighter.getLoadedLanguages?.() || []
  if (!lang) return 'text'
  if (supported.includes(lang)) return lang
  return 'text'
 }
 export const highlightHtmlWithJsdom = async (rawHtml) => {
  const dom = new JSDOM(rawHtml)
  const document = dom.window.document
  const codeElements = document.querySelectorAll('pre code')
  for (const codeEl of codeElements) {
    const preEl = codeEl.parentElement
    if (!preEl || preEl.tagName !== 'PRE') continue
    const codeContent = codeEl.textContent?.trim() || ''
    // 提取语言
    let lang = 'text'
    for (const cls of codeEl.classList) {
      if (cls.startsWith('language-')) {
        lang = cls.slice('language-'.length)
        break
      }
    }
    lang = resolveLang(lang)
    // 生成高亮 HTML
    const highlighted = highlighter.codeToHtml(codeContent, {
      lang,
      theme: 'github-dark-dimmed',
    })
    // 替换 DOM
    const wrapper = document.createElement('div')
    wrapper.innerHTML = highlighted.trim()
    const newNode = wrapper.firstChild
    if (newNode && preEl.parentNode) {
      preEl.parentNode.replaceChild(newNode, preEl)
    }
  }
  return dom.serialize()
 }
--- a/src/lib/request.ts
+++ b/src/lib/request.ts
@@ -0,0 +1,51 @@
 import ky, {type Options} from 'ky'
 type ForwardHeaderSource = Headers | Record<string, string | undefined> | undefined | null
 const api = ky.create({
  baseUrl: import.meta.env.VITE_API_BASE_URL
 });
 const pickHeader = (source: ForwardHeaderSource, name: string): string | undefined => {
  if (!source) return undefined
  if (source instanceof Headers) return source.get(name) ?? undefined
  return source[name] ?? source[name.toLowerCase()]
 }
 const buildForwardHeaders = (source: ForwardHeaderSource): Record<string, string> => {
  const xff = pickHeader(source, 'x-forwarded-for')
  const realIp = pickHeader(source, 'x-real-ip')
  const cfIp = pickHeader(source, 'cf-connecting-ip')
  const ua = pickHeader(source, 'user-agent')
  const referer = pickHeader(source, 'referer')
  const host = pickHeader(source, 'host')
  const proto = pickHeader(source, 'x-forwarded-proto')
  return {
    ...(xff ? {'x-forwarded-for': xff} : {}),
    ...(realIp ? {'x-real-ip': realIp} : {}),
    ...(cfIp ? {'cf-connecting-ip': cfIp} : {}),
    ...(ua ? {'user-agent': ua} : {}),
    ...(referer ? {referer} : {}),
    ...(host ? {host} : {}),
    ...(proto ? {'x-forwarded-proto': proto} : {})
  }
 }
 export const createHttp = (forwardHeadersSource?: ForwardHeaderSource) => {
  const forwardedHeaders = buildForwardHeaders(forwardHeadersSource)
  return {
    get: async <T = unknown>(url: string, options?: Options): Promise<T> => {
      return api.get(url, {
        ...options,
        headers: {
          ...forwardedHeaders,
          ...(options?.headers ?? {})
        }
      }).json<T>()
    }
  };
 }
 export const http = createHttp();
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -0,0 +1,29 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 ---
 <Layout title="404">
  <div class="not-found">
    <h1>404 Not Found</h1>
    <a class="back-home" href="/">返回首页</a>
  </div>
 </Layout>
 <style>
  .not-found {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
  }
  .back-home {
    background: black;
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
  }
 </style>
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,298 +0,0 @@
 ---
 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
@@ -0,0 +1,198 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 import type {Archive} from "@/types/archive";
 import {createHttp} from "@/lib/request";
 const http = createHttp(Astro.request.headers);
 const {data} = await http.get<ApiResponse<Archive>>("posts/archives");
 ---
 <Layout title="归档">
  <div class="page-content">
    <div class="archive">
      {
        data.map((year) => (
          <div class="archive-year">
            <h2 class="year-title">
              <span class="year-badge">{year.year}</span>
              <span class="year-count">共 {year.total} 篇</span>
            </h2>
            <div>
              {year.list.map((month) => (
                <div class="month-group">
                  <h3 class="month-title">{month.month} 月</h3>
                  <ul class="post-list">
                    {month.list.map((post) => (
                      <li class="post-item">
                        <span class="post-date">
                          {post.published_at_display}
                        </span>
                        <a href={`/post/${post.slug}`}>{post.title}</a>
                        <span class="post-cat">{post.category_name}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        ))
      }
    </div>
  </div>
 </Layout>
 <style>
  :root {
    --border: #e5e7eb;
    --radius: 12px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  .archive {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
  }
  .archive-year {
    margin-bottom: 40px;
  }
  .year-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 18px;
  }
  .year-title .year-badge {
    background: linear-gradient(135deg, #4f6df5, #7b5cf0);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 20px;
  }
  .year-title .year-count {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
  }
  .year-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
  }
  /* 月份分组 */
  .month-group {
    position: relative;
    padding-left: 28px;
    margin-bottom: 24px;
  }
  /* 时间轴竖线 */
  .month-group::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 0;
    width: 2px;
    background: var(--border);
  }
  .month-title {
    position: relative;
    font-size: 17px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
  }
  :global(.dark) .month-title{
    color: inherit;
  }
  /* 月份节点圆点 */
  .month-title::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px var(--tag-bg);
  }
  .post-list {
    list-style: none;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .post-item {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
  }
  .post-item:last-child {
    border-bottom: none;
  }
  .post-item:hover {
    background: #f9faff;
  }
  :global(.dark) .post-item:hover {
    background: none;
  }
  .post-date {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    width: 52px;
  }
  .post-item a {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .post-item a:hover {
    color: var(--primary);
  }
  :global(.dark) .post-item a:hover {
    color: inherit;
  }
  .post-cat {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--primary);
    background: var(--tag-bg);
    padding: 2px 10px;
    border-radius: 999px;
  }
 </style>
--- 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
@@ -0,0 +1,140 @@
 ---
 const noindex = true;
 import {metadata} from '@/consts.ts'
 ---
 <!doctype html>
 <html lang="zh-CN">
 <head>
  <meta charset="UTF-8"/>
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
  />
  <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
  <meta name="generator" content={Astro.generator}/>
  <title>Gitea 入口</title>
  <meta name="theme-color" content="#ffffff"/>
  <meta name="robots" content="noindex, nofollow">
  <style>
    @import "modern-normalize";
    :root {
      --bg: #f6f7f9;
      --card-bg: #ffffff;
      --border: #e5e7eb;
      --text-color: #2b2f36;
      --text-secondary: #6b7280;
      --primary: #4f6df5;
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--text-color);
      font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    .page-container {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 24px 24px 24px 24px;
    }
    .gitea-card {
      width: 100%;
      max-width: 520px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      overflow: hidden;
    }
    .gitea-card__title {
      padding: 14px 20px;
      font-size: 15px;
      font-weight: 600;
      border-bottom: 1px solid var(--border);
    }
    .gitea-content {
      display: flex;
      flex-direction: column;
    }
    .gitea-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 13px 20px;
      font-size: 14px;
    }
    .gitea-item + .gitea-item {
      border-top: 1px solid var(--border);
    }
    .gitea-item:hover {
      background: #fafbfc;
    }
    .gitea-item__label {
      color: var(--text-secondary);
    }
    .gitea-item__link {
      color: var(--primary);
      text-decoration: none;
      white-space: nowrap;
    }
    .gitea-item__link:hover {
      text-decoration: underline;
    }
  </style>
 </head>
 <body>
 <div class="page-container">
  <div class="gitea-card">
    <div class="gitea-card__title">常用入口</div>
    <div class="gitea-content">
      <div class="gitea-item">
        <span class="gitea-item__label">博客地址</span>
        <a class="gitea-item__link" target="_blank" href="https://ua42.com">点击访问</a>
      </div>
      <div class="gitea-item">
        <span class="gitea-item__label">博客管理后台(支持游客查看)</span>
        <a class="gitea-item__link" target="_blank" href="https://admin.ua42.com">点击访问</a>
      </div>
      <div class="gitea-item">
        <span class="gitea-item__label">仓库地址</span>
        <a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin">点击访问</a>
      </div>
      <div class="gitea-item">
        <span class="gitea-item__label">博客服务端仓库</span>
        <a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin/blog-server">点击访问</a>
      </div>
      <div class="gitea-item">
        <span class="gitea-item__label">博客服务端 API文档</span>
        <a class="gitea-item__link" target="_blank" href="https://dev.ua42.com/docs/server-documentation.html">点击访问</a>
      </div>
    </div>
  </div>
 </div>
 </body>
 </html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,119 +1,25 @@
 ---
 import Layout from "@/layouts/Layout.astro";
-import PostCard from "@/components/PostCard.astro";
+import IndexView from "@/components/IndexView.astro";
-import { getCollection } from "astro:content";
+import type { Post } from "@/types/post";
-import { metadata } from "@/consts";
+import { createHttp } from "@/lib/request";
 import { metadata } from "@/consts.ts";
-const { heroTitle, heroDescription } = metadata;
+const http = createHttp(Astro.request.headers);
-// 获取所有文章并按日期排序
+const { list, total } = await http.get<ApiPageResponse<Post>>("posts", {
-const posts = (await getCollection("posts")).sort(
+  searchParams: {
-  (a, b) => b.data.date.getTime() - a.data.date.getTime()
+    page: 1,
-);
+    page_size: metadata.postPageSize,
  },
 });
 const totalPage = Math.ceil(total / metadata.postPageSize);
 ---
-<Layout title="首页">
+<Layout description="天若有情天亦老，人间正道是沧桑。" title="博客首页">
-  <!-- Hero 区域 -->
+  <IndexView
-  <section class="hero">
+    posts={list}
-    <div class="hero-content">
+    page={1}
-      <h1 class="hero-title">{heroTitle}</h1>
+    totalPage={totalPage}
      <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
@@ -0,0 +1,36 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 import type { Post } from "@/types/post";
 import { createHttp } from "@/lib/request";
 import { metadata } from "@/consts.ts";
 import IndexView from "@/components/IndexView.astro";
 const { page } = Astro.params;
 if (isNaN(Number(page))) {
  return Astro.redirect("/");
 }
 const http = createHttp(Astro.request.headers);
 const { list, total } = await http.get<ApiPageResponse<Post>>("posts", {
  searchParams: {
    page,
    page_size: metadata.postPageSize,
  },
 });
 const totalPage = Math.ceil(total / metadata.postPageSize);
 if (totalPage < Number(page)) {
  return Astro.redirect("/404");
 }
 ---
 <Layout description="天若有情天亦老，人间正道是沧桑。" title="博客首页">
  <IndexView
    posts={list}
    page={Number(page)}
    totalPage={totalPage}
  />
 </Layout>
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -0,0 +1,212 @@
 ---
 import "@/styles/github-markdown.css";
 import "@/styles/github-markdown-reset.css";
 import "photoswipe/dist/photoswipe.css";
 import Layout from "@/layouts/Layout.astro";
 import { createHttp } from "@/lib/request.ts";
 import { highlightHtmlWithJsdom } from "@/lib/highlight.js";
 import { formatDatetime } from "@/lib/format.ts";
 import type { Post } from "@/types";
 const { slug } = Astro.params;
 let data: Post;
 const http = createHttp(Astro.request.headers);
 try {
  const res = await http.get<ApiResponse<Post>>(`posts/${slug}`);
  data = res.data;
 } catch (error) {
  return Astro.redirect("/404");
 }
 const content = await highlightHtmlWithJsdom(data.content);
 const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
 ---
 <Layout title={data.title} description={data.summary}>
  <div class="page-content">
    <div class="post">
      <h1 class="post-title">{data.title}</h1>
      <div class="post-meta">
        <div class="published-at">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-calendar-days-icon lucide-calendar-days"
          >
            <path d="M8 2v4"></path>
            <path d="M16 2v4"></path>
            <rect width="18" height="18" x="3" y="4" rx="2"></rect>
            <path d="M3 10h18"></path>
            <path d="M8 14h.01"></path>
            <path d="M12 14h.01"></path>
            <path d="M16 14h.01"></path>
            <path d="M8 18h.01"></path>
            <path d="M12 18h.01"></path>
            <path d="M16 18h.01"></path>
          </svg>
          {published_at}
        </div>
        <div class="post-view">
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5122"
          >
            <path
              d="M509.618 415.795c-42.695 0-77.253 38.372-77.253 85.738 0 47.352 34.558 86.22 77.253 86.22 42.667 0 76.716-38.867 76.716-86.22 0-47.352-34.049-85.738-76.716-85.738z m1.9-177.9c-211.548 0-383.265 159.859-383.265 274.587 0 114.727 171.717 273.624 383.266 273.624 212.484 0 384.227-162.522 384.227-273.624 0-111.088-171.743-274.587-384.227-274.587z m-1.446 452.006c-89.7 0-162.134-81.71-162.134-181.903 0-101.157 72.435-182.397 162.134-182.397 90.183 0 163.1 81.241 163.1 182.397 0 100.206-72.917 181.903-163.1 181.903z"
              p-id="5123"></path>
          </svg>
          {data.view_count}
        </div>
      </div>
      <div class="markdown-body" data-color-mode="dark" set:html={content} />
    </div>
  </div>
 </Layout>
 <style>
  .post {
    background: #fff;
    border-radius: 12px;
    overflow: auto;
    padding: 24px;
    box-shadow: var(--shadow);
  }
  .post-title {
    margin-bottom: 16px;
    font-size: 32px;
  }
  .post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .published-at {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 14px;
  }
  .published-at svg {
    width: 18px;
    height: 18px;
  }
  :global(.markdown-body img) {
    object-fit: contain;
    height: auto !important;
  }
  .post-view {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #6b7280;
    padding-right: 12px;
    font-size: 14px;
  }
  .post-view svg {
    width: 20px;
    height: 20px;
    fill: currentColor; /* 让填充跟随 color */
    stroke: currentColor; /* 让描边也跟随 color */
  }
  @media (max-width: 768px) {
    .post-title {
      font-size: 20px;
    }
    .post {
      padding: 12px;
    }
  }
  :global(.dark) .post {
    background: var(--card-bg);
    box-shadow: none;
    border: none;
  }
 </style>
 <script>
  import PhotoSwipeLightbox from "photoswipe/lightbox";
  const init = async () => {
    const post = document.querySelector(".post")!;
    const images = Array.from(post.querySelectorAll("img"));
    const waitImageLoaded = (img: HTMLImageElement) => {
      if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
        return Promise.resolve();
      }
      return new Promise<void>((resolve) => {
        img.addEventListener("load", () => resolve(), { once: true });
        img.addEventListener("error", () => resolve(), { once: true });
      });
    };
    await Promise.all(
      images.map(async (img) => {
        if (img.closest("a")) return;
        await waitImageLoaded(img);
        const link = document.createElement("a");
        link.href = img.currentSrc || img.src;
        link.target = "_blank";
        link.rel = "noreferrer";
        link.dataset.pswpWidth = String(img.naturalWidth || img.width || 1200);
        link.dataset.pswpHeight = String(
          img.naturalHeight || img.height || 800,
        );
        img.parentNode?.insertBefore(link, img);
        link.appendChild(img);
      }),
    );
    const lightbox = new PhotoSwipeLightbox({
      gallery: ".post",
      children: "a[data-pswp-width]",
      pswpModule: () => import("photoswipe"),
      padding: {
        top: 48,
        right: 24,
        bottom: 48,
        left: 24,
      },
      bgOpacity: 0.5,
      tapAction: "close",
      bgClickAction: "close",
    });
    lightbox.init();
  };
  init();
 </script>
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -1,344 +0,0 @@
 ---
 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/search.astro
+++ b/src/pages/search.astro
@@ -0,0 +1,214 @@
 ---
 import Layout from '@/layouts/Layout.astro'
 import type {CategoriesStats, Post, Tag} from "@/types";
 import {createHttp} from "@/lib/request.ts";
 import PostList from "@/components/Post/List.astro";
 const http = createHttp(Astro.request.headers);
 const searchParams = Astro.url.searchParams;
 const t = searchParams.get("t") ?? "";
 const c = searchParams.get("c") ?? "";
 const [{data: categories}, {data: tags}] = await Promise.all([
  http.get<ApiResponse<CategoriesStats[]>>("categories/stats"),
  http.get<ApiResponse<Tag[]>>("posts/tags"),
 ] as const)
 let f_count = 0
 const findCategory = categories.find(item => {
  if (item.code === c) {
    f_count++
  }
  return item.code === c
 })
 const findTag = tags.find(item => {
  if (item.code === t) {
    f_count++
  }
  return item.code === t
 })
 // 搜索条件必须匹配 不允许非法值
 const {data:posts} = await http.get<ApiResponse<Post[]>>("posts/search", {
  searchParams: {
    category_code: findCategory?.code ?? "",
    tag_code: findTag?.code ?? "",
  }
 })
 const count = posts.length
 const pageTitle =
  f_count === 0 ? "所有文章" : [findCategory?.name, findTag?.name]
    .filter(Boolean)
    .join(" · ")
 const pageDescription =
  f_count === 0
    ? "浏览全部文章，按分类和标签筛选你感兴趣的内容。"
    : `浏览${pageTitle}相关文章，共 ${count} 篇。`
 const buildSearchUrl = (type: 'category' | 'tag', code: string) => {
  const params = new URLSearchParams()
  if (findTag?.code) {
    params.set('t', findTag.code)
  }
  if (findCategory?.code) {
    params.set('c', findCategory.code)
  }
  if (type === 'category') {
    if (c === code) {
      params.delete('c')
    } else {
      params.set('c', code)
    }
  } else {
    if (t === code) {
      params.delete('t')
    } else {
      params.set('t', code)
    }
  }
  const query = params.toString()
  return query ? `/search?${query}` : '/search'
 }
 ---
 <Layout title={pageTitle} description={pageDescription}>
  <div class="page-content search-page">
    <header class="search-header">
      <h1 class="search-title">
        {pageTitle}
      </h1>
      <div class="search-count">共 <span>{count}</span> 篇</div>
    </header>
    <div class="filter-group">
      <div class="nav-group">
        <div class="nav-label">分类:</div>
        <div class="nav-chips">
          {categories.map(item =>
            <a href={buildSearchUrl("category", item.code)}
               class={item.code === findCategory?.code ? 'chip active' : 'chip'}>{item.name}</a>)}
        </div>
      </div>
      <div class="nav-group">
        <div class="nav-label">标签:</div>
        <div class="nav-chips">
          {tags.map(item =>
            <a href={buildSearchUrl("tag", item.code)}
               class={item.code === findTag?.code ? 'chip active' : 'chip'}>{item.name}</a>)}
        </div>
      </div>
    </div>
    {posts.length > 0 ?
      <PostList posts={posts}/> :
      <div class="no-result">没有找到相关文章</div>}
  </div>
 </Layout>
 <style>
  .search-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 auto;
    max-width: 860px;
    width: 100%;
  }
  .search-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 16px 20px;
  }
  .search-count {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
  }
  .search-count span {
    color: var(--tag-text);
  }
  .search-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
  }
  .filter-group {
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .nav-group {
    display: flex;
    gap: 12px;
    min-width: 0;
  }
  .nav-label {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
  }
  .nav-chips {
    flex: 1;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }
  .chip {
    color: var(--tag-text);
    border-radius: 999px;
    background: var(--tag-bg);
    padding: 4px 8px;
    font-size: 12px;
    user-select: none;
    transition: background 0.2s;
    cursor: pointer;
  }
  .chip.active, .chip:hover {
    background: #3b82f6;
    color: white;
  }
  :global(.dark) .chip.active,
  :global(.dark) .chip:hover {
    background: #d1d5db;
    color: black;
  }
  .no-result {
    text-align: center;
    font-size: 14px;
    margin-top: 32px;
    color: var(--text-secondary);
  }
 </style>
--- a/src/pages/sitemap-pages.xml.ts
+++ b/src/pages/sitemap-pages.xml.ts
@@ -0,0 +1,33 @@
 import type {APIRoute} from 'astro';
 import {metadata} from "@/consts";
 const site = metadata.site
 const staticUrls = [
  '',
  '/archive',
  '/search',
 ];
 export const GET: APIRoute = async () => {
  const urls = staticUrls
    .filter((url, index, array) => {
      return array.indexOf(url) === index;
    });
  const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
              ${urls.map((url) => `<url>
                <loc>${site}${url}</loc>
              </url>`
  )
    .join('\n')}
 </urlset>`;
  return new Response(xml, {
    status: 200,
    headers: {
      'Content-Type': 'application/xml; charset=utf-8',
      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
    },
  });
 };
--- a/src/pages/sitemap-posts.xml.ts
+++ b/src/pages/sitemap-posts.xml.ts
@@ -0,0 +1,35 @@
 import type {APIRoute} from 'astro';
 import {metadata} from "@/consts";
 import {createHttp} from "@/lib/request.ts";
 import type {PostForSitemap} from "@/types";
 import dayjs from "dayjs";
 const site = metadata.site
 export const GET: APIRoute = async (context) => {
  const http = createHttp(context.request.headers);
  const {data} = await http.get<ApiResponse<PostForSitemap[]>>("posts/sitemap")
  const urls = data
    .filter((url, index, array) => {
      return array.indexOf(url) === index;
    });
  const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
              ${urls.map((post) => `<url>
                <loc>${site}/post/${post.slug}</loc>
                <lastmod>${dayjs(post.updated_at || post.created_at).toISOString()}</lastmod>
              </url>`
  )
    .join('\n')}
 </urlset>`;
  return new Response(xml, {
    status: 200,
    headers: {
      'Content-Type': 'application/xml; charset=utf-8',
      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
    },
  });
 };
--- a/src/pages/sitemap.xml.ts
+++ b/src/pages/sitemap.xml.ts
@@ -0,0 +1,21 @@
 import type {APIRoute} from 'astro';
 import {metadata} from "@/consts";
 const site = metadata.site
 export const GET: APIRoute = () => {
  const xml = `<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>${site}/sitemap-pages.xml</loc>
  </sitemap>
  <sitemap>
    <loc>${site}/sitemap-posts.xml</loc>
  </sitemap>
 </sitemapindex>`;
  return new Response(xml, {
    headers: {
      'Content-Type': 'application/xml; charset=utf-8',
    },
  });
 };
--- 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
@@ -1,123 +0,0 @@
@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
@@ -0,0 +1,10 @@
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
 a {
    color: inherit;
    text-decoration: 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
@@ -0,0 +1,18 @@
 .markdown-body pre code{
    font-size: 1.1em;
 }
 .markdown-body h1,
 .markdown-body h2,
 .markdown-body h3,
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
    border-bottom: none ;
 }
@media (max-width: 768px) {
  .markdown-body pre code{
    font-size: inherit;
  }
 }
--- a/src/styles/github-markdown.css
+++ b/src/styles/github-markdown.css
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,64 @@
@import "modern-normalize";
@import "css-reset.css";
 :root {
  --layout-width: 1080px;
  --background: #f6f7f9;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.10);
  --card-bg: #ffffff;
  --text-color: #2b2f36;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
  --primary: #4f6df5;
  --tag-bg: #eef1fe;
  --tag-text: #4f6df5;
  --tag-hover-bg: #dfe6fd;
 }
 .dark {
  --background: #0a0a0a;
  --card-bg: #161b22;
  --text-color: #ffffff;
  --text-secondary: #e5e7eb;
  --border: #e5e7eb;
  --primary: #1e293b;
  --tag-bg: #27272a;
  --tag-text: #f3f4f6;
  --tag-hover-bg: #334155;
 }
 html,
 body {
  min-height: 100vh;
  font-size: 16px;
  background: var(--background);
  color: var(--text-color);
 }
 body {
  display: flex;
  flex-direction: column;
 }
 .main {
  flex: 1;
  display: flex;
  flex-direction: column;
 }
 .page-content {
  width: 100%;
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
 }
@media (max-width: 768px) {
  .page-content {
    padding: 16px;
  }
 }
--- a/src/styles/reset.css
+++ b/src/styles/reset.css
@@ -1,11 +0,0 @@
 /* css reset */
 a {
  text-decoration: none;
  color: inherit;
 }
 ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
 }
--- a/src/styles/typography.css
+++ b/src/styles/typography.css
--- a/src/types/archive.ts
+++ b/src/types/archive.ts
@@ -0,0 +1,21 @@
 type ArchiveYear = {
  year: number;
  total: number;
  list: ArchiveMonth[];
 };
 type ArchivePost = {
  id: number;
  slug: string;
  title: string;
  published_at: string;
  published_at_display: string;
  category_name: string;
 };
 type ArchiveMonth = {
  month: number;
  list: ArchivePost[];
 };
 export type Archive = ArchiveYear[];
--- a/.qoder/quests/blog-style-adjustment-and-feature-expansion.md
+++ b/.qoder/quests/blog-style-adjustment-and-feature-expansion.md
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -0,0 +1,29 @@
 /** 基础 API 响应结构 */
 declare interface ApiResponse<T = unknown> {
  msg?: string
  data: T
 }
 /** 分页响应结构 */
 declare interface ApiPageResponse<T = unknown> {
  msg?: string
  /** 当前页码 */
  page: number
  /** 每页数量 */
  pageSize: number
  /** 业务数据列表 */
  list: T[]
  /** 总记录数 */
  total: number
 }
 /** 错误响应结构 - 当请求失败时的响应格式 */
 declare interface ApiErrorResponse {
  msg: string
 }
 /** 通用请求参数类型 */
 declare interface Pagination {
  page?: number
  pageSize?: number
 }
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -0,0 +1 @@
 export * from './post.ts'
--- a/src/types/post.ts
+++ b/src/types/post.ts
@@ -0,0 +1,32 @@
 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
 }
Author	SHA1	Message	Date
xy	990d4b0728	style: 修复样式异常	2026-08-15 12:40:12 +08:00
xy	f7929be18d	fix: sitemap路径拼写不正确的问题	2026-08-15 00:25:55 +08:00
xy	963722996e	chore: 更新robot.txt	2026-08-14 23:56:44 +08:00
xy	e4c362030d	feat: 动态sitemap.xml	2026-08-14 23:55:52 +08:00
xy	d7bbb7b70b	style: 调整移动端视觉	2026-08-14 22:40:26 +08:00
xy	555135aedb	fix: 用户手动输入query条件导致的搜索异常问题	2026-08-14 21:28:41 +08:00
xy	b3038603e8	refactor: 重写filter页面更新为search	2026-08-14 21:08:45 +08:00
xy	37d720ebc3	chore: update .gitignore	2026-08-14 14:23:43 +08:00
xy	25e5249739	style: 调整封面尺寸	2026-08-13 17:20:25 +08:00
xy	a99c165ba3	refactor: filter页面使用图片懒加载组件	2026-08-13 12:10:10 +08:00
xy	60131d6fa9	feat: 图片lazy loading	2026-08-12 18:15:41 +08:00
xy	67070e5fc4	style: 调整gitea嵌入页面样式	2026-08-08 22:24:50 +08:00
xy	ecf730bda7	feat: 根据分类和tag筛选文章	2026-08-05 20:38:48 +08:00
xy	f7b7f7d320	style: 优化暗黑模式下标签样式	2026-08-02 16:46:40 +08:00
xy	67ec0bffee	feat: add github entry	2026-08-02 11:49:08 +08:00
xy	03822cffee	docs: update gitea docs	2026-08-02 11:41:52 +08:00
xy	e2ccdb68b4	feat: 移动端隐藏back top、调整post list样式	2026-08-01 23:19:24 +08:00
xy	9d0540ecfc	feat: 更新gitea模板	2026-08-01 20:18:16 +08:00
xy	2ead477997	feat: 调整back top position	2026-08-01 17:11:15 +08:00
xy	3100c1c1e9	feat: 调整api路径	2026-07-31 00:38:57 +08:00
xy	a91ee9ac55	feat: update embed gitea	2026-07-29 22:03:17 +08:00
xy	6a8c75fc94	feat: 更新嵌入页面	2026-07-27 19:38:16 +08:00
xy	44bafa1435	feat: 更新嵌入页面	2026-07-27 19:27:04 +08:00
xy	7807f98709	feat: 完善暗色主题	2026-07-26 13:47:07 +08:00
xy	965dbbce41	feat: 更新favicon	2026-07-24 22:17:40 +08:00
xy	f3f0b43b6d	feat: 更新tag icon	2026-07-24 22:12:05 +08:00
xy	4d3b6e4ce2	feat: 完善暗色主题	2026-07-24 22:05:03 +08:00
xy	790a867313	feat: 标签云	2026-07-24 21:53:09 +08:00
xy	bc6fdb6149	feat: 修改环境变量	2026-07-24 21:36:59 +08:00
xy	54eae0e738	feat: 博客标签	2026-07-24 21:18:57 +08:00
xy	2346842ef5	feat: update .gitignore	2026-07-22 17:58:10 +08:00
xy	c9d6ce3464	feat: 去除访问统计信息	2026-07-22 17:27:36 +08:00
xy	aa4f3389a3	fix: 错删字段导致的bug	2026-07-22 00:22:25 +08:00
xy	e8738cca3c	feat: 删除字段	2026-07-22 00:15:49 +08:00
xy	17b1bf1e8a	feat: 博客归档	2026-07-22 00:14:42 +08:00
xy	634824ff44	feat: 样式调整	2026-07-21 18:14:41 +08:00
xy	60d8f66ad0	feat: 样式调整	2026-07-20 23:38:03 +08:00
xy	0b18d55712	feat: 调整布局	2026-07-20 23:19:16 +08:00
xy	1ddaabe64b	fix: ts类型错误，lightbox错误将link识别为图片的问题	2026-07-20 23:15:22 +08:00
xy	a5f4d0a28d	feat: 首页改版	2026-07-20 22:14:20 +08:00
xy	95320835b6	feat: 删除博客图片圆角	2026-07-18 22:07:12 +08:00
xy	a0db85f1f2	fix: astro 注释问题	2026-07-18 22:06:15 +08:00
xy	b34a041052	fix: back top 图片不展示的问题	2026-07-18 22:01:16 +08:00
xy	aa4da842d6	feat: 返回顶部	2026-07-18 21:48:21 +08:00
xy	f77f8d13d1	feat: 样式调整	2026-07-18 21:03:04 +08:00
xy	ed73a3fe72	feat: 修改网站元素	2026-07-18 18:49:39 +08:00
xy	f1cb633cb3	feat: PhotoSwipe 配置点击关闭	2026-07-17 18:40:04 +08:00
xy	9909d8d7a5	feat: 文章图片预览	2026-07-17 18:24:01 +08:00
xy	c7766edb01	fix: 切换暗色主题时 meta theme-color不会被修改的问题	2026-07-13 16:06:43 +08:00
xy	ba14074509	feat: 完善暗色主题移动端适配 meta theme color	2026-07-13 16:00:44 +08:00
xy	36b04537b4	feat: 暗黑主题	2026-07-13 00:04:11 +08:00
xy	0b9c253402	fix: 获取真实请求ip(解决使用docker部署时,ssr请求无法获取用户真实ip的问题，解决方案：转发astro headers)	2026-07-11 23:54:59 +08:00
xy	4dcee7790b	feat: 调整博客正文样式	2026-07-10 20:14:24 +08:00
xy	66717405db	feat: 显示博客访问量	2026-07-10 20:07:24 +08:00
xy	712f556d67	feat: 文章分页	2026-07-10 18:59:54 +08:00
xy	540168d30f	feat: 404 page	2026-07-09 16:23:45 +08:00
xy	26ce6ed4ef	feat: 修改网站title	2026-07-09 15:35:21 +08:00
xy	df4bb9212b	feat: seo优化	2026-07-08 22:54:08 +08:00
xy	bbacb11bce	feat: 新版ui	2026-07-08 18:11:58 +08:00
xy	4fe81f1e48	feat: 修复时区问题	2026-07-07 23:49:06 +08:00
xy	3c9ef565b3	feat: 脚本部署	2026-07-06 23:58:49 +08:00
xy	59664d139d	feat: 基础文章编辑功能	2026-07-06 18:54:15 +08:00
xy	12e521891a	feat: 基础文章编辑功能	2026-07-06 14:20:21 +08:00
xy	e67829562d	feat: 归档渲染	2026-07-05 22:33:50 +08:00
xy	4c20ee73d3	feat: 调整样式	2025-11-24 21:29:14 +08:00
		`@@ -0,0 +1 @@`
							`VITE_API_BASE_URL=http://127.0.0.1:8080/api/`
		`@@ -0,0 +1 @@`
							`VITE_API_BASE_URL=https://admin.ua42.com/api/`
		`@@ -0,0 +1 @@`
							<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1784628432297" class="icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9153" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.1484375" height="200"><path d="M513.407379 0C230.713951 0 1.407379 229.306573 1.407379 512c0 282.693427 229.306573 512 512 512 282.693427 0 512-229.293792 512-512C1025.407379 229.306573 796.100806 0 513.407379 0z m26.17579 817.737837c-6.812352 6.799571-16.756085 10.991787-26.17579 10.991787-9.943733 0-19.37622-4.192216-26.175791-10.991787-6.799571-6.812352-10.991787-16.756085-10.991787-26.699818 0-9.943733 4.192216-19.900247 10.991787-26.699818s16.756085-10.991787 26.175791-10.991787c9.943733 0 19.363439 4.192216 26.17579 10.991787s10.991787 16.756085 10.991787 26.699818c0 9.943733-4.192216 19.887466-10.991787 26.699818z m-26.17579-87.435832c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605z m258.089717-237.678225c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.646726 206.798972c15.184004-15.184004 40.31174-15.184004 55.495743 0l230.354627 230.341845c15.184004 15.171222 15.184004 39.774932 0 55.482963z m0 0" p-id="9154"></path><path d="M771.497096 492.636561c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.659507 206.798972c15.184004-15.184004 40.31174-15.184004 55.495744 0l230.354626 230.341845c15.171222 15.184004 15.171222 39.787713-0.012781 55.495744zM513.407379 730.302005c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605M513.407379 828.729624c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.743304 37.167577 37.691605 0 20.93552-16.756085 37.691605-37.167577 37.691605" fill="#FFFFFF" p-id="9155"></path></svg>