全功能测试文章

这是一篇用于全面测试 R1d3rZzz 主题所有文章页功能的演示文章。涵盖目录、代码高亮、数学公式、Mermaid 图表、提示框、表格、图片灯箱、列表、引用等全部元素。

目录 (TOC) 与标题层级

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

三级标题 A — 手风琴展开

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

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

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

四级标题 — 不在 TOC 中

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

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

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

---

代码高亮与复制按钮

行内代码

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

JavaScript — 带行号与复制

/**
 * 异步数据获取器
 */
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 — 类型标注

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

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

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 — 主题变量

: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 — 部署脚本

#!/bin/bash
set -euo pipefail

echo "→ 清理旧文件"
hexo clean

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

echo "→ 部署"
hexo deploy

echo "✅ 完成"

JSON

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

无语言标记

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

---

数学公式 (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 图表

流程图

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

时序图

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

状态图

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

甘特图

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

饼图

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

---

提示框 (Note)

ℹ️ 信息

主题色会随用户选择变化。支持 inline code。

✅ 成功

构建成功,所有文件已生成。

⚠️ 警告

直接修改主题源码会导致升级时丢失。请使用 theme_config: 覆盖。

🚫 危险

不要在生产环境执行未经审计的脚本。

---

引用块

单行

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

多行

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

不要过早优化。

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

嵌套

第一层

第二层

第三层

---

表格

基础

功能	状态	优先级
SEO	✅ 完成	P0
配置	✅ 完成	P0
XSS	✅ 完成	P1
TOC	✅ 完成	P1
主题	✅ 完成	P0
KaTeX	✅ 支持	P2
Mermaid	✅ 支持	P2

宽表格

A	B	C	D	E	F
a1	b1	c1	d1	e1	f1
a2	b2	c2	d2	e2	f2

---

列表

无序(嵌套)

• 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: 🚀 ✨ 🎉 🐛 🔧 💡

---

特殊字符

箭头: → ← ↑ ↓

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

---

结语

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

感谢! 🎉