标签页（Tabs）

  • 简介
  • 短代码
  • 效果

标签页（Tabs）组件用于在有限空间内展示多个分类内容，通过点击标签切换不同内容区域，保持界面简洁有序。支持嵌套其他短代码（如按钮、折叠面板等）和代码块，适用于展示多维度信息对比或分步内容。

{tabs}
{tab name="标题1"}
内容
{/tab}

{tab name="标题2"}
内容
{/tab}

{tab name="标题3"}
内容
{/tab}
{/tabs}


由于代码性质这里就不放效果了,可直接查看

折叠面板

  • 简介
  • 短代码
  • 效果

折叠面板主要用于收纳补充说明、代码块、长文本等内容，避免文章冗长，提升阅读体验。支持自定义标题、默认展开状态及 6 种预设样式（如成功、警告、危险等主题），且兼容嵌套其他短代码。

短代码参数

支持 2 个可选参数，用于自定义面板标题和默认状态：

参数名作用取值范围默认值
title自定义面板的标题文字任意文本（建议简短明了）折叠面板
open设置面板默认是否展开true（默认展开） / false（默认折叠）false

使用示例

指定标题为 【自定义标题】，并设置默认展开【open="true"】或默认折叠【open="false"】

[collapse title="自定义标题" open="true"]
内容
[/collapse]

效果：
显示标题为 “常见问题解答” 的面板，默认展开显示内容，点击标题可折叠。


常见问题解答

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

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

    答：可以，会自动过滤不安全内容，放心使用。

温馨提示

这是默认展开的折叠面板，适合展示提示信息。


附件下载卡片

  • 简介
  • 短代码
  • 效果

附件下载卡片用于展示各类文件的下载入口，支持自定义图标、标题、大小等信息，自定义文件类型标识和新文件标记。点击 "下载" 按钮可直接下载或跳转至文件地址，支持指定打开方式（当前窗口 / 新窗口）。

短代码参数

参数名必选含义与用途示例值默认值
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="链接打开方式"]


PDF文档
产品使用手册
2.4MB

Word文档

季度报告
1.8MB

Excel表格

销售数据统计
3.2MB

软件安装包

客户端安装包
15.6MB

源码包

项目源码
8.7MB

图片文件

界面截图
1.2MB

视频文件

功能演示视频
85.3MB

音频文件

访谈录音
12.5MB

新文件标记

系统更新包
23.7MB

当前窗口打开

说明文档
45KB

徽章

  • 简介
  • 短代码
  • 效果

徽章（Badge）用于展示状态标识、分类标签或重要程度，支持多种颜色、尺寸和样式变体。

短代码参数

参数名必选含义与用途示例值默认值
$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属性，避免样式错乱。

基础徽章
成功
警告

尺寸徽章
小尺寸
大尺寸

扩展颜色
橙色
青色
紫色

边框样式
边框
大边框紫色

自定义颜色
自定义红
自定义轮廓

已完成
待处理
通知
推荐
热门
小徽章
大徽章
边框样式
自定义边框色
VIP会员

自定义按钮

  • 简介
  • 短代码
  • 效果

自定义按钮支持多种颜色、尺寸和样式，可作为操作入口或链接跳转载体。提供实心 / 轮廓两种基础样式，支持全宽显示（块级按钮）和指定链接打开方式，适合各类交互场景。

短代码参数

参数名说明可选值/格式默认值示例
url按钮链接地址合法URL（如https://example.com或#）#（空链接）无
type按钮样式类型（颜色/边框）- 纯色：default、blue、red、orange、yellow、green、cyan、purple
- 边框：outline-blue、outline-red等带outline-前缀的颜色		default
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 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]

基础颜色按钮（默认尺寸）

红色按钮（var(--color-red-500)）

橙色按钮（var(--color-orange-500)）

黄色按钮（var(--color-yellow-500)）

绿色按钮（var(--color-green-500)）

青色按钮（var(--color-cyan-500)）

蓝色按钮（var(--color-blue-500)）

紫色按钮（var(--color-purple-500)）

轮廓按钮（默认尺寸）

红色轮廓（var(--color-red-500)）

橙色轮廓（var(--color-orange-500)）

黄色轮廓（var(--color-yellow-600)）

绿色轮廓（var(--color-green-500)）

青色轮廓（var(--color-cyan-500)）

蓝色轮廓（var(--color-blue-500)）

紫色轮廓（var(--color-purple-500)）

小尺寸按钮

红色小按钮

橙色小轮廓按钮

大尺寸按钮

绿色大按钮

青色大轮廓按钮

块级全宽按钮

蓝色块级按钮

紫色块级轮廓按钮

带链接的按钮

新窗口打开

返回顶部

进度条

  • 简介
  • 短代码
  • 效果

进度条用于展示任务完成进度或加载状态，支持多种样式（实心 / 条纹 / 动画条纹）和状态颜色（成功 / 警告 / 危险 / 信息）。可添加标题文本说明进度含义，适合数据加载、任务完成度等场景。

默认进度条：[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"]


默认进度条：
60%

带标题：
完成度 (75%)
75%

成功样式：
85%

警告样式：
90%

危险样式：
95%

信息样式：
50%

条纹样式：
65%

动画条纹：
70%

音频

  • 简介
  • 短代码
  • 效果

音频短代码用于嵌入音频文件，支持显示歌曲名称、艺术家信息和自定义封面图。提供标准音频控制界面（播放 / 暂停 / 进度条 / 音量），适合播客、音乐片段等音频内容展示。

短代码参数

参数名必选含义与用途示例值默认值
url是音频文件的播放链接（核心参数，为空时不生成播放器，仅返回空字符串）https://example.com/audio/song.mp3空（必填）
name否音频的名称（显示在播放器上，用于标识音频内容）《晴天》、访谈录音第1段未知音频
artist否音频的作者 / 创作者（显示在播放器上，补充音频信息）周杰伦、产品部团队未知艺术家
cover否音频的封面图片链接（显示在播放器左侧，提升视觉效果，支持 JPG/PNG 等格式）https://example.com/covers/song.jpg空（不显示封面）

短代码使用方法

[audio name="歌曲名称" artist="作者" url="音频链接" cover="音频封面链接"]


这里就不展示了

视频

  • 简介
  • 短代码
  • 效果

视频短代码用于生成视频播放器组件，基于 DPlayer（一款功能丰富的网页视频播放器库）实现，可在页面中嵌入支持自定义尺寸、封面、播放策略的视频播放功能

短代码参数

参数名必选含义与用途示例值默认值
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"]
  • 解析逻辑：使用默认配置（100% 宽度、不自动播放、淡蓝色主题等），不显示封面。

完整示例（自定义常用参数）

[collapse title="自定义标题" open="true"]
内容
[/collapse]
0


这里就不展示了，可自己实际应用