目录 (TOC) 与标题层级

本章节测试 H2/H3/H4 标题层级在目录中的折叠、展开与滚动高亮。

三级标题 A — 手风琴展开

点击上方的 H2 标题应该能折叠/展开此 H3 子项。滚动时当前活跃的标题应在 TOC 中高亮。

三级标题 B — 滚动高亮同步

向下滚动时,TOC 中的活跃项应跟随变化,并自动滚动到可视区域内。

四级标题 — 不在 TOC 中

四级标题不会出现在 TOC 中(max_depth:3),但会正常渲染在文章正文中。

三级标题 C — 长标题测试测试测试测试测试测试测试测试测试

测试长标题在 TOC 中的截断与 tooltip 显示。

代码高亮与复制按钮

行内代码

使用 const x = () => {} 这样的反引号包裹行内代码。

JavaScript — 带行号与复制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/**
 * 异步数据获取器
 */
async function fetchData(url, options = {}) {
  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), 5000);
  try {
    const res = await fetch(url, { ...options, signal: controller.signal });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error("[fetchData]", err.message);
    return null;
  } finally {
    clearTimeout(timeout);
  }
}

fetchData("/api/posts").then(data => {
  console.log(`Loaded ${data.length} posts`);
});

TypeScript — 类型标注

1
2
3
4
5
6
7
8
9
10
11
12
13

interface ThemeConfig {
  brand: { text: string; accent_char: string };
  features: Record<string, boolean>;
}

function applyAccent(hex: string): void {
  document.documentElement.style.setProperty("--accent", hex);
}

const config: ThemeConfig = {
  brand: { text: "R1d3rZzz", accent_char: "d" },
  features: { loading_screen: true, cursor_glow: true }
};

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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";
    let counts = word_count(text);
    println!("{:?}", counts);
}

Python

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

from dataclasses import dataclass
from typing import List, Optional

@dataclass
class Article:
    title: str
    tags: List[str]
    year: int
    cover: Optional[str] = None

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

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

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

CSS — 主题变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14

:root {
  --bg: #0a0a0f;
  --surface: #12121a;
  --fg: #e8e8ec;
  --accent: #00ff88;
  --accent-dim: rgba(0, 255, 136, 0.12);
}

[data-theme="light"] {
  --bg: #f8f9fb;
  --surface: #ffffff;
  --fg: #1a1d21;
  --accent: #0969da;
}

Bash — 部署脚本

1
2
3
4
5
6
7
8
9
10
11
12
13

#!/bin/bash
set -euo pipefail

echo "→ 清理旧文件"
hexo clean

echo "→ 生成静态文件"
hexo generate

echo "→ 部署"
hexo deploy

echo "✅ 完成"

JSON

1
2
3
4
5
6
7
8
9
10

{
  "name": "r1d3rzzz-hexo-theme",
  "version": "1.0.0",
  "features": {
    "loading_screen": true,
    "cursor_glow": true,
    "katex": true,
    "mermaid": true
  }
}

无语言标记

1
2

纯文本块,无语言标识。
渲染时有复制按钮,但无语言标签。

数学公式 (KaTeX)

行内公式

质能方程 $E = mc^2$。欧拉恒等式 $e^{i\pi} + 1 = 0$。求根公式 $x = rac{-b \pm \sqrt{b^2 - 4ac}}{2a}$。

块级公式 — 高斯积分

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

块级公式 — 麦克斯韦方程组

$$$
egin{aligned}

abla \cdot \mathbf{E} &= rac{
ho}{arepsilon_0}
abla \cdot \mathbf{B} &= 0
abla imes \mathbf{E} &= -rac{\partial \mathbf{B}}{\partial t}
abla imes \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 arepsilon_0 rac{\partial \mathbf{E}}{\partial t}
\end{aligned}
$$$

块级公式 — 矩阵

$$$
egin{pmatrix} a & b \ c & d \end{pmatrix}
egin{pmatrix} x \ y \end{pmatrix} =
egin{pmatrix} ax + by \ cx + dy \end{pmatrix}
$$$

Mermaid 图表

流程图

1
2
3
4
5
6
7
8

graph TD
    A[用户访问] --> B{首次访问?}
    B -->|是| C[Loading 动画]
    B -->|否| D[直接渲染]
    C --> D
    D --> E[浏览文章]
    E --> F[点击文章]
    F --> G[TOC 高亮]

时序图

1
2
3
4
5
6
7
8
9
10
11
12

sequenceDiagram
    participant B as 浏览器
    participant C as CDN
    participant S as 服务器
    B->>C: 请求 main.js
    alt 缓存命中
        C-->>B: 304
    else 未命中
        C->>S: 回源
        S-->>C: 200
        C-->>B: 资源
    end

状态图

1
2
3
4
5
6

stateDiagram-v2
    [*] --> 加载中
    加载中 --> 渲染完成: 就绪
    渲染完成 --> 交互: DOM 可操作
    交互 --> 隐藏: 切标签
    隐藏 --> 交互: 返回

甘特图

1
2
3
4
5
6
7
8
9

gantt
    title 开发时间线
    dateFormat  YYYY-MM-DD
    section 核心
    SEO :done, 2026-06-10, 1d
    配置 :done, 2026-06-10, 1d
    section 视觉
    主题切换 :active, 2026-06-12, 2d
    移动端 :2026-06-14, 3d

饼图

1
2
3
4
5

pie title 使用频率
    "文章" : 45
    "代码" : 25
    "公式" : 15
    "图表" : 15

提示框 (Note)

引用块

单行

代码是写给人看的,附带能被机器执行。 — Harold Abelson

多行

简单是复杂的最高级形式。

不要过早优化。

先让它工作,再让它正确,最后让它快。

嵌套

第一层

第二层

第三层

表格

基础

宽表格

列表

无序(嵌套)

• Hexo
  • EJS 模板
  • Markdown 渲染
    • remark
    • markdown-it
• 特性
  • Loading 动画
  • 光标光晕
  • 主题切换

有序(嵌套)

1. 准备
   1. Node.js
   2. Hexo CLI
2. 初始化
   1. hexo init
   2. npm install

任务

• SEO
• 配置
• XSS
• 性能

图片(懒加载+灯箱)

文本格式

链接

• Hexo
• GitHub

强调

加粗 | 斜体 | 粗斜体 | 删除线

上标 mc² | 下标 H₂O

按键

Ctrl+K 搜索 | Esc 关闭

分割线

中文排版

「引号」、《书名号》、——破折号、……省略号。

多语言: 你好 | こんにちは | 안녕하세요 | Hello

Emoji: 🚀 ✨ 🎉 🐛 🔧 💡

特殊字符

箭头: → ← ↑ ↓

数学: ∑ ∏ ∫ √ ∞ ≈ ≠ ≤ ≥

结语

测试完成。底部应显示版权、导航、进度条。

感谢! 🎉

目录与标题层级

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

三级标题 A

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

三级标题 B

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

四级标题

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

代码高亮与复制

行内代码

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

JavaScript 代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/**
 * 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 代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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 代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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)

流程图

1
2
3
4
5
6
7
8

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

时序图

1
2
3
4
5
6
7
8
9
10
11
12

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

甘特图

1
2
3
4
5
6
7
8
9
10

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)

引用 (Blockquote)

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

— Harold Abelson

多行引用测试：

第一段落。

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

表格

列表

无序列表

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

有序列表

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

图片（懒加载 + 灯箱）

点击图片放大查看：

第二张图片：

分割线

上面是内容 A。

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

链接与强调

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

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

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

中文与特殊字符

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

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

Emoji：🚀 ✨ 🎉 🐛 🔧

结尾

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