# 主题短代码演示与说明

这里是（Plain，Sinner，Dinner，Winner，Sola，MiLi，Hani，Speed）主题短代码效果展示，不同主题之间样式可能略有差异请以实际为准。

短代码助手插件1.1.8版本下载：https://drive.uc.cn/s/7a5052dab5354
(其中，居中，居右按钮可鼠标选中文本然后点击即可自动为选中文本设置好对应的短代码)

如果看了文章还是不知道怎么写，可以访问这个地址：https://typecho.fans/2842.md 这个地址下的文本就是这个文章的实例

### 文章目录树
{tabs selected="3"}
{tab name="说明"}
在屏幕右侧显示文章目录树（Sola主题默认直接带文章目录树功能，所以此短代码无效）
{/tab}
{tab name="示例"}
```
{postindex}
```
{/tab}
{tab name="效果"}
如屏幕右侧所示
{/tab}
{/tabs}

{postindex}

### 居中/居右
{tabs selected="3"}
{tab name="说明"}
可以让文本或者图片居中
{/tab}
{tab name="示例"}
```
{center}需要居中的文字或图片{/center}
因为typecho默认能识别<center>所以居中比较推荐这样写
<center>需要居中的文字或图片</center>

{right}需要居右的文字(不支持图片){/right}
```
{/tab}
{tab name="效果"}
{center}需要居中的文字或图片{/center}
{right}需要居右的文字(不支持图片){/right}
{/tab}
{/tabs}

### ToDo
{tabs selected="3"}
{tab name="说明"}
创建TodoList
{/tab}
{tab name="示例"}
```
- [x]这是勾选表头
- [ ]里面为空格则是未勾选
```
{/tab}
{tab name="效果"}
- [x]这是勾选表头
- [ ]里面为空格则是未勾选
{/tab}
{/tabs}

### 登录可见
{tabs selected="3"}
{tab name="说明"}
设置登录可见内容
{/tab}
{tab name="示例"}
```
{login}登录可见内容{/login}
```
{/tab}
{tab name="效果"}
{login}登录可见内容{/login}
{/tab}
{/tabs}

### 评论可见
{tabs selected="3"}
{tab name="说明"}
设置评论可见内容
{/tab}
{tab name="示例"}
```
{hide}评论可见内容{/hide}
```
{/tab}
{tab name="效果"}
{hide}评论可见内容{/hide}
{/tab}
{/tabs}

### 文本样式
{tabs selected="3"}
{tab name="说明"}
为文本设置颜色下划线等属性，这个短代码有些可能不太短，可以使用编辑器上的按钮来快速设置哈！
{/tab}
{tab name="实例"}
```
{red}红色文字{/red}
{green}绿色文字{/green}
{blue}蓝色文字{/blue}
{yellow}黄色文字{/yellow}
{purple}紫色文字{/purple}
+-下划线文本+-
-+双下划线文本-+
~~删除线文本~~

或者

{span class="text-red-600"}红色文字{/span}
{span class="text-green-600"}绿色文字{/span}
{span class="text-blue-600"}蓝色文字{/span}
{span class="text-yellow-600"}黄色文字{/span}
{span class="text-purple-600"}紫色文字{/span}
{span class="underline"}下划线文本{/span}
{span class="underline decoration-double"}双下划线文本{/span}
{span class="line-through"}删除线文本{/span}
```
{/tab}
{tab name="效果"}
{red}红色文字{/red}
{green}绿色文字{/green}
{blue}蓝色文字{/blue}
{yellow}黄色文字{/yellow}
{purple}紫色文字{/purple}
+-下划线文本+-
-+双下划线文本-+
~~删除线文本~~
{/tab}
{/tabs}

