主题简介/下载
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 个可选参数，用于自定义面板标题和默认状态：

使用示例

指定标题为 【自定义标题】，并设置默认展开【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="短代码"}

短代码参数

短代码使用方法

基础示例（必填参数）

[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="短代码"}

短代码参数

短代码使用方法

基础示例（必填参数）

[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="短代码"}

短代码参数

短代码使用方法

## 基础颜色按钮（默认尺寸）
[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="短代码"}

短代码参数

短代码使用方法

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

{/tab}

{tab name="效果"}
这里就不展示了
{/tab}
{/tabs}

视频

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

{tab name="短代码"}

短代码参数

短代码使用方法

基础示例
[video src="https://example.com/video/intro.mp4"]
完整示例（自定义常用参数）
[video src="视频链接" poster="视频封面" width="视频播放器宽度" autoplay="是否自动播放" loop="是否循环播放" theme="播放器主题颜色" volume="默认音量大小"]

• 解析逻辑：使用默认配置（100% 宽度、不自动播放、淡蓝色主题等），不显示封面。

{/tab}

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

一款简洁的的 Typecho 单栏主题

用户交流群：点击加入
主题介绍页：点击查看
主题短代码使用手册：点击查看
主题宗旨：简洁、简洁、还是简洁！

特点和功能

• 响应式设计（PC / 移动完美兼容）
• 内置文章浏览量统计、点赞、分享功能。
• 支持任务列表、视频、音频、折叠面板等短代码。
• 完善的评论系统，包括评论表情、敏感词过滤、字数限制、博主标识等。
• 良好的 SEO 优化，以及语义化标签使用。
• 提供相册独立页面、归档页面、友链页面等自定义页面模板。
• 支持主题设置备份与还原、自定义 CSS/JS、ICP 备案号展示等扩展功能。
• 全站变量名、类名统一规范，方便二开与扩展

如何使用

主题安装

1. 下载主题：访问 【github代码仓库 】下载最新的代码文件。
   [attachment url="https://github.com/zhu885744/buyu/releases/download/v1.3.2/buyu-1.3.2.zip" title="buyu-1.3.2「最新版本」" size="1.68MB" type="zip" target="_blank"]
2. 上传并解压：将下载好的压缩包上传至 Typecho 程序的 /usr/themes/ 目录，然后解压。
3. 启用主题：进入 Typecho 后台，依次选择「控制台」>「外观」>「buyu」，点击「启用」按钮。

友情链接插件安装

1. 下载插件：访问 【Links 插件】 下载最新版本的插件压缩包。
2. 上传并解压：将下载好的压缩包上传至 Typecho 程序的 /usr/plugins/ 目录，然后解压。
3. 启用插件：进入 Typecho 后台，依次选择「控制台」>「插件」>「Links」，点击「启用」按钮。

IP 属地本地数据库配置

1. 下载数据库：访问 【qqwry.dat】 下载 IP 属地本地数据库压缩包。
2. 解压并放置：将下载好的压缩包解压为 qqwry.dat 文件，并将其放置在 Typecho 程序的根目录。

常见问题

[collapse title="请确保您符合使用条件：" open="false" type="default"]
typecho版本：建议1.2.1
php版本：8.0-8.4
[/collapse]

[collapse title="打开主题后页面空白：" open="false" type="default"]
检查插件冲突：进入 Typecho 后台的「插件」页面，依次禁用插件，然后刷新页面，排查是哪个插件导致的冲突。
检查静态资源引用：检查主题文件中是否存在重复引用的静态资源，如 CSS、JS 文件等，删除重复引用的部分。
[/collapse]

[collapse title="如何使用相册独立页面？1.3.1版本相册独立页面去除了！！仅限1.3.0版本使用！！" open="false" type="default"]
在后台创建相册页面并添加图片数据

• 登录 Typecho 后台，进入「管理」→「新建页面」
• 在右侧「页面属性」中选择模板为「相册」
• 滚动到页面底部「自定义字段」，点击「自定义相册」：
• 字段值：填写 JSON 格式的图片数据，示例：

[
    {
        "url": "图片链接",
        "alt": "风景照片1",
        "title": "卡片标题"
    },
    {
        "url": "图片链接",
        "alt": "风景照片2",
        "title": "卡片标题"
    },
    {
        "url": "图片链接",
        "alt": "风景照片3",
        "title": "卡片标题"
    }
]

[/collapse]

[collapse title="如何使用短代码？" open="false" type="default"]
可以查看
https://zhuxu.asia/archives/147/
[/collapse]

更新日志

[1.3.2]更新内容如下

• 新增：全局入场动画
• 优化：文章版权信息样式
• 优化：弹窗加载层次
• 优化：代码复制消息提示改用公共提示展示
• 修复：部分环境下判断评论用户昵称是否至少包含一个中文功能失效的问题
• 修复：评论表情容器会被页脚footer遮挡的问题

[1.3.1] 更新内容如下

