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"]

  1. 问：这个折叠面板支持嵌套吗？

    答：支持，可以在内容中嵌套其他短代码或HTML。
  2. 问：标题能放特殊符号吗？

    答：可以，会自动过滤不安全内容，放心使用。
    [/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-ofa-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、infodefault
color否徽章的自定义背景色（支持十六进制、rgb、rgba 格式，格式不合法时不生效）#ff5722、rgb(255,87,34)、rgba(255,87,34,0.8)空（使用type对应的预设颜色）
size否徽章的尺寸（限制在预设尺寸内，为空时使用默认尺寸）sm（小尺寸）、lg（大尺寸）空（默认尺寸）
outline否是否显示边框样式（布尔值，为true时显示边框，不填充纯色背景）true、falsefalse

短代码使用方法

基础示例（必填参数）

[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%、1200px100%（全屏宽度）
autoplay否是否自动播放（布尔值字符串，需符合浏览器自动播放策略，如静音自动播放）true、falsefalse
loop否是否循环播放（视频播放结束后自动重新开始）true、falsefalse
preload否视频预加载策略（控制页面加载时视频资源的加载方式）auto（自动）、none（不预加载）、metadata（仅加载元数据）auto
lang否播放器界面语言（控制按钮文本、提示信息等语言显示）zh-cn（中文）、en（英文）zh-cn
mutex否是否互斥播放（同一页面多个视频播放器，仅允许一个播放，其他自动暂停）true、falsetrue
theme否播放器主题颜色（控制进度条、按钮等交互元素的颜色）#ff4400、rgba(51,153,255,1)#b7daff（淡蓝色）
hotkey否是否启用热键（支持键盘控制，如空格暂停 / 播放、方向键快进 / 快退）true、falsetrue
volume否默认音量大小（0-1 之间的数值，0 为静音，1 为最大音量）0.5、0.80.7（70% 音量）

短代码使用方法

基础示例
[video src="https://example.com/video/intro.mp4"]
完整示例（自定义常用参数）
[video src="视频链接" poster="视频封面" width="视频播放器宽度" autoplay="是否自动播放" loop="是否循环播放" theme="播放器主题颜色" volume="默认音量大小"]
  • 解析逻辑：使用默认配置（100% 宽度、不自动播放、淡蓝色主题等），不显示封面。

{/tab}

{tab name="效果"}
这里就不展示了，可自己实际应用
{/tab}
{/tabs}