Typecho buyu 单栏主题1.3.1版本新增了一些短代码，如标签页、折叠面板、附件下载卡片、徽章、按钮、进度条。主题简介/下载
https://zhuxu.asia/archives/118/
具体短代码可在下方查看使用方法，预览
标签页（Tabs）
{tabs}
{tab name="简介"}
标签页（Tabs）组件用于在有限空间内展示多个分类内容，通过点击标签切换不同内容区域，保持界面简洁有序。支持嵌套其他短代码（如按钮、折叠面板等）和代码块，适用于展示多维度信息对比或分步内容。
{/tab}
{tab name="短代码"}
{tabs}
{tab name="标题1"}
内容
{/tab}
{tab name="标题2"}
内容
{/tab}
{tab name="标题3"}
内容
{/tab}
{/tabs}
{/tab}
{tab name="效果"}
由于代码性质这里就不放效果了,可直接查看
{/tab}
{/tabs}
折叠面板
{tabs}
{tab name="简介"}
折叠面板主要用于收纳补充说明、代码块、长文本等内容，避免文章冗长，提升阅读体验。支持自定义标题、默认展开状态及 6 种预设样式（如成功、警告、危险等主题），且兼容嵌套其他短代码。
{/tab}
{tab name="短代码"}
短代码参数
支持 2 个可选参数，用于自定义面板标题和默认状态：
| 参数名 | 作用 | 取值范围 | 默认值 |
|---|
title | 自定义面板的标题文字 | 任意文本（建议简短明了） | 折叠面板 |
open | 设置面板默认是否展开 | true（默认展开） / false（默认折叠） | false |
使用示例
指定标题为 【自定义标题】，并设置默认展开【open="true"】或默认折叠【open="false"】
[collapse title="自定义标题" open="true"]
内容
[/collapse]
效果：
显示标题为 “常见问题解答” 的面板，默认展开显示内容，点击标题可折叠。
{/tab}
{tab name="效果"}
[collapse title="常见问题解答" open="true"]
- 问：这个折叠面板支持嵌套吗？
答：支持，可以在内容中嵌套其他短代码或HTML。 - 问：标题能放特殊符号吗？
答：可以，会自动过滤不安全内容，放心使用。
[/collapse]
[collapse title="温馨提示" open="true"]
这是默认展开的折叠面板，适合展示提示信息。
[/collapse]
[collapse title="温馨提示" open="false"]
这是默认关闭的折叠面板
[/collapse]
{/tab}
{/tabs}
附件下载卡片
{tabs}
{tab name="简介"}
附件下载卡片用于展示各类文件的下载入口，支持自定义图标、标题、大小等信息，自定义文件类型标识和新文件标记。点击 "下载" 按钮可直接下载或跳转至文件地址，支持指定打开方式（当前窗口 / 新窗口）。
{/tab}
{tab name="短代码"}
短代码参数
| 参数名 | 必选 | 含义与用途 | 示例值 | 默认值 |
|---|
url | 是 | 附件的下载链接（核心参数，为空时会显示错误提示） | https://example.com/file.pdf | 无 |
title | 否 | 附件的显示名称（用于标识附件内容） | 产品手册v2.0 | 下载附件 |
size | 否 | 附件的文件大小（用于展示容量信息，需手动填写） | 2.4MB | 空（不显示） |
icon | 否 | 附件的图标（可以使用主题内置的font-awesome4.7.0图标） | fa fa-file-pdf-o | fa-file-o |
type | 否 | 附件的文件类型（用于 CSS 样式识别，如区分 PDF / 图片 / 压缩包等） | pdf、zip、img | 空 |
短代码使用方法
基础示例（必填参数）
[attachment url="链接"]
效果：生成一个带默认标题 “下载附件”、默认图标📎、新窗口打开的下载卡片。
完整示例（含所有参数）
[attachment url="下载链接" title="标题" size="大小" icon="图标" type="文件类型" target="链接打开方式"]
{/tab}
{tab name="效果"}
PDF文档
[attachment url="https://example.com/manual.pdf" title="产品使用手册" size="2.4MB" type="pdf"]
Word文档
[attachment url="https://example.com/report.docx" title="季度报告" size="1.8MB" type="doc"]
Excel表格
[attachment url="https://example.com/data.xlsx" title="销售数据统计" size="3.2MB" type="xls"]
软件安装包
[attachment url="https://example.com/app.zip" title="客户端安装包" size="15.6MB" type="zip"]
源码包
[attachment url="https://example.com/source.tar.gz" title="项目源码" size="8.7MB" type="zip"]
图片文件
[attachment url="https://example.com/screenshot.jpg" title="界面截图" size="1.2MB" type="img"]
视频文件
[attachment url="https://example.com/demo.mp4" title="功能演示视频" size="85.3MB" type="video"]
音频文件
[attachment url="https://example.com/podcast.mp3" title="访谈录音" size="12.5MB" type="audio"]
新文件标记
[attachment url="https://example.com/update.zip" title="系统更新包" size="23.7MB" type="zip"]
当前窗口打开
[attachment url="https://example.com/readme.txt" title="说明文档" size="45KB" type="txt"]
{/tab}
{/tabs}
徽章
{tabs}
{tab name="简介"}
徽章（Badge）用于展示状态标识、分类标签或重要程度，支持多种颜色、尺寸和样式变体。
{/tab}
{tab name="短代码"}
短代码参数
| 参数名 | 必选 | 含义与用途 | 示例值 | 默认值 |
|---|
$content | 是 | 徽章内部显示的文本（核心内容，为空时返回空字符串，不生成徽章） | 新上线、已完成 | 无（必填） |
type | 否 | 徽章的预设类型（对应预设样式，如颜色、风格，限制在合法类型内） | success、danger、info | default |
color | 否 | 徽章的自定义背景色（支持十六进制、rgb、rgba 格式，格式不合法时不生效） | #ff5722、rgb(255,87,34)、rgba(255,87,34,0.8) | 空（使用type对应的预设颜色） |
size | 否 | 徽章的尺寸（限制在预设尺寸内，为空时使用默认尺寸） | sm（小尺寸）、lg（大尺寸） | 空（默认尺寸） |
outline | 否 | 是否显示边框样式（布尔值，为true时显示边框，不填充纯色背景） | true、false | false |
短代码使用方法
基础示例（必填参数）
[badge]新消息\[/badge]
完整示例（含所有参数）
[badge type="success"]已完成[/badge]
[badge type="danger"]待处理[/badge]
[badge type="cyan"]通知[/badge]
[badge color="rgba(76,175,80,0.7)"]推荐[/badge]
[badge color="#ff9800"]热门[/badge]
[badge size="sm"]小徽章\[/badge]
[badge size="lg" type="info"]大徽章\[/badge]
[badge outline="true" type="warning"]边框样式\[/badge]
[badge outline="true" color="#673ab7"]自定义边框色\[/badge]
[badge type="purple" size="lg" color="rgba(156,39,176,0.9)" outline="false"]VIP会员\[/badge]
请注意
type：仅允许预设的 8 种合法类型（default/success/warning/danger/info/orange/cyan/purple），无效值自动转为default，确保样式统一。size：仅允许 3 种合法值（空 /sm/lg），无效值自动转为空，避免异常尺寸破坏布局。color：通过正则表达式验证格式（仅支持十六进制、rgb、rgba），格式不合法时不生成style属性，避免样式错乱。
{/tab}
{tab name="效果"}
基础徽章
[badge type="success"]成功[/badge]
[badge type="warning"]警告[/badge]
尺寸徽章
[badge type="danger" size="sm"]小尺寸[/badge]
[badge type="info" size="lg"]大尺寸[/badge]
扩展颜色
[badge type="orange"]橙色[/badge]
[badge type="cyan"]青色[/badge]
[badge type="purple"]紫色[/badge]
边框样式
[badge type="success" outline="true"]边框[/badge]
[badge type="purple" outline="true" size="lg"]大边框紫色[/badge]
自定义颜色
[badge color="#ff6b6b"]自定义红[/badge]
[badge color="rgb(75, 192, 192)" outline="true"]自定义轮廓[/badge]
[badge type="success"]已完成[/badge]
[badge type="danger"]待处理[/badge]
[badge type="cyan"]通知[/badge]
[badge color="rgba(76,175,80,0.7)"]推荐[/badge]
[badge color="#ff9800"]热门[/badge]
[badge size="sm"]小徽章[/badge]
[badge size="lg" type="info"]大徽章[/badge]
[badge outline="true" type="warning"]边框样式[/badge]
[badge outline="true" color="#673ab7"]自定义边框色[/badge]
[badge type="purple" size="lg" color="rgba(156,39,176,0.9)" outline="false"]VIP会员[/badge]
{/tab}
{/tabs}
自定义按钮
{tabs}
{tab name="简介"}
自定义按钮支持多种颜色、尺寸和样式，可作为操作入口或链接跳转载体。提供实心 / 轮廓两种基础样式，支持全宽显示（块级按钮）和指定链接打开方式，适合各类交互场景。
{/tab}
{tab name="短代码"}
短代码参数
| 参数名 | 说明 | 可选值/格式 | 默认值 | 示例 |
|---|
url | 按钮链接地址 | 合法URL（如https://example.com或#） | #（空链接） | 无 |
type | 按钮样式类型（颜色/边框） | - 纯色：default、blue、red、orange、yellow、green、cyan、purple
- 边框：outline-blue、outline-red等带outline-前缀的颜色 | default | [button type="green"] |
size | 按钮尺寸 | sm（小尺寸）、lg（大尺寸） | 空（默认尺寸） | [button size="lg"] |
target | 链接打开方式 | _self（当前窗口）、_blank（新窗口）、_parent（父窗口）、_top（顶层窗口） | _self | [button target="_blank"] |
block | 是否块级显示（占满父容器宽度） | true（是）、false（否） | false | [button block="true"] |
rel | 链接关系属性（如nofollow） | 合法HTML rel属性值（如nofollow、noopener） | 空 | [button rel="nofollow"] |
| 内容 | 按钮显示文本（短代码包裹的内容） | 任意文本/HTML片段 | 按钮 | [button]点击下载[/button] |
短代码使用方法
## 基础颜色按钮（默认尺寸）
[button url="https://example.com" type="red"]红色按钮（var(--color-red-500)）[/button]
[button url="https://example.com" type="orange"]橙色按钮（var(--color-orange-500)）[/button]
[button url="https://example.com" type="yellow"]黄色按钮（var(--color-yellow-500)）[/button]
[button url="https://example.com" type="green"]绿色按钮（var(--color-green-500)）[/button]
[button url="https://example.com" type="cyan"]青色按钮（var(--color-cyan-500)）[/button]
[button url="https://example.com" type="blue"]蓝色按钮（var(--color-blue-500)）[/button]
[button url="https://example.com" type="purple"]紫色按钮（var(--color-purple-500)）[/button]
## 轮廓按钮（默认尺寸）
[button url="https://example.com" type="outline-red"]红色轮廓（var(--color-red-500)）[/button]
[button url="https://example.com" type="outline-orange"]橙色轮廓（var(--color-orange-500)）[/button]
[button url="https://example.com" type="outline-yellow"]黄色轮廓（var(--color-yellow-600)）[/button]
[button url="https://example.com" type="outline-green"]绿色轮廓（var(--color-green-500)）[/button]
[button url="https://example.com" type="outline-cyan"]青色轮廓（var(--color-cyan-500)）[/button]
[button url="https://example.com" type="outline-blue"]蓝色轮廓（var(--color-blue-500)）[/button]
[button url="https://example.com" type="outline-purple"]紫色轮廓（var(--color-purple-500)）[/button]
## 小尺寸按钮
[button url="https://example.com" type="red" size="sm"]红色小按钮[/button]
[button url="https://example.com" type="outline-orange" size="sm"]橙色小轮廓按钮[/button]
## 大尺寸按钮
[button url="https://example.com" type="green" size="lg"]绿色大按钮[/button]
[button url="https://example.com" type="outline-cyan" size="lg"]青色大轮廓按钮[/button]
## 块级全宽按钮
[button type="blue" block="true"]蓝色块级按钮[/button]
[button type="outline-purple" block="true"]紫色块级轮廓按钮[/button]
## 带链接的按钮
[button url="https://example.com" type="yellow" target="_blank"]新窗口打开[/button]
[button url="#top" type="outline-green"]返回顶部[/button]
{/tab}
{tab name="效果"}
基础颜色按钮（默认尺寸）
[button url="https://example.com" type="red"]红色按钮（var(--color-red-500)）[/button]
[button url="https://example.com" type="orange"]橙色按钮（var(--color-orange-500)）[/button]
[button url="https://example.com" type="yellow"]黄色按钮（var(--color-yellow-500)）[/button]
[button url="https://example.com" type="green"]绿色按钮（var(--color-green-500)）[/button]
[button url="https://example.com" type="cyan"]青色按钮（var(--color-cyan-500)）[/button]
[button url="https://example.com" type="blue"]蓝色按钮（var(--color-blue-500)）[/button]
[button url="https://example.com" type="purple"]紫色按钮（var(--color-purple-500)）[/button]
轮廓按钮（默认尺寸）
[button url="https://example.com" type="outline-red"]红色轮廓（var(--color-red-500)）[/button]
[button url="https://example.com" type="outline-orange"]橙色轮廓（var(--color-orange-500)）[/button]
[button url="https://example.com" type="outline-yellow"]黄色轮廓（var(--color-yellow-600)）[/button]
[button url="https://example.com" type="outline-green"]绿色轮廓（var(--color-green-500)）[/button]
[button url="https://example.com" type="outline-cyan"]青色轮廓（var(--color-cyan-500)）[/button]
[button url="https://example.com" type="outline-blue"]蓝色轮廓（var(--color-blue-500)）[/button]
[button url="https://example.com" type="outline-purple"]紫色轮廓（var(--color-purple-500)）[/button]
小尺寸按钮
[button url="https://example.com" type="red" size="sm"]红色小按钮[/button]
[button url="https://example.com" type="outline-orange" size="sm"]橙色小轮廓按钮[/button]
大尺寸按钮
[button url="https://example.com" type="green" size="lg"]绿色大按钮[/button]
[button url="https://example.com" type="outline-cyan" size="lg"]青色大轮廓按钮[/button]
块级全宽按钮
[button url="https://example.com" type="blue" block="true"]蓝色块级按钮[/button]
[button url="https://example.com" type="outline-purple" block="true"]紫色块级轮廓按钮[/button]
带链接的按钮
[button url="https://example.com" type="yellow" target="_blank"]新窗口打开[/button]
[button url="https://example.com" type="outline-green"]返回顶部[/button]
{/tab}
{/tabs}
进度条
{tabs}
{tab name="简介"}
进度条用于展示任务完成进度或加载状态，支持多种样式（实心 / 条纹 / 动画条纹）和状态颜色（成功 / 警告 / 危险 / 信息）。可添加标题文本说明进度含义，适合数据加载、任务完成度等场景。
{/tab}
{tab name="短代码"}
默认进度条：[progress percent="60"]
带标题：[progress percent="75" title="完成度"]
成功样式：[progress percent="85" type="success"]
警告样式：[progress percent="90" type="warning"]
危险样式：[progress percent="95" type="danger"]
信息样式：[progress percent="50" type="info"]
条纹样式：[progress percent="65" striped="true"]
动画条纹：[progress percent="70" striped="true" animated="true"]
{/tab}
{tab name="效果"}
默认进度条：[progress percent="60"]
带标题：[progress percent="75" title="完成度"]
成功样式：[progress percent="85" type="success"]
警告样式：[progress percent="90" type="warning"]
危险样式：[progress percent="95" type="danger"]
信息样式：[progress percent="50" type="info"]
条纹样式：[progress percent="65" striped="true"]
动画条纹：[progress percent="70" striped="true" animated="true"]
{/tab}
{/tabs}
音频
{tabs}
{tab name="简介"}
音频短代码用于嵌入音频文件，支持显示歌曲名称、艺术家信息和自定义封面图。提供标准音频控制界面（播放 / 暂停 / 进度条 / 音量），适合播客、音乐片段等音频内容展示。
{/tab}
{tab name="短代码"}
短代码参数
| 参数名 | 必选 | 含义与用途 | 示例值 | 默认值 |
|---|
url | 是 | 音频文件的播放链接（核心参数，为空时不生成播放器，仅返回空字符串） | https://example.com/audio/song.mp3 | 空（必填） |
name | 否 | 音频的名称（显示在播放器上，用于标识音频内容） | 《晴天》、访谈录音第1段 | 未知音频 |
artist | 否 | 音频的作者 / 创作者（显示在播放器上，补充音频信息） | 周杰伦、产品部团队 | 未知艺术家 |
cover | 否 | 音频的封面图片链接（显示在播放器左侧，提升视觉效果，支持 JPG/PNG 等格式） | https://example.com/covers/song.jpg | 空（不显示封面） |
短代码使用方法
[audio name="歌曲名称" artist="作者" url="音频链接" cover="音频封面链接"]
{/tab}
{tab name="效果"}
这里就不展示了
{/tab}
{/tabs}
视频
{tabs}
{tab name="简介"}
视频短代码用于生成视频播放器组件，基于 DPlayer（一款功能丰富的网页视频播放器库）实现，可在页面中嵌入支持自定义尺寸、封面、播放策略的视频播放功能
{/tab}
{tab name="短代码"}
短代码参数
| 参数名 | 必选 | 含义与用途 | 示例值 | 默认值 |
|---|
src | 是 | 视频文件的播放链接（核心参数，为空时返回错误提示，不生成有效播放器） | https://example.com/video/demo.mp4 | 空（必填） |
poster | 否 | 视频封面图片链接（视频未播放时显示，提升视觉体验，支持 JPG/PNG 等格式） | https://example.com/posters/demo.jpg | 空（不显示封面） |
width | 否 | 视频播放器宽度（支持百分比、像素值，控制播放器在页面中的尺寸） | 80%、1200px | 100%（全屏宽度） |
autoplay | 否 | 是否自动播放（布尔值字符串，需符合浏览器自动播放策略，如静音自动播放） | true、false | false |
loop | 否 | 是否循环播放（视频播放结束后自动重新开始） | true、false | false |
preload | 否 | 视频预加载策略（控制页面加载时视频资源的加载方式） | auto（自动）、none（不预加载）、metadata（仅加载元数据） | auto |
lang | 否 | 播放器界面语言（控制按钮文本、提示信息等语言显示） | zh-cn（中文）、en（英文） | zh-cn |
mutex | 否 | 是否互斥播放（同一页面多个视频播放器，仅允许一个播放，其他自动暂停） | true、false | true |
theme | 否 | 播放器主题颜色（控制进度条、按钮等交互元素的颜色） | #ff4400、rgba(51,153,255,1) | #b7daff（淡蓝色） |
hotkey | 否 | 是否启用热键（支持键盘控制，如空格暂停 / 播放、方向键快进 / 快退） | true、false | true |
volume | 否 | 默认音量大小（0-1 之间的数值，0 为静音，1 为最大音量） | 0.5、0.8 | 0.7（70% 音量） |
短代码使用方法
基础示例
[video src="https://example.com/video/intro.mp4"]
完整示例（自定义常用参数）
[video src="视频链接" poster="视频封面" width="视频播放器宽度" autoplay="是否自动播放" loop="是否循环播放" theme="播放器主题颜色" volume="默认音量大小"]
- 解析逻辑：使用默认配置（100% 宽度、不自动播放、淡蓝色主题等），不显示封面。
{/tab}
{tab name="效果"}
这里就不展示了，可自己实际应用
{/tab}
{/tabs}
]]>
