主题短代码演示与说明
其他/ 2023-08-20/0/
编辑
这里是（Plain，Sinner，Dinner，Winner，Sola，MiLi，Hani，Speed，Avideo）主题短代码效果展示，不同主题之间样式可能略有差异请以实际为准。
短代码助手插件1.1.9版本下载：https://qqdie.lanzouw.com/i46nQ3nmy8xe
(其中，居中，居右按钮可鼠标选中文本然后点击即可自动为选中文本设置好对应的短代码)
如果看了文章还是不知道怎么写，可以访问这个地址：https://typecho.fans/2842.md 这个地址下的文本就是这个文章的实例
文章目录树
在屏幕右侧显示文章目录树（Sola主题默认直接带文章目录树功能，所以此短代码无效）
如屏幕右侧所示
居中/居右
可以让文本或者图片居中
{center}需要居中的文字或图片{/center}
因为typecho默认能识别<center>所以居中比较推荐这样写
<center>需要居中的文字或图片</center>
{right}需要居右的文字(不支持图片){/right}
ToDo
创建TodoList
- [x]这是勾选表头
- [ ]里面为空格则是未勾选
登录可见
评论可见
文本样式
为文本设置颜色下划线等属性，这个短代码有些可能不太短，可以使用编辑器上的按钮来快速设置哈！
{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}
红色文字
绿色文字
蓝色文字
黄色文字
紫色文字
下划线文本
双下划线文本
删除线文本
按钮样式的链接
生成一个按钮样式的超链接，并且支持四种样式
{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}
| 参数 | 说明 | 别名 |
|---|
| href | 点击按钮后跳转的链接 | url |
| 内容 | 按钮显示的标题 | |
标签卡
生成一个多标签页的卡片
{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}
如你所见
| 参数 | 说明 |
|---|
| name | 标签页的名称 |
| selected | 默认选中的标签页 |
| 内容 | 标签卡选中后显示的内容 |
相册短代码
默认只显示3张图片作为封面，点击图片后可展示全部，如果图片小于3张则只使用1张图片作为封面
{photo title="御坂美琴"}
{/photo}
| 参数 | 说明 |
|---|
| title | 标题，非必须参数，不写则调用默认标题 |
提示及警告框
生成一个提示或警告卡片
{tip}不带标题{/tip}
{tip title="标题"}这里是内容{/tip}
{tip type="warning"}不带标题{/tip}
{tip type="warning" title="标题"}这里是内容{/tip}
{tip type="error"}不带标题{/tip}
···
{tip type="success"}不带标题{/tip}
···
| 参数 | 说明 |
|---|
| type | 提示类型，默认为 info，可选的提示类型为 info，warning(同 warn), danger(同 error)，success |
| title | 标题，非必须参数，不写则没有标题 |
| 内容 | 提示内容 |
点击复制文本
生成点击复制的文本样式按钮，make主题不支持
{copy text="被复制的内容"}内容{/copy}
| 参数 | 说明 |
|---|
| text | 被复制的内容，如果放超链接请不要带上https://或http:// |
| 内容 | 表面显示出来的内容，一般设置为“点击复制” |
下载文件链接
生成一个下载文件的链接按钮
{file url="https://example.com/download.zip"}示例文件名{/file}
| 参数 | 说明 |
|---|
| href | 文件的下载链接，也可以用url |
| 内容 | 按钮显示的内容 |
调用文章
调用文章，并显示卡片形式的文章样式
| 参数 | 说明 |
|---|
| cid | 在后台的编辑文章的地址可以看到，比如http://localhost/build/admin/write-post.php?cid=23，23就是文章cid |
折叠框
可以点击标题展开 / 折叠的内容
{collapse title="标题"}
折叠内容
{/collapse}
或
{collapse title="标题" show="true"}
默认展开的折叠内容
{/collapse}
| 参数 | 说明 |
|---|
| title | 折叠框标题 |
| show | 参数值为true时默认展开，不使用show参数时则默认折叠 |
| 内容 | 折叠内容 |
Bilibili
以卡片形式调用哔哩哔哩内容，依赖api
单个视频
{bilibili av="内容"}
如：{bilibili av="22183590"}
或者
{bilibili bv="内容"}
如：{bilibili bv="BV1As411p7z6"}
| 参数 | 说明 |
|---|
av或bv | 声明调用的内容的类型为单独视频，建议全面使用bv类型 |
| 内容 | 用av内容就是av号，用bv内容就是bv号 |
时间线
建立个时间线内容
{timeline}
**2015年6月初：**
想起自己初高中时期想建立网站的愿望
{p}
**2015年6月6日：**
购入域名，并确立网站类型为个人博客
{/p}
**2020年12月3日**
网站域名与数据卖了，并更换新域名数据照旧
{/timeline}
2015年6月初：
想起自己初高中时期想建立网站的愿望
2015年6月6日：
购入域名，并确立网站类型为个人博客
2020年12月3日
网站域名与数据卖了，并更换新域名数据照旧
| 参数 | 说明 |
|---|
| timeline | 使用timeline参数包裹内容，每个段落即为一个时间的内容复杂情况是使用{p}标签包裹，段落开头加粗部分为时间 |
导航链接模块
在文章或独立页面里建立链接导航，部分功能要求typecho在1.2.0及以上版本
{link}
{网站名,网站描述,网站地址}
{网站名,网站描述,网站地址,网站图标链接}
...
{/link}
如上在link标签内，按照上述格式插入链接即可，（网站图标链接选填，不填则调用api获取，并要求typecho在1.2.0及以上版本，网站名和描述中不能使用,号）
| 参数 | 说明 |
|---|
| link | 使用link参数包裹内容,内容中每个大括号内即为一个链接卡片 |
| 链接卡片 | 有四个参数依次为网站名,网站描述,网站地址,网站图标链接,每个参数直接用,号隔开，
其中网站图标链接选填，不填则通过api获取，并要求typecho在1.2.0及以上版本 |
音频播放
调用主题内置的播放器播放音频，推荐使用mp3格式
音乐直链
{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"}
音频直链
网易云音乐
QQ音乐
影视卡片
在文章或独立页面里建立视频模块卡片，要求typecho在1.2.0及以上版本（低版本未测试也许用不了）
**单集视频**
{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}
单集效果
多集效果如下
多线路效果如下：
| 参数 | 说明 |
|---|
| video | 使用video参数包裹内容,可以使用title属性填写标题(非强制)，可以使用pic属性自定义封面图(非强制)，title与pic参数同时使用时，pic属性必须在title后面 |
| 内容 | 内容格式为（集数$视频链接）一行一集，其他详见实例代码 |
| 视频链接 | 默认自动识别a、b站视频/直播间、腾讯视频、斗鱼视频、抖音视频、Youtube，同时也支持填写视频直链m3u8,mp4后缀的链接 |
特殊说明：在直链视频地址前或者后追加"{no}"字符串，可以使播放器追加禁止追踪域名
网格布局
可以让图片或者卡片进行网格布局
图片网格布局
{grid set="2,4"}
{/grid}
图文卡片布局
{grid set="1,2" bili="4x3"}
{card}
{center}点击下载{/center}
{/card}
{card}
{center}点击下载{/center}
{/card}
{card}
{center}点击下载{/center}
{/card}
{card}
{center}点击下载{/center}
{/card}
{/grid}
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比例。
Github
显示github项目卡片
{github repo="typecho/typecho"}
| 参数 | 说明 |
|---|
| repo | Github仓库所属用户及仓库名，示例：对于仓库链接: https://github.com/typecho/typecho，去除域名部分 https://github.com/，剩余的 typecho/typecho 就是啦，注意尾部不要加 .git 后缀 |
双色虚线
双色虚线效果
{dotted startColor="#ff6c6c" endColor="#73aaff"/}
| 参数 | 说明 |
|---|
| startColor | 起始颜色 |
| endColor | 交替颜色 |