FixItHugo 主题
FixItHugo 主题

代码块扩展语法 - 时间线（Timeline）

Lruihao Lruihao 收录于 主题文档 和 内容管理
  约 1700 字 预计阅读 4 分钟 - 次阅读  
/docs/content-management/timeline-support/featured-image.webp
目录

基础用法

FixIt 0.3.9 | 新增

Timeline 可拆分成多个按照时间戳正序或倒序排列的事件，时间戳和内容是必填项。

一个正序排列的时间线示例：

  • 创建成功
    2024-07-11
  • 通过审核
    2024-07-13
  • 活动按期开始
    2024-07-15
查看源码
```timeline
events:
  - timestamp: 2024-07-11
    content: 创建成功
  - timestamp: 2024-07-13
    content: 通过审核
  - timestamp: 2024-07-15
    content: 活动按期开始
```

一个倒序排列的时间线示例：

  • 活动按期开始
    2024-07-15
  • 通过审核
    2024-07-13
  • 创建成功
    2024-07-11
查看源码
```timeline {reverse=true}
events:
  - timestamp: 2024-07-11
    content: 创建成功
  - timestamp: 2024-07-13
    content: 通过审核
  - timestamp: 2024-07-15
    content: 活动按期开始
```

支持动画

Timeline 支持动画效果，可通过 animation 参数设置是否开启动画。

  • 创建成功
    2024-07-11
  • 通过审核
    2024-07-13
  • 活动按期开始
    2024-07-15
查看源码
```timeline {animation=true}
events:
  - timestamp: 2024-07-11
    content: 创建成功
  - timestamp: 2024-07-13
    content: 通过审核
  - timestamp: 2024-07-15
    content: 活动按期开始
```

⾃定义节点样式

可根据实际场景⾃定义节点尺⼨、颜⾊、类型或者风格。

  • 支持自定义风格
    2024-07-19 20:30
  • 支持自定义颜色
    2024-07-19 20:30
  • 支持自定义尺寸
    2024-07-19 20:30
  • 默认样式的节点
    2024-07-20 20:30
查看源码
```timeline
events:
  - timestamp: 2024-07-19 20:30
    content: 支持自定义风格
    type: primary
    node: dot
  - timestamp: 2024-07-19 20:30
    content: 支持自定义颜色
    color: "#0CBD87"
  - timestamp: 2024-07-19 20:30
    content: 支持自定义尺寸
    size: large
  - timestamp: 2024-07-20 20:30
    content: 默认样式的节点
```

⾃定义时间戳

当内容在垂直⽅向上过⾼时，可将时间戳置于内容之上。

  • 2024-07-19 20:30
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint impedit magni soluta esse placeat facilis porro vitae facere explicabo. Architecto exercitationem accusamus omnis reiciendis beatae et inventore deserunt sequi recusandae.
  • 2024-07-19 20:30
    Id amet sapiente quod temporibus molestiae? Quasi officia placeat magnam sapiente! Esse iure ipsam quia laboriosam dolorem at dolor est porro placeat, sequi magni maxime vel sint architecto. Placeat, laboriosam?
  • 2024-07-19 20:30
    Expedita delectus rerum vitae consequuntur quam, tempore fugit debitis voluptatem praesentium maiores dolorem possimus illum adipisci facere veniam voluptatibus aliquam ipsa ducimus nam impedit cumque! Rerum molestias praesentium expedita! Itaque.
查看源码
```timeline {placement=top}
events:
  - timestamp: 2024-07-19 20:30
    content: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint impedit magni soluta esse placeat facilis porro vitae facere explicabo. Architecto exercitationem accusamus omnis reiciendis beatae et inventore deserunt sequi recusandae.
  - timestamp: 2024-07-19 20:30
    content: Id amet sapiente quod temporibus molestiae? Quasi officia placeat magnam sapiente! Esse iure ipsam quia laboriosam dolorem at dolor est porro placeat, sequi magni maxime vel sint architecto. Placeat, laboriosam?
  - timestamp: 2024-07-19 20:30
    content: Expedita delectus rerum vitae consequuntur quam, tempore fugit debitis voluptatem praesentium maiores dolorem possimus illum adipisci facere veniam voluptatibus aliquam ipsa ducimus nam impedit cumque! Rerum molestias praesentium expedita! Itaque.
```

支持 MD/HTML

内容支持 Markdown 或者 HTML 格式。

  • 🎉 Feat: add timeline support for code blocks
    2024-07-20T22:28:19+08:00
  •  Half a year later…
  • 🔖 Chore(release): 0.3.0
    2024-01-01T14:54:19+08:00
  • ⬆️ Chore: update 0.2.11
    2021-12-19T19:48:23+08:00
  •  Developed for a long time…
  • Feat: LoveIt => FixIt
    2021-12-18T16:15:22+08:00
