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

.dockerignore

@@ -0,0 +1,10 @@
+node_modules/
+.git/
+.idea/
+dist/
+.astro/
+.vscode/
+.claude/
+*.tar.gz
+*.log
+.DS_Store

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.env

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

.env.production

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

.gitignore

@@ -13,10 +13,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
-# environment variables
-.env
-.env.production
-
 # macOS-specific files
 .DS_Store
 
@@ -25,3 +21,5 @@ pnpm-debug.log*
 
 *.tar
 *.gz
+
+.claude

AGENTS.md

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

astro.config.mjs

@@ -1,14 +1,22 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
-import solidJs from '@astrojs/solid-js';
+import {defineConfig} from 'astro/config';
 import node from '@astrojs/node';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://ua42.com',
   output: 'server',
-  integrations: [solidJs()],
+  server: {
+    host: "0.0.0.0",
+  },
   adapter: node({
     mode: 'standalone'
-  })
+  }),
+  vite: {
+    server: {
+      ...(process.argv.includes('dev')
+        ? {watch: {usePolling: true}}
+        : {}),
+    }
+  }
 });

package.json

@@ -10,13 +10,20 @@
     "deploy": "./scripts/deploy.sh"
   },
   "dependencies": {
-    "@astrojs/node": "^9.5.1",
-    "@astrojs/solid-js": "^5.1.3",
-    "astro": "^5.15.8",
+    "@astrojs/node": "11.0.2",
+    "astro": "^7.0.6",
+    "clipboard": "^2.0.11",
+    "dayjs": "^1.11.21",
+    "jsdom": "^29.1.1",
+    "ky": "^2.0.2",
     "modern-normalize": "^3.0.1",
-    "solid-js": "^1.9.10"
+    "photoswipe": "^5.4.4",
+    "shiki": "^4.3.1"
   },
   "volta": {
     "node": "22.21.1"
+  },
+  "devDependencies": {
+    "@types/jsdom": "^28.0.3"
   }
 }

pnpm-workspace.yaml

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

public/favicon.svg

@@ -1,46 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="placeholder favicon">
-  <defs>
-    <!-- 轻微渐变底色 -->
-    <linearGradient id="g" x1="0" x2="0" y1="0" y2="1">
-      <stop offset="0" stop-color="#f7f8fb"/>
-      <stop offset="1" stop-color="#e6e9f2"/>
-    </linearGradient>
-
-    <!-- 圆角外形的蒙版（用来制造中间空缺） -->
-    <mask id="holeMask">
-      <!-- 全白表示顯示 -->
-      <rect x="0" y="0" width="64" height="64" fill="white"/>
-      <!-- 中间用黑色（掏空） -->
-      <!-- 这里用一个较大的圆角方块作为"空缺" -->
-      <rect x="14" y="14" width="36" height="36" rx="8" ry="8" fill="black"/>
-    </mask>
-
-    <!-- 描边样式（虚线） -->
-    <pattern id="dash" width="6" height="6" patternUnits="userSpaceOnUse">
-      <rect width="6" height="6" fill="none"/>
-    </pattern>
-  </defs>
-
-  <!-- 圆角底板 -->
-  <rect x="2" y="2" width="60" height="60" rx="12" ry="12" fill="url(#g)" stroke="#d9dce8" stroke-width="1"/>
-
-  <!-- 在底板上绘制一个较暗的阴影区域，让边缘有质感 -->
-  <rect x="2" y="34" width="60" height="28" rx="12" ry="12" fill-opacity="0.03" fill="#000"/>
-
-  <!-- 使用mask把中间挖空（透明） -->
-  <g mask="url(#holeMask)">
-    <!-- 这层是底色的延伸，挖空后中间变透明 -->
-    <rect x="2" y="2" width="60" height="60" rx="12" ry="12" fill="url(#g)" />
-  </g>
-
-  <!-- 在被挖空的边缘画一圈圆角虚线作为占位提示 -->
-  <rect x="14" y="14" width="36" height="36" rx="8" ry="8"
-        fill="none" stroke="#9aa0b6" stroke-width="1.5" stroke-dasharray="3 3" />
-
-  <!-- 中心放置一个小图形（可选）: 一个微小的“文件”轮廓来提示占位 -->
-  <g transform="translate(28,20)">
-    <path d="M0 0 L8 0 L8 12 L0 12 Z" fill="none" stroke="#9aa0b6" stroke-width="1" stroke-linejoin="round"/>
-    <path d="M5 0 L5 3" stroke="#9aa0b6" stroke-width="1" stroke-linecap="round"/>
-  </g>
-</svg>

public/robots.txt

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

scripts/Dockerfile

