表格

姓名技能排行
刘备大哥
关羽二哥
张飞三弟
姓名|技能|排行
--|:--:|--:
刘备|哭|大哥
关羽|打|二哥
张飞|骂|三弟


时间线条

2020大事记
2020-1-20

武汉封城,疫情让一起变得慌乱起来

2020-3-20

开始远程办公,慢慢有序起来

生活变得好起来了
2020-10-1

国庆节去哈尔滨旅行,和老同学见面

[timeline title="2020大事记" type="small" start="梦开始的地方" end="新的一年开始"]
[item date="2020-1-20"] 武汉封城,疫情让一起变得慌乱起来 [/item]
[item date="2020-3-20"] 开始远程办公,慢慢有序起来[/item]
[item]生活变得好起来了[/item]
[item date="2020-10-1"] 国庆节去哈尔滨旅行,和老同学见面[/item]
[/timeline]


timeline 属性列表:

  • type:可选项,默认为small, 可选值:
  • small 小巧款式的时间线
  • large 大款式的时间线
  • random,可选项,默认为true,可选值为true、false,true表示时间线每一条会使用随机的色彩

对于large样式的时间线,提供时间线开始和结束的一个文字自定义:

  • start:一些简单的文字
  • end:一些简单的文字

item 属性列表:

  • date :可选项,默认不显示时间,可选值:
  • 一个日期文字,实际上可以填写任何类型文字(不要太长)
  • color:可选项,设置当前时间线条的颜色,可选值:"light", "info", "dark", "success", "black", "warning", - "primary", "danger"

计划表

2022的小目标

阅读10本书 :

50%

每天锻炼30分钟 :

507%

[goal title="2022的小目标"]
[item check="true"] 每天早睡 [/item]
[item check="false"] 每天早起 [/item]
[item progress="50%"] 阅读10本书 [/item]
[item start="2021-01-02" end="2021-10-1"] 每天锻炼30分钟 [/item]
[/goal]

计划表中包含了三种类型的任务:

  • check类型,该类型任务只有两种状态,完成和未完成
  • progress,该类型任务可以显示任务执行的进度,需要手动填写进度
  • start、end,该类型任务设置一个起始时间和终止时间,进度会根据当前时间自动更新进度
  • 时间格式:必须是正确的时间格式,比如2021-01-02 12:00 ,也可以只写日期2021-01-02

本地音乐

//单首歌曲
[hplayer]
[Music title="歌曲名" author="歌手" url="http://" pic="图片文件URL" lrc="歌词文件URL" type="mini"/]
[/hplayer]

//多首歌曲
[hplayer]
[Music title="歌曲名" author="歌手" url="http://" pic="图片文件URL" lrc="歌词文件URL" type="mini"/]
[Music title="歌曲名" author="歌手" url="http://" pic="图片文件URL" lrc="歌词文件URL" type="mini"/]
[/hplayer]

视频

[vplayer url="http://xxx.com/xxx.mp4" pic="http://xxx.com/xxx.png"]

按钮

[button]矩形按钮文字[/button]

[button color="succees"]矩形按钮文字[/button]

[button type="round" color="success"]椭圆形按钮文字[/button]

[button color="success" icon="glyphicon glyphicon-eur"]图标按钮文字[/button]

color: 选填,不填默认为success(绿色),可选值:

  • light:白色
  • info:蓝色
  • dark:深色
  • success:绿色
  • black:黑色
  • warning:黄色
  • primary:紫色
  • danger:红色

链接卡片

[link]
[item name="百度一些" link="http://baidu.com" desc="百度一下你就知道" /]
[item name="网站名称" link="https://blogdx.com" desc="一些链接描述" /]
[item name="My Blog" link="https://blogdx.com" desc="我很笨 不用你说" pic="https://pic4.zhimg.com/v2-64a2da13f281f26896c1fec7d65f9f0f_r.jpg" /]
[/link]

文章卡片


[//post cid="文章id" /]
[//post cid="文章id" cover="图片地址"/] //删除双斜线

外链卡片

[//post url="https://blogdx.com" title="友人C" intro="我知道我很笨" cover="https://pic4.zhimg.com/v2-64a2da13f281f26896c1fec7d65f9f0f_r.jpg" /] //删除双斜线

高亮提示文本


这是黄色的短代码框,常用来做提示,引起读者注意。

这是红色的短代码框,用于严重警告什么的。

这是浅蓝色的短代码框,用于显示一些信息。

这是绿色的短代码框,显示一些推荐信息。

[//scode type="share"]这是灰色的短代码框,常用来引用资料什么的[/scode]
[//scode type="yellow"]这是黄色的短代码框,常用来做提示,引起读者注意。[/scode]
[//scode type="red"]这是红色的短代码框,用于严重警告什么的。[/scode]
[//scode type="lblue"]这是浅蓝色的短代码框,用于显示一些信息。[/scode]
[//scode type="green"]这是绿色的短代码框,显示一些推荐信息。[/scode]
//删除双斜线

标签卡

内容 1
内容 2

[//tabs]  //删除双斜线
[tab name="标签页 1" active="true"]内容 1[/tab]
[tab name="标签页 2"]内容 2[/tab]
[/tabs]

标签tag

默认白色文字
紫色文字
蓝色文字
黄色文字
红色文字
绿色文字
黑色文字

[//tag]默认白色文字[/tag] //删除双斜线
[//tag type="primary"]紫色文字[/tag]
[//tag type="info"]蓝色文字[/tag]
[//tag type="warning"]黄色文字[/tag]
[//tag type="danger"]红色文字[/tag]
[//tag type="success"]绿色文字[/tag]
[//tag type="dark"]黑色文字[/tag]

最后修改:2024 年 02 月 15 日
如果觉得我的文章对你有用,请随意赞赏