查看源码
```timeline {reverse=true}
events:
  - timestamp: 2021-12-18T16:15:22+08:00
    content: "Feat: [LoveIt](https://github.com/dillonzq/LoveIt) => [FixIt](https://github.com/hugo-fixit/FixIt)"
    type: primary
  - timestamp: 2021-12-19T19:48:23+08:00
    content: ":arrow_up: Chore: update 0.2.11"
  - timestamp: 2021-12-19T19:48:23+08:00
    content: "<span class=\"text-secondary\">:(fa-regular fa-comment-dots): Developed for a long time...</span>"
    hideTimestamp: true
    type: secondary
  - timestamp: 2024-01-01T14:54:19+08:00
    content: ":bookmark: Chore(release): 0.3.0"
    type: success
  - timestamp: 2024-05-20T14:54:19+08:00
    content: "<span class=\"text-secondary\">:(fa-regular fa-comment-dots): Half a year later...</span>"
    hideTimestamp: true
    type: secondary
  - timestamp: 2024-07-20T22:28:19+08:00
    content: ":tada: Feat: add timeline support for code blocks"
    type: danger
```

多种格式支持

数据支持 JSON、YAML、TOML 三种格式。

一个 JSON 格式的时间线示例：

  • 创建成功
    2024-07-11
  • 通过审核
    2024-07-13
  • 活动按期开始
    2024-07-15
查看源码
```timeline
{
  "events": [
    {
      "timestamp": "2024-07-11",
      "content": "创建成功"
    },
    {
      "timestamp": "2024-07-13",
      "content": "通过审核"
    },
    {
      "timestamp": "2024-07-15",
      "content": "活动按期开始"
    }
  ]
}
```

一个 YAML 格式的时间线示例：

  • 创建成功
    2024-07-11
  • 通过审核
    2024-07-13
  • 活动按期开始
    2024-07-15
查看源码
```timeline
events:
  - timestamp: 2024-07-11
    content: 创建成功
  - timestamp: 2024-07-13
    content: 通过审核
  - timestamp: 2024-07-15
    content: 活动按期开始
```

一个 TOML 格式的时间线示例：

  • 创建成功
    2024-07-11
  • 通过审核
    2024-07-13
  • 活动按期开始
    2024-07-15
查看源码
```timeline
[[events]]
timestamp = "2024-07-11"
content = "创建成功"

[[events]]
timestamp = "2024-07-13"
content = "通过审核"

[[events]]
timestamp = "2024-07-15"
content = "活动按期开始"
```

Data 数据

FixIt 0.3.20 | 新增

支持从 Hugo 站点数据 中获取数据，数据文件定义在 data/timeline 目录下，格式支持 JSON、YAML、TOML 格式。

例如，定义有 data/timeline/example.yml 文件，你可以 使用 data 参数来引用：

1
2

```timeline {data="example"}
```

呈现的输出效果如下：

  • 创建成功
    2024-07-11
  • 通过审核
    2024-07-13
  • 活动按期开始
    2024-07-15

File 数据

FixIt 0.3.20 | 新增

支持从 Hugo 页面资源 或 assets 中的文件获取数据，格式支持 JSON、YAML 或 TOML 格式。

例如，当前页面结构如下：

1
2
3
4
5

timeline/
├── data/
│   └── example.yml
├── featured-image.webp
└── index.md

你可以使用 file 参数来从文件中获取数据：

1
2

```timeline {file="data/example.yml"}
```

呈现的输出效果如下：

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

参数配置

Timeline

参数说明类型可选值默认值
reverse指定节点排序方向，默认为正序boolean-false
placement时间戳位置stringtop / bottombottom
animation是否开启动画boolean-false
size节点尺寸stringsmall / medium / largemedium
node节点风格stringcircle / dotcircle
width容器宽度string--
height容器高度string--
class容器类名string--

Timeline Events

参数说明类型可选值默认值
必需timestamp时间戳string--
必需content内容string--
可选hideTimestamp是否隐藏时间戳boolean-false
可选placement时间戳位置stringtop / bottombottom
可选color节点颜色stringhsl / hsv / hex / rgb-
可选type节点类型stringprimary / secondary / success / info / warning / danger-
可选size节点尺寸stringsmall / medium / largemedium
可选node节点风格stringcircle / dotcircle

相关内容

收录于 合集・内容管理 9
更新于 2026-08-19 0cc6cb1
CC BY-NC-SA 4.0
阅读原始文档查看源码编辑此页报告问题
Timeline图表Markdown内容
返回 | 主页
Buy me a coffee
Lruihao 支付宝支付宝
Lruihao 微信微信
切换 选择 ESC 关闭
搜索引擎 algolia

发现新版本

当前站点有新版本可用。