Button - 按钮

button 按钮短代码显示一个可点击的按钮，颜色、标题和图标可调整

Hugo HomePage Go Hugo Download

用法

​
{{% button href="https://gohugo.io/" style="blue" icon="fas fa-chevron-right" %}}Hugo HomePage{{% /button %}}
{{% button href="https://gohugo.io/" %}}Go Hugo{{% /button %}}
{{% button href="images/magic.gif?download" style="tip" icon="fa-solid fa-download" %}}Download{{% /button %}}
{{ partial "shortcodes/button.html" (dict
    "page" .
    "href" "https://gohugo.io/"
    "style"="blue"
    "icon" "fas fa-chevron-right"
    "content" "Hugo HomePage"
)}}
{{ partial "shortcodes/button.html" (dict
    "page" .
    "href" "https://gohugo.io/"
    "content" "Go Hugo"
)}}
{{ partial "shortcodes/button.html" (dict
  "page" .
  "href" "https://gohugo.io/"
  "style" "tip"
  "icon" "wand-magic-sparkles"
  "content" "Download Magic"
)}}

参数

名字 默认值 笔记
href <empty> 按钮的目标 URL 或要在单击时执行的 JavaScript 代码。如果未设置此参数，则按钮将不执行任何作，但仍显示为可单击。

- 如果以 javascript: 开头：所有后续文本都将在您的浏览器中执行，每隔一个字符串将被解释为 URL，您也可以使用 链接效果
style transparent 用于按钮的样式方案。

- 按严重性: caution, important, info, note, tip, warning
- 按品牌颜色: primary, secondary, accent
- 按颜色: blue, cyan, green, grey, magenta, orange, red
- 按特殊颜色: default, transparent, code

您还可以 定义自己的样式.
color see notes 要使用的CSS 颜色值. 。如果未设置，则所选颜色取决于 style。任何给定的值都将覆盖默认值。

- 对于 Severity 样式：与 Severity （严重性） 匹配的颜色
- 对于所有其他样式：相应的颜色
icon see notes Font Awesome 图标名称 设置到标题的左侧。根据 style ，可能会有一个默认图标。任何给定的值都将覆盖默认值。

- 对于 Severity 样式：严重性
- 对于所有其他样式：

如果不希望严重性样式没有图标，则必须将此参数设置为 " "（填充有空格的非空字符串）
iconposition left 将图标放置在标题的 left 左侧 或 right 右侧。
type see notes 如果 href 为 JavaScript 则为 按钮类型。否则，不使用该参数。如果未给出参数，则默认为 button。
<content> see notes 按钮标题的任意文本。根据 style ，可能会有一个默认标题。任何给定的值都将覆盖默认值。

- 对于 Severity Styles（严重性样式）：与 Severity （严重性） 匹配的标题
-对于所有其他样式：

如果不希望严重性样式没有标题，则必须将此参数设置为 " "（填充有空格的非空字符串）

例子

Style

按严重性

{{% button href="https://gohugo.io/" style="caution" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="important" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="info" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="note" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="tip" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="warning" %}}Get Hugo{{% /button %}}

Get Hugo Get Hugo Get Hugo Get Hugo Get Hugo Get Hugo

按品牌颜色

{{% button href="https://gohugo.io/" style="primary" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="secondary" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="accent" %}}Get Hugo{{% /button %}}

Get Hugo Get Hugo Get Hugo

按颜色

{{% button href="https://gohugo.io/" style="blue" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="cyan" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="green" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="grey" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="magenta" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="orange" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="red" %}}Get Hugo{{% /button %}}

Get Hugo Get Hugo Get Hugo Get Hugo Get Hugo Get Hugo Get Hugo

按特殊颜色

{{% button href="https://gohugo.io/" style="default" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="transparent" %}}Get Hugo{{% /button %}}

Get Hugo Get Hugo

Icon

Empty

{{% button href="https://gohugo.io/" icon=" " %}}{{% /button %}}

Only

{{% button href="https://gohugo.io/" icon="download" %}}{{% /button %}}

向左侧

{{% button href="https://gohugo.io/" icon="download" %}}Get Hugo{{% /button %}}
Get Hugo

向右侧

{{% button href="https://gohugo.io/" icon="download" iconposition="right" %}}Get Hugo{{% /button %}}
Get Hugo

严重性覆盖

{{% button href="https://gohugo.io/" icon="dragon" style="warning" %}}Get Hugo{{% /button %}}
Get Hugo

严重性覆盖链接效果 （Target， Download）

您可以将 链接效果 与 href 结合使用，以便在其他选项卡中打开链接或开始下载。

{{% button href="https://gohugo.io/?target=_blank" %}}Go Hugo{{% /button %}}
{{% button href="images/magic.gif?download" style="tip" icon="wand-magic-sparkles" %}}Download Magic{{% /button %}}

Go Hugo Download Magic

其他

具有用户定义的颜色、Font Awesome 品牌图标和 Markdown 标题

{{% button href="https://gohugo.io/" color="fuchsia" icon="fa-fw fab fa-hackerrank" %}}Get **Hugo**{{% /button %}}
Get Hugo

具有所有默认值的严重性样式

{{% button href="https://gohugo.io/" style="tip" %}}{{% /button %}}
提示

按钮 到内部页面

{{% button href="/index.html" %}}Home{{% /button %}}
Home

带有 JavaScript 动作的按钮

如果你的 JavaScript 动作之后没有改变焦点，请确保在最后调用 this.blur() 来取消选择该按钮。

{{% button style="primary" icon="bullhorn" href="javascript:alert('Hello world!');this.blur();" %}}Shout it out{{% /button %}}

form 元素中的按钮

要在 Markdown 中使用原生 HTML 元素，请在 hugo.toml 中添加此元素

[markup.goldmark.renderer]
    unsafe = true
<form action="../../search.html" method="get">
  <input name="search-by-detail" class="search-by" type="search">
  {{% button type="submit" style="secondary" icon="search" %}}Search{{% /button %}}
</form>