标签页（Tabs）
{tabs}
{tab name="标题1"}
内容
{/tab}
{tab name="标题2"}
内容
{/tab}
{tab name="标题3"}
内容
{/tab}
{/tab}
{tab name="效果"}
由于代码性质这里就不放效果了,可直接查看
{/tab}
{/tabs}
折叠面板
短代码参数
支持 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}
附件下载卡片
{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}
徽章
{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}
自定义按钮
{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}
进度条
{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}
音频
{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}
视频
{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"]- 解析逻辑：使用默认配置（100% 宽度、不自动播放、淡蓝色主题等），不显示封面。
完整示例（自定义常用参数）
[video src="视频链接" poster="视频封面" width="视频播放器宽度" autoplay="是否自动播放" loop="是否循环播放" theme="播放器主题颜色" volume="默认音量大小"]{/tab}
{tab name="效果"}
这里就不展示了，可自己实际应用
{/tab}
Article mein information clearly present ki gayi hai.
Jo users daily market activity track karna chahte hain, unke liye Satta King ek useful reference ban sakta hai.
Data yahan regularly refresh hota rehta hai.