• 适配：PHP 8.0-8.4 环境
• 新增：文章置顶
• 新增：wap和pc端背景图设置
• 新增：浅色深色模式切换
• 新增：多种短代码（tab框、附件下载卡片、徽章、自定义按钮、进度条）
• 新增：文章底部版权开关
• 新增：文章打赏
• 新增：文章列表的基础信息增加了图标
• 新增：评论昵称需包含中文功能（不满足时则进入待审核）
• 调整：归档页样式
• 调整：WAP 端导航栏样式，并增加了浅色深色切换按钮
• 重构：主题设置表单
• 优化：文章摘要截取
• 优化：评论通知增加了待审核及当检测到是游客回复游客的场景时，单独向站长邮箱发送通知
• 优化：文章点赞、分享、视频音频短代码实现逻辑
• 优化：公共css类增加了更多的常用类、调整了全局结构
• 优化：很多很多的细节
• 修复：使用php8.2版本报错问题
• 修复：自定义Gravatar头像源地址设置失效的问题
• 修复：移动端侧边栏分类展开后点击空白处内容自动消失展开的下拉列表也不关闭的问题
• 修复：部分环境下点赞、分享功能失效的问题

[1.3.0] 更新内容如下

• 新增：全新的桌面端和移动端导航栏样式
• 新增：相册独立页面
• 新增：自定义 Gravatar 头像源地址
• 新增：评论表情增加了 14 个颜文字和 44 个Emoji
• 新增：tab标签栏短代码
• 优化：全局ui样式改为卡片样式
• 优化：博主评论的标签显示并增加了用户等级标签显示
• 优化：附件页面和作者页面直接重定向到404页面
• 优化：首页和分类页底部分页按钮样式
• 优化：适配高分辨率显示器显示
• 优化：使用语义化时间展示文章发布时间
• 优化：完善了核心代码的注释，方便修改
• 修复：评论回复邮件无法发送的问题
• 修复：文章点赞逻辑报错的问题
• 修复：某些不是什么大问题的bug
• 移除：IE 浏览器兼容相关代码

[1.2.9] 更新内容如下

• 新增：文章版权信息提示
• 新增：评论内容输入框下方字数/可输入多少字/超出多少个字提示
• 新增：评论超过主题设置的字数限制则对发送评论按钮禁用
• 新增：评论敏感词的操作可设为无动作、标记为待审核、评论失败三种模式
• 优化：点赞按钮与分享按钮样式
• 优化：自定义静态资源链接获取代码
• 优化：点击发送评论按钮若评论失败则返回详细错误信息
• 优化：视频播放器支持了更多参数
• 修复：图片灯箱不显示图片的问题
• 修复：图片懒加载失效的问题
• 修复：代码块中填写短代码会被解析的问题

[1.2.8] 更新内容如下

• 新增：主题设置评论敏感词过滤、限制用户评论最大字数、评论需包含中文功能
• 新增：文章点赞、分享
• 新增：任务列表短代码
• 新增：全局消息提示
• 新增：评论通知
• 修复：主题设置初始化逻辑错误

[1.2.7] 更新内容如下

• 优化：文章密码保护输入框样式
• 优化：进一步完善 CSS 未完成的变量替换

[1.2.6] 更新内容如下

• 新增：全新的主题设置样式
• 新增：评论博主标识
• 新增：主题设置自定义网站 Favicon 图标
• 修复：评论回复按钮溢出，评论回复表情按钮样式错乱
• 优化：替换了 CSS 硬编码的颜色、间距、字体大小等值，改为使用变量

[1.2.5] 更新内容如下

• 新增：视频播放器更改为 DPlayer 插件实现
• 优化：全局圆角数值
• 优化：略调全局ui样式
• 优化：回到顶部按钮样式
• 优化：评论样式
• 优化：关闭全局评论时，不显示文章/页面的评论统计项
• 修复：友链卡片文字溢出
• 修复：自定义css代码失效的问题
• 修复：自定义js代码失效的问题

[1.2.4] 更新内容如下

• 新增：视频/音频/折叠面板短代码
• 新增：主题设置备份
• 新增：站点图片logo设置
• 优化：全局代码结构
• 优化：首页文章列表样式
• 优化：全新的归档页面样式
• 优化：全新的 404 页面样式
• 优化：文章折叠面板的动画体验
• 优化：主题页脚样式/分页按钮样式
• 修复：404页面相关css代码造成的布局错乱问题
• 修复：修改了设置粗体文字后显示是紫色的问题

[1.2.3] 更新内容如下

• 新增：评论表情
• 新增：未知bug

[1.2.2] 更新内容如下

• 微调：评论样式
• 微调：首页文章列表样式
• 新增：图片懒加载功能
• 新增：图片灯箱功能
• 新增：文章代码块增加了复制功能
• 新增：首页文章列表、独立页面增加了文章阅读量
• 优化：部分代码结构
• 调整：文章、归档、友链页面样式

[1.2.1] 更新内容如下

• 优化：取消了侧边栏
• 新增：底部icp备案号设置
• 新增：底部公安联网备案号设置
• 新增：主题设置全局评论开关闭按钮
• 新增：友链页面
• 新增：归档页面
• 新增：文章编辑器字符统计
• 新增：自定义css、自定义js、自定义底部栏内容、底部自定义内容
• 优化：MD内容渲染样式

鸣谢

• typecho
• fancybox
• Message.js
• APlayer
• DPlayer

开源许可

• MIT License
• Powered by typecho | Theme is buyu
• 程序由不语（朱旭）开发并开源，欢迎参与贡献

文章代码块新增复制按钮

夜间日间模式

前台登录按钮自由开关

站点运行时间

自由开关全站pajx

下载主题「压缩包内含友链插件」

gitee代码仓库

使用教程

主题使用教程
主题简介/更新日志