Code Fences Extended - Timeline

Lruihao included in Documentation and Content Management

2024-07-20 2026-08-19 About 1000 words 5 minutes - views

/docs/content-management/timeline-support/featured-image.webp

Contents

Basic Usage

Timeline can be split into multiple events in ascending or descending. Timestamp and content are required fields.

An example of a Timeline arranged in ascending order:

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

View source

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

An example of a Timeline arranged in descending order:

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

View source

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

Animation Support

Timeline supports animation, and you can enable or disable it using the animation parameter.

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

View source

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

Custom node

Size, color, type and style can be customized in node.

Custom type and style
2024-07-19 20:30
Custom color
2024-07-19 20:30
Custom size
2024-07-19 20:30
Default node
2024-07-20 20:30

View source

```timeline
events:
  - timestamp: 2024-07-19 20:30
    content: Custom type and style
    type: primary
    node: dot
  - timestamp: 2024-07-19 20:30
    content: Custom color
    color: "#0CBD87"
  - timestamp: 2024-07-19 20:30
    content: Custom size
    size: large
  - timestamp: 2024-07-20 20:30
    content: Default node
```

Custom timestamp

Timestamp can be placed on top of content when content is too high.

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.

View source

```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 Support

Markdown or HTML format is supported in content.

🎉 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

View source

```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
```

Multiple Formats

The Timeline data supports three formats: JSON, YAML, and TOML.

Example Timeline input in JSON format:

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

View source

```timeline
{
  "events": [
    {
      "timestamp": "2024-07-11",
      "content": "Success"
    },
    {
      "timestamp": "2024-07-13",
      "content": "Approved"
    },
    {
      "timestamp": "2024-07-15",
      "content": "Event start"
    }
  ]
}
```

Example Timeline input in YAML format:

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

View source

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

Example Timeline input in TOML format:

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

View source

```timeline
[[events]]
timestamp = "2024-07-11"
content = "Success"

[[events]]
timestamp = "2024-07-13"
content = "Approved"

[[events]]
timestamp = "2024-07-15"
content = "Event start"
```

Hugo Data

Support obtaining data from Hugo site data, with data files defined in the data/timeline directory, and the format supports JSON, YAML, and TOML.

For example, if you have a file data/timeline/example.yml, you can use the data parameter to reference it:

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

The rendered output looks like this:

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

File Data

Supports getting data from files in Hugo page-resources or assets, and the format supports JSON, YAML or TOML format.

For example, the current page structure is as follows:

1
2
3
4
5
timeline/
├── data/
│   └── example.yml
├── featured-image.webp
└── index.md

You can use the file parameter to get data from the file:

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

The rendered output looks like this:

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

Parameters

Timeline

Parameter	Description	Type	Optional values	Default
reverse	whether the node is ascending or descending, default is ascending	boolean	-	false
placement	position of timestamp	string	top / bottom	bottom
animation	whether to enable animation	boolean	-	false
size	node size	string	small / medium / large	medium
node	node style	string	circle / dot	circle
width	container width	string	-	-
height	container height	string	-	-
class	container classname	string	-	-

Timeline Events

	Parameter	Description	Type	Optional values	Default
required	timestamp	timestamp	string	-	-
required	content	content	string	-	-
optional	hideTimestamp	whether to hide timestamp	boolean	-	false
optional	placement	position of timestamp	string	top / bottom	bottom
optional	color	node color	string	hsl / hsv / hex / rgb	-
optional	type	node type	string	primary / secondary / success / info / warning / danger	-
optional	size	node size	string	small / medium / large	medium
optional	node	node style	string	circle / dot	circle

Code Fences Extended - Timeline

Basic Usage

Animation Support

Custom node

Custom timestamp

MD/HTML Support

Multiple Formats

Hugo Data

File Data

Parameters

Timeline

Timeline Events

Related Content

Navigation