这是一篇用于测试 R1d3rZzz 主题所有文章页功能的综合示例。包括目录、代码高亮、数学公式、图表、提示框、表格、图片等常见元素。

目录与标题层级

本章节测试 H2/H3 标题层级是否在目录（TOC）中正确折叠与高亮。

三级标题 A

这是第一个三级标题。TOC 应该显示它作为 “目录与标题层级” 的子项。

三级标题 B

第二个三级标题，用于测试手风琴展开与滚动高亮同步。

四级标题

四级标题不会出现在 TOC 中（toc max_depth=3），但会出现在文章正文中。

代码高亮与复制

行内代码

这是一段 inline code 示例，使用反引号包裹。

JavaScript 代码块

/**
 * Fibonacci 序列生成器
 * @param {number} n - 要生成的项数
 * @returns {number[]} Fibonacci 数组
 */
function fibonacci(n) {
  if (n <= 0) return [];
  if (n === 1) return [0];
  const seq = [0, 1];
  for (let i = 2; i < n; i++) {
    seq.push(seq[i - 1] + seq[i - 2]);
  }
  return seq;
}

console.log(fibonacci(10));
// => [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Rust 代码块

use std::collections::HashMap;

fn word_count(text: &str) -> HashMap<&str, usize> {
    let mut map = HashMap::new();
    for word in text.split_whitespace() {
        *map.entry(word).or_insert(0) += 1;
    }
    map
}

fn main() {
    let text = "hello world hello rust hello";
    let counts = word_count(text);
    println!("{:?}", counts);
}

Python 代码块

from dataclasses import dataclass
from typing import List

@dataclass
class Article:
    title: str
    tags: List[str]
    year: int

    def describe(self) -> str:
        return f"{self.title} ({self.year}) — {', '.join(self.tags)}"

articles = [
    Article("Hello World", ["Hexo", "入门"], 2026),
    Article("功能测试", ["测试", "Markdown"], 2026),
]

for a in articles:
    print(a.describe())

无语言标记的纯文本块

1
2
3

This is a plain text block without a language identifier.
It should still render in a code-box with a copy button,
but without a language label in the header.

数学公式 (KaTeX)

行内公式

爱因斯坦质能方程 $E = mc^2$ 是物理学中最著名的公式之一。欧拉恒等式 $e^{i\pi} + 1 = 0$ 被誉为最美的数学公式。

块级公式

高斯积分：

$$
\int_{-\infty}^{+\infty} e^{-x^2} , dx = \sqrt{\pi}
$$

麦克斯韦方程组（微分形式）：

$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \
\nabla \cdot \mathbf{B} &= 0 \
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \
\nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}
\end{aligned}
$$

矩阵乘法：

$$
\begin{pmatrix}
a & b \
c & d
\end{pmatrix}
\begin{pmatrix}
x \
y
\end{pmatrix}

\begin{pmatrix}
ax + by \
cx + dy
\end{pmatrix}
$$

图表 (Mermaid)

流程图

graph TD
    A[访问首页] --> B{是否首次访问?}
    B -->|是| C[显示 Loading 动画]
    B -->|否| D[直接渲染内容]
    C --> D
    D --> E[浏览文章列表]
    E --> F[点击进入文章]
    F --> G[阅读 TOC 高亮]

时序图

sequenceDiagram
    participant 浏览器
    participant 服务器
    participant 缓存
    浏览器->>缓存: 查询静态资源
    alt 缓存命中
        缓存-->>浏览器: 返回资源
    else 缓存未命中
        缓存->>服务器: 请求资源
        服务器-->>缓存: 返回资源+TTL
        缓存-->>浏览器: 返回资源
    end

甘特图

gantt
    title R1d3rZzz 主题开发计划
    dateFormat  YYYY-MM-DD
    section 核心功能
    SEO 元数据       :done, 2026-06-10, 1d
    配置扩展机制     :done, 2026-06-10, 1d
    XSS 修复         :done, 2026-06-11, 1d
    section 视觉改进
    明暗主题切换     :active, 2026-06-12, 2d
    移动端优化       :2026-06-14, 3d

提示框 (Note Blocks)

Info 信息

这是一条信息提示。使用 <div class="note note-info"> 包裹内容。

Success 成功

构建成功！所有 12 个文件已生成，没有错误。

Warning 警告

直接修改主题目录下的配置文件会导致升级时丢失。请使用 theme_config: 在站点配置中覆盖。

Danger 危险

不要在生产环境执行未经审计的脚本。XSS 攻击可能通过文章标题注入 <script> 标签。

引用 (Blockquote)

代码是写给人看的，附带能被机器执行。

— Harold Abelson

多行引用测试：

第一段落。

第二段落。引用块应该在滚动进入视口时触发左侧光晕扩散动画。

表格

功能	状态	优先级	备注
SEO 元数据	✅ 完成	P0	含 JSON-LD
配置覆盖	✅ 完成	P0	`theme_config:`
XSS 修复	✅ 完成	P2	`json_safe()`
TOC 手风琴	✅ 完成	-	桌面+移动
Mermaid 图表	✅ 支持	-	主题切换时重渲染
KaTeX 公式	✅ 支持	-	auto-render
图片灯箱	✅ 支持	-	medium-zoom

列表

无序列表

Hexo 静态站点生成器
- EJS 模板
- Markdown 渲染
- Stylus 样式
主题特性
- 科幻风 Loading
- 光标跟随光晕
- 活跃度日历

有序列表

安装 Hexo CLI
初始化博客
安装并启用 R1d3rZzz 主题
配置 theme_config 覆盖默认项
部署到服务器

图片（懒加载 + 灯箱）

点击图片放大查看：

示例图片

第二张图片：

示例图片 2

分割线

上面是内容 A。

下面是内容 B。分割线用 * * * 装饰。

链接与强调

这是 Hexo 官网的外链，会自动以 target="_blank" 打开。

这是 加粗文本，这是 斜体文本，这是 加粗斜体。

这是 ~~删除线文本~~（如果 markdown 渲染器支持）。

中文与特殊字符

测试中文标点：「引号」、「书名号《》」、——破折号、……省略号。

CJK 兼容：你好世界、こんにちは、안녕하세요。

Emoji：🚀 ✨ 🎉 🐛 🔧

结尾

本文到此结束。文章底部应显示版权信息、上下篇导航以及 TOC 滚动高亮。