Folio 主题设计系统
方向
构建一个像最佳开发者博客和作品集（leerob.com、overreacted.io、brittanychiang.com、antfu.me）一样的个人网站：一个人，一种声音，以写作为先。网站应感觉像一个保存良好的笔记本，安静而快速，没有任何与文本竞争的元素。用具体的数字和代码展示这个人构建了什么以及学到了什么。不使用任何人物库存照片、营销宣传语或装饰性效果。
基础
- 仅使用
./theme/views/和主题的article、blog、code、text、blog布局及main视图提供的标记和类。 - 使用系统无衬线、衬线和等宽字体，以及现有的
--pico-*变量。 - 使用暖中性色（
#2B2924、#6B665E、#E4E0D9、#FBFAF8）和绿色（浅色模式#1F7A4D，深色模式#4FBF87）仅用于链接和第一个按钮；代码块始终保持深色。 - 支持浅色和深色模式；切勿在可主题化的背景上放置固定浅色。
- 使用
0.5rem圆角和细边框代替阴影。
结构
- 首页（
page）：包含一个hero元素（头像图片、角色副标题、一句话介绍和两个按钮）、一个blog元素（list布局，标题为“近期写作”）、两列项目cards以及一个用于联系的联系人cta。 - 写作页（
page）：一段关于你写作主题的简短说明，以及一个blog列表，显示所有文章（该页面为父页面）。 - 文章（
blog）位于写作页下，按最新在前排序在树结构中。每篇文章以一个article元素（标题、两句话引导语和一张封面图片）开头，后跟text、二级heading和code元素。 - 关于、项目、使用和当前动态页面（
page）以一级heading开头。关于页面包含一个vertical工作经历时间线，使用页面按类别列出工具，当前动态页面说明你本月在做什么并附上最后更新日期。 - 在首页的
folio::profile配置中填写以下信息：姓名、职位头衔、公司、地点、一张方形照片、一句话简介、电子邮件地址和个人资料链接。
组件
- 文章引导语：两句话，阐述问题以及读者将获得什么。列表卡片将其用作介绍。
- 标题：简短、具体的二级标题（例如：“分批回填”）；三级标题仅可出现在二级标题下方。至少使用两个二级标题，以便显示大纲。
- 代码：每个代码片段使用一个
code元素，设置语言属性，最多约15行，代码应真实且可运行。 - 标注：在文本元素中使用 GitHub 风格的警示（
[!NOTE]、[!TIP]、[!WARNING]），每篇文章最多一或两个。 - 项目：每个项目一张卡片，项目名称为标题，仓库或演示为链接，用一句话说明其功能并附带数字（星标数、安装量、用户数），技术栈以内联代码标签形式放在单独一行，例如
`PHP` `Laravel`。 - 经历：时间线项目，标签格式为“2023 — 至今”，标题格式为“职位, 公司”，用一句话说明影响并附带数字，技术栈以代码标签形式呈现。
- 数据图：使用
cards元素（figures布局）展示最多三个关键数字。
可访问性
- 保留跳转链接、语义化标题、带标签的模式切换开关以及可见的
:focus-visible轮廓。 - 在两种配色方案（包括代码标记）中维持 WCAG 2.2 AA 对比度。
- 为封面图片编写有意义的 alt 文本；链接名称后跟目标描述，切勿使用“点击这里”。
内容
使用第一人称写作，以“你”称呼读者。要具体：写明版本号、数字和错误。在文章开头直接提出要解决的问题，而非背景介绍，并以你接下来会做什么作为结尾。保持标题朴实且描述性强（例如：“在具有4亿行的表上实现零停机迁移”）。避免使用流行语、“简单”、“仅仅”和填充性开场白。