# y7.hk 现代工程文章渲染解剖

> 对 y7 阅读引擎的压力测试：callout 提示块、diff 代码块、KaTeX 公式、圆形头像视频、figure 图库、折叠剧透和字体切换器。
>
> 2026-10-15 — y7.hk

import AvatarVideo from "@/components/AvatarVideo.astro";

这篇文章汇集了文章渲染引擎的**所有**视觉、排版与媒体能力。

---

## 1. 提示块与旁注（Callouts）

提示块遵循网站整体的单色风格 — 干净的内嵌块，没有红绿灯式的彩色边框：

  注意
  使用柔和的半透明 --muted 背景和系统边框。与排版融为一体，不会分散阅读注意力。

  开发者提示
  右上角的 Aa Serif 按钮可切换为 Georgia 衬线字体，适合长文阅读。该设置会自动保存在浏览器中。

## 2. 图像与媒体

  <img 
    src="/og.png" 
    alt="y7 设计系统架构" 
    width="1200"
    height="630"
    loading="lazy"
    decoding="async"
    class="w-full h-auto rounded-2xl border border-border shadow-md transition-all hover:scale-[1.01]" 
  />
  图 1. OpenGraph 生成与 y7.hk 视觉系统（Geist Sans + OKLCH）

### 双栏对比（媒体网格）
用于对比"修改前"与"修改后"界面的双图网格：

    方案 A：旧的扁平风格
    方案 B：新版 Linear 风格

### 作者实时头像视频
集成在卡片界面中的圆形视频组件：

      Yakushev Hermann
      Product Engineer · Southeast Asia
    /me.mp4
---

## 3. 代码、Diff 补丁与终端

### 重构 Diff 补丁
新增行以柔和的祖母绿高亮，删除行以柔和的暗红色高亮：

```diff
  export async function handleRequest(req: Request): Promise<Response> {
-   const legacyToken = req.headers.get("x-legacy-token");
-   if (!legacyToken) return new Response("Unauthorized", { status: 401 });
+   const authSession = await verifyAgentSession(req);
+   if (!authSession.valid) {
+     return Response.json({ error: "Session expired" }, { status: 403 });
+   }

    return await processWorkflow({
-     mode: "sync",
+     mode: "streaming-duplex",
      timeout: 30000,
    });
  }
```

### 终端命令（Bash）
`$ ` 提示符不会被复制到剪贴板，这归功于 `user-select: none` 选择器：

```bash
git clone https://github.com/yakushev/Y.git && cd Y
npm install
npm run build
```

---

## 4. 数学与 KaTeX 公式

### 展示公式（Display Math）
复杂公式在移动端支持横向滚动渲染：

$$
\mathcal{L}_{\text{total}} = \alpha \cdot \mathbb{E}_{x \sim p_{\text{data}}}\left[\log D(x)\right] + \beta \cdot \sum_{i=1}^{N} \left\| \nabla_x f(x_i) \right\|_2^2
$$

Transformer 注意力公式[^1]：

$$
\text{Attention}(Q, K, V) = \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right)V
$$

### 行内公式
正文中直接嵌入数学符号和方程：$e^{i\pi} + 1 = 0$、矩阵乘法 $A \times B \in \mathbb{R}^{m \times p}$，以及梯度范数 $\|\nabla \theta\| \le \epsilon$。

---

## 5. 支持滚动的表格

表格会自动包裹在自适应滚动容器中，在手机上也能保持可读性：

| 方法 / 技术 | 响应速度 | 复杂度 | 2026 年状态 |
| :--- | :--- | :--- | :--- |
| **Astro 7 SSG** | `< 20ms`（边缘 CDN） | 低 | 已在生产环境 |
| **React 19 Islands** | 局部水合 | 中 | 活跃 |
| **OKLCH Tokens** | 即时（CSS） | 最小 | 标准 |
| **Web Audio API** | 零延迟 | 低 | 已启用 |

---

## 6. 可折叠剧透（``）

用于隐藏日志或可选片段的交互式手风琴：

  显示完整的 LLM 响应 JSON 负载
    模型结构化输出示例：
    
```json
{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "模式验证成功。"
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}
```

  系统要求与环境
    Node.js ≥ 22.0.0 或 Bun ≥ 1.1
    支持 OKLCH 色彩的现代浏览器
    构建内存：约 250 MB RAM

---

## 7. 清单与快捷键

Markdown 格式的任务列表：

- [x] 已配置彩色 callout 支持
- [x] 已实现 diff 代码高亮
- [x] 已集成 KaTeX 数学公式
- [x] 已添加衬线 / 无衬线切换器
- [x] 已为媒体文件添加 `` 样式
- [ ] 计划添加交互式 3D canvas 场景

控制快捷键：
- 按 ⌘ + K 打开全局搜索。
- 按 ~ 调出控制台。
- 按 Esc 关闭任何弹窗。

---

## 8. 带署名的引用

> 设计不只是外观和感觉，设计是它如何运作。
> 史蒂夫·乔布斯

---

## 9. 学术脚注

正文中带有 Transformer 原始论文的引用[^2]。点击脚注编号会立即跳转到页面底部的脚注栏，点击 ↩ 返回图标即可精确回到阅读位置。

[^1]: 注意力机制是现代大语言模型（LLM）架构的关键组成部分。
[^2]: Vaswani et al., "Attention Is All You Need", NIPS 2017。