[!example] 插件名片
本文改写自插件官方文档,根据笔者的理解和习惯做了一定的简化和润色,特此说明。
基本用法
- 以
card-卡片类型
标记代码块,以@cards
引出独立卡片,再添加不同参数,每个独立卡片之间需空行 - 部分卡片可在
@card
后以[color-颜色英文名]
自定义颜色,,注意一定要把[color-颜色英文名]
包裹在,目前支持的颜色有:red
,orange
,yellow
,green
,cyan
,blue
,purple
和pink
时间线
本插件既可以写竖向时间线,也可以写横向时间线
参数字段 | 类型 | 是否必须 | 介绍 |
---|---|---|---|
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:    ![[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 ```