测试 TimelineShortcodes

这篇文章用来检查本站的 Timeline 时间线代码块。下面会覆盖排序、位置、动画、节点样式、事件类型、隐藏时间戳和外部数据文件，方便以后调整样式或解析逻辑时快速确认效果。

默认时间线

默认按 timestamp 升序排列，时间显示在内容下方。

源码：

md
```timeline
events:
  - timestamp: 2024-07-13
    content: Approved
  - timestamp: 2024-07-11
    content: Success
  - timestamp: 2024-07-15
    content: Event start
```

效果：

  • Success
    2024-07-11
  • Approved
    2024-07-13
  • Event start
    2024-07-15

反向排序

源码：

md
```timeline {reverse=true}
events:
  - timestamp: 2024-07-13
    content: Approved
  - timestamp: 2024-07-11
    content: Success
  - timestamp: 2024-07-15
    content: Event start
```

效果：

  • Event start
    2024-07-15
  • Approved
    2024-07-13
  • Success
    2024-07-11

时间在上方

源码：

md
```timeline {placement=top}
events:
  - timestamp: 2025-01-01
    content: 新年计划确认
  - timestamp: 2025-02-14
    content: 阶段性复盘
```

效果：

  • 新年计划确认
    2025-01-01
  • 阶段性复盘
    2025-02-14

动画和节点样式

源码：

md
```timeline {animation=true size=large node=dot}
events:
  - timestamp: 2025-03-01
    content: 大号实心节点
  - timestamp: 2025-03-08
    content: 单个事件可以覆盖为小号空心节点
    size: small
    node: circle
```

效果：

  • 大号实心节点
    2025-03-01
  • 单个事件可以覆盖为小号空心节点
    2025-03-08

事件类型和颜色

源码：

md
```timeline
events:
  - timestamp: 2025-04-01
    content: 信息节点
    type: info
  - timestamp: 2025-04-02
    content: 成功节点
    type: success
  - timestamp: 2025-04-03
    content: 警告节点
    type: warning
  - timestamp: 2025-04-04
    content: 自定义颜色节点
    color: "#8a5cf6"
```

效果：

  • 信息节点
    2025-04-01
  • 成功节点
    2025-04-02
  • 警告节点
    2025-04-03
  • 自定义颜色节点
    2025-04-04

Markdown 内容

content 支持轻量 Markdown：链接、加粗、斜体、行内代码和换行。

源码：

md
```timeline
events:
  - timestamp: 2025-05-01
    content: "**发布** `timeline` 功能"
  - timestamp: 2025-05-02
    content: |
      支持多行内容。
      可以访问 [晴空小筑](/)。
```

效果：

  • 发布 timeline 功能
    2025-05-01
  • 支持多行内容。
    可以访问 晴空小筑。
    2025-05-02

隐藏时间戳

源码：

md
```timeline
events:
  - timestamp: 2025-06-01
    content: 这个事件不显示时间戳
    hideTimestamp: true
  - timestamp: 2025-06-02
    content: 这个事件正常显示
```

效果：

  • 这个事件不显示时间戳
  • 这个事件正常显示
    2025-06-02

JSON 数据

源码：

md
```timeline
{
  "events": [
    { "timestamp": "2025-07-01", "content": "JSON 事件 A", "type": "info" },
    { "timestamp": "2025-07-02", "content": "JSON 事件 B", "node": "dot" }
  ]
}
```

效果：

  • JSON 事件 A
    2025-07-01
  • JSON 事件 B
    2025-07-02

TOML 数据

源码：

md
```timeline
[[events]]
timestamp = "2025-08-01"
content = "TOML 事件 A"
type = "success"


[[events]]
timestamp = "2025-08-02"
content = "TOML 事件 B"
node = "dot"
```

效果：

  • TOML 事件 A
    2025-08-01
  • TOML 事件 B
    2025-08-02

外部文件

源码：

md
```timeline {file=events.yaml}
```

效果：

Timeline: events is empty.

空数据错误态

源码：

md
```timeline
events: []
```

效果：

Timeline: events is empty.