### 按钮样式的链接
{tabs selected="3"}
{tab name="说明"}
生成一个按钮样式的超链接，并且支持四种样式
{/tab}
{tab name="示例"}
```html
{button href="https://www.bilibili.com/video/BV1mN4y167JK" type="red"}红色按钮{/button}
{button href="https://www.bilibili.com/video/BV1mN4y167JK" type="green"}绿色按钮{/button}
{button href="https://www.bilibili.com/video/BV1mN4y167JK" type="blue"}蓝色按钮{/button}
{button href="https://www.bilibili.com/video/BV1mN4y167JK" type="yellow"}黄色按钮{/button}
{button href="https://www.bilibili.com/video/BV1mN4y167JK" type="purple"}紫色按钮{/button}
{button href="https://www.bilibili.com/video/BV1mN4y167JK" type="gray"}灰色按钮{/button}
```
{/tab}
{tab name="效果"}
{button href="https://www.bilibili.com/video/BV1mN4y167JK" type="red"}红色按钮{/button}
{button href="https://www.bilibili.com/video/BV1mN4y167JK" type="green"}绿色按钮{/button}
{button href="https://www.bilibili.com/video/BV1mN4y167JK" type="blue"}蓝色按钮{/button}
{button href="https://www.bilibili.com/video/BV1mN4y167JK" type="yellow"}黄色按钮{/button}
{button href="https://www.bilibili.com/video/BV1mN4y167JK" type="purple"}紫色按钮{/button}
{button href="https://www.bilibili.com/video/BV1mN4y167JK" type="gray"}灰色按钮{/button}
{/tab}
{tab name="参数说明"}
|参数|说明|别名|
|:--|:--|:--|
|href|点击按钮后跳转的链接|`url`|
|内容|按钮显示的标题||
{/tab}
{/tabs}

### 标签卡
{tabs selected="3"}
{tab name="说明"}
生成一个多标签页的卡片
{/tab}
{tab name="示例"}
```
{tabs}
{tab name="标签页 1"}内容 1{/tab}
{tab name="标签页 2"}内容 2{/tab}
{/tabs}

或
{tabs selected="2"}
{tab name="标签页 1"}内容 1{/tab}
{tab name="标签页 2"}内容 2{/tab}
{/tabs}
```
{/tab}
{tab name="效果"}
如你所见
{/tab}
{tab name="参数说明"}
|参数|说明|
|:--|:--|
|name|标签页的名称|
|selected|默认选中的标签页|
|内容|标签卡选中后显示的内容|
{/tab}
{/tabs}

