feat(timeline): support markdown content

This commit is contained in:
ZhenShuo Leo
2025-09-07 08:46:39 +08:00
parent 9cc808ea93
commit e355715a3b
5 changed files with 17 additions and 8 deletions

View File

@@ -720,6 +720,7 @@ The `timeline` creates a visual timeline that can be used in different use-cases
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
| Parameter | Description | | Parameter | Description |
| ----------- | -------------------------------------------- | | ----------- | -------------------------------------------- |
| `md` | render the content as Markdown (true/false) |
| `icon` | the icon to be used in the timeline visuals. | | `icon` | the icon to be used in the timeline visuals. |
| `header` | header for each entry | | `header` | header for each entry |
| `badge` | text to place within the top right badge | | `badge` | text to place within the top right badge |

View File

@@ -717,6 +717,7 @@ B-->C[利益]
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
| パラメータ | 説明 | | パラメータ | 説明 |
| ----------- | -------------------------------------------- | | ----------- | -------------------------------------------- |
| `md` | コンテンツを Markdown としてレンダリングする (true/false) |
| `icon` | タイムラインのビジュアルで使用するアイコン | | `icon` | タイムラインのビジュアルで使用するアイコン |
| `header` | 各エントリのヘッダーー | | `header` | 各エントリのヘッダーー |
| `badge` | 右上のバッジ内に配置するテキスト | | `badge` | 右上のバッジ内に配置するテキスト |

View File

@@ -728,7 +728,8 @@ The `timeline` creates a visual timeline that can be used in different use-cases
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
| Parameter | Description | | Parameter | Description |
| ----------- | -------------------------------------------- | | ----------- | -------------------------------------------- |
| `icon` | the icon to be used in the timeline visuals. | | `md` | render the content as Markdown (true/false) |
| `icon` | the icon to be used in the timeline visuals |
| `header` | header for each entry | | `header` | header for each entry |
| `badge` | text to place within the top right badge | | `badge` | text to place within the top right badge |
| `subheader` | entry's subheader | | `subheader` | entry's subheader |

View File

@@ -728,12 +728,13 @@ B-->C[Profit]
`timeline` 创建了一个可视化时间线,用于展示专业经验、项目成就等。 `timeline` 简码依赖于 `timelineItem` 子简码来定义主时间线中的每个项目。每个项目可以具有以下属性。 `timeline` 创建了一个可视化时间线,用于展示专业经验、项目成就等。 `timeline` 简码依赖于 `timelineItem` 子简码来定义主时间线中的每个项目。每个项目可以具有以下属性。
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
| 参数 | 功能 | | 参数 | 功能 |
| ----------- | ------------------------ | | ----------- | ----------------------------------- |
| `icon` | 要在时间线中使用的图标。 | | `md` | 将内容渲染为 Markdown (true/false) |
| `header` | 每个条目的标题 | | `icon` | 要在时间线中使用的图标 |
| `badge` | 放置在右上角徽章内的文本 | | `header` | 每个条目的标题 |
| `subheader` | 每个条目的副标题 | | `badge` | 放置在右上角徽章内的文本 |
| `subheader` | 每个条目的副标题 |
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->

View File

@@ -1,4 +1,5 @@
{{ $icon := .Get "icon" | default "check" }} {{ $icon := .Get "icon" | default "check" }}
{{ $md := .Get "md" | default false }}
{{ $header := .Get "header" }} {{ $header := .Get "header" }}
{{ $badge := .Get "badge" }} {{ $badge := .Get "badge" }}
{{ $subheader := .Get "subheader" }} {{ $subheader := .Get "subheader" }}
@@ -25,7 +26,11 @@
</h4> </h4>
{{ end }} {{ end }}
<div class="mb-6"> <div class="mb-6">
{{- .Inner -}} {{ if $md }}
{{- .Inner | markdownify -}}
{{ else }}
{{- .Inner -}}
{{ end }}
</div> </div>
</div> </div>
</div> </div>