docs: add Yohaku (余白) theme documentation and update homepage hero

Add Yohaku as the successor to Shiro theme with design philosophy,
config reference, sponsorship info, and live screenshots from innei.in.
Update homepage hero carousel to feature Yohaku and Shiro.

Author: Innei

app/components/ThemeShowcase.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import Image from 'next/image'
 import { Card, Cards } from 'fumadocs-ui/components/card'
 import { FaGithub } from 'react-icons/fa'
+import yohakuPreview from '@/public/assets/images/preview/yohaku.png';
 import shiroPreview from '@/public/assets/images/preview/shiro.png';
 import kamiPreview from '@/public/assets/images/preview/kami.png';
 import yunPreview from '@/public/assets/images/preview/yun.png';
@@ -52,6 +53,12 @@ const ThemeCard = ({ title, preview, href, github }: ThemeProps) => {
 
 const ThemeShowcase: React.FC = () => {
   const themes = [
+    {
+      title: '余白 / Yohaku (@innei)',
+      preview: yohakuPreview,
+      href: '/docs/themes/yohaku',
+      github: 'https://github.com/Innei/Yohaku'
+    },
     {
       title: 'Shiro (@innei)',
       preview: shiroPreview,

app/components/home/Hero.tsx

@@ -4,11 +4,10 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { useState, useEffect, useRef } from 'react'
 const images = [
+  '/assets/images/preview/yohaku.png',
   '/assets/images/preview/shiro.png',
-  '/assets/images/preview/kami.png',
-  '/assets/images/preview/console.png',
 ]
-const imageNames = ['Shiro 主题', 'Kami 主题', '控制台']
+const imageNames = ['余白 / Yohaku', 'Shiro 主题']
 import { cn } from 'utils/cn'
 import { buttonVariants } from 'app/components/ui/button'
 import { LuCirclePlay } from 'react-icons/lu'

content/docs/themes/meta.json

@@ -4,6 +4,7 @@
     "description": "部署 Mix Space 的前端主题",
     "icon": "PaintRoller",
     "pages": [
+        "yohaku",
         "shiro",
         "kami",
         "yun",

content/docs/themes/shiro/deploy.mdx

@@ -10,6 +10,10 @@ import Image from 'next/image'
 
 <ToGithub repo="Innei/Shiro" />
 
+<Callout type="info">
+  Shiro 的下一代演进版本 **[余白 / Yohaku](/docs/themes/yohaku)** 已经发布。Yohaku 基于 Shiro 深度重构，提供更精致的视觉设计与更多功能。如果你正在寻找最新的体验，请前往 [Yohaku 文档](/docs/themes/yohaku) 了解更多。
+</Callout>
+
 ## 前提要求
 
 - 你已安装 Mix Space 后端并且已启动

content/docs/themes/yohaku/config.mdx

@@ -0,0 +1,259 @@
+---
+title: 配置
+description: 余白 / Yohaku 的配置文件信息
+icon: Bolt
+---
+
+# 配置项
+
+Yohaku 的配置沿用 Shiro 的配置体系，在 Mix Space 后台「配置与云函数」页面中，创建一条 `theme` 引用、名称为 `shiro` 的配置项（数据类型 JSON 或 YAML）。
+
+<Callout type="info">
+  Yohaku 复用了 `shiro` 这个配置键名，如果你从 Shiro 迁移到 Yohaku，无需更改配置名称。
+</Callout>
+
+## 页脚信息 (`footer`)
+
+此部分定义页脚的部分信息，主要包括备案、建站年份和页脚导航三部分。
+
+### 备案信息 (`otherInfo.icp`)
+
+**如何使用**: 根据示例，修改位于 `text` 的备案号以及备案号所指向的链接 `link`。
+
+### 建站年份 (`otherInfo.date`)
+
+**如何使用**: `{{now}}` 指向当前年份，其他略。
+
+### 页脚导航 (`linkSections`)
+
+分类包括 `name` 和 `links` 两个字段，对应分类名字及其下链接，其下链接又分为 `name`、`href`、`external` 三个字段，对应链接名字，指向链接和是否外链三个属性。
+
+**如何使用**: 根据自己需要增删或修改特定链接及分类，需要注意如果指向外链的话需要加一行 `"external": true`。
+
+## 站点信息 (`config.site`)
+
+此部分包含了网站的基础信息设置，例如 favicon（网站图标）的配置。
+
+### Favicon
+
+- **`favicon`**: 设置网站在浅色模式下使用的图标。
+- **`faviconDark`**: 设置网站在深色模式下使用的图标。
+
+## Hero 部分 (`config.hero`)
+
+`hero` 部分定义了网站首页的主要欢迎信息或介绍部分，这是访问者首次进入网站时看到的部分。
+
+### Title 模板 (`title.template`)
+
+包括多个元素（如 `h1`, `code`, `span`），每个元素都可以自定义文本内容和样式（通过 CSS 类）。
+
+**如何使用**: 修改 `text` 和 `class` 字段来自定义标题的文本内容和样式。你可以通过添加或删除元素来调整标题的结构。
+
+### 描述 (`description`)
+
+提供了对主页 `hero` 部分的简短描述。
+
+**如何使用**: 直接修改 `description` 的值以更改介绍文本。
+
+### 一言 (`hitokoto`)
+
+提供自定义首页一言的功能。
+
+接受一个对象，包含 `random` 和 `custom` 两个可选字段。
+
+- 当存在 `random` 字段且值为 `true` 时，将会随机获取一言，优先级高于 `custom` 字段。
+- 当存在 `custom` 字段时，将会使用自定义的一言。
+- 如果两个字段都不存在，将会使用默认的一言。
+
+```ts
+interface Hitokoto {
+  random?: boolean
+  custom?: string
+}
+```
+
+## 自定义脚本 (`config.custom`)
+
+可以配置自定义的 CSS, Script。
+
+### Scripts (`scripts`)
+
+接受一个 [Script](https://nextjs.org/docs/app/api-reference/components/script#props) Props 参数数组。
+
+### Styles (`styles`)
+
+自定义 CSS。接受一个字符串数组。
+
+### JavaScript tag (`js`)
+
+自定义 JS 脚本。接受一个字符串数组。
+
+### CSS href link (`css`)
+
+加载外部 CSS，接受一个 CSS 外部样式表链接数组。
+
+## 模块 (`config.module`)
+
+此部分配置了网站的一些特定功能模块，比如活动跟踪、捐赠支持、社交媒体链接等。
+
+### 实时活动 (`activity`) 模块
+
+- **`enable`**: 控制模块是否启用。
+- **`endpoint`**: 指定活动更新的服务器端点。
+
+**如何使用**: 若需开启活动跟踪功能，将 `enable` 设为 `true` 并设置 `endpoint` 为处理活动数据的服务器地址。
+
+### 捐赠 (`donate`) 模块
+
+- **`enable`**: 控制捐赠模块是否启用。
+- **`link`**: 提供捐赠页面的链接。
+- **`qrcode`**: 提供一或多个捐赠二维码图片的链接。
+
+**如何使用**: 启用捐赠功能，并提供捐赠链接或捐赠二维码，以便支持者可以直接进行捐赠。
+
+### 社交媒体 (`bilibili`) 模块
+
+- **`liveId`**: b 站直播间 ID
+
+### OpenPanel 模块
+
+[OpenPanel](https://openpanel.dev) 是一个开源的网站分析工具。
+
+- **`enable`**: 控制 OpenPanel 功能是否启用。
+- **`id`**: OpenPanel 的 ID。
+- **`url`**: OpenPanel 的访问地址。
+
+**如何使用**: 如果你使用 OpenPanel 进行网站分析，通过这些配置连接并启用面板。
+
+### 文章列表设定 (`posts`)
+
+- **`mode`**: 文章列表的预览模式。可选值：`"loose"`（默认）、`"compact"`
+
+两个模式，紧凑模式和松散模式。
+
+### RSS 配置 (`rss`)
+
+- **`noRSS`**: 设为 `true` 可禁用 RSS 输出。
+- **`custom_elements`**: 自定义 RSS 元素数组。
+
+### 签名动画 (`signature`) 模块
+
+- **`svg`**: 签名的 SVG 代码。
+- **`animated`**: 是否启用动画效果，默认为 `true`。
+
+**如何使用**: SVG 代码可通过 [此网站](https://danmarshall.github.io/google-font-to-svg-path/) 生成。
+
+<Callout type="warning">
+  受限于 JSON 语法规则，SVG 代码需替换所有的 `"` 为 `\"`，否则会报错。
+</Callout>
+
+### OG 图片 (`og`)
+
+- **`avatar`**: 自定义 Open Graph 图片中的头像 URL。
+
+### 订阅 (`subscription`)
+
+- **`tg`**: Telegram 频道链接，用于展示订阅入口。
+
+## 配置示例
+
+```json
+{
+  "footer": {
+    "otherInfo": {
+      "date": "2020-{{now}}",
+      "icp": {
+        "text": "萌 ICP 备 20236136 号",
+        "link": "https://icp.gov.moe/?keyword=20236136"
+      }
+    },
+    "linkSections": [
+      {
+        "name": "关于",
+        "links": [
+          { "name": "关于本站", "href": "/about-site" },
+          { "name": "关于我", "href": "/about" },
+          {
+            "name": "关于此项目",
+            "href": "https://github.com/Innei/Yohaku",
+            "external": true
+          }
+        ]
+      },
+      {
+        "name": "更多",
+        "links": [
+          { "name": "时间线", "href": "/timeline" },
+          { "name": "友链", "href": "/friends" }
+        ]
+      },
+      {
+        "name": "联系",
+        "links": [
+          { "name": "写留言", "href": "/message" },
+          { "name": "GitHub", "href": "https://github.com/innei", "external": true }
+        ]
+      }
+    ]
+  },
+  "config": {
+    "color": {
+      "light": ["#33A6B8", "#FF6666", "#26A69A", "#fb7287", "#69a6cc"],
+      "dark": ["#F596AA", "#A0A7D4", "#ff7b7b", "#99D8CF", "#838BC6"]
+    },
+    "site": {
+      "favicon": "/favicon.svg",
+      "faviconDark": "/favicon-dark.svg"
+    },
+    "hero": {
+      "title": {
+        "template": [
+          { "type": "h1", "text": "Hi, I'm ", "class": "font-light text-4xl" },
+          { "type": "h1", "text": "Name", "class": "font-medium mx-2 text-4xl" },
+          { "type": "h1", "text": "👋。", "class": "font-light text-4xl" },
+          { "type": "br" },
+          { "type": "h1", "text": "A ", "class": "font-light text-4xl" },
+          {
+            "type": "code",
+            "text": "<Developer />",
+            "class": "font-medium mx-2 text-3xl rounded p-1"
+          }
+        ]
+      },
+      "description": "An independent developer coding with love."
+    },
+    "module": {
+      "activity": {
+        "enable": true,
+        "endpoint": "/fn/ps/update"
+      },
+      "donate": {
+        "enable": false,
+        "link": "",
+        "qrcode": []
+      },
+      "bilibili": {
+        "liveId": 0
+      },
+      "openpanel": {
+        "enable": false,
+        "id": "",
+        "url": ""
+      },
+      "posts": {
+        "mode": "loose"
+      },
+      "signature": {
+        "svg": "",
+        "animated": true
+      }
+    }
+  }
+}
+```
+
+<Callout type="info">
+  请注意，这份配置你需要自行修改成符合你需求的内容。更多配置项的信息请参考上方各字段说明。
+
+  配置也可写成 YAML 格式，此时数据类型应选择 `YAML`。
+</Callout>

content/docs/themes/yohaku/index.mdx

@@ -0,0 +1,82 @@
+---
+title: 余白 / Yohaku
+description: Shiro 的设计继承者——以「留白」为核心理念的个人博客视觉体系
+icon: Sparkles
+---
+
+import { ToGithub } from '@/app/components/ToGithub'
+import Image from 'next/image'
+
+<ToGithub repo="Innei/Yohaku" />
+
+## 概述
+
+**Yohaku**（余白）取自日文，意为**留白**。它是 [Shiro](/docs/themes/shiro/deploy) 的设计继承者，基于 Shiro 深度重构而来，延续了「纸的纯净与雪的清新」的设计语言，并在此基础上进一步打磨视觉体验与交互细节。
+
+<Image
+  src="/assets/images/preview/yohaku.png"
+  alt="Yohaku 首页预览"
+  width={1440}
+  height={900}
+  className="rounded-lg border"
+/>
+
+<Image
+  src="/assets/images/preview/yohaku-posts.png"
+  alt="Yohaku 文章列表"
+  width={1440}
+  height={900}
+  className="rounded-lg border mt-4"
+/>
+
+<Image
+  src="/assets/images/preview/yohaku-notes.png"
+  alt="Yohaku 手记页面"
+  width={1440}
+  height={900}
+  className="rounded-lg border mt-4"
+/>
+
+## 开源说明
+
+<Callout type="warn">
+  [Innei/Yohaku](https://github.com/Innei/Yohaku) 仓库为**设计语言的公开存档**，记录视觉规范与设计决策，不包含可运行的完整代码。
+
+  完整的可部署代码以闭源方式维护于私有仓库，**需要赞助后才可获得访问权限**。
+</Callout>
+
+### 如何获取完整实现
+
+1. 前往 [github.com/sponsors/Innei](https://github.com/sponsors/Innei) 赞助
+2. 赞助后通过 [Issues](https://github.com/Innei/Yohaku/issues) 或邮件告知你的 GitHub 用户名
+3. 作者会手动添加私有仓库的访问权限
+
+[![Sponsor](https://img.shields.io/badge/Sponsor-Innei-ea4aaa?logo=github-sponsors&logoColor=white)](https://github.com/sponsors/Innei)
+
+## 设计哲学
+
+整站以**个人书写**为隐喻。页面像一封徐徐展开的信纸，文字与空白共同构成节奏，内容如手帐般自然散落。
+
+- **颜色是克制的** — 浅色模式接近真实纸张的米白，深色模式沉入暖灰
+- **动画是呼吸式的** — 元素随滚动自然浮现，而非弹出
+- **字体是有质感的** — 标题用衬线字体，注释以斜体呈现
+- **交互是低调的** — 悬停时仅颜色微微加深，如纸面被指尖轻触
+
+## 设计规范
+
+| 维度 | 浅色 | 深色 |
+|------|------|------|
+| 强调色 | 浅葱 `#33A6B8` | 桃 `#F596AA` |
+| 背景底色 | `#fefefb`（纸张本白） | `rgb(28,28,30)`（暖灰夜色） |
+| 动效缓动 | `cubic-bezier(0.22, 1, 0.36, 1)` | 同左 |
+| 基础字号 | 14px | 同左 |
+
+## 与 Shiro 的关系
+
+Yohaku 是 Shiro 的下一代演进。如果你正在使用 Shiro，可以继续使用——Shiro 仍然是一个完整的开源主题。Yohaku 在 Shiro 的基础上提供了更精致的视觉设计和更多闭源独有功能。
+
+## 相关链接
+
+- [Innei/Yohaku](https://github.com/Innei/Yohaku) — 开源设计存档
+- [Innei/Shiro](https://github.com/Innei/Shiro) — 开源前身
+- [在线演示](https://innei.in) — 作者的个人博客，使用 Yohaku 驱动