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

style: 微调color
style: 调整滚动条样式
2026-08-19 00:20:52 +08:00 · 2026-08-17 22:32:07 +08:00 · 2026-08-16 15:57:32 +08:00 · 2026-08-16 15:55:07 +08:00 · 2026-08-16 15:49:40 +08:00 · 2026-08-16 15:41:52 +08:00
44 changed files with 809 additions and 2451 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,10 @@
+node_modules/
+.git/
+.idea/
+dist/
+.astro/
+.vscode/
+.claude/
+*.tar.gz
+*.log
+.DS_Store
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,6 +1,5 @@
 // @ts-check
 import {defineConfig} from 'astro/config';
-import solidJs from '@astrojs/solid-js';
 import node from '@astrojs/node';

 // https://astro.build/config
@@ -10,16 +9,14 @@ export default defineConfig({
  server: {
    host: "0.0.0.0",
  },
-  integrations: [solidJs()],
  adapter: node({
    mode: 'standalone'
  }),
  vite: {
-    plugins: [],
    server: {
-      watch: {
-        usePolling: true,
-      },
-    },
-  },
+      ...(process.argv.includes('dev')
+        ? {watch: {usePolling: true}}
+        : {}),
+    }
+  }
 });
--- a/package.json
+++ b/package.json
@@ -11,16 +11,14 @@
  },
  "dependencies": {
    "@astrojs/node": "11.0.2",
-    "@astrojs/solid-js": "^5.1.3",
    "astro": "^7.0.6",
+    "clipboard": "^2.0.11",
    "dayjs": "^1.11.21",
-    "github-markdown-css": "^5.9.0",
    "jsdom": "^29.1.1",
    "ky": "^2.0.2",
    "modern-normalize": "^3.0.1",
    "photoswipe": "^5.4.4",
-    "shiki": "^4.3.1",
-    "solid-js": "^1.9.14"
+    "shiki": "^4.3.1"
  },
  "volta": {
    "node": "22.21.1"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/scripts/Dockerfile
+++ b/scripts/Dockerfile
@@ -1,12 +1,13 @@
 FROM alpine:3.22 AS base
 WORKDIR /app

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

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

 FROM install AS build
 COPY . .
--- a/src/assets/icon/back-top.svg
+++ b/src/assets/icon/back-top.svg
@@ -1 +0,0 @@
-<?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
@@ -1 +0,0 @@
-<?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/BackTop.astro
+++ b/src/components/BackTop.astro
@@ -1,69 +0,0 @@
---
-// 后面的 ?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,46 +0,0 @@
---
-import { metadata } from "../consts";
-
-const year = new Date().getFullYear();
---
-
-<footer>
-  <div class="content">
-    <span>© 2026 {metadata.siteTitle}</span>
-    <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">
-      备案号：鄂ICP备2023000060号-2
-    </a>
-  </div>
-</footer>
-
-
-<style>
-  footer {
-    background: #22252b;
-    height: 70px;
-    overflow: hidden;
-    flex-shrink: 0;
-    box-shadow: var(--shadow);
-  }
-
-  .content {
-    max-width: var(--layout-width);
-    margin: 0 auto;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    height: 100%;
-    font-size: 14px;
-    justify-content: center;
-    gap: 12px;
-  }
-
-  :global(.dark) footer {
-    background: var(--background);
-    box-shadow: none;
-  }
-
-  :global(.dark) .content {
-    color: #ffffff;
-  }
-</style>
--- a/src/components/BaseHeader.astro
+++ b/src/components/BaseHeader.astro
@@ -1,113 +0,0 @@
---
-import {metadata} from "../consts";
-import ThemeIcon from './ThemeIcon.astro'
-import GitHubIcon from '@/assets/icon/github.svg?url'
---
-
-<header>
-  <nav class="main-nav">
-    <h1>
-      <a href="/">{metadata.siteTitle}</a>
-    </h1>
-
-    <div class="main-nav-right">
-      <ul class="menu">
-        <li class="menu-item"><a href="/">首页</a></li>
-        <li class="menu-item"><a href="/archive">归档</a></li>
-        <li class="menu-item"><a target="_blank" href="https://git.ua42.com">
-          <img class="github-icon" src={GitHubIcon} alt="GitHub"/>
-        </a></li>
-        <!--<li class="menu-item"><a href="/">关于</a></li>-->
-      </ul>
-
-      <ThemeIcon/>
-    </div>
-  </nav>
-</header>
-
-<style>
-  header {
-    height: 60px;
-    position: sticky;
-    top: 0;
-    z-index: 99999;
-    box-shadow: var(--shadow);
-    flex-shrink: 0;
-    background: #fff;
-  }
-
-  .main-nav {
-    max-width: var(--layout-width);
-    margin: 0 auto;
-    height: 100%;
-    padding: 0 32px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .main-nav-right {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  @media (max-width: 768px) {
-    .main-nav {
-      padding: 16px;
-    }
-  }
-
-  .main-nav h1 {
-    user-select: none;
-    cursor: pointer;
-    font-size: 24px;
-    color: #000000;
-  }
-
-  .main-nav .menu {
-    list-style: none;
-    display: flex;
-    gap: 20px;
-    height: 100%;
-    align-items: center;
-    margin-right: 12px;
-  }
-
-  .menu-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .github-icon {
-    width: 18px;
-    height: 18px;
-    display: block;
-  }
-
-  .main-nav .menu-item a {
-    text-decoration: none;
-  }
-
-  .main-nav .menu-item a:hover {
-    color: #64748b;
-  }
-
-  :global(.dark) header {
-    background: var(--background);
-    box-shadow: none;
-  }
-
-  :global(.dark) .main-nav h1 {
-    color: #ffffff;
-  }
-
-  :global(.dark) .main-nav .menu-item a:hover {
-    color: rgba(255, 255, 255, .8);
-  }
-
-  :global(.dark) .github-icon {
-    filter: invert(1);
-  }
-</style>
--- a/src/components/IndexPage.astro
+++ b/src/components/IndexPage.astro
@@ -0,0 +1,40 @@
+---
+import PostList from "@/components/Post/List.astro";
+import Pagination from "@/components/Post/Pagination.astro";
+import type {Post} from "@/types";
+
+interface Props {
+  posts: Post[]
+  page: number
+  totalPage: number
+}
+
+const {posts, page, totalPage} = Astro.props
+---
+<main>
+  <div class="intro">
+    <p>did you stand too close to the fire?<br>
+      like a liar looking for forgiveness from a stone.</p>
+  </div>
+
+  <PostList posts={posts}/>
+  <Pagination page={page} totalPage={totalPage}/>
+</main>
+
+
+<style>
+  .intro {
+    border-bottom: var(--border-secondary);
+    line-height: 2;
+    font-size: 15px;
+    color: var(--text-secondary);
+    padding-bottom: 32px;
+    margin-bottom: 12px;
+  }
+
+  @media (max-width: 640px) {
+    .intro{
+      padding-bottom: 24px;
+    }
+  }
+</style>
--- a/src/components/IndexSidebar.astro
+++ b/src/components/IndexSidebar.astro
@@ -1,152 +0,0 @@
---
-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
@@ -1,46 +0,0 @@
---
-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
@@ -52,7 +52,6 @@ const {
 .placeholder {
  position: absolute;
  inset: 0;
-  background: #f3f4f6;
  background-image: linear-gradient(
    90deg,
    #f3f4f6 0%,
--- a/src/components/Post/Item.astro
+++ b/src/components/Post/Item.astro
@@ -1,185 +0,0 @@
---
-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
@@ -1,37 +1,83 @@
 ---
-import type {Post} from "@/types/post";
-import PostItem from '@/components/Post/Item.astro'
+import type {Post} from "@/types";
+import {formatDatetime} from '@/lib/format.ts'

 interface Props {
  posts: Post[]
 }
-
 const {posts} = Astro.props
 ---

-<section class="section">
-  <div class="post-list">
-    {posts.map(post => (
-      <PostItem post={post}/>
-    ))}
-  </div>
-</section>
+<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>
-  .section {
-    flex: 1;
-    height: 100%;
+  .posts {
+
  }

-  .post-list {
+  .post {
    display: flex;
-    flex-direction: column;
+    align-items: baseline;
    gap: 20px;
+    padding: 26px 0;
+    border-bottom: var(--border-secondary);
  }

-  @media (max-width: 860px){
-    .post-list{
-      gap: 12px;
+  .post .d {
+    font-size: 14px;
+    color: var(--text-meta);
+    min-width: 80px;
+    letter-spacing: 1px;
+  }
+
+  .post h2 {
+    font-size: 16px;
+    font-weight: normal;
+    flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .post h2 a {
+    color: var(--text-primary);
+    text-decoration: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .post h2 a:hover {
+    color: var(--text-title-hover);
+    text-decoration: underline;
+    text-underline-offset: 6px;
+  }
+
+  .post .arrow {
+    color: #d0d0d0;
+    font-size: 14px;
+    transition: transform 0.2s, color 0.2s;
+  }
+
+  .post:hover .arrow {
+    color: #334155;
+  }
+
+  @media (max-width: 640px) {
+    .post .d {
+      min-width: 64px;
+    }
+
+    .post h2 {
+      font-size: 15px;
    }
  }
 </style>
--- a/src/components/Post/Pagination.astro
+++ b/src/components/Post/Pagination.astro
@@ -10,58 +10,40 @@ 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>}
+  {page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页</a> :
+    <span class="link disabled">下一页</span>}
 </nav>}

 <style>
  /* ========== 分页 ========== */
  .pagination {
    width: 100%;
-    text-align: center;
+    text-align: right;
    white-space: nowrap;
-    overflow-x: auto;
+    margin-top: 32px;
+    font-size: 13px;
  }

  .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;
+    display: inline-block;
+    margin: 0 12px;
+    line-height: 1;
    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;
+  .current{
+    color: var(--text-primary);
+    font-weight: bold;
  }

  .link.disabled {
-    color: var(--text-secondary);
-    background: var(--card-bg);
-    border-color: var(--border);
+    color: var(--text-disabled);
    cursor: not-allowed;
  }
 </style>
--- a/src/components/ThemeIcon.astro
+++ b/src/components/ThemeIcon.astro
@@ -1,7 +1,7 @@
 ---
 ---
 <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">
+  <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"
@@ -19,6 +19,7 @@
  .theme-toggle {
    display: flex;
    align-items: center;
+    cursor: pointer;
  }

  .sun {
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -1,5 +1,7 @@
-export const metadata = {
+export const siteConfig = {
  site: "https://ua42.com",
  siteTitle: "Uroboros",
-  postPageSize: 6
+  postPageSize: 7,
+  description: "一个人的自留地 ，不欢迎我，也不欢迎你。",
+  git: "https://git.ua42.com"
 }
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,42 +1,69 @@
 ---
 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";
-import BackTop from "@/components/BackTop.astro";
-
-import { metadata } from "@/consts.ts";
-const { siteTitle } = metadata;
+const {siteTitle} = siteConfig;

 interface Props {
  title?: string;
  description?: string;
 }

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

 <!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} />
-    <meta name="description" content={description} />
-    <meta name="theme-color" content="#ffffff" />
-    <title>{pageTitle}</title>
-  </head>
-  <body>
-    <BaseHeader />
-    <main class="main">
-      <slot />
-    </main>
-    <BaseFooter />
-    <BackTop />
-  </body>
+<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}/>
+  <meta name="description" content={description}/>
+  <meta name="theme-color" content="#ffffff"/>
+  <title>{pageTitle}</title>
+</head>
+<body>
+<div class="container">
+  <PageHeader/>
+  <main>
+    <slot></slot>
+  </main>
+  <PageFooter />
+</div>
+</body>
 </html>
+
+<style>
+  body {
+    background: var(--background);
+  }
+
+  .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;
+    padding: 24px 0;
+  }
+
+  @media (max-width: 640px) {
+    .container {
+      padding: 16px;
+    }
+  }
+</style>
--- a/src/layouts/PageFooter.astro
+++ b/src/layouts/PageFooter.astro
@@ -0,0 +1,26 @@
+<footer>
+  <div>© 2026 Uroboros</div>
+  <a href="https://beian.miit.gov.cn" target="_blank">备案号：鄂ICP备2023000060号-2</a>
+</footer>
+
+<style>
+  footer {
+    flex-shrink: 0;
+    min-height: 0;
+    height: 84px;
+    padding-bottom: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 13px;
+    gap: 12px;
+    color: var(--text-secondary);
+  }
+
+  @media (max-width: 640px) {
+    footer {
+      height: 64px;
+      padding-bottom: 0;
+    }
+  }
+</style>
--- a/src/layouts/PageHeader.astro
+++ b/src/layouts/PageHeader.astro
@@ -0,0 +1,56 @@
+---
+import {siteConfig} from "@/consts.ts";
+import ThemeIcon from "@/components/ThemeIcon.astro";
+
+const {siteTitle,git} = siteConfig;
+---
+
+<header>
+  <a href="/"><h1>{siteTitle}</h1></a>
+  <nav>
+    <a href="/archive">归档</a>
+    <a target="_blank" href={git}>git</a>
+
+    <ThemeIcon />
+  </nav>
+</header>
+
+<style>
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: var(--border-primary);
+    margin-top: 32px;
+    padding-bottom: 24px;
+  }
+
+  nav {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    font-size: 14px;
+    color: var(--text-secondary);
+  }
+
+  nav a:hover {
+    color: var(--text-primary);
+  }
+
+  h1 {
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  @media (max-width: 640px) {
+    header {
+      margin-top: 12px;
+      margin-bottom: 0;
+    }
+
+    h1 {
+      font-size: 20px;
+      font-weight: normal;
+    }
+  }
+</style>
--- a/src/lib/highlight.js
+++ b/src/lib/highlight.js
@@ -1,85 +0,0 @@
-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/processHtml.ts
+++ b/src/lib/processHtml.ts
@@ -0,0 +1,115 @@
+import {JSDOM} from 'jsdom'
+import {createHighlighter} from 'shiki'
+
+const DEFAULT_THEME = 'github-dark-dimmed'
+
+const highlighter = await createHighlighter({
+  themes: [DEFAULT_THEME],
+  langs: []
+})
+
+const SUPPORTED_LANGS = [
+  "bash", "json", "yaml", "xml", "html", "css", "scss",
+  "javascript", "typescript", "jsx", "tsx", "vue",
+  "markdown", "sql", "python", "go", "dockerfile", "nginx"
+] as const
+
+const loadedLangs = new Set<string>(['text'])
+
+type SupportedLang = typeof SUPPORTED_LANGS[number]
+
+const supportedSet = new Set<string>(SUPPORTED_LANGS)
+
+const ensureLangLoaded = async (lang: string): Promise<string> => {
+  if (lang === 'text' || loadedLangs.has(lang)) return lang
+  if (!supportedSet.has(lang)) return 'text'
+  try {
+    await highlighter.loadLanguage(lang as SupportedLang)
+    loadedLangs.add(lang)
+    return lang
+  } catch {
+    return 'text'
+  }
+}
+
+export const processHtmlWithJsdom = async (rawHtml: string) => {
+  const dom = new JSDOM(rawHtml)
+  const document = dom.window.document
+
+  const codeBlocks = document.querySelectorAll('pre code')
+
+  for (const codeBlock of codeBlocks) {
+    const preEl = codeBlock.parentElement
+    if (!preEl || preEl.tagName !== 'PRE') continue
+
+    const codeContent = codeBlock.textContent || ''
+    let lang = 'text'
+    for (const cls of codeBlock.classList) {
+      if (cls.startsWith('language-')) {
+        lang = cls.slice('language-'.length)
+        break
+      }
+    }
+
+    lang = await ensureLangLoaded(lang)   // ← 唯一改动点：按需加载
+
+    const highlighted = highlighter.codeToHtml(codeContent, {
+      lang,
+      theme: DEFAULT_THEME,
+    })
+
+    // 替换 DOM
+    const wrapper = document.createElement('div')
+    wrapper.innerHTML = highlighted.trim()
+
+    const newNode = wrapper.firstElementChild
+    if (newNode && preEl.parentNode) {
+      const container = document.createElement('div')
+      container.className = 'code-block'
+
+      const header = document.createElement('div')
+      header.className = 'code-header'
+
+      const headerLeft = document.createElement('div')
+      headerLeft.className = 'code-header-left'
+
+      const headerRight = document.createElement('div')
+      headerRight.className = 'code-header-right'
+
+      // 装饰点
+      const actions = document.createElement('div')
+      actions.className = 'code-actions'
+
+      const close = document.createElement('span')
+      close.className = 'dot close'
+
+      const minimize = document.createElement('span')
+      minimize.className = 'dot minimize'
+
+      const maximize = document.createElement('span')
+      maximize.className = 'dot maximize'
+
+      actions.append(close, minimize, maximize)
+
+      // 显示语言
+      const langDisplay = document.createElement('div')
+      langDisplay.className = 'code-language'
+      langDisplay.textContent = lang ? lang : 'text'
+
+      const copyBtn = document.createElement('div')
+      copyBtn.className = 'code-copy-btn'
+      copyBtn.textContent = '复制代码'
+
+      headerLeft.append(actions, langDisplay)
+      headerRight.append(copyBtn)
+
+      header.append(headerLeft, headerRight)
+
+      container.append(header, newNode)
+
+      preEl.parentNode.replaceChild(container, preEl)
+    }
+  }
+
+  return document.body.innerHTML
+}
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -2,28 +2,17 @@
 import Layout from "@/layouts/Layout.astro";
 ---

-<Layout title="404">
+<Layout title="404" description="这里什么也没有">
  <div class="not-found">
-    <h1>404 Not Found</h1>
-    <a class="back-home" href="/">返回首页</a>
+    <h1>404 NOT FOUND</h1>
  </div>
 </Layout>

 <style>
-  .not-found {
-    flex: 1;
-    width: 100%;
+  .not-found{
+    height: 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/archive.astro
+++ b/src/pages/archive.astro
@@ -8,191 +8,128 @@ 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">
+
+<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 href={`/post/${post.slug}`}>{post.title}</a>
-                        <span class="post-cat">{post.category_name}</span>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              ))}
-            </div>
+                      <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>
+      ))
+    }
  </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;
+    gap: 12px;
+    color: var(--text-primary);
+    font-size: 28px;
    margin-bottom: 24px;
  }

-  /* 时间轴竖线 */
-  .month-group::before {
-    content: "";
-    position: absolute;
-    left: 7px;
-    top: 8px;
-    bottom: 0;
-    width: 2px;
-    background: var(--border);
+  .year-badge {
+
+  }
+
+  .year-count {
+    font-size: 14px;
+    font-weight: normal;
+  }
+
+  .month-group {
+    padding: 12px 0;
  }

  .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);
+    color: var(--text-primary);
+    font-weight: normal;
  }

  .post-list {
-    list-style: none;
-    background: var(--card-bg);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow);
-    overflow: hidden;
+    padding: 12px 0;
+    display: flex;
+    flex-direction: column;
  }

  .post-item {
    display: flex;
-    align-items: baseline;
-    gap: 14px;
-    padding: 18px 20px;
-    border-bottom: 1px solid var(--border);
-    transition: background 0.2s;
+    gap: 24px;
+    font-size: 14px;
+    border-bottom: var(--border-secondary);
+    padding: 18px 0;
+    align-items: center;
  }

  .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;
+    color: var(--text-meta);
  }

-  .post-item a {
+  .post-title {
    flex: 1;
-    min-width: 0;
-    font-size: 15px;
    overflow: hidden;
-    text-overflow: ellipsis;
    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--text-primary);
+    font-size: 16px;
+    text-underline-offset: 4px;
+    line-height: 24px;
  }

-  .post-item a:hover {
-    color: var(--primary);
-  }
-
-  :global(.dark) .post-item a:hover {
-    color: inherit;
+  .post-title:hover{
+    color: var(--text-title-hover);
+    text-decoration: underline;
  }

  .post-cat {
-    flex-shrink: 0;
-    font-size: 12px;
-    color: var(--primary);
-    background: var(--tag-bg);
-    padding: 2px 10px;
-    border-radius: 999px;
+    color: var(--text-meta);
+    font-size: 14px;
  }
+
+  @media (max-width: 640px) {
+    .year-title{
+      font-size: 24px;
+    }
+
+    .post-title{
+      font-size: 15px;
+    }
+  }
+
 </style>
--- a/src/pages/embed/gitea.astro
+++ b/src/pages/embed/gitea.astro
@@ -1,6 +1,5 @@
 ---
 const noindex = true;
-import {metadata} from '@/consts.ts'
 ---

 <!doctype html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,25 +1,23 @@
 ---
 import Layout from "@/layouts/Layout.astro";
-import IndexView from "@/components/IndexView.astro";
-import type { Post } from "@/types/post";
-import { createHttp } from "@/lib/request";
-import { metadata } from "@/consts.ts";
+import {siteConfig} from "@/consts.ts";
+import {createHttp} from "@/lib/request.ts";
+import type {Post} from "@/types";
+import IndexPage from "@/components/IndexPage.astro";
+
+const {postPageSize, description} = siteConfig;

 const http = createHttp(Astro.request.headers);

-const { list, total } = await http.get<ApiPageResponse<Post>>("posts", {
+const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
  searchParams: {
    page: 1,
-    page_size: metadata.postPageSize,
+    page_size: postPageSize,
  },
 });
-const totalPage = Math.ceil(total / metadata.postPageSize);
+const totalPage = Math.ceil(total / postPageSize);
 ---

-<Layout description="天若有情天亦老，人间正道是沧桑。" title="博客首页">
-  <IndexView
-    posts={list}
-    page={1}
-    totalPage={totalPage}
-  />
+<Layout title="博客首页" description={description}>
+  <IndexPage page={1} totalPage={totalPage} posts={list}/>
 </Layout>
--- a/src/pages/page/[...page].astro
+++ b/src/pages/page/[...page].astro
@@ -1,36 +1,34 @@
 ---
 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";
+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 { page } = Astro.params;
+const pageInt = Number(page);

-if (isNaN(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", {
+const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
  searchParams: {
-    page,
-    page_size: metadata.postPageSize,
+    page: pageInt,
+    page_size: postPageSize,
  },
 });
+const totalPage = Math.ceil(total / postPageSize);

-const totalPage = Math.ceil(total / metadata.postPageSize);
-
-if (totalPage < Number(page)) {
+if (totalPage < pageInt) {
  return Astro.redirect("/404");
 }
 ---

-<Layout description="天若有情天亦老，人间正道是沧桑。" title="博客首页">
-  <IndexView
-    posts={list}
-    page={Number(page)}
-    totalPage={totalPage}
-  />
+<Layout title="博客首页" description={description}>
+  <IndexPage page={pageInt} totalPage={totalPage} posts={list}/>
 </Layout>
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -3,159 +3,150 @@ 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";
+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;
-
-let data: Post;
+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 highlightHtmlWithJsdom(data.content);
-const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
+
+const content = await processHtmlWithJsdom(data.content);
+const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
 ---

 <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>
+  <article>
+    <div class="meta">
+      <div class="meta-left">
+        <span>{data.category_name} · {data.category_code.toUpperCase()}</span>
+        <span>{published_at}</span>
      </div>

-      <div class="markdown-body" data-color-mode="dark" set:html={content} />
+      <div class="meta-view-count">{data.view_count} 次阅读</div>
    </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>
-  .post {
-    background: #fff;
-    border-radius: 12px;
-    overflow: auto;
-    padding: 24px;
-    box-shadow: var(--shadow);
+  article {
+    width: 100%;
+    margin: 0 auto;
+    flex: 1;
+    flex-shrink: 0;
  }

-  .post-title {
-    margin-bottom: 16px;
-    font-size: 32px;
-  }
-
-  .post-meta {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+  .cover {
+    width: 100%;
    margin-bottom: 20px;
  }

-  .published-at {
+  .meta {
+    color: var(--text-meta);
+    font-size: 13px;
    display: flex;
+    justify-content: space-between;
    align-items: center;
-    gap: 8px;
-    color: #6b7280;
-    font-size: 14px;
+    margin-bottom: 20px;
  }

-  .published-at svg {
-    width: 18px;
-    height: 18px;
-  }
-
-  :global(.markdown-body img) {
-    object-fit: contain;
-    height: auto !important;
-  }
-
-  .post-view {
+  .meta-left {
    display: flex;
-    align-items: center;
-    gap: 4px;
-    color: #6b7280;
-    padding-right: 12px;
+    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;
  }

-  .post-view svg {
-    width: 20px;
-    height: 20px;
-    fill: currentColor; /* 让填充跟随 color */
-    stroke: currentColor; /* 让描边也跟随 color */
+  .divider {
+    border-bottom: var(--border-secondary);
  }

-  @media (max-width: 768px) {
-    .post-title {
-      font-size: 20px;
+  .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;
    }
-
-    .post {
-      padding: 12px;
-    }
-  }
-
-  :global(.dark) .post {
-    background: var(--card-bg);
-    box-shadow: none;
-    border: none;
  }
 </style>

 <script>
  import PhotoSwipeLightbox from "photoswipe/lightbox";
+  import ClipboardJS from "clipboard";

  const init = async () => {
-    const post = document.querySelector(".post")!;
-    const images = Array.from(post.querySelectorAll("img"));
+    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) {
@@ -163,8 +154,8 @@ const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
      }

      return new Promise<void>((resolve) => {
-        img.addEventListener("load", () => resolve(), { once: true });
-        img.addEventListener("error", () => resolve(), { once: true });
+        img.addEventListener("load", () => resolve(), {once: true});
+        img.addEventListener("error", () => resolve(), {once: true});
      });
    };

@@ -190,7 +181,7 @@ const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
    );

    const lightbox = new PhotoSwipeLightbox({
-      gallery: ".post",
+      gallery: ".markdown-body",
      children: "a[data-pswp-width]",
      pswpModule: () => import("photoswipe"),

@@ -209,4 +200,38 @@ const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
  };

  init();
+
+
+  const copyTimers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();
+
+  // 代码块复制功能
+  const clipboard = new ClipboardJS(".code-copy-btn", {
+    text: (el) => {
+      const sibling = el.closest(".code-header")?.nextElementSibling;
+      return sibling?.textContent.trim() || "";
+    }
+  });
+
+  clipboard.on("success", (e) => {
+    const btn = e.trigger as HTMLElement;
+
+    // 清理当前按钮之前的定时器
+    const oldTimer = copyTimers.get(btn);
+    if (oldTimer) {
+      clearTimeout(oldTimer);
+    }
+
+    const originalText = btn.textContent || "";
+
+    btn.textContent = "✓ 代码已复制";
+
+    const timer = setTimeout(() => {
+      btn.textContent = originalText;
+      copyTimers.delete(btn);
+    }, 2000);
+
+    copyTimers.set(btn, timer);
+
+    e.clearSelection();
+  });
 </script>
--- a/src/pages/search.astro
+++ b/src/pages/search.astro
@@ -1,214 +0,0 @@
---
-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
@@ -1,12 +1,11 @@
 import type {APIRoute} from 'astro';
-import {metadata} from "@/consts";
+import {siteConfig} from "@/consts";

-const site = metadata.site
+const site = siteConfig.site

 const staticUrls = [
  '',
-  '/archive',
-  '/search',
+  '/archive'
 ];

 export const GET: APIRoute = async () => {
--- a/src/pages/sitemap-posts.xml.ts
+++ b/src/pages/sitemap-posts.xml.ts
@@ -1,10 +1,10 @@
 import type {APIRoute} from 'astro';
-import {metadata} from "@/consts";
+import {siteConfig} from "@/consts";
 import {createHttp} from "@/lib/request.ts";
 import type {PostForSitemap} from "@/types";
 import dayjs from "dayjs";

-const site = metadata.site
+const site =siteConfig.site

 export const GET: APIRoute = async (context) => {
  const http = createHttp(context.request.headers);
--- a/src/pages/sitemap.xml.ts
+++ b/src/pages/sitemap.xml.ts
@@ -1,7 +1,7 @@
 import type {APIRoute} from 'astro';
-import {metadata} from "@/consts";
+import {siteConfig} from "@/consts";

-const site = metadata.site
+const site = siteConfig.site

 export const GET: APIRoute = () => {
  const xml = `<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
--- a/src/styles/css-reset.css
+++ b/src/styles/css-reset.css
@@ -1,10 +1,13 @@
 * {
  margin: 0;
  padding: 0;
-  box-sizing: border-box;
 }

 a {
    color: inherit;
    text-decoration: none;
 }
+
+ul,li{
+  list-style: none;
+}
--- a/src/styles/github-markdown-reset.css
+++ b/src/styles/github-markdown-reset.css
@@ -1,5 +1,6 @@
-.markdown-body pre code{
-    font-size: 1.1em;
+.markdown-body pre code {
+  font-size: 14px;
+  line-height: 1.6;
 }

 .markdown-body h1,
@@ -8,11 +9,76 @@
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
-    border-bottom: none ;
+  border-bottom: none;
 }

@media (max-width: 768px) {
-  .markdown-body pre code{
+  .markdown-body pre code {
    font-size: inherit;
  }
 }
+
+.markdown-body .highlight pre,
+.markdown-body pre {
+  border-radius: 0 0 8px 8px;
+}
+
+.markdown-body img {
+  margin: 12px 0 12px;
+}
+
+.code-block {
+}
+
+.code-header {
+  height: 36px;
+  background: var(--code-block-header-bg);
+  display: flex;
+  justify-content: space-between;
+  color: var(--text-primary);
+  align-items: center;
+  padding: 0 12px;
+  font-size: 14px;
+  border-radius: 8px 8px 0 0;
+}
+
+.code-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.code-actions {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.code-actions .dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+}
+
+.code-actions .close {
+  background: #ff5f57;
+}
+
+.code-actions .minimize {
+  background: #febc2e;
+}
+
+.code-actions .maximize {
+  background: #28c840;
+}
+
+.code-copy-btn {
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.code-copy-btn:hover {
+  color: var(--code-block-copy-btn-hover-color);
+}
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,63 +2,64 @@
@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;
+  --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;
-  --card-bg: #161b22;
-  --text-color: #ffffff;
-  --text-secondary: #e5e7eb;
-  --border: #e5e7eb;
-  --primary: #1e293b;
-  --tag-bg: #27272a;
-  --tag-text: #f3f4f6;
-  --tag-hover-bg: #334155;
+  --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 {
-  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;
+  height: 100%;
+  min-height: 100%;
+  font-family: var(--font-family), serif;
+  color: var(--text-primary);
 }

-@media (max-width: 768px) {
-  .page-content {
-    padding: 16px;
-  }
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+/* 滚动条轨道 */
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+  background: rgba(139,139,139,.5);
+  border-radius: 999px;
+}
+
+/* 鼠标悬停 */
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(139,139,139,.7);
 }
--- a/src/types/client.ts
+++ b/src/types/client.ts
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,8 +13,6 @@
      "@/*": [
        "src/*"
      ]
-    },
-    "jsx": "preserve",
-    "jsxImportSource": "solid-js"
+    }
  }
 }
Author	SHA1	Message	Date
xy	61ec9071e5	style: 博客标题在列表中超长的问题	2026-08-19 00:20:52 +08:00
xy	1ee413d11b	style: 微调color	2026-08-17 22:32:07 +08:00
xy	ebb570f0e1	style: 调整滚动条样式	2026-08-16 15:57:32 +08:00
xy	21cb0610e1	style: 调整滚动条样式	2026-08-16 15:55:07 +08:00
xy	3867a7f6cc	style: 代码块主题调整	2026-08-16 15:49:40 +08:00
xy	ce2185a4c0	style: theme icon cursor	2026-08-16 15:41:52 +08:00
xy	abe1790ac1	feat: 暗色主题、主题切换按钮	2026-08-16 15:40:26 +08:00
xy	be2e6f1ae0	feat: 删除无用依赖，shiki lang使用懒加载方式加载语言	2026-08-16 13:29:58 +08:00
xy	070a63133d	feat: 调整404文案	2026-08-16 11:15:04 +08:00
xy	7eb0ae75fb	feat: 404界面、微调ui	2026-08-16 11:14:34 +08:00
xy	fef7f239c9	style: 微调移动端ui	2026-08-16 00:11:16 +08:00
xy	6385b36f6d	style: 调整cover样式	2026-08-15 23:40:31 +08:00
xy	76247eee92	feat: 显示封面	2026-08-15 23:26:08 +08:00
xy	87f2732028	style: 调整ui	2026-08-15 22:37:05 +08:00
xy	65fc12dab6	style: 优化移动端ui	2026-08-15 22:35:50 +08:00
xy	7638a2ae0e	style: 优化移动端ui	2026-08-15 22:33:09 +08:00
xy	4a224b58f4	feat: 归档页面	2026-08-15 22:23:32 +08:00
xy	390437b4bb	style: 优化移动端ui	2026-08-15 21:48:37 +08:00
xy	80d461f0e2	style: 优化移动端ui	2026-08-15 21:45:31 +08:00
xy	560f6f29ea	refactor: v2	2026-08-15 20:55:56 +08:00
				`@@ -1 +0,0 @@`
				<?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>