按钮功能使用示例

本文演示 Demius 主题的按钮短代码功能，展示各种使用场景和配置选项。

功能简介

按钮短代码是 Demius 主题提供的强大功能，允许您在文章内容中快速插入各种样式的按钮。支持多种颜色、大小、图标，并且可以与其他短代码嵌套使用。

主要特性

• 🎨 多种颜色：primary、success、warning、danger、info、default
• 📏 多种大小：small、normal、large
• 🎯 描边样式：支持实心和描边两种样式
• 🔗 链接支持：可作为链接按钮或普通按钮
• 🎭 图标支持：支持 FontAwesome 图标
• 📦 嵌套支持：可以与其他短代码嵌套使用
• 📱 响应式设计：完美适配各种设备

基础用法

1. 最简单的按钮

只提供链接地址，使用默认样式：

代码：

{{< button href="https://example.com" text="访问示例网站" >}}

2. 使用内部内容

使用短代码的内部内容作为按钮文字：

代码：

{{< button href="/posts/" >}}查看文章列表{{< /button >}}

3. 普通按钮（无链接）

不提供链接地址，渲染为普通按钮：

代码：

{{< button >}}点击我{{< /button >}}

颜色样式

Primary 样式（主题色）

Primary 按钮 Primary 描边

代码：

{{< button href="#" color="primary" >}}Primary 按钮{{< /button >}}
{{< button href="#" color="primary" outline="true" >}}Primary 描边{{< /button >}}

Success 样式（成功）

Success 按钮 Success 描边

Warning 样式（警告）

Warning 按钮 Warning 描边

Danger 样式（危险）

Danger 按钮 Danger 描边

Info 样式（信息）

Info 按钮 Info 描边

Default 样式（默认）

Default 按钮 Default 描边

按钮大小

Small（小）

小按钮 小描边按钮

代码：

{{< button href="#" color="primary" size="small" >}}小按钮{{< /button >}}

Normal（正常）

正常按钮 正常描边按钮

代码：

{{< button href="#" color="primary" size="normal" >}}正常按钮{{< /button >}}

Large（大）

大按钮 大描边按钮

代码：

{{< button href="#" color="primary" size="large" >}}大按钮{{< /button >}}

图标支持

按钮支持 FontAwesome 图标，只需在 icon 参数中指定图标类名：

下载按钮

代码：

{{< button href="#" icon="fas fa-download" color="success" >}}下载文件{{< /button >}}

更多图标示例

首页 搜索 喜欢 分享 联系

代码：

{{< button href="#" icon="fas fa-home" color="primary" >}}首页{{< /button >}}
{{< button href="#" icon="fas fa-search" color="info" >}}搜索{{< /button >}}
{{< button href="#" icon="fas fa-heart" color="danger" >}}喜欢{{< /button >}}
{{< button href="#" icon="fas fa-share-alt" color="warning" >}}分享{{< /button >}}
{{< button href="#" icon="fas fa-envelope" color="primary" outline="true" >}}联系{{< /button >}}

块级按钮

使用 block="true" 可以让按钮占满整行：

代码：

{{< button href="#" color="primary" block="true" >}}块级按钮（占满整行）{{< /button >}}

链接属性

新窗口打开

使用 target="_blank" 让链接在新窗口打开：

代码：

{{< button href="https://example.com" target="_blank" color="primary" >}}新窗口打开{{< /button >}}

添加 rel 属性

使用 rel 参数添加链接关系属性：

代码：

{{< button href="https://example.com" target="_blank" rel="noopener noreferrer" color="info" >}}安全外部链接{{< /button >}}

嵌套使用

按钮短代码支持与其他短代码嵌套使用，实现更丰富的效果。

嵌套彩色文字

代码：

{{< button href="#" color="primary" >}}
  {{< color "red" >}}红色文字{{< /color >}} 在按钮中
{{< /button >}}

嵌套在折叠内容中

代码：

{{< collapse "点击展开查看按钮" >}}

{{< button href="/posts/" color="primary" >}}查看文章{{< /button >}}
{{< button href="/about/" color="success" >}}关于我{{< /button >}}
{{< button href="/links/" color="info" >}}友情链接{{< /button >}}

{{< /collapse >}}

嵌套在选项卡中

代码：

{{< tabs id="button-tabs-demo" tabs="按钮样式,按钮大小,带图标" >}}

{{< tab index="1" >}}

{{< button href="#" color="primary" >}}Primary 按钮{{< /button >}}
{{< button href="#" color="success" >}}Success 按钮{{< /button >}}
...

{{< /tab >}}
...
{{< /tabs >}}

实际应用场景

1. 下载链接

2. 外部链接

3. 导航按钮组

所有文章 分类浏览 标签云 关于我

4. 操作按钮

点赞 收藏 分享 评论

参数说明

使用技巧

1. 文字优先：如果同时提供了 text 参数和内部内容，text 参数优先级更高
2. 嵌套顺序：按钮可以嵌套在其他短代码中，也可以包含其他短代码
3. 图标间距：图标和文字之间会自动添加间距，无需手动添加
4. 响应式：按钮在不同设备上会自动调整大小，保证良好的用户体验
5. 主题适配：按钮会自动适配亮色和暗色主题

注意事项

• 按钮文字支持 Markdown 格式和嵌套短代码
• 如果提供 href 参数，按钮会渲染为 <a> 标签；否则渲染为 <button> 标签
• 图标使用 FontAwesome，确保主题已加载 FontAwesome 图标库
• outline="true" 时，按钮会显示为描边样式，背景透明
• block="true" 时，按钮会占满整行，适合作为导航按钮使用

以上就是按钮短代码的完整使用说明。您可以根据实际需求选择合适的样式和配置，创建美观实用的按钮。