### 相册短代码
{tabs selected="3"}
{tab name="说明"}
默认只显示3张图片作为封面，点击图片后可展示全部，如果图片小于3张则只使用1张图片作为封面
{/tab}
{tab name="示例"}
```
{photo title="御坂美琴"}
![2_2pvonzp2ot.webp](https://demo.typecho.work/usr/uploads/2024/02/2913549384.webp)
![7_hdojgh1e5b.webp](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
![7a00f01190ef76c69d3041de9016fdfaad516746.webp](https://demo.typecho.work/usr/uploads/2024/02/462044995.webp)
![13_hr2kk45by1.webp](https://demo.typecho.work/usr/uploads/2024/02/3310289655.webp)
![018c18b30f2442a7ee5f2731dc43ad4bd013022a.webp](https://demo.typecho.work/usr/uploads/2024/02/1823875.webp)
![20_st7pbcc0vb.webp](https://demo.typecho.work/usr/uploads/2024/02/3850390717.webp)
![27_hztz6p60xl.webp](https://demo.typecho.work/usr/uploads/2024/02/1271277647.webp)
![23064412_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/678105877.webp)
![35134130_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/2565285335.webp)
![35398934_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/2289721592.webp)
![35459764_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/676123911.webp)
![35489887_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/997252946.webp)
![35707465_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/3377223827.webp)
![36213212_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/3329680763.webp)
![36263503_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/2505923002.webp)
![36700640_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/139890183.webp)
![37601598_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/3268676473.webp)
![44148632_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1697209886.webp)
![50298295_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1168667596.webp)
![52833844_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/2303993147.webp)
![53193717_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/642756321.webp)
![54120598_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1592249086.webp)
![59421451_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1587914660.webp)
![61249723_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1541171836.webp)
![62489649_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/2209762998.webp)
![63519420_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1143538181.webp)
![63986234_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/2712435994.webp)
![64869448_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/3695308320.webp)
![64869448_p1.webp](https://demo.typecho.work/usr/uploads/2024/02/4088834404.webp)
![64869448_p2.webp](https://demo.typecho.work/usr/uploads/2024/02/2984890173.webp)
![64869448_p4.webp](https://demo.typecho.work/usr/uploads/2024/02/1130474894.webp)
![67330119_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1999390453.webp)
{/photo}
```
{/tab}
{tab name="效果"}
{photo title="御坂美琴"}
![2_2pvonzp2ot.webp](https://demo.typecho.work/usr/uploads/2024/02/2913549384.webp)
![7_hdojgh1e5b.webp](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
![7a00f01190ef76c69d3041de9016fdfaad516746.webp](https://demo.typecho.work/usr/uploads/2024/02/462044995.webp)
![13_hr2kk45by1.webp](https://demo.typecho.work/usr/uploads/2024/02/3310289655.webp)
![018c18b30f2442a7ee5f2731dc43ad4bd013022a.webp](https://demo.typecho.work/usr/uploads/2024/02/1823875.webp)
![20_st7pbcc0vb.webp](https://demo.typecho.work/usr/uploads/2024/02/3850390717.webp)
![27_hztz6p60xl.webp](https://demo.typecho.work/usr/uploads/2024/02/1271277647.webp)
![23064412_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/678105877.webp)
![35134130_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/2565285335.webp)
![35398934_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/2289721592.webp)
![35459764_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/676123911.webp)
![35489887_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/997252946.webp)
![35707465_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/3377223827.webp)
![36213212_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/3329680763.webp)
![36263503_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/2505923002.webp)
![36700640_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/139890183.webp)
![37601598_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/3268676473.webp)
![44148632_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1697209886.webp)
![50298295_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1168667596.webp)
![52833844_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/2303993147.webp)
![53193717_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/642756321.webp)
![54120598_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1592249086.webp)
![59421451_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1587914660.webp)
![61249723_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1541171836.webp)
![62489649_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/2209762998.webp)
![63519420_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1143538181.webp)
![63986234_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/2712435994.webp)
![64869448_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/3695308320.webp)
![64869448_p1.webp](https://demo.typecho.work/usr/uploads/2024/02/4088834404.webp)
![64869448_p2.webp](https://demo.typecho.work/usr/uploads/2024/02/2984890173.webp)
![64869448_p4.webp](https://demo.typecho.work/usr/uploads/2024/02/1130474894.webp)
![67330119_p0.webp](https://demo.typecho.work/usr/uploads/2024/02/1999390453.webp)
{/photo}
{/tab}

{tab name="参数说明"}
|参数|说明|
|:--|:--|
|title|标题，非必须参数，不写则调用默认标题|
{/tab}
{/tabs}

### 提示及警告框

{tabs selected="3"}
{tab name="说明"}
生成一个提示或警告卡片
{/tab}
{tab name="示例"}
```html
{tip}不带标题{/tip}
{tip title="标题"}这里是内容{/tip}
{tip type="warning"}不带标题{/tip}
{tip type="warning" title="标题"}这里是内容{/tip}
{tip type="error"}不带标题{/tip}
···
{tip type="success"}不带标题{/tip}
···
```
{/tab}
{tab name="效果"}
{tip}不带标题{/tip}
{tip title="标题"}这里是内容{/tip}
{tip type="warning"}不带标题{/tip}
{tip type="warning" title="标题"}这里是内容{/tip}
{tip type="error"}不带标题{/tip}
{tip type="success"}不带标题{/tip}
{/tab}
{tab name="参数说明"}

|参数|说明|
|:--|:--|
|type|提示类型，默认为 info，可选的提示类型为 `info`，`warning`(同 `warn`), `danger`(同 `error`)，`success`|
|title|标题，非必须参数，不写则没有标题|
|内容|提示内容|

{/tab}
{/tabs}

### 点击复制文本
{tabs selected="3"}
{tab name="说明"}
生成点击复制的文本样式按钮，make主题不支持
{/tab}
{tab name="示例"}
```
{copy text="被复制的内容"}内容{/copy}
```
{/tab}
{tab name="效果"}
{copy text="泽泽社长好帅"}点击复制{/copy}
{/tab}
{tab name="参数说明"}
|参数|说明|
|:--|:--|
|text|被复制的内容，如果放超链接请不要带上`https://`或`http://`|
|内容|表面显示出来的内容，一般设置为“点击复制”|
{/tab}
{/tabs}


### 下载文件链接

{tabs selected="3"}
{tab name="说明"}
生成一个下载文件的链接按钮
{/tab}
{tab name="示例"}
```html
{file url="https://example.com/download.zip"}示例文件名{/file}
```
{/tab}
{tab name="效果"}
{file url="https://example.com/download.zip"}示例文件名{/file}

{/tab}
{tab name="参数说明"}
|参数|说明|
|:--|:--|
|href|文件的下载链接，也可以用`url`|
|内容|按钮显示的内容|
{/tab}
{/tabs}

### 调用文章

{tabs selected="3"}
{tab name="说明"}
调用文章，并显示卡片形式的文章样式
{/tab}
{tab name="示例"}
```html
{post cid="文章cid"}
```
{/tab}
{tab name="效果"}
{post cid="2447"}
{/tab}
{tab name="参数说明"}
|参数|说明|
|:--|:--|
|cid|在后台的编辑文章的地址可以看到，比如`http://localhost/build/admin/write-post.php?cid=23`，`23`就是文章cid|
{/tab}
{/tabs}


### 折叠框
{tabs selected="3"}
{tab name="说明"}
可以点击标题展开 / 折叠的内容
{/tab}
{tab name="实例"}
```
{collapse title="标题"}
折叠内容
{/collapse}
或
{collapse title="标题" show="true"}
默认展开的折叠内容
{/collapse}
```
{/tab}
{tab name="效果"}
{collapse title="标题"}
折叠内容
{/collapse}

{collapse title="标题" show="true"}
默认展开的折叠内容
{/collapse}
{/tab}
{tab name="说明"}
|参数|说明|
|:--|:--|
|title|折叠框标题|
|show|参数值为`true`时默认展开，不使用show参数时则默认折叠|
|内容|折叠内容|
{/tab}
{/tabs}

### Bilibili

{tabs selected="3"}
{tab name="说明"}
以卡片形式调用哔哩哔哩内容，依赖`api`
{/tab}
{tab name="实例"}
```
单个视频
{bilibili av="内容"}
如：{bilibili av="22183590"}
或者
{bilibili bv="内容"}
如：{bilibili bv="BV1As411p7z6"}
```
{/tab}
{tab name="效果"}

{bilibili av="22183590"}

{bilibili bv="BV1As411p7z6"}

{/tab}
{tab name="参数说明"}
|参数|说明|
|:--|:--|
|`av`或`bv`|声明调用的内容的类型为单独视频，建议全面使用`bv`类型|
|内容|用`av`内容就是`av`号，用`bv`内容就是`bv`号|
{/tab}
{/tabs}

### 时间线
{tabs selected="3"}
{tab name="说明"}
建立个时间线内容
{/tab}
{tab name="实例"}
```
{timeline}

**2015年6月初：**
想起自己初高中时期想建立网站的愿望

{p}
**2015年6月6日：**
购入域名，并确立网站类型为个人博客
{/p}

**2020年12月3日**
网站域名与数据卖了，并更换新域名数据照旧

{/timeline}
```
{/tab}
{tab name="效果"}
{timeline}

**2015年6月初：**
想起自己初高中时期想建立网站的愿望

{p}
**2015年6月6日：**
购入域名，并确立网站类型为个人博客
{/p}

**2020年12月3日**
网站域名与数据卖了，并更换新域名数据照旧

{/timeline}
{/tab}
{tab name="参数说明"}
|参数|说明|
|:--|:--|
|timeline|使用timeline参数包裹内容，每个段落即为一个时间的内容复杂情况是使用`{p}`标签包裹，段落开头加粗部分为时间|
{/tab}
{/tabs}

### 导航链接模块
{tabs selected="3"}
{tab name="说明"}
在文章或独立页面里建立链接导航，部分功能要求typecho在1.2.0及以上版本
{/tab}
{tab name="示例"}
```
{link}
{网站名,网站描述,网站地址}
{网站名,网站描述,网站地址,网站图标链接}
...
{/link}
```
如上在link标签内，按照上述格式插入链接即可，（网站图标链接选填，不填则调用api获取，并要求typecho在1.2.0及以上版本，网站名和描述中不能使用`,`号）
{/tab}
{tab name="效果"}
{link}
{哔哩哔哩,泽泽的小视频,https://www.bilibili.com/video/BV1mN4y167JK}
{哔哩哔哩,泽泽的小视频,https://www.bilibili.com/video/BV1mN4y167JK}
{哔哩哔哩,泽泽的小视频,https://www.bilibili.com/video/BV1mN4y167JK}
{哔哩哔哩,泽泽的小视频,https://www.bilibili.com/video/BV1mN4y167JK}
{哔哩哔哩,泽泽的小视频,https://www.bilibili.com/video/BV1mN4y167JK}
{哔哩哔哩,泽泽的小视频,https://www.bilibili.com/video/BV1mN4y167JK}
{/link}
{/tab}
{tab name="参数说明"}
|参数|说明|
|:--|:--|
|link|使用link参数包裹内容,内容中每个大括号内即为一个链接卡片|
|链接卡片|有四个参数依次为网站名,网站描述,网站地址,网站图标链接,每个参数直接用`,`号隔开，<br>其中网站图标链接选填，不填则通过api获取，并要求typecho在1.2.0及以上版本|
{/tab}
{/tabs}

### 音频播放
{tabs selected="3"}
{tab name="说明"}
调用主题内置的播放器播放音频，推荐使用mp3格式
{/tab}
{tab name="实例"}
```
音乐直链
{audio url="https://xxxx.mp3"}
网易云音乐
{audio url="https://music.163.com/#/song?id=503020114"}
或
{audio url="https://music.163.com/song?id=503020114"}
QQ音乐(在网页端单曲音乐页面点分享获取链接)
{audio url="https://i.y.qq.com/v8/playsong.html?songid=566813755&songtype=0#webchat_redirect"}
或
{audio url="https://i.y.qq.com/v8/playsong.html?songid=566813755"}
```
{/tab}
{tab name="效果"}
**音频直链**
{audio url="http://music.163.com/song/media/outer/url?id=5238992.mp3"}
**网易云音乐**
{audio url="https://music.163.com/song?id=503020114"}
**QQ音乐**
{audio url="https://i.y.qq.com/v8/playsong.html?songid=566813755"}
{/tab}
{/tabs}


### 影视卡片
{tabs selected="3"}
{tab name="说明"}
在文章或独立页面里建立视频模块卡片，要求typecho在1.2.0及以上版本（低版本未测试也许用不了）
{/tab}
{tab name="示例"}
```
**单集视频**
{video}https://s3.bfzycdn.com/video/shizilukouduanpian/HD中字/index.m3u8{/video}

**多集视频**
{video title="日语歌曲"}
ツユ - やっぱり雨は降るんだね$https://www.bilibili.com/video/BV13f4y1G7sA
ツユ - くらべられっ子$https://www.bilibili.com/video/BV1z341127mZ
生まれた意味などなかった。 / まふまふ$https://www.bilibili.com/video/BV1i4411q7vA
{/video}

**多线路多集视频**
{video title="动画奇遇"}
(哔哩哔哩){
夏日奇遇$https://www.bilibili.com/video/BV14t4y1W7qg
大雄的喜马拉雅行进记$https://www.bilibili.com/video/BV174411L77n
我们仍未知晓的天空之蓝$https://www.bilibili.com/video/BV1YZ4y1Z7FW
}
(Youtube){
夏日奇遇$https://www.youtube.com/xxx
大雄的喜马拉雅行进记$https://www.youtube.com/xxx
我们仍未知晓的天空之蓝$https://www.youtube.com/xxx
}
{/video}
```
{/tab}
{tab name="效果"}
**单集效果**
{video pic="https://img.bfzypic.com/upload/vod/20230424-32/c679398db8c065fd6bf6d16484ef2e62.jpg"}https://s3.bfzycdn.com/video/shizilukouduanpian/HD中字/index.m3u8{/video}

**多集效果如下**
{video title="日语歌曲"}
ツユ - やっぱり雨は降るんだね$https://www.bilibili.com/video/BV13f4y1G7sA
ツユ - くらべられっ子$https://www.bilibili.com/video/BV1z341127mZ
生まれた意味などなかった。 / まふまふ$https://www.bilibili.com/video/BV1i4411q7vA
{/video}

**多线路效果如下：**
{video title="YeYe"}
(哔哩哔哩){
YeYe - ゆらゆ$https://www.bilibili.com/video/BV1J441137kh
YeYe - 暮らし$https://www.bilibili.com/video/BV13J41157SR
}
(Youtube){
YeYe - ゆらゆ$https://www.youtube.com/watch?v=StkLx0e4f6c
YeYe - 暮らし$https://www.youtube.com/watch?v=jXzYxheDr9U
}
{/video}
{/tab}
{tab name="参数说明"}
|参数|说明|
|:--|:--|
|video|使用video参数包裹内容,可以使用title属性填写标题(非强制)，可以使用pic属性自定义封面图(非强制)，title与pic参数同时使用时，pic属性必须在title后面|
|内容|内容格式为（集数$视频链接）一行一集，其他详见实例代码|
|视频链接|默认自动识别a、b站视频/直播间、腾讯视频、斗鱼视频、抖音视频、Youtube，同时也支持填写视频直链m3u8,mp4后缀的链接|

特殊说明：在直链视频地址前或者后追加"{no}"字符串，可以使播放器追加禁止追踪域名
{/tab}
{/tabs}


### 网格布局
{tabs selected="3"}
{tab name="说明"}
可以让图片或者卡片进行网格布局
{/tab}
{tab name="示例"}
```
图片网格布局
{grid set="2,4"}
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
{/grid}

图文卡片布局
{grid set="1,2" bili="4x3"}
{card}
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
{center}点击下载{/center}
{/card}
{card}
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
{center}点击下载{/center}
{/card}
{card}
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
{center}点击下载{/center}
{/card}
{card}
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
{center}点击下载{/center}
{/card}
{/grid}
```
{/tab}
{tab name="效果"}
图片网格布局
{grid set="2,4"}
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
{/grid}

图文卡片布局
{grid set="1,2" bili="4x3"}
{card}
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
{center}点击下载{/center}
{/card}
{card}
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
{center}点击下载{/center}
{/card}
{card}
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
{center}点击下载{/center}
{/card}
{card}
![](https://demo.typecho.work/usr/uploads/2024/02/697886669.webp)
{center}点击下载{/center}
{/card}
{/grid}
{/tab}
{tab name="说明"}
`gird`为网格布局，`set`属性为必填属性，`set`完整为`set="1,2,3,4,5,6"`共计`6`个数字（数字键用","号隔开，至少要有一个数值），数字键最大值为`12`,数字表示每行的列数。
```
第1个数字：表示列数
第2个数字：屏幕宽度＞'640px'时的列数
第3个数字：屏幕宽度＞'768px'时的列数
第4个数字：屏幕宽度＞'1024px'时的列数
第5个数字：屏幕宽度＞'1280px'时的列数
第6个数字：屏幕宽度＞'1536px'时的列数
```
网格布局内将使得换行失效，如需使用换行，可以使用`{br}`来实现

`bili`可以设置图片显示的宽高比例，默认支持`21x9`、`16x9`、`4x3`、`2x3`、`10x14`、`3x4`、`1x2`、`2x1`、`3x1`、`4x1`这些比例，也可以完全自定义比例（主需要修改数字部分即可比如改成`5x2`），此参数非必填项，不填写则为`1:1`比例。
{/tab}
{/tabs}

### Github
{tabs selected="3"}
{tab name="说明"}
显示github项目卡片
{/tab}
{tab name="示例"}
```
{github repo="typecho/typecho"}
```
{/tab}
{tab name="效果"}
{github repo="typecho/typecho"}
{/tab}
{tab name="参数说明"}
|参数|说明|
|:--:|:--:|
|repo|`Github`仓库所属用户及仓库名，示例：对于仓库链接: `https://github.com/typecho/typecho`，去除域名部分 `https://github.com/`，剩余的 `typecho/typecho` 就是啦，注意尾部不要加 `.git` 后缀|
{/tab}
{/tabs}

### 双色虚线
{tabs selected="3"}
{tab name="说明"}
双色虚线效果
{/tab}
{tab name="示例"}
```
{dotted startColor="#ff6c6c" endColor="#73aaff"/}
```
{/tab}
{tab name="效果"}
{dotted startColor="#ff6c6c" endColor="#73aaff"/}
{/tab}
{tab name="参数说明"}
|参数|说明|
|:--:|:--:|
|startColor|起始颜色|
|endColor|交替颜色|
{/tab}
{/tabs}