添加一个简陋的用户页

添加 IGBT :: Home 友链
客户端和服务端分离 api 目标，少点走公网
2026-04-18 10:12:44 +08:00 · 2026-04-12 18:26:04 +08:00 · 2026-04-09 16:12:39 +08:00 · 2026-04-09 15:57:28 +08:00 · 2026-04-09 15:46:54 +08:00 · 2026-04-09 15:12:48 +08:00
36 changed files with 1721 additions and 386 deletions
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -0,0 +1 @@
+npx lint-staged
--- a/README.md
+++ b/README.md
@ -8,4 +8,3 @@
 npm i
 npm run dev
 ```
-
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -1,5 +1,5 @@
 // @ts-check
-import { defineConfig } from 'astro/config'
+import { defineConfig, envField } from 'astro/config'

 import node from '@astrojs/node'
 import svelte from '@astrojs/svelte'
@ -12,6 +12,7 @@ const ICON2_URL =

 // https://astro.build/config
 export default defineConfig({
+  output: 'server',
  adapter: node({
    mode: 'standalone',
  }),
@ -21,4 +22,27 @@ export default defineConfig({
  redirects: {
    '/assets/icon-qq-BThBBmjV.jpg': ICON2_URL,
  },
+  vite: {
+    build: {
+      rollupOptions: {
+        external: ['node:crypto', 'buffer', 'keyv'],
+      },
+    },
+  },
+
+  // 环境变量管理
+  env: {
+    schema: {
+      LEGACY_BACKEND_URL_SSR: envField.string({
+        context: 'server',
+        access: 'secret',
+        default: 'https://legacy.passthem.top/api',
+      }),
+      REDIS_URL: envField.string({
+        context: 'server',
+        access: 'secret',
+        default: '',
+      }),
+    },
+  },
 })
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -0,0 +1,43 @@
+import eslintPluginAstro from 'eslint-plugin-astro'
+import tseslint from '@typescript-eslint/eslint-plugin'
+import tsparser from '@typescript-eslint/parser'
+import svelteParser from 'svelte-eslint-parser'
+
+export default [
+  {
+    ignores: ['dist/**', 'node_modules/**', '.astro/**'],
+    plugins: {
+      astro: eslintPluginAstro,
+      '@typescript-eslint': tseslint,
+    },
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      ...eslintPluginAstro.configs.recommended.rules,
+      ...tseslint.configs.recommended.rules,
+      'no-console': 'warn',
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': 'warn',
+    },
+  },
+  {
+    files: ['**/*.svelte'],
+    languageOptions: {
+      parser: svelteParser,
+      parserOptions: {
+        parser: tsparser,
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+    },
+  },
+]
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,7 +9,20 @@
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx,svelte,vue}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{astro,css,md,mdx,json}": [
+      "prettier --write"
+    ]
  },
  "dependencies": {
    "@astrojs/node": "^10.0.4",
@ -19,6 +32,7 @@
    "@astrojs/vue": "^6.0.1",
    "@iconify-json/material-symbols": "^1.2.65",
    "@iconify-json/mdi": "^1.2.3",
+    "@keyv/redis": "^5.1.6",
    "@markdoc/markdoc": "^0.5.7",
    "@traptitech/markdown-it-katex": "^3.6.0",
    "@types/react": "^19.2.14",
@ -29,6 +43,7 @@
    "astro-icon": "^1.1.5",
    "axios": "^1.13.6",
    "katex": "^0.16.43",
+    "keyv": "^5.6.0",
    "markdown-it": "^14.1.1",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
@ -39,10 +54,16 @@
  },
  "devDependencies": {
    "@types/markdown-it": "^14.1.2",
+    "@typescript-eslint/eslint-plugin": "^8.58.0",
    "@typescript-eslint/parser": "^8.57.2",
    "eslint": "^10.1.0",
    "eslint-plugin-astro": "^1.6.0",
+    "eslint-plugin-vue": "^10.8.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
    "prettier": "^3.8.1",
-    "prettier-plugin-astro": "^0.14.1"
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-svelte": "^3.5.1",
+    "svelte-eslint-parser": "^1.6.0"
  }
 }
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@ -9,7 +9,7 @@ const config = {
  tabWidth: 2,
  semi: false,
  singleQuote: true,
-  plugins: ['prettier-plugin-astro'],
+  plugins: ['prettier-plugin-astro', 'prettier-plugin-svelte'],
  overrides: [
    {
      files: '*.astro',
@ -17,6 +17,12 @@ const config = {
        parser: 'astro',
      },
    },
+    {
+      files: '*.css',
+      options: {
+        tabWidth: 4,
+      },
+    },
  ],
 }

--- a/scripts/generate_contact.py
+++ b/scripts/generate_contact.py
@ -0,0 +1,47 @@
+import base64
+import json
+from pathlib import Path
+
+raw_contact: list[dict[str, str]] = [
+    {
+        "platform": "Github",
+        "href": "https://github.com/passthem-desu",
+        "name": "passthem-desu",
+    },
+    {
+        "platform": "Wakatime",
+        "href": "https://wakatime.com/@passthem",
+        "name": "@passthem",
+    },
+    {
+        "platform": "Youtube",
+        "href": "https://www.youtube.com/@Passthem183",
+        "name": "@Passthem183",
+    },
+    {
+        "platform": "OtoSite",
+        "href": "https://otomad.site/@passthem",
+        "name": "@passthem",
+    },
+    {
+        "platform": "Email",
+        "href": "mailto:passthem183@gmail.com",
+        "name": "passthem183@gmail.com",
+    },
+    {
+        "platform": "Bilibili",
+        "href": "https://space.bilibili.com/92852604",
+        "name": "passthem",
+    },
+]
+
+
+def hack(raw: str) -> str:
+    return base64.b64encode(raw[::-1].encode()).decode()
+
+
+hacked_contact = [{k: hack(v) for k, v in c.items()} for c in raw_contact]
+(Path(__file__).parent / "../src/lib/data").mkdir(exist_ok=True)
+_ = (Path(__file__).parent / "../src/lib/data/contact.json").write_text(
+    json.dumps(hacked_contact)
+)
--- a/src/assets/fonts.css
+++ b/src/assets/fonts.css
@ -1,6 +1,7 @@
@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Bold.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Bold.woff2')
+        format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
@ -8,7 +9,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-BoldItalic.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-BoldItalic.woff2')
+        format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
@ -16,7 +18,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraBold.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraBold.woff2')
+        format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
@ -24,7 +27,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraBoldItalic.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraBoldItalic.woff2')
+        format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
@ -32,7 +36,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraLight.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraLight.woff2')
+        format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
@ -40,7 +45,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraLightItalic.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraLightItalic.woff2')
+        format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
@ -48,7 +54,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Italic.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Italic.woff2')
+        format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
@ -56,7 +63,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Light.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Light.woff2')
+        format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
@ -64,7 +72,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-LightItalic.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-LightItalic.woff2')
+        format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
@ -72,7 +81,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Medium.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Medium.woff2')
+        format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
@ -80,7 +90,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-MediumItalic.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-MediumItalic.woff2')
+        format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
@ -88,7 +99,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Regular.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Regular.woff2')
+        format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
@ -96,7 +108,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-SemiBold.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-SemiBold.woff2')
+        format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
@ -104,7 +117,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-SemiBoldItalic.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-SemiBoldItalic.woff2')
+        format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
@ -112,7 +126,8 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Thin.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Thin.woff2')
+        format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
@ -120,19 +135,23 @@

@font-face {
    font-family: 'Maple Mono';
-    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ThinItalic.woff2') format('woff2');
+    src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ThinItalic.woff2')
+        format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
 }

@font-face {
-    font-family: "ZLabsRoundPix 16px M CN";
-    src: url('https://cdn.passthem.top/fonts/ZLabsRoundPix_16px_M_CN.ttf.woff2') format('woff2');
+    font-family: 'ZLabsRoundPix 16px M CN';
+    src: url('https://cdn.passthem.top/fonts/ZLabsRoundPix_16px_M_CN.ttf.woff2')
+        format('woff2');
    font-display: swap;
 }

 :root {
    --font-mono: 'Maple Mono NF CN', 'Maple Mono', monospace, var(--font-sans);
-    --font-sans: 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif;
+    --font-sans:
+        'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC',
+        sans-serif;
 }
--- a/src/assets/mainpage_avatars/igbt.png
+++ b/src/assets/mainpage_avatars/igbt.png
--- a/src/assets/prose.css
+++ b/src/assets/prose.css
@ -1,8 +1,16 @@
 .prose {
-    line-height: 1.6em;
+    & p,
+    & h1,
+    & h2,
+    & h3,
+    & h4,
+    & h5,
+    & h6 {
+        line-height: 1.6em;
+    }

    & p {
-        margin-block: .6em;
+        margin-block: 0.6em;
    }

    & h1,
@ -44,16 +52,16 @@
        background-color: var(--color-bg-1);
        color: var(--color-fg-1);

-        border-radius: .5rem;
-        padding-block: .5rem;
+        border-radius: 0.5rem;
+        padding-block: 0.5rem;
        padding-inline: 1.25rem;
        margin-block: 1.25rem;

-        border-inline-start: solid .25rem;
+        border-inline-start: solid 0.25rem;
    }

    & pre.shiki {
-        border-radius: .5rem;
+        border-radius: 0.5rem;
        padding-block: 1rem;
        padding-inline: 1.25rem;
        margin-block: 1.25rem;
@ -69,7 +77,18 @@
    }

    & img {
-        border-radius: .5rem;
+        border-radius: 0.5rem;
        margin-block: 1.25rem;
    }
+
+    & p > code {
+        background-color: var(--color-bg-1);
+        padding: 0.25rem;
+        border-radius: 0.25rem;
+    }
+
+    & pre,
+    & code {
+        font-family: var(--font-mono);
+    }
 }
--- a/src/assets/style.css
+++ b/src/assets/style.css
@ -47,7 +47,7 @@ body {
 /* == 配置默认字体 == */
 code {
    font-family: var(--font-mono);
-    font-size: .9rem;
+    font-size: 0.9rem;
 }

 /* == 支持 Shiki 的高亮 == */
--- a/src/components/BlogCard.astro
+++ b/src/components/BlogCard.astro
@ -16,8 +16,8 @@ interface Props {

 const { link, title, featureImage, author, createdAt, updatedAt } = Astro.props

-const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
-
+const formatDate = (date: Date) =>
+  `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
 ---

 <a class="card" href={link}>