@@ -1,12 +1,13 @@
 FROM alpine:3.22 AS base
 WORKDIR /app
 
-RUN apk add --no-cache --update nodejs pnpm
+RUN apk add --no-cache --update nodejs
 
 FROM base AS install
+RUN apk add --no-cache pnpm
 ENV NODE_ENV=production
 COPY package.json pnpm-lock.yaml ./
-RUN pnpm install
+RUN pnpm install --frozen-lockfile
 
 FROM install AS build
 COPY . .

scripts/deploy.sh

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

src/components/BaseFooter.astro

@@ -1,28 +0,0 @@
-<style>
-  footer {
-    background-color: #1a1a1a;
-    height: 70px;
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-
-  .content {
-    color: aliceblue;
-    max-width: var(--layout-width);
-    margin: 0 auto;
-    color: #f9f8f6;
-    display: flex;
-    align-items: center;
-    height: 100%;
-    font-size: 14px;
-    justify-content: center;
-  }
-</style>
-
-<footer>
-  <div class="content">
-    <a href="https://beian.miit.gov.cn/#/Integrated/index">
-      备案号：鄂ICP备2023000060号-2
-    </a>
-  </div>
-</footer>

src/components/BaseHeader.astro

@@ -1,43 +0,0 @@
-<style>
-  header {
-    height: 60px;
-    position: sticky;
-    top: 0;
-    z-index: 99999;
-    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
-    flex-shrink: 0;
-    background: #fff;
-  }
-
-  .main-nav {
-    max-width: var(--layout-width);
-    margin: 0 auto;
-    height: 100%;
-    padding: 0 16px;
-  }
-
-  .main-nav .menu {
-    list-style: none;
-    display: flex;
-    gap: 20px;
-    height: 100%;
-    align-items: center;
-  }
-
-  /* element: menu-item */
-  .main-nav .menu-item a {
-    text-decoration: none;
-    font-weight: bold;
-  }
-
-  .main-nav .menu-item a:hover {
-  }
-</style>
-
-<header>
-  <nav class="main-nav">
-    <ul class="menu">
-      <li class="menu-item"><a href="/">首页</a></li>
-    </ul>
-  </nav>
-</header>

src/components/IndexPage.astro

@@ -0,0 +1,40 @@
+---
+import PostList from "@/components/Post/List.astro";
+import Pagination from "@/components/Post/Pagination.astro";
+import type {Post} from "@/types";
+
+interface Props {
+  posts: Post[]
+  page: number
+  totalPage: number
+}
+
+const {posts, page, totalPage} = Astro.props
+---
+<main>
+  <div class="intro">
+    <p>did you stand too close to the fire?<br>
+      like a liar looking for forgiveness from a stone.</p>
+  </div>
+
+  <PostList posts={posts}/>
+  <Pagination page={page} totalPage={totalPage}/>
+</main>
+
+
+<style>
+  .intro {
+    border-bottom: var(--border-secondary);
+    line-height: 2;
+    font-size: 15px;
+    color: var(--text-secondary);
+    padding-bottom: 32px;
+    margin-bottom: 12px;
+  }
+
+  @media (max-width: 640px) {
+    .intro{
+      padding-bottom: 24px;
+    }
+  }
+</style>

src/components/LazyImage.astro

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

src/components/Post/List.astro

@@ -0,0 +1,83 @@
+---
+import type {Post} from "@/types";
+import {formatDatetime} from '@/lib/format.ts'
+
+interface Props {
+  posts: Post[]
+}
+const {posts} = Astro.props
+---
+
+<div class="posts">
+  {posts.map(item => (
+    <div class="post">
+      <span class="d">{formatDatetime(item.published_at, 'YY.MM.DD')}</span>
+      <h2><a href=`/post/${item.slug}`>{item.title}</a></h2>
+      <span class="arrow">→</span>
+    </div>
+  ))}
+</div>
+
+<style>
+  .posts {
+
+  }
+
+  .post {
+    display: flex;
+    align-items: baseline;
+    gap: 20px;
+    padding: 26px 0;
+    border-bottom: var(--border-secondary);
+  }
+
+  .post .d {
+    font-size: 14px;
+    color: var(--text-meta);
+    min-width: 80px;
+    letter-spacing: 1px;
+  }
+
+  .post h2 {
+    font-size: 16px;
+    font-weight: normal;
+    flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .post h2 a {
+    color: var(--text-primary);
+    text-decoration: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .post h2 a:hover {
+    color: var(--text-title-hover);
+    text-decoration: underline;
+    text-underline-offset: 6px;
+  }
+
+  .post .arrow {
+    color: #d0d0d0;
+    font-size: 14px;
+    transition: transform 0.2s, color 0.2s;
+  }
+
+  .post:hover .arrow {
+    color: #334155;
+  }
+
+  @media (max-width: 640px) {
+    .post .d {
+      min-width: 64px;
+    }
+
+    .post h2 {
+      font-size: 15px;
+    }
+  }
+</style>

src/components/Post/Pagination.astro

@@ -0,0 +1,49 @@
+---
+interface Props {
+  page: number
+  totalPage: number
+}
+
+const {page, totalPage} = Astro.props
+---
+
+<!--分页器-->
+{totalPage > 1 &&
+<nav class="pagination" aria-label="分页">
+  {Array.from({length: totalPage}).map((_, index) => {
+    if (page === index + 1) {
+      return <span class="link current">{index + 1}</span>
+    }
+    return <a class="link" href={`/page/${index + 1}`}>{index + 1}</a>
+  })}
+  {page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页</a> :
+    <span class="link disabled">下一页</span>}
+</nav>}
+
+<style>
+  /* ========== 分页 ========== */
+  .pagination {
+    width: 100%;
+    text-align: right;
+    white-space: nowrap;
+    margin-top: 32px;
+    font-size: 13px;
+  }
+
+  .link {
+    display: inline-block;
+    margin: 0 12px;
+    line-height: 1;
+    color: var(--text-secondary);
+  }
+
+  .current{
+    color: var(--text-primary);
+    font-weight: bold;
+  }
+
+  .link.disabled {
+    color: var(--text-disabled);
+    cursor: not-allowed;
+  }
+</style>

src/components/ThemeIcon.astro

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

src/consts.ts

@@ -1,3 +1,7 @@
-export const metadata = {
-  siteTitle: "42的博客",
+export const siteConfig = {
+  site: "https://ua42.com",
+  siteTitle: "Uroboros",
+  postPageSize: 7,
+  description: "一个人的自留地 ，不欢迎我，也不欢迎你。",
+  git: "https://git.ua42.com"
 }

src/layouts/Layout.astro

@@ -1,80 +1,69 @@
 ---
-import "@/styles/base.css";
+import "@/styles/global.css";
+import {siteConfig} from "@/consts.ts";
+import PageHeader from "./PageHeader.astro";
+import PageFooter from "./PageFooter.astro";
 
-import BaseHeader from "@/components/BaseHeader.astro";
-import BaseFooter from "@/components/BaseFooter.astro";
+const {siteTitle} = siteConfig;
 
-import { metadata } from "@/consts.ts";
-const { siteTitle } = metadata;
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const {title, description} = Astro.props;
+const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
 ---
 
 <!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
   />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
-    <title>{siteTitle}</title>
-  </head>
-  <body>
-    <BaseHeader />
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
+  <meta name="generator" content={Astro.generator}/>
+  <meta name="description" content={description}/>
+  <meta name="theme-color" content="#ffffff"/>
+  <title>{pageTitle}</title>
+</head>
+<body>
+<div class="container">
+  <PageHeader/>
   <main>
-      <div class="grid-background"></div>
-      <slot />
+    <slot></slot>
   </main>
-    <BaseFooter />
-  </body>
+  <PageFooter />
+</div>
+</body>
 </html>
 
 <style>
-  html,
   body {
-    width: 100%;
-    height: 100%;
+    background: var(--background);
   }
 
-  body {
+  .container {
+    width: 100%;
+    max-width: var(--layout-width);
+    height: 100%;
+    min-height: 100%;
+    margin: 0 auto;
+    padding: 24px;
     display: flex;
     flex-direction: column;
   }
 
   main {
     flex: 1;
-    max-width: var(--layout-width);
-    width: 100%;
-    margin: 0 auto;
-    padding: 16px;
-    position: relative;
+    padding: 24px 0;
   }
 
-  .grid-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    background-color: #ffffff;
-    opacity: 0.3;
-    background-image: linear-gradient(#d7edfb 2px, transparent 2px),
-      linear-gradient(90deg, #d7edfb 2px, transparent 2px),
-      linear-gradient(#d7edfb 1px, transparent 1px),
-      linear-gradient(90deg, #d7edfb 1px, #ffffff 1px);
-    background-size:
-      50px 50px,
-      50px 50px,
-      10px 10px,
-      10px 10px;
-    background-position:
-      -2px -2px,
-      -2px -2px,
-      -1px -1px,
-      -1px -1px;
+  @media (max-width: 640px) {
+    .container {
+      padding: 16px;
+    }
   }
 </style>

src/layouts/PageFooter.astro

@@ -0,0 +1,26 @@
+<footer>
+  <div>© 2026 Uroboros</div>
+  <a href="https://beian.miit.gov.cn" target="_blank">备案号：鄂ICP备2023000060号-2</a>
+</footer>
+
+<style>
+  footer {
+    flex-shrink: 0;
+    min-height: 0;
+    height: 84px;
+    padding-bottom: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 13px;
+    gap: 12px;
+    color: var(--text-secondary);
+  }
+
+  @media (max-width: 640px) {
+    footer {
+      height: 64px;
+      padding-bottom: 0;
+    }
+  }
+</style>

src/layouts/PageHeader.astro

@@ -0,0 +1,56 @@
+---
+import {siteConfig} from "@/consts.ts";
+import ThemeIcon from "@/components/ThemeIcon.astro";
+
+const {siteTitle,git} = siteConfig;
+---
+
+<header>
+  <a href="/"><h1>{siteTitle}</h1></a>
+  <nav>
+    <a href="/archive">归档</a>
+    <a target="_blank" href={git}>git</a>
+
+    <ThemeIcon />
+  </nav>
+</header>
+
+<style>
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: var(--border-primary);
+    margin-top: 32px;
+    padding-bottom: 24px;
+  }
+
+  nav {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    font-size: 14px;
+    color: var(--text-secondary);
+  }
+
+  nav a:hover {
+    color: var(--text-primary);
+  }
+
+  h1 {
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  @media (max-width: 640px) {
+    header {
+      margin-top: 12px;
+      margin-bottom: 0;
+    }
+
+    h1 {
+      font-size: 20px;
+      font-weight: normal;
+    }
+  }
+</style>

src/lib/format.ts

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export const formatDatetime = (date: string,format = 'YYYY-MM-DD HH:mm') => {
+  return dayjs(date).tz('Asia/Shanghai').format(format);
+};

src/lib/processHtml.ts

@@ -0,0 +1,115 @@
+import {JSDOM} from 'jsdom'
+import {createHighlighter} from 'shiki'
+
+const DEFAULT_THEME = 'github-dark-dimmed'
+
+const highlighter = await createHighlighter({
+  themes: [DEFAULT_THEME],
+  langs: []
+})
+
+const SUPPORTED_LANGS = [
+  "bash", "json", "yaml", "xml", "html", "css", "scss",
+  "javascript", "typescript", "jsx", "tsx", "vue",
+  "markdown", "sql", "python", "go", "dockerfile", "nginx"
+] as const
+
+const loadedLangs = new Set<string>(['text'])
+
+type SupportedLang = typeof SUPPORTED_LANGS[number]
+
+const supportedSet = new Set<string>(SUPPORTED_LANGS)
+
+const ensureLangLoaded = async (lang: string): Promise<string> => {
+  if (lang === 'text' || loadedLangs.has(lang)) return lang
+  if (!supportedSet.has(lang)) return 'text'
+  try {
+    await highlighter.loadLanguage(lang as SupportedLang)
+    loadedLangs.add(lang)
+    return lang
+  } catch {
+    return 'text'
+  }
+}
+
+export const processHtmlWithJsdom = async (rawHtml: string) => {
+  const dom = new JSDOM(rawHtml)
+  const document = dom.window.document
+
+  const codeBlocks = document.querySelectorAll('pre code')
+
+  for (const codeBlock of codeBlocks) {
+    const preEl = codeBlock.parentElement
+    if (!preEl || preEl.tagName !== 'PRE') continue
+
+    const codeContent = codeBlock.textContent || ''
+    let lang = 'text'
+    for (const cls of codeBlock.classList) {
+      if (cls.startsWith('language-')) {
+        lang = cls.slice('language-'.length)
+        break
+      }
+    }
+
+    lang = await ensureLangLoaded(lang)   // ← 唯一改动点：按需加载
+
+    const highlighted = highlighter.codeToHtml(codeContent, {
+      lang,
+      theme: DEFAULT_THEME,
+    })
+
+    // 替换 DOM
+    const wrapper = document.createElement('div')
+    wrapper.innerHTML = highlighted.trim()
+
+    const newNode = wrapper.firstElementChild
+    if (newNode && preEl.parentNode) {
+      const container = document.createElement('div')
+      container.className = 'code-block'
+
+      const header = document.createElement('div')
+      header.className = 'code-header'
+
+      const headerLeft = document.createElement('div')
+      headerLeft.className = 'code-header-left'
+
+      const headerRight = document.createElement('div')
+      headerRight.className = 'code-header-right'
+
+      // 装饰点
+      const actions = document.createElement('div')
+      actions.className = 'code-actions'
+
+      const close = document.createElement('span')
+      close.className = 'dot close'
+
+      const minimize = document.createElement('span')
+      minimize.className = 'dot minimize'
+
+      const maximize = document.createElement('span')
+      maximize.className = 'dot maximize'
+
+      actions.append(close, minimize, maximize)
+
+      // 显示语言
+      const langDisplay = document.createElement('div')
+      langDisplay.className = 'code-language'
+      langDisplay.textContent = lang ? lang : 'text'
+
+      const copyBtn = document.createElement('div')
+      copyBtn.className = 'code-copy-btn'
+      copyBtn.textContent = '复制代码'
+
+      headerLeft.append(actions, langDisplay)
+      headerRight.append(copyBtn)
+
+      header.append(headerLeft, headerRight)
+
+      container.append(header, newNode)
+
+      preEl.parentNode.replaceChild(container, preEl)
+    }
+  }
+
+  return document.body.innerHTML
+}

src/lib/request.ts

@@ -0,0 +1,51 @@
+import ky, {type Options} from 'ky'
+
+type ForwardHeaderSource = Headers | Record<string, string | undefined> | undefined | null
+
+const api = ky.create({
+  baseUrl: import.meta.env.VITE_API_BASE_URL
+});
+
+const pickHeader = (source: ForwardHeaderSource, name: string): string | undefined => {
+  if (!source) return undefined
+  if (source instanceof Headers) return source.get(name) ?? undefined
+  return source[name] ?? source[name.toLowerCase()]
+}
+
+const buildForwardHeaders = (source: ForwardHeaderSource): Record<string, string> => {
+  const xff = pickHeader(source, 'x-forwarded-for')
+  const realIp = pickHeader(source, 'x-real-ip')
+  const cfIp = pickHeader(source, 'cf-connecting-ip')
+  const ua = pickHeader(source, 'user-agent')
+  const referer = pickHeader(source, 'referer')
+  const host = pickHeader(source, 'host')
+  const proto = pickHeader(source, 'x-forwarded-proto')
+
+  return {
+    ...(xff ? {'x-forwarded-for': xff} : {}),
+    ...(realIp ? {'x-real-ip': realIp} : {}),
+    ...(cfIp ? {'cf-connecting-ip': cfIp} : {}),
+    ...(ua ? {'user-agent': ua} : {}),
+    ...(referer ? {referer} : {}),
+    ...(host ? {host} : {}),
+    ...(proto ? {'x-forwarded-proto': proto} : {})
+  }
+}
+
+export const createHttp = (forwardHeadersSource?: ForwardHeaderSource) => {
+  const forwardedHeaders = buildForwardHeaders(forwardHeadersSource)
+
+  return {
+    get: async <T = unknown>(url: string, options?: Options): Promise<T> => {
+      return api.get(url, {
+        ...options,
+        headers: {
+          ...forwardedHeaders,
+          ...(options?.headers ?? {})
+        }
+      }).json<T>()
+    }
+  };
+}
+
+export const http = createHttp();

src/pages/404.astro

@@ -0,0 +1,18 @@
+---
+import Layout from "@/layouts/Layout.astro";
+---
+
+<Layout title="404" description="这里什么也没有">
+  <div class="not-found">
+    <h1>404 NOT FOUND</h1>
+  </div>
+</Layout>
+
+<style>
+  .not-found{
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/pages/archive.astro

@@ -0,0 +1,135 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import type {Archive} from "@/types/archive";
+import {createHttp} from "@/lib/request";
+
+const http = createHttp(Astro.request.headers);
+
+const {data} = await http.get<ApiResponse<Archive>>("posts/archives");
+---
+
+
+<Layout title="归档" description="">
+  <div class="archive">
+    {
+      data.map((year) => (
+        <div class="archive-year">
+          <h2 class="year-title">
+            <span class="year-badge">{year.year}年</span>
+            <span class="year-count">共 {year.total} 篇</span>
+          </h2>
+          <div>
+            {year.list.map((month) => (
+              <div class="month-group">
+                <h3 class="month-title">{month.month} 月</h3>
+                <ul class="post-list">
+                  {month.list.map((post) => (
+                    <li class="post-item">
+                        <span class="post-date">
+                          {post.published_at_display}
+                        </span>
+                      <a class="post-title" href={`/post/${post.slug}`}>{post.title}</a>
+                      <span class="post-cat">{post.category_name}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))
+    }
+  </div>
+</Layout>
+
+<style>
+  .archive {
+
+  }
+
+  .archive-year {
+
+  }
+
+  .year-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: var(--text-primary);
+    font-size: 28px;
+    margin-bottom: 24px;
+  }
+
+  .year-badge {
+
+  }
+
+  .year-count {
+    font-size: 14px;
+    font-weight: normal;
+  }
+
+  .month-group {
+    padding: 12px 0;
+  }
+
+  .month-title {
+    color: var(--text-primary);
+    font-weight: normal;
+  }
+
+  .post-list {
+    padding: 12px 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .post-item {
+    display: flex;
+    gap: 24px;
+    font-size: 14px;
+    border-bottom: var(--border-secondary);
+    padding: 18px 0;
+    align-items: center;
+  }
+
+  .post-item:last-child {
+    border-bottom: none;
+  }
+
+  .post-date {
+    color: var(--text-meta);
+  }
+
+  .post-title {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--text-primary);
+    font-size: 16px;
+    text-underline-offset: 4px;
+    line-height: 24px;
+  }
+
+  .post-title:hover{
+    color: var(--text-title-hover);
+    text-decoration: underline;
+  }
+
+  .post-cat {
+    color: var(--text-meta);
+    font-size: 14px;
+  }
+
+  @media (max-width: 640px) {
+    .year-title{
+      font-size: 24px;
+    }
+
+    .post-title{
+      font-size: 15px;
+    }
+  }
+
+</style>

src/pages/embed/gitea.astro

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

src/pages/index.astro

@@ -1,33 +1,23 @@
 ---
 import Layout from "@/layouts/Layout.astro";
+import {siteConfig} from "@/consts.ts";
+import {createHttp} from "@/lib/request.ts";
+import type {Post} from "@/types";
+import IndexPage from "@/components/IndexPage.astro";
 
-const posts = [
-  {
-    title: "First Post",
-    date: "2024-01-01",
-    summary: "This is the summary of the first post.",
+const {postPageSize, description} = siteConfig;
+
+const http = createHttp(Astro.request.headers);
+
+const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
+  searchParams: {
+    page: 1,
+    page_size: postPageSize,
   },
-];
+});
+const totalPage = Math.ceil(total / postPageSize);
 ---
 
-<Layout>
-  <div>
-    {
-      posts.map((post) => (
-        <a href={`/posts/${post.title.replace(/\s+/g, "-").toLowerCase()}`}>
-          <h2>{post.title}</h2>
-          <p>{post.date}</p>
-          <p class="summary">{post.summary}</p>
-        </a>
-      ))
-    }
-  </div>
+<Layout title="博客首页" description={description}>
+  <IndexPage page={1} totalPage={totalPage} posts={list}/>
 </Layout>
-
-<style>
-  .summary {
-    line-height: 2;
-    font-size: 16px;
-    color: rgb(66, 63, 63);
-  }
-</style>

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

@@ -0,0 +1,34 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import {siteConfig} from "@/consts.ts";
+import {createHttp} from "@/lib/request.ts";
+import type {Post} from "@/types";
+import IndexPage from "@/components/IndexPage.astro";
+const {page} = Astro.params;
+
+const pageInt = Number(page);
+
+if (isNaN(pageInt) || pageInt <= 1) {
+  return Astro.redirect("/");
+}
+
+const {postPageSize,description} = siteConfig;
+
+const http = createHttp(Astro.request.headers);
+
+const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
+  searchParams: {
+    page: pageInt,
+    page_size: postPageSize,
+  },
+});
+const totalPage = Math.ceil(total / postPageSize);
+
+if (totalPage < pageInt) {
+  return Astro.redirect("/404");
+}
+---
+
+<Layout title="博客首页" description={description}>
+  <IndexPage page={pageInt} totalPage={totalPage} posts={list}/>
+</Layout>

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

@@ -0,0 +1,237 @@
+---
+import "@/styles/github-markdown.css";
+import "@/styles/github-markdown-reset.css";
+import "photoswipe/dist/photoswipe.css";
+
+import Layout from '@/layouts/Layout.astro';
+import {createHttp} from "@/lib/request.ts";
+import type {Post} from "@/types";
+import {processHtmlWithJsdom} from "@/lib/processHtml.ts";
+import {formatDatetime} from "@/lib/format.ts";
+
+const {slug} = Astro.params;
+
+const http = createHttp(Astro.request.headers);
+
+let data: Post;
+
+try {
+  const res = await http.get<ApiResponse<Post>>(`posts/${slug}`);
+  data = res.data;
+} catch (error) {
+  return Astro.redirect("/404");
+}
+
+const content = await processHtmlWithJsdom(data.content);
+const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
+---
+
+<Layout title={data.title} description={data.summary}>
+  <article>
+    <div class="meta">
+      <div class="meta-left">
+        <span>{data.category_name} · {data.category_code.toUpperCase()}</span>
+        <span>{published_at}</span>
+      </div>
+
+      <div class="meta-view-count">{data.view_count} 次阅读</div>
+    </div>
+    <h1>{data.title}</h1>
+
+    {data.cover &&
+      <div>
+        <img class="cover" src={data.cover} alt={data.title}>
+      </div>
+    }
+
+    <p class="summary">{data.summary}</p>
+
+    <div class="divider"></div>
+
+    <div class="markdown-body" data-color-mode="dark" set:html={content}/>
+
+    {
+      data.tags.length > 0 &&
+      <div class="tags">
+        {data.tags.map(tag => <span>{tag.name}</span>)}
+      </div>
+    }
+  </article>
+</Layout>
+
+<style>
+  article {
+    width: 100%;
+    margin: 0 auto;
+    flex: 1;
+    flex-shrink: 0;
+  }
+
+  .cover {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+
+  .meta {
+    color: var(--text-meta);
+    font-size: 13px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .meta-left {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+
+  .meta-view-count:hover {
+    color: var(--text-primary);
+  }
+
+  h1 {
+    font-size: 28px;
+    line-height: 1.4;
+    font-weight: 500;
+    margin-bottom: 20px;
+  }
+
+  .summary {
+    font-size: 14px;
+    margin-bottom: 20px;
+    color: var(--text-meta);
+    line-height: 1.4;
+  }
+
+  .divider {
+    border-bottom: var(--border-secondary);
+  }
+
+  .markdown-body {
+    margin-top: 24px;
+    line-height: 1.8;
+    font-size: 15px;
+    color: var(--article-text-color);
+  }
+
+  .tags {
+    margin-top: 24px;
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .tags span {
+    font-size: 12px;
+    color: var(--text-secondary);
+    border: var(--border-primary);
+    border-radius: 20px;
+    padding: 8px 16px;
+  }
+
+  @media (max-width: 640px) {
+    h1{
+      font-size: 24px;
+    }
+  }
+</style>
+
+<script>
+  import PhotoSwipeLightbox from "photoswipe/lightbox";
+  import ClipboardJS from "clipboard";
+
+  const init = async () => {
+    const article = document.querySelector(".markdown-body")!;
+    const images = Array.from(article.querySelectorAll("img"));
+
+    if(images.length === 0) return
+
+    const waitImageLoaded = (img: HTMLImageElement) => {
+      if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
+        return Promise.resolve();
+      }
+
+      return new Promise<void>((resolve) => {
+        img.addEventListener("load", () => resolve(), {once: true});
+        img.addEventListener("error", () => resolve(), {once: true});
+      });
+    };
+
+    await Promise.all(
+      images.map(async (img) => {
+        if (img.closest("a")) return;
+
+        await waitImageLoaded(img);
+
+        const link = document.createElement("a");
+
+        link.href = img.currentSrc || img.src;
+        link.target = "_blank";
+        link.rel = "noreferrer";
+        link.dataset.pswpWidth = String(img.naturalWidth || img.width || 1200);
+        link.dataset.pswpHeight = String(
+          img.naturalHeight || img.height || 800,
+        );
+
+        img.parentNode?.insertBefore(link, img);
+        link.appendChild(img);
+      }),
+    );
+
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: ".markdown-body",
+      children: "a[data-pswp-width]",
+      pswpModule: () => import("photoswipe"),
+
+      padding: {
+        top: 48,
+        right: 24,
+        bottom: 48,
+        left: 24,
+      },
+      bgOpacity: 0.5,
+      tapAction: "close",
+      bgClickAction: "close",
+    });
+
+    lightbox.init();
+  };
+
+  init();
+
+
+  const copyTimers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();
+
+  // 代码块复制功能
+  const clipboard = new ClipboardJS(".code-copy-btn", {
+    text: (el) => {
+      const sibling = el.closest(".code-header")?.nextElementSibling;
+      return sibling?.textContent.trim() || "";
+    }
+  });
+
+  clipboard.on("success", (e) => {
+    const btn = e.trigger as HTMLElement;
+
+    // 清理当前按钮之前的定时器
+    const oldTimer = copyTimers.get(btn);
+    if (oldTimer) {
+      clearTimeout(oldTimer);
+    }
+
+    const originalText = btn.textContent || "";
+
+    btn.textContent = "✓ 代码已复制";
+
+    const timer = setTimeout(() => {
+      btn.textContent = originalText;
+      copyTimers.delete(btn);
+    }, 2000);
+
+    copyTimers.set(btn, timer);
+
+    e.clearSelection();
+  });
+</script>

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

@@ -1,9 +0,0 @@
----
-import Layout from "@/layouts/Layout.astro";
-
-const { slug } = Astro.params;
----
-
-<Layout>
-  <h1>Post Slug: {slug}</h1>
-</Layout>

src/pages/sitemap-pages.xml.ts

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

src/pages/sitemap-posts.xml.ts

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

src/pages/sitemap.xml.ts

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

src/styles/base.css

@@ -1,7 +0,0 @@
-@import "modern-normalize";
-@import "./reset.css";
-
-:root {
-  --layout-width: 1200px;
-}
-

src/styles/css-reset.css

@@ -0,0 +1,13 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+ul,li{
+  list-style: none;
+}

src/styles/github-markdown-reset.css

@@ -0,0 +1,84 @@
+.markdown-body pre code {
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  border-bottom: none;
+}
+
+@media (max-width: 768px) {
+  .markdown-body pre code {
+    font-size: inherit;
+  }
+}
+
+.markdown-body .highlight pre,
+.markdown-body pre {
+  border-radius: 0 0 8px 8px;
+}
+
+.markdown-body img {
+  margin: 12px 0 12px;
+}
+
+.code-block {
+}
+
+.code-header {
+  height: 36px;
+  background: var(--code-block-header-bg);
+  display: flex;
+  justify-content: space-between;
+  color: var(--text-primary);
+  align-items: center;
+  padding: 0 12px;
+  font-size: 14px;
+  border-radius: 8px 8px 0 0;
+}
+
+.code-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.code-actions {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.code-actions .dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+}
+
+.code-actions .close {
+  background: #ff5f57;
+}
+
+.code-actions .minimize {
+  background: #febc2e;
+}
+
+.code-actions .maximize {
+  background: #28c840;
+}
+
+.code-copy-btn {
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.code-copy-btn:hover {
+  color: var(--code-block-copy-btn-hover-color);
+}

src/styles/global.css

@@ -0,0 +1,65 @@
+@import "modern-normalize";
+@import "css-reset.css";
+
+:root {
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --layout-width: 760px;
+
+  --background: #ffffff;
+  --border-primary: 1px solid #dcdcdc;
+  --border-secondary: 1px solid #eee;
+  --text-primary: #030712;
+  --text-secondary: #3f3f46;
+  --text-disabled: #d1d5db;
+  --text-meta: #71717a;
+  --article-text-color: #404040;
+  --text-title-hover: #000;
+
+  --code-block-header-bg: #f5f5f4;
+  --code-block-copy-btn-hover-color: #6b7280;
+}
+
+.dark {
+  --background: #0a0a0a;
+  --border-primary: 1px solid #52525b;
+  --border-secondary: 1px solid #525252;
+  --text-primary: #e4e4e7;
+  --text-secondary: #d1d5db;
+  --text-disabled: #6b7280;
+  --text-meta: #d4d4d8;
+  --article-text-color: #d4d4d8;
+  --text-title-hover: #fff;
+
+  --code-block-header-bg: #374151;
+  --code-block-copy-btn-hover-color: #9ca3af;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  font-family: var(--font-family), serif;
+  color: var(--text-primary);
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+/* 滚动条轨道 */
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+  background: rgba(139,139,139,.5);
+  border-radius: 999px;
+}
+
+/* 鼠标悬停 */
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(139,139,139,.7);
+}

src/styles/reset.css

@@ -1,11 +0,0 @@
-/* css reset */
-a {
-  text-decoration: none;
-  color: inherit;
-}
-
-ul, ol {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}

src/types/archive.ts

@@ -0,0 +1,21 @@
+type ArchiveYear = {
+  year: number;
+  total: number;
+  list: ArchiveMonth[];
+};
+
+type ArchivePost = {
+  id: number;
+  slug: string;
+  title: string;
+  published_at: string;
+  published_at_display: string;
+  category_name: string;
+};
+
+type ArchiveMonth = {
+  month: number;
+  list: ArchivePost[];
+};
+
+export type Archive = ArchiveYear[];

src/types/global.d.ts

@@ -0,0 +1,29 @@
+/** 基础 API 响应结构 */
+declare interface ApiResponse<T = unknown> {
+  msg?: string
+  data: T
+}
+
+/** 分页响应结构 */
+declare interface ApiPageResponse<T = unknown> {
+  msg?: string
+  /** 当前页码 */
+  page: number
+  /** 每页数量 */
+  pageSize: number
+  /** 业务数据列表 */
+  list: T[]
+  /** 总记录数 */
+  total: number
+}
+
+/** 错误响应结构 - 当请求失败时的响应格式 */
+declare interface ApiErrorResponse {
+  msg: string
+}
+
+/** 通用请求参数类型 */
+declare interface Pagination {
+  page?: number
+  pageSize?: number
+}

src/types/index.ts

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

src/types/post.ts

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

tsconfig.json

@@ -13,8 +13,6 @@
       "@/*": [
         "src/*"
       ]
-    },
-    "jsx": "preserve",
-    "jsxImportSource": "solid-js"
+    }
   }
 }