内容组件
按钮

按钮

一个现代化、可自定义的按钮组件（shortcode）：支持渐变样式、图标与智能链接处理。

基本用法

联系我们
访问外部网站

上面按钮的写法：

{{< button url="/contact" >}}联系我们{{< /button >}}

{{< button url="https://example.com" new_tab="true" style="secondary" >}}访问外部网站{{< /button >}}

样式变体

主要（默认）

主要按钮
{{< button url="#" style="primary" >}}主要按钮{{< /button >}}

次要

次要按钮
{{< button url="#" style="secondary" >}}次要按钮{{< /button >}}

描边

描边按钮
{{< button url="#" style="outline" >}}描边按钮{{< /button >}}

幽灵

幽灵按钮
{{< button url="#" style="ghost" >}}幽灵按钮{{< /button >}}

尺寸

小

小按钮

中（默认）

中按钮

大

大按钮

超大

超大按钮
{{< button url="#" size="sm" >}}小按钮{{< /button >}}
{{< button url="#" size="md" >}}中按钮{{< /button >}}
{{< button url="#" size="lg" >}}大按钮{{< /button >}}
{{< button url="#" size="xl" >}}超大按钮{{< /button >}}

对齐

左（默认）

左对齐

居中

居中对齐

右

右对齐
{{< button url="#" align="left" >}}左对齐{{< /button >}}
{{< button url="#" align="center" >}}居中对齐{{< /button >}}
{{< button url="#" align="right" >}}右对齐{{< /button >}}

带图标

图标在文字前

下载

图标在文字后

继续 
{{< button url="#" icon="arrow-down-tray" >}}下载{{< /button >}}
{{< button url="#" icon="arrow-right" icon_position="right" >}}继续{{< /button >}}

圆角

小圆角

小圆角

中圆角（默认）

中圆角

大圆角

大圆角

胶囊形

胶囊按钮
{{< button url="#" rounded="sm" >}}小圆角{{< /button >}}
{{< button url="#" rounded="md" >}}中圆角{{< /button >}}
{{< button url="#" rounded="lg" >}}大圆角{{< /button >}}
{{< button url="#" rounded="full" >}}胶囊按钮{{< /button >}}

进阶示例

行动号召按钮

立即开始
{{< button url="/signup" style="primary" size="lg" align="center" icon="rocket-launch" >}}立即开始{{< /button >}}

新标签打开外链

在 GitHub 查看 
{{< button url="https://github.com/hugo-blox/kit" new_tab="true" style="outline" icon="arrow-top-right-on-square" icon_position="right" >}}在 GitHub 查看{{< /button >}}

下载按钮

下载 PDF
{{< button url="/files/document.pdf" style="secondary" icon="document-arrow-down" rounded="full" >}}下载 PDF{{< /button >}}

参数

参数类型默认值说明
urlstring#必填。 按钮链接地址（站内或站外）
textstring内部内容按钮文字（会覆盖 shortcode 内部内容）
new_tabbooleanfalse是否在新标签页打开
stylestringprimary按钮样式：primary、secondary、outline、ghost
sizestringmd按钮尺寸：sm、md、lg、xl
alignstringleft对齐方式：left、center、right
iconstring-图标名（来自 Hero Icons）
icon_positionstringleft图标位置：left、right
roundedstringmd圆角：sm、md、lg、xl、full
disabledbooleanfalse是否禁用按钮

安全特性

按钮组件会自动处理外链安全：

  • 外部链接会加上 rel="noreferrer"
  • 新标签打开的外部链接会加上 rel="noopener noreferrer"
  • 新标签打开的站内链接会加上 rel="noopener"

无障碍

按钮组件内置无障碍支持：

  • 正确的 role="button" 属性
  • 支持 aria-label
  • 键盘聚焦指示
  • 高对比度聚焦环
  • 禁用状态处理
docs