blog · Ansonkkk

项目概述

本blog 是一个静态个人博客，用于发布近况、技术笔记、随笔和项目介绍。内容通过本地 Markdown / MDX 文件维护，构建后生成静态页面并部署到 VPS。

客户端保留少量 JavaScript，用于移动导航、主题切换和代码复制等交互。正文与导航在关闭 JavaScript 后仍然可用。

内容字段由 Schema 校验。标题、摘要、日期和标签独立维护，draft 控制内容是否进入公开页面。改版过程中保留既有文章与项目 URL。

字体使用本地资源，并保留系统 fallback。Maple 的结构与代码字体使用真实的 400、600 字重；朱雀仿宋使用 400 字重。

以下 px 按默认 16px 根字号换算，源码主要使用 rem。

页面容器最大宽度为 72rem，文章主体默认最大宽度为 42rem；宽屏带侧栏时，由主辅网格控制正文宽度。文章内部通过字体、字重、颜色和段落间距区分层级。

浅色模式使用暖白背景与灰蓝文字，链接使用蓝色。深色模式分别配置背景、文字、边界和强调色。主题支持自动、浅色、深色三种选择。

首页在 60rem 断点以上使用主辅网格，近况与写作的列宽约为 2:1，辅助列最小宽度为 16rem。身份介绍和项目横跨整行。窄屏下回到单列，保持身份、近况、写作、项目的阅读顺序。

栏目通过细线和留白分隔。首页栏目标题距上方分隔线 24px，标题区到内容区间距为 20px。

近况图片完整保留原始比例，不裁切、不拉伸。单图高度上限为 24rem，多图同一行的图片区高度上限为 16rem，两者共同受 60svh 的视口高度上限约束。构建时读取图片宽高，为加载前的布局预留空间。

站点使用同一套页面结构，通过 CSS media query、Grid 和 clamp() 按视口宽度调整布局。电脑窗口缩小时，也会切换到对应的窄屏排版。

区域	电脑端与较宽屏幕	手机端与窄屏
首页	`60rem` 起采用主辅网格，近况与写作并排，身份介绍和项目横跨整行	单列排列，按身份、近况、写作、项目的顺序阅读
导航	`48rem` 起直接显示横向导航链接	通过“导航”按钮展开或收起菜单
近况归档	`40rem` 起每行两条，`60rem` 起每行三条	`40rem` 以下每行一条，月份轨道改为左侧竖线
写作列表	`40rem` 起，日期与类型放在内容左侧	日期与类型放在标题上方，标题和摘要自然换行
项目归档	`60rem` 起，项目内容与状态、技术栈、链接分列展示	内容纵向排列，状态、标签与链接允许换行
长文正文	`48rem` 起使用 18px 字号	使用 17px 字号，行高保持 1.9

页面左右留白使用 clamp(1rem, 4vw, 3rem)，随视口在约 16–48px 之间变化。主标题在约 36–52px 之间缩放。以上 px 按默认 16px 根字号换算。

窄屏导航在关闭 JavaScript 后直接显示链接，仍可正常访问各个栏目。文章中的长链接允许换行，超宽代码块和表格在各自区域内横向滚动。