Obsidian 插件:Content cards 创建多样卡片

[!example] 插件名片

  • 插件名称:Content cards
  • 插件作者:liqms
  • 插件版本:1.2.1
  • 插件概述:在 Markdown 中插入各种内容卡片,包括时间轴,高亮块,指标卡片,图书卡片,音乐卡片,电影卡片,照片专辑,名片,内容分栏,倒计时等。
  • 插件项目地址:点我跳转
  • 国内下载地址:下载安装

本文改写自插件官方文档,根据笔者的理解和习惯做了一定的简化和润色,特此说明。

基本用法

  • card-卡片类型标记代码块,以@cards引出独立卡片,再添加不同参数,每个独立卡片之间需空行
  • 部分卡片可在@card后以[color-颜色英文名]自定义颜色,,注意一定要把[color-颜色英文名]包裹在,目前支持的颜色有:redorange,yellow,green,cyan,blue,purplepink

时间线

本插件既可以写竖向时间线,也可以写横向时间线

参数字段 类型 是否必须 介绍
time string 日期
title string 标题
content string 介绍,可以多行文本,但只有前 3 行将显示在卡片上

[!example]+ 竖向时间线语法例

```cards-timeline-v
@card
time: 2024-12-12
title: Example Titles
content:
描述描述 Sample Content 描述描述 Sample Content 描述描述 Sample Content
描述描述 Sample Content 描述描述 Sample Content 描述描述 Sample Content

@card [color-red]
time: 2024-12-12
title: Example Titles
content:
描述描述 Sample Content 描述描述 Sample Content 描述描述 Sample Content
描述描述 Sample Content 描述描述 Sample Content 描述描述 Sample Content
```

[!example]+ 横向时间线语法例

```cards-timeline-h
@card
time: 2024-12-12
title: Example Titles
content:
描述描述 Sample Content 描述描述 Sample Content 描述描述 Sample Content

@card [color-red]
time: 2024-12-12
title: Example Titles
content:
描述描述 Sample Content 描述描述 Sample Content 描述描述 Sample Content
```

[!example]+ 实现效果图
![[content-cards时间轴效果图]]

高亮块

[!example]+ 横向时间轴语法例

```cards-highlightblock
@card [color-red]
示例文字示例文字示例文字
示例文字

@card
示例文字
示例文字
```

![[content-cards时高亮块效果图]]

指标卡片

[!example]+ 指标卡片语法例

```cards-target
@card [color-red]
title: 指标名称
value: 1000
unit: 元

@card
title: 指标名称
value: 1,200
unit: 元
```

![[content-cards指标卡片效果图]]

图书卡片

参数字段 类型 是否必须 介绍
title string 图书名称
cover string web url(https://…) , 封面图片 url
meta object 图书元数据
introduction string 介绍,可以多行文本,但只有前 3 行将显示在卡片上

[!example]+ 图书卡片语法例

```cards-book
@card
title: 失明症漫游记
cover: https://img3.doubanio.com/view/subject/s/public/s34269503.jpg
meta:
分类: 文学
出版日期: 2022-08-27
作者: 若泽·萨拉马戈
评分: 9.1
introduction:
街上出现了第一个突然失明的人,紧接着是第二个、第三个……  一种会传染的失明症在城市蔓延,无人知晓疫情为何爆发、何时结束。  失明症造成了前所未有的恐慌与灾难
```

音乐卡片

参数字段 类型 是否必须 介绍
title string 音乐名称
cover string web url(https://…) are supported, 封面图片 url
meta object 音乐元数据

[!example]+ 音乐卡片语法例

```cards-music
@card
title: Love Story
cover: https://p1.music.126.net/GZERNplXUdzTPkKqo2F4tA==/109951169217536854.jpg
meta:
艺术家: Taylor Swift
流派: 流行
```

电影卡片

参数字段 类型 是否必须 介绍
title string 电影名称
cover string web url(https://…) , 封面图片 url
meta object 电影元数据
introduction string 介绍,可以多行文本,但只有前 3 行将显示在卡片上

[!example]+ 电影卡片语法例

```cards-movie
@card
title: 流浪地球2
cover: https://img9.doubanio.com/view/photo/s/public/p2885842436.jpg
meta:
导演: 郭帆
演员: 吴京 / 刘德华 / 李雪健 / 沙溢
分类: 国产
上映日期: 2023-01-22
评分: 8.3
introduction:
在并不遥远的未来,太阳急速衰老与膨胀,再过几百年整个太阳系将被它吞噬毁灭。为了应对这场史无前例的危机,地球各国放下芥蒂,成立联合政府,试图寻找人类存续的出路。通过摸索与考量,最终推着地球逃出太阳系的“移山计划”获得压倒性胜利。人们着手建造上万台巨大的行星发动机,带着地球踏上漫漫征程。满腔赤诚的刘培强(吴京 饰)和韩朵朵(王智 饰)历经层层考验成为航天员大队的一员,并由此相知相恋。但是漫漫征途的前方,仿佛有一股神秘的力量不断破坏者人类的自救计划。看似渺小的刘培强、量子科学家图恒宇(刘德华 饰)、联合政府中国代表周喆直(李雪健 饰)以及无数平凡的地球人,构成了这项伟大计划的重要一环……
```

相册

参数字段 类型 是否必须 介绍
title string 相册名称
images string 图片链接,每行 1 个链接,空行分组专辑的图片,每组最多 9 张

[!example]+ 网络图片相册语法例

```cards-album
@card [color-blue]
title: 相册名称
images:
https://img9.doubanio.com/view/photo/s/public/p2885842436.jpg
https://img9.doubanio.com/view/photo/s/public/p2885842436.jpg
https://img9.doubanio.com/view/photo/s/public/p2885842436.jpg

https://img9.doubanio.com/view/photo/s/public/p2885842436.jpg
https://img9.doubanio.com/view/photo/s/public/p2885842436.jpg
```

[!example]+ 本地图片相册语法例

```cards-album
@card [color-blue]
title: 相册名称
images:
![](https://img9.doubanio.com/view/photo/s/public/p2885842436.jpg)
![](https://img9.doubanio.com/view/photo/s/public/p2885842436.jpg)
![](https://img9.doubanio.com/view/photo/s/public/p2885842436.jpg)

![[files/image-1.png]]
![[files/image-2.png]]
```

名片

参数字段 类型 是否必须 介绍
name string Yes 名字
tags string Yes 标签
remark string Yes 备注

[!example]+ 名片语法例

```cards-name
@card
name: 姓名
tags: 标签,标签
remark: 人物的简单描述 A brief description of the character

@card [color-green]
name: 姓名
tags: 标签,标签
remark: 人物的简单描述 A brief description of the character
```

分栏

[!example]+ f e分栏语法例

```cards-subfield
@card1
示例文字
示例文字

@card2
示例文字
示例文字
```

倒计时

参数字段 类型 是否必须 介绍
title string Yes title / 标题
type string Yes type,currently supports day,sec / 类型
time string Yes type = day, date, eg: 2024-02-12
type = sec, timestamp, eg: 12:03:30

[!example]+ 倒计时语法例

```cards-countdown
@card [color-red]
title: 2026年元旦
type: day
time: 2026-01-01
```