@ -35,25 +35,38 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()
  }
  <div class="info">
    <h1 class="title">{title}</h1>
-    {author && <div class="author">
-      <Image
-        class="image"
-        src={author.avatar ?? ""}
-        alt=`用户 ${author.name} 的头像`
-        width={24}
-        height={24}
-        densities={[1.5, 2]}
-      />
-      <span class="content">{author.name}</span>
-    </div>}
-    {createdAt && <div class="iconinfo">
-      <Icon class="icon" name="material-symbols:calendar-add-on-rounded" />
-      <span class="content">{formatDate(createdAt)}</span>
-    </div>}
-    {updatedAt && (!createdAt || formatDate(createdAt) != formatDate(updatedAt)) && <div class="iconinfo">
-      <Icon class="icon" name="material-symbols:calendar-check-rounded" />
-      <span class="content">{formatDate(updatedAt)}</span>
-    </div>}
+    {
+      author && (
+        <div class="author">
+          <Image
+            class="image"
+            src={author.avatar ?? ''}
+            alt={`用户 ${author.name} 的头像`}
+            width={24}
+            height={24}
+            densities={[1.5, 2]}
+          />
+          <span class="content">{author.name}</span>
+        </div>
+      )
+    }
+    {
+      createdAt && (
+        <div class="iconinfo">
+          <Icon class="icon" name="material-symbols:calendar-add-on-rounded" />
+          <span class="content">{formatDate(createdAt)}</span>
+        </div>
+      )
+    }
+    {
+      updatedAt &&
+        (!createdAt || formatDate(createdAt) != formatDate(updatedAt)) && (
+          <div class="iconinfo">
+            <Icon class="icon" name="material-symbols:calendar-check-rounded" />
+            <span class="content">{formatDate(updatedAt)}</span>
+          </div>
+        )
+    }
  </div>
 </a>

@ -105,41 +118,46 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()

    & > .info {
      & > h1 {
-        margin-inline: 0.75rem;
+        margin-inline: 0.5rem;
        font-size: larger;
        font-weight: 600;
        margin-block-start: 0.25rem;
        margin-block-end: 0.75rem;
+
+        @media (width < 768px) {
+          margin-inline: 0.75rem;
+        }
      }

-      &>.author, &>.iconinfo {
+      & > .author,
+      & > .iconinfo {
        margin-inline: 0.5rem;
        display: flex;
        align-items: center;
-        gap: .5rem;
+        gap: 0.5rem;
        margin-block: 0.1rem;

-        &>.image {
+        & > .image {
          aspect-ratio: 1;
          object-fit: cover;
          width: var(--icon-size);
          border-radius: 50%;
        }

-        &>.icon {
+        & > .icon {
          width: var(--icon-size);
          height: var(--icon-size);
          padding: 2px;
-          opacity: .5;
+          opacity: 0.5;
        }

-        &>.content {
-          opacity: .5;
+        & > .content {
+          opacity: 0.5;
          font-size: 0.9rem;
        }
      }

-      &>.author {
+      & > .author {
        margin-block: 0.25rem;
      }
    }
--- a/src/components/MainpageContactMe.svelte
+++ b/src/components/MainpageContactMe.svelte
@ -0,0 +1,98 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import _data from '../lib/data/contact.json'
+
+  /**
+   * 为什么要一个独立的 Contact 组件呢...？这就不得不提到，现在可是有网络爬虫的
+   * 时代！我们得给我们的个人信息做反爬呀！
+   *
+   * 另见：https://spencermortensen.com/articles/email-obfuscation/
+   */
+
+  let data = $state<{ platform: string; name: string; href: string }[]>([])
+
+  function unhack(raw: string) {
+    return atob(raw).split('').reverse().join('')
+  }
+
+  onMount(() => {
+    data = _data
+  })
+</script>
+
+<table>
+  <tbody>
+    {#each data as item}
+      <tr>
+        <td>{unhack(item.platform)}</td>
+        <td><a href={unhack(item.href)}>{unhack(item.name)}</a></td>
+      </tr>
+    {/each}
+  </tbody>
+</table>
+
+<style>
+  table {
+    font-family: var(--font-mono);
+
+    & tr {
+      text-align: left;
+      display: grid;
+      grid-template-columns: 6em 16em;
+      gap: 1em;
+      line-height: 2em;
+
+      @media (max-width: 767px) {
+        grid-template-columns: 18em;
+        gap: 0;
+        line-height: 1.8em;
+        margin-block: 1em;
+      }
+
+      & td:nth-child(1) {
+        display: flex;
+        justify-content: space-between;
+
+        @media (max-width: 767px) {
+          justify-content: left;
+        }
+
+        &::after {
+          content: ':';
+        }
+      }
+
+      & td:nth-child(2) {
+        display: flex;
+        justify-content: space-between;
+
+        @media (max-width: 767px) {
+          justify-content: end;
+        }
+
+        &::before {
+          content: '[';
+        }
+
+        &::after {
+          content: ']';
+        }
+
+        &:hover,
+        &:has(a:focus) {
+          background-color: var(--color-fg-0);
+          color: var(--color-bg-0);
+        }
+
+        & > a {
+          text-align: center;
+          margin-inline: 1em;
+
+          &:focus {
+            outline: none;
+          }
+        }
+      }
+    }
+  }
+</style>
--- a/src/components/MarkdocRenderer.tsx
+++ b/src/components/MarkdocRenderer.tsx
@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import Markdoc, { type RenderableTreeNode } from '@markdoc/markdoc'
-import { toMarkdocTree } from '../lib/markdoc'
+import { renderMarkdocTree } from '../lib/markdoc'
 import { CodeBlock } from './markdoc/CodeBlock.tsx'

 export const MarkdocContent: React.FC<{
@ -11,7 +11,7 @@ export const MarkdocContent: React.FC<{

  useEffect(() => {
    let active = true
-    toMarkdocTree(content).then((result) => {
+    renderMarkdocTree(content).then((result) => {
      if (active) setTree(result)
    })
    return () => {
--- a/src/layout/FullLayoutV1.astro
+++ b/src/layout/FullLayoutV1.astro
@ -30,7 +30,7 @@ const { title = '小帕的小窝', withGap = false } = Astro.props
          <a href="/">小帕的小窝</a>
        </li>
        <li>
-          <a href="/blogs"><Icon name="mdi:invoice-text-outline" />文章</a>
+          <a href="/blog"><Icon name="mdi:invoice-text-outline" />文章</a>
        </li>
        <li>
          <a href="/about"
--- a/src/lib/apis/clients.ts
+++ b/src/lib/apis/clients.ts
@ -1,10 +1,10 @@
 import axios from 'axios'

 export const legacyClient = axios.create({
-  // baseURL: import.meta.env.SSR
-  //   ? 'https://legacy.passthem.top/api'
-  //   : '/api/legacy',
-  baseURL: 'https://legacy.passthem.top/api',
+  baseURL: import.meta.env.SSR
+    ? ((await import('astro:env/server')) as any)['LEGACY_BACKEND_URL_SSR']
+    : 'https://legacy.passthem.top/api',
+  // baseURL: 'https://legacy.passthem.top/api',
  timeout: 6000,
  withCredentials: true,
  headers: {
--- a/src/lib/apis/legacy/blog.ts
+++ b/src/lib/apis/legacy/blog.ts
@ -1,6 +1,6 @@
 import { legacyClient } from '../clients'

-export type ListBlogItemType = {
+export type LegacyListBlogItemType = {
  id: number
  title: string

@ -24,6 +24,10 @@ export type ListBlogItemType = {
  }
 }

+export type LegacyBlogContentType = LegacyListBlogItemType & {
+  content: string
+}
+
 export const listBlogs = async ({
  page = 1,
  limit = 20,
@ -53,22 +57,35 @@ export const listBlogs = async ({
    _blog.updated_at = new Date(_blog.updated_at)

    return _blog
-  }) as ListBlogItemType[]
+  }) as LegacyListBlogItemType[]
 }

 export const getBlog: (
  blog_id: number,
-) => Promise<null | { title: string; content: string }> = async (
-  blog_id: number,
-) => {
+) => Promise<null | LegacyBlogContentType> = async (blog_id: number) => {
  const resp = await legacyClient.get(`/v1/blog/${blog_id}`, {
    validateStatus: (status) => status == 200 || status == 404,
  })
  if (resp.status == 404) {
    return null
  }
-  return resp.data as {
-    title: string
-    content: string
+  let _blog = resp.data
+
+  if (_blog.featured_image) {
+    _blog = {
+      ..._blog,
+      featured_image: {
+        image_url:
+          'https://legacy.passthem.top' + _blog.featured_image.image_url,
+      },
+    }
  }
+
+  _blog.author.avatar = {
+    image_url: 'https://legacy.passthem.top' + _blog.author.avatar.image_url,
+  }
+  _blog.created_at = new Date(_blog.created_at)
+  _blog.updated_at = new Date(_blog.updated_at)
+
+  return _blog
 }
--- a/src/lib/apis/legacy/user.ts
+++ b/src/lib/apis/legacy/user.ts
@ -0,0 +1,27 @@
+import { legacyClient } from '../clients'
+
+export type LegacyUserType = {
+  id: number
+  created_at: Date
+  username: string
+  nickname: string
+  permission: number
+  introduction: string
+  avatar: {
+    image_url: string
+  }
+}
+
+export const getUserInfo = async ({ username }: { username: string }) => {
+  const resp = await legacyClient.get(`/v1/user/${username}/info`)
+  if (resp.status != 200) {
+    return null
+  }
+  return {
+    ...resp.data,
+    created_at: new Date(resp.data.created_at),
+    avatar: {
+      image_url: 'https://legacy.passthem.top' + resp.data.avatar.image_url,
+    },
+  } as LegacyUserType
+}
--- a/src/lib/data/contact.json
+++ b/src/lib/data/contact.json
@ -0,0 +1,32 @@
+[
+  {
+    "platform": "YnVodGlH",
+    "href": "dXNlZC1tZWh0c3NhcC9tb2MuYnVodGlnLy86c3B0dGg=",
+    "name": "dXNlZC1tZWh0c3NhcA=="
+  },
+  {
+    "platform": "ZW1pdGFrYVc=",
+    "href": "bWVodHNzYXBAL21vYy5lbWl0YWthdy8vOnNwdHRo",
+    "name": "bWVodHNzYXBA"
+  },
+  {
+    "platform": "ZWJ1dHVvWQ==",
+    "href": "MzgxbWVodHNzYVBAL21vYy5lYnV0dW95Lnd3dy8vOnNwdHRo",
+    "name": "MzgxbWVodHNzYVBA"
+  },
+  {
+    "platform": "ZXRpU290Tw==",
+    "href": "bWVodHNzYXBAL2V0aXMuZGFtb3RvLy86c3B0dGg=",
+    "name": "bWVodHNzYXBA"
+  },
+  {
+    "platform": "bGlhbUU=",
+    "href": "bW9jLmxpYW1nQDM4MW1laHRzc2FwOm90bGlhbQ==",
+    "name": "bW9jLmxpYW1nQDM4MW1laHRzc2Fw"
+  },
+  {
+    "platform": "aWxpYmlsaUI=",
+    "href": "NDA2MjU4MjkvbW9jLmlsaWJpbGliLmVjYXBzLy86c3B0dGg=",
+    "name": "bWVodHNzYXA="
+  }
+]
--- a/src/lib/keyv-cache.server.ts
+++ b/src/lib/keyv-cache.server.ts
@ -0,0 +1,4 @@
+import { REDIS_URL } from 'astro:env/server'
+import KeyvRedis from '@keyv/redis'
+
+export const storage = REDIS_URL ? new KeyvRedis(REDIS_URL) : new Map()
--- a/src/lib/markdoc-cache.server.ts
+++ b/src/lib/markdoc-cache.server.ts
@ -0,0 +1,20 @@
+import './server-only.ts'
+
+import type { RenderableTreeNode } from '@markdoc/markdoc'
+import KeyV from 'keyv'
+import { createHash } from 'node:crypto'
+import { storage } from './keyv-cache.server.ts'
+
+const markdocVersion = '1'
+
+export const markdocCache = new KeyV<RenderableTreeNode>({
+  store: storage,
+  namespace: `markdoc-cache-${markdocVersion}`,
+  ttl: 1000 * 60 * 60 * 24 * 7,
+})
+export const generateCacheKey = (content: string) => {
+  return createHash('sha256')
+    .update(content)
+    .update(markdocVersion)
+    .digest('hex')
+}
--- a/src/lib/markdoc.server.ts
+++ b/src/lib/markdoc.server.ts
@ -0,0 +1,21 @@
+import './server-only.ts'
+
+import { renderMarkdocTree } from './markdoc.ts'
+import { generateCacheKey, markdocCache } from './markdoc-cache.server.ts'
+
+export const getCachedMarkdocTree = async (content: string) => {
+  if (!import.meta.env.SSR) {
+    return await renderMarkdocTree(content)
+  }
+
+  const key = generateCacheKey(content)
+  const cached = await markdocCache.get(key)
+
+  if (cached) {
+    return cached
+  }
+
+  const tree = await renderMarkdocTree(content)
+  markdocCache.set(key, tree)
+  return tree
+}
--- a/src/lib/markdoc.ts
+++ b/src/lib/markdoc.ts
@ -12,6 +12,15 @@ export const markdocConfig: Config = {
        highlightedHtml: { type: String },
      },
      transform(node, config) {
+        /*
+         * 注意力！！！！！！！！！！！！！！
+         * 注意！！！！！！！！！！！！
+         *
+         * 如果改了这里的逻辑，记得更改 `markdoc-cache.ts` 里的版本号
+         * 以让对应的缓存能够被更新
+         *
+         **/
+
        const attributes = node.transformAttributes(config)

        const highlightedHtml = shikiRender(
@ -29,8 +38,10 @@ export const markdocConfig: Config = {
  },
 }

-export const toMarkdocTree = async (content: string) => {
+export const renderMarkdocTree = async (content: string) => {
  const ast = Markdoc.parse(content)
  await ensureShikiEngine()
-  return Markdoc.transform(ast, markdocConfig)
+  const tree = Markdoc.transform(ast, markdocConfig)
+
+  return tree
 }
--- a/src/lib/server-only.ts
+++ b/src/lib/server-only.ts
@ -0,0 +1,3 @@
+if (!import.meta.env.SSR) {
+  throw Error('这段代码不可以在客户端执行！')
+}
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@ -0,0 +1,10 @@
+---
+import BoringLayout from '../layout/BoringLayout.astro'
+---
+
+<BoringLayout title="404 - 小帕的小窝">
+  <h1>网页走丢了！！</h1>
+  <p>不知道为什么就到了这里。。</p>
+  <p><a href="javascript:history.back()">点击这里</a>回到上一页</p>
+  <p>或者<a href="/">点击这里</a>回到主页</p>
+</BoringLayout>
--- a/src/pages/500.astro
+++ b/src/pages/500.astro
@ -0,0 +1,10 @@
+---
+import BoringLayout from '../layout/BoringLayout.astro'
+---
+
+<BoringLayout title="500 - 小帕的小窝">
+  <h1>服务器内部错误</h1>
+  <p>哦不肯定是小帕搞错了什么东西。。</p>
+  <p><a href="javascript:history.back()">点击这里</a>回到上一页</p>
+  <p>或者<a href="/">点击这里</a>回到主页</p>
+</BoringLayout>
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@ -0,0 +1,5 @@
+---
+export const prerender = false
+
+return Astro.redirect('/404')
+---
--- a/src/pages/blogs.astro
+++ b/src/pages/blogs.astro
@ -1,6 +1,6 @@
 ---
 import FullLayoutV1 from '../layout/FullLayoutV1.astro'
-import { listBlogs } from '../lib/apis/legacy/blog'
+import { listBlogs, type LegacyListBlogItemType } from '../lib/apis/legacy/blog'
 import BlogCard from '../components/BlogCard.astro'
 import BlogHeaderImage from '../assets/blogs-header.webp'
 import { Image } from 'astro:assets'
@ -10,7 +10,14 @@ export const prerender = false
 const _page = parseInt(Astro.url.searchParams.get('page') || '1')
 const page = isNaN(_page) ? 1 : Math.max(1, _page)

-const blogs = await listBlogs({ page, limit: 100 })
+let blogs: LegacyListBlogItemType[] = []
+
+try {
+  blogs = await listBlogs({ page, limit: 100 })
+} catch (e) {
+  console.error(e)
+  return Astro.redirect('/500')
+}
 ---

 <FullLayoutV1 withGap title="博客列表 - 小帕的小窝">
@ -38,7 +45,7 @@ const blogs = await listBlogs({ page, limit: 100 })
          blogs.map((blog) => (
            <BlogCard
              title={blog.title}
-              link={`/blogs/${blog.id}`}
+              link={`/blog/${blog.id}`}
              featureImage={blog.featured_image?.image_url}
              author={{
                name: blog.author.nickname,
--- a/src/pages/blog/[blog_id].astro
+++ b/src/pages/blog/[blog_id].astro
@ -0,0 +1,178 @@
+---
+import { getBlog } from '../../lib/apis/legacy/blog'
+import FullLayoutV1 from '../../layout/FullLayoutV1.astro'
+import { MarkdocTreeRender } from '../../components/MarkdocRenderer.tsx'
+import { getCachedMarkdocTree } from '../../lib/markdoc.server.ts'
+import { Image } from 'astro:assets'
+import { Icon } from 'astro-icon/components'
+
+import Artalk from '../../components/Artalk.svelte'
+
+export const prerender = false
+
+const { blog_id = '' } = Astro.params
+const blog_id_num = parseInt(blog_id)
+
+if (isNaN(blog_id_num) || blog_id_num < 0) {
+  return Astro.redirect('/404')
+}
+
+let blogData = null
+
+try {
+  blogData = await getBlog(blog_id_num)
+} catch (e) {
+  console.error(e)
+  return Astro.redirect('/500')
+}
+
+if (blogData === null) {
+  return Astro.redirect('/404')
+}
+
+const tree = await getCachedMarkdocTree(blogData.content)
+const formatDate = (date: Date) =>
+  `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
+---
+
+<FullLayoutV1 title={blogData.title} withGap>
+  {
+    blogData.featured_image && (
+      <div class="featured-image">
+        <Image
+          class="image"
+          src={blogData.featured_image.image_url}
+          width={960}
+          height={540}
+          alt="博客的头图"
+        />
+      </div>
+    )
+  }
+  <main>
+    <h1>{blogData.title}</h1>
+    {
+      blogData.author && (
+        <div class="blog-info">
+          <a class="author" href={`/user/${blogData.author.username}`}>
+            <div class="avatar">
+              <Image
+                class="image"
+                src={blogData.author.avatar.image_url}
+                width={32}
+                height={32}
+                alt={`用户 ${blogData.author.nickname} 的头像`}
+              />
+            </div>
+            <div class="username">{blogData.author.nickname}</div>
+          </a>
+          <span class="split">・</span>
+          <span>{formatDate(blogData.updated_at)} 更新</span>
+        </div>
+      )
+    }
+    <article>
+      <MarkdocTreeRender tree={tree} client:load />
+    </article>
+    <h1 class="comment-title">
+      <Icon name="material-symbols:chat-rounded" /> 评论区
+    </h1>
+    <Artalk client:idle />
+  </main>
+</FullLayoutV1>
+
+<style>
+  .__dev__caution {
+    height: 100dvh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > h1 {
+      font-size: 72px;
+      font-weight: 800;
+    }
+  }
+
+  .featured-image {
+    margin-inline: auto;
+    width: 100%;
+    max-width: 960px;
+    aspect-ratio: 16 / 9;
+    margin-block-end: 2rem;
+    position: relative;
+
+    & > .image {
+      object-fit: cover;
+      height: 100%;
+      width: 100%;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      height: 50px;
+      width: 100%;
+      background: linear-gradient(to bottom, transparent, #00000044);
+    }
+
+    @media (width < 768px) and (width >= 540px) {
+      aspect-ratio: 2.5 / 1;
+    }
+
+    @media (width >= 768px) {
+      aspect-ratio: 4 / 1;
+      margin-block-end: 3rem;
+    }
+  }
+
+  .blog-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+    color: var(--color-fg-1);
+
+    & > .author {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.25rem;
+
+      & > .avatar {
+        & > .image {
+          width: 32px;
+          height: 32px;
+          object-fit: cover;
+          border-radius: 16px;
+        }
+      }
+    }
+  }
+
+  main {
+    max-inline-size: 840px;
+    margin-inline: auto;
+    padding-block-end: 4rem;
+    padding-inline: 20px;
+
+    & > h1 {
+      font-size: 2rem;
+      font-weight: 900;
+      margin-block-end: 1.2rem;
+      margin-block-start: 2rem;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.25rem;
+
+      &.comment-title {
+        margin-block-start: 3rem;
+      }
+    }
+  }
+</style>
--- a/src/pages/blogs/[blog_id].astro
+++ b/src/pages/blogs/[blog_id].astro
@ -1,61 +0,0 @@
---
-import { getBlog } from '../../lib/apis/legacy/blog'
-import FullLayoutV1 from '../../layout/FullLayoutV1.astro'
-import { MarkdocTreeRender } from '../../components/MarkdocRenderer.tsx'
-import { toMarkdocTree } from '../../lib/markdoc'
-
-import Artalk from '../../components/Artalk.svelte'
-
-export const prerender = false
-
-const { blog_id = '' } = Astro.params
-const blog_id_num = parseInt(blog_id)
-
-if (isNaN(blog_id_num) || blog_id_num < 0) {
-  return Astro.redirect('/404')
-}
-
-const blogData = await getBlog(blog_id_num)
-if (blogData === null) {
-  return Astro.redirect('/404')
-}
-
-const tree = await toMarkdocTree(blogData.content)
---
-
-<FullLayoutV1 title={blogData.title} withGap>
-  <main>
-    <h1>{blogData.title}</h1>
-    <article>
-      <MarkdocTreeRender tree={tree} client:load />
-    </article>
-    <h1>评论区</h1>
-    <Artalk client:idle />
-  </main>
-</FullLayoutV1>
-
-<style>
-  .__dev__caution {
-    height: 100dvh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    & > h1 {
-      font-size: 72px;
-      font-weight: 800;
-    }
-  }
-
-  main {
-    max-inline-size: 840px;
-    margin-inline: auto;
-    padding-block-end: 2rem;
-
-    & > h1 {
-      font-size: 2.4rem;
-      font-weight: 700;
-      margin-block: 1.2rem;
-    }
-  }
-</style>
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@ -1,9 +0,0 @@
---
-import BoringLayout from '../layout/BoringLayout.astro'
---
-
-<BoringLayout title="联络我">
-  <h1>联络我</h1>
-  <p>邮箱：<a href="mailto:passthem183@gmail.com">passthem183@gmail.com</a></p>
-  <p>点击 <a href="/">这里</a> 返回主页</p>
-</BoringLayout>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -1,14 +1,18 @@
 ---
 export const prerender = false

-// import BoringLayout from '../layout/BoringLayout.astro'
 import FullLayoutV1 from '../layout/FullLayoutV1.astro'
+
 import MainpageButton from '../components/MainpageButton.svelte'
 import MainpageComments from '../components/MainpageComments.astro'
 import MainpageTypewriter from '../components/MainpageTypewriter.svelte'
+import MainpageContactMe from '../components/MainpageContactMe.svelte'
+
 import { Image } from 'astro:assets'
 import { Icon } from 'astro-icon/components'
+
 import PassthemAvatar from '../assets/mainpage_avatars/passthem.png'
+import IgbtAvatar from '../assets/mainpage_avatars/igbt.png'

 import { mainpageGetClick } from '../lib/apis/legacy/mainpage'

@ -96,42 +100,13 @@ try {
      <Icon name="mdi:email" />
    </div>
    <div class="contact-container">
-      <h1><div class="text">联系我<div class="animation-before"></div></div><div class="animation"></div></h1>
-      <table>
-        <tbody>
-          <tr>
-            <th>Github</th>
-            <th><a href="https://github.com/passthem-desu">passthem-desu</a></th
-            >
-          </tr>
-          <tr>
-            <th>Wakatime</th>
-            <th><a href="https://wakatime.com/@passthem">@passthem</a></th>
-          </tr>
-          <tr>
-            <th>Youtube</th>
-            <th
-              ><a href="https://www.youtube.com/@Passthem183">@Passthem183</a
-              ></th
-            >
-          </tr>
-          <tr>
-            <th>OtoSite</th>
-            <th><a href="https://otomad.site/@passthem">@passthem</a></th>
-          </tr>
-          <tr>
-            <th>Email</th>
-            <th
-              ><a href="mailto:passthem183@gmail.com">passthem183@gmail.com</a
-              ></th
-            >
-          </tr>
-          <tr>
-            <th>Bilibili</th>
-            <th><a href="https://space.bilibili.com/92852604">passthem</a></th>
-          </tr>
-        </tbody>
-      </table>
+      <h1>
+        <div class="text">联系我<div class="animation-before"></div></div><div
+          class="animation"
+        >
+        </div>
+      </h1>
+      <MainpageContactMe client:idle />
    </div>
  </section>

@ -149,61 +124,77 @@ try {
    <div class="friends">
      {
        [
-          [
-            'https://omega98.top/images/blog_avatar.jpg',
-            'https://omega98.top',
-            '核子的博客',
-          ],
-          ['https://www.tnot.top/logo.png', 'https://tnot.top', 'TNOT 的博客'],
-          [
-            'https://ruusuge.top/img/logo_hu_cc283ac364b1bc0b.png',
-            'https://ruusuge.top',
-            'ルース毛的博客',
-          ],
-          [
-            'https://cdn.jsdelivr.net/gh/TransparentLC/transparentlc.github.io/img/avatar.jpg',
-            'https://akarin.dev',
-            '存在感消失的地方',
-          ],
-          [
-            'https://wzq02.top/assets/icons/favicon-96x96.png',
-            'https://wzq02.top',
-            'wzq02 的博客',
-          ],
-          [
-            'https://pics.r1kka.one/file/1738764637932_-305500c1acccdf39.jpg',
-            'https://r1kka.one/',
-            "Rikka's Blog",
-          ],
-          [
-            'https://shimizukaede.top/vite.svg',
-            'https://shimizukaede.top',
-            'Kaede 的博客',
-          ],
-          [
-            'https://nonerd.tech/assets/apple-touch-icon.png',
-            'https://nonerd.tech/',
-            '废柴铁克诺',
-          ],
-          [
-            'https://legacy.passthem.top/assets/ydt-DIeb2Djx.png',
-            'https://qm.qq.com/q/nDnHUy9KQo',
-            '有顶天变电站 (QQ)'
-          ],
-          [
-            'https://legacy.passthem.top/assets/lfxdxy-BogfTZvz.png',
-            'https://qm.qq.com/q/QOpCVZcvyS',
-            '六方相的新月 (QQ)'
-          ],
-        ].map(b => <a href={b[1]} class="friend">
-          <div class="avatar">
-            <Image src={b[0]} width={60} height={60} alt=`网站「${b[2]}」的图标` />
-          </div>
-          <div class="description">
-            {b[2]}
-          </div>
-        </a>
-      )
+          {
+            avatar: 'https://omega98.top/images/blog_avatar.jpg',
+            href: 'https://omega98.top',
+            name: '核子的博客',
+          },
+          {
+            avatar: 'https://www.tnot.top/logo.png',
+            href: 'https://tnot.top',
+            name: 'TNOT 的博客',
+          },
+          {
+            avatar: 'https://ruusuge.top/img/logo_hu_cc283ac364b1bc0b.png',
+            href: 'https://ruusuge.top',
+            name: 'ルース毛的博客',
+          },
+          {
+            avatar: IgbtAvatar,
+            href: 'https://zetsuengate.org',
+            name: 'IGBT :: Home',
+          },
+          {
+            avatar:
+              'https://cdn.jsdelivr.net/gh/TransparentLC/transparentlc.github.io/img/avatar.jpg',
+            href: 'https://akarin.dev',
+            name: '存在感消失的地方',
+          },
+          {
+            avatar: 'https://wzq02.top/assets/icons/favicon-96x96.png',
+            href: 'https://wzq02.top',
+            name: 'wzq02 的博客',
+          },
+          {
+            avatar:
+              'https://pics.r1kka.one/file/1738764637932_-305500c1acccdf39.jpg',
+            href: 'https://r1kka.one/',
+            name: "Rikka's Blog",
+          },
+          {
+            avatar: 'https://shimizukaede.top/vite.svg',
+            href: 'https://shimizukaede.top',
+            name: 'Kaede 的博客',
+          },
+          {
+            avatar: 'https://nonerd.tech/assets/apple-touch-icon.png',
+            href: 'https://nonerd.tech/',
+            name: '废柴铁克诺',
+          },
+          {
+            avatar: 'https://legacy.passthem.top/assets/ydt-DIeb2Djx.png',
+            href: 'https://qm.qq.com/q/nDnHUy9KQo',
+            name: '有顶天变电站 (QQ)',
+          },
+          {
+            avatar: 'https://legacy.passthem.top/assets/lfxdxy-BogfTZvz.png',
+            href: 'https://qm.qq.com/q/QOpCVZcvyS',
+            name: '六方相的新月 (QQ)',
+          },
+        ].map((b) => (
+          <a href={b.href} class="friend">
+            <div class="avatar">
+              <Image
+                src={b.avatar as string}
+                width={60}
+                height={60}
+                alt={`网站「${b.name}」的图标`}
+                densities={[1.5, 2]}
+              />
+            </div>
+            <div class="description">{b.name}</div>
+          </a>
+        ))
      }
    </div>
  </section>
@ -567,7 +558,6 @@ try {
      & > .text {
        background-color: var(--color-fg-0);
        position: relative;
-
      }

      & .animation-before {
@ -603,82 +593,13 @@ try {
        background-repeat: repeat;
        background-size: var(--bg-width) 100%;
        animation: bg-contact-roll infinite linear 2s;
-        transform: skewX(var(--skew-angle))
-          translateX(calc(var(--unit) - 1px));
-      }
-    }
-
-    & > table {
-      font-family: var(--font-mono);
-
-      & caption {
-        text-align: center;
-      }
-
-      & tr {
-        text-align: left;
-        display: grid;
-        grid-template-columns: 6em 16em;
-        gap: 1em;
-        line-height: 2em;
-
-        @media (max-width: 767px) {
-          grid-template-columns: 18em;
-          gap: 0;
-          line-height: 1.8em;
-          margin-block: 1em;
-        }
-
-        & th:nth-child(1) {
-          display: flex;
-          justify-content: space-between;
-
-          @media (max-width: 767px) {
-            justify-content: left;
-          }
-
-          &::after {
-            content: ':';
-          }
-        }
-
-        & th:nth-child(2) {
-          display: flex;
-          justify-content: space-between;
-
-          @media (max-width: 767px) {
-            justify-content: end;
-          }
-
-          &::before {
-            content: '[';
-          }
-
-          &::after {
-            content: ']';
-          }
-
-          &:hover,
-          &:has(a:focus) {
-            background-color: var(--color-fg-0);
-            color: var(--color-bg-0);
-          }
-
-          & > a {
-            text-align: center;
-            margin-inline: 1em;
-
-            &:focus {
-              outline: none;
-            }
-          }
-        }
+        transform: skewX(var(--skew-angle)) translateX(calc(var(--unit) - 1px));
      }
    }
  }

  /* 友链页 */
-  .slide:has(>.friends) {
+  .slide:has(> .friends) {
    flex-direction: column;
    gap: 1rem;
  }
@ -695,7 +616,7 @@ try {
    overflow-y: auto;
    margin-inline: 1rem;
    /* background-color: rgb(from var(--color-bg-0) r g b / .3); */
-    background-color: rgb(from var(--color-bg-2) r g b / .5);
+    background-color: rgb(from var(--color-bg-2) r g b / 0.5);
    border-radius: 2rem;
    backdrop-filter: blur(5px);

@ -751,7 +672,8 @@ try {
        outline-offset: 3px;
      }

-      &:hover, &:focus {
+      &:hover,
+      &:focus {
        transform: scale(1.1);
      }

--- a/src/pages/rss.xml.ts
+++ b/src/pages/rss.xml.ts
@ -3,16 +3,54 @@ import type { APIRoute } from 'astro'
 import {
  getBlog,
  listBlogs,
-  type ListBlogItemType,
+  type LegacyListBlogItemType,
 } from '../lib/apis/legacy/blog'
 import { ensureShikiEngine } from '../lib/markdown'
 // import { toMarkdocTree } from '../lib/markdoc'
 import Markdoc from '@markdoc/markdoc'
+import KeyV from 'keyv'
+import { createHash } from 'node:crypto'
+import { storage } from '../lib/keyv-cache.server'

 export const prerender = false

+const renderCache = new KeyV<string>({
+  store: storage,
+  namespace: 'markdoc-rss',
+})
+
+const _render = async (content: string) => {
+  const key = 'html:' + createHash('sha256').update(content).digest('hex')
+  const cached = await renderCache.get(key)
+
+  if (cached) {
+    return cached
+  }
+
+  const blogTree = Markdoc.transform(Markdoc.parse(content))
+  const html = Markdoc.renderers.html(blogTree)
+
+  await renderCache.set(key, html, 1000 * 60 * 60 * 24)
+  return html
+}
+
+const _getBlog = async (blogId: number) => {
+  const key = `raw:blog-${blogId}`
+  const cached = await renderCache.get(key)
+
+  if (cached) {
+    return cached
+  }
+
+  const content = (await getBlog(blogId))?.content
+  if (content) {
+    await renderCache.set(key, content, 1000 * 60 * 60 * 12)
+  }
+  return content
+}
+
 export const GET = (async (context) => {
-  let blogs: ListBlogItemType[] = []
+  let blogs: LegacyListBlogItemType[] = []
  let pid = 0

  let newBlogs = []
@ -34,18 +72,13 @@ export const GET = (async (context) => {
    site,
    items: await Promise.all(
      blogs.map(async (blog) => {
-        const blogContent =
-          (await getBlog(blog.id))?.content || '博客内容暂不可用'
-        // const blogTree = await toMarkdocTree(blogContent)
-        const blogTree = Markdoc.transform(Markdoc.parse(blogContent))
-        const html = Markdoc.renderers.html(blogTree)
-
+        const blogContent = (await _getBlog(blog.id)) || '博客内容暂不可用'
        const rssItem: RSSFeedItem = {
          title: blog.title,
          description: `一篇由 ${blog.author.nickname} 写的博客`,
-          link: `${site}/blogs/${blog.id}`,
+          link: `${site}/blog/${blog.id}`,
          pubDate: new Date(blog.created_at),
-          content: html,
+          content: await _render(blogContent),
          author: blog.author.nickname,
          enclosure: blog.featured_image
            ? {
--- a/src/pages/user/[user_id].astro
+++ b/src/pages/user/[user_id].astro
@ -0,0 +1,89 @@
+---
+import FullLayoutV1 from '../../layout/FullLayoutV1.astro'
+import { getUserInfo, type LegacyUserType } from '../../lib/apis/legacy/user'
+import { Image } from 'astro:assets'
+
+const { user_id = '' } = Astro.params
+var user_data: LegacyUserType
+
+try {
+  const _user_data = await getUserInfo({ username: user_id })
+  if (_user_data === null) {
+    return Astro.redirect('/404')
+  }
+  user_data = _user_data
+} catch (e) {
+  console.warn('访问了不存在的用户', user_id)
+  console.warn(e)
+  return Astro.redirect('/404')
+}
+---
+
+<FullLayoutV1>
+  <div class="container">
+    <div class="user-card">
+      <div class="avatar">
+        <Image
+          src={user_data.avatar.image_url}
+          densities={[1.5, 2]}
+          width={150}
+          height={150}
+          alt=`用户 ${user_data.username} 的头像`
+        />
+      </div>
+      <div class="user-info">
+        <h1 class="name">
+          <span class="nickname">{user_data.nickname}</span><span
+            class="username">{user_data.username}</span
+          >
+        </h1>
+        <h2 class="introduction">{user_data.introduction}</h2>
+      </div>
+    </div>
+  </div>
+</FullLayoutV1>
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100dvh;
+
+    .user-card {
+      background-color: var(--color-bg-n);
+      display: flex;
+      flex-direction: column;
+      padding: 4rem;
+      gap: 1rem;
+      border-radius: 1rem;
+
+      @media (width >= 768px) {
+        flex-direction: row;
+        gap: 3rem;
+      }
+
+      .user-info {
+        .name {
+          display: flex;
+          font-weight: 600;
+          gap: 0.5rem;
+          margin-block-end: 0.25rem;
+          align-items: center;
+          font-size: larger;
+
+          .username {
+            opacity: 0.3;
+            font-family: var(--font-mono);
+            font-size: 0.9em;
+
+            &::before {
+              content: '@';
+              display: inline;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,14 +1,9 @@
 {
  "extends": "astro/tsconfigs/strict",
-  "include": [
-    ".astro/types.d.ts",
-    "**/*"
-  ],
-  "exclude": [
-    "dist"
-  ],
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
-}
+}
Author	SHA1	Message	Date
passthem	b6eb62fc80	添加一个简陋的用户页 All checks were successful continuous-integration/drone/push Build is passing Details	2026-04-18 10:12:44 +08:00
passthem	8c3aa00e15	添加 IGBT :: Home 友链 All checks were successful continuous-integration/drone/push Build is passing Details	2026-04-12 18:26:04 +08:00
passthem	bb347dab3b	客户端和服务端分离 api 目标，少点走公网 All checks were successful continuous-integration/drone/push Build is passing Details	2026-04-09 16:12:39 +08:00
passthem	5e5f13a949	添加 Redis 支持 All checks were successful continuous-integration/drone/push Build is passing Details	2026-04-09 15:57:28 +08:00
passthem	cd689aba98	添加服务端运行警告	2026-04-09 15:46:54 +08:00
passthem	2de3841f7d	混淆 All checks were successful continuous-integration/drone/push Build is passing Details	2026-04-09 15:12:48 +08:00
passthem	ee3585586d	添加 404 页	2026-04-09 13:34:09 +08:00
passthem	6c525bcf98	解决构建问题 All checks were successful continuous-integration/drone/push Build is passing Details	2026-04-07 13:34:10 +08:00
passthem	7a3059f486	添加 RSS 侧渲染和抓取缓存 Some checks failed continuous-integration/drone/push Build is failing Details	2026-04-07 13:19:01 +08:00
passthem	1b8bd19370	添加博客渲染缓存	2026-04-07 12:57:47 +08:00
passthem	ca1cf10aa8	添加错误重试机制 All checks were successful continuous-integration/drone/push Build is passing Details	2026-04-07 12:19:13 +08:00
passthem	880afe34ab	微调排版 All checks were successful continuous-integration/drone/push Build is passing Details	2026-04-07 03:35:00 +08:00
passthem	c3973e779a	添加标题上边距	2026-04-07 03:32:17 +08:00
passthem	d605131bda	添加格式化相关 All checks were successful continuous-integration/drone/push Build is passing Details	2026-04-07 03:27:22 +08:00
passthem	2a71d714e8	添加 code 元素样式 All checks were successful continuous-integration/drone/push Build is passing Details	2026-04-05 21:24:50 +08:00
passthem	a47a537a64	修复链接 All checks were successful continuous-integration/drone/push Build is passing Details	2026-04-05 21:21:48 +08:00
passthem	e36492a692	优化排版 All checks were successful continuous-integration/drone/push Build is passing Details	2026-04-05 21:17:40 +08:00
passthem	9c019351a3	添加博客头图	2026-04-05 20:59:31 +08:00