Files
hextra_mirror/exampleSite/content/docs/guide/shortcodes/hextra.zh-cn.md
Ludovic Fernandez 7b8e1bdfd1 docs: add a page for hextra shortcodes (#764)
* docs: add a page for hextra-home shortcodes

* fix: add prefix
2025-08-22 19:06:49 +01:00

4.1 KiB

title, linkTitle, sidebar, next
title linkTitle sidebar next
Hextra Shortcodes Hextra
exclude
true
/docs/guide/deploy-site

这些短代码的主要用途是在布局hextra-home内。

hextra/feature-card

显示功能卡的短代码。

Usage

{{</* hextra/feature-card title="Title" subtitle="Subtitle" */>}}

Options

Parameter Description
title 卡片的标题。
subtitle 卡片的副标题。
class 卡片的类别。
image 卡片的图片。
imageClass 图片的类别。
style 卡片的样式。
icon 卡片的图标。
link 卡片的链接。

hextra/feature-grid

用于显示特征网格的短代码。

Usage

{{</* hextra/feature-grid cols="3" */>}}
  {{</* hextra/feature-card title="One" */>}}
  {{</* hextra/feature-card title="Two" */>}}
  {{</* hextra/feature-card title="Three" */>}}
{{</* /hextra/feature-grid */>}}

Options

Parameter Description
cols 列数。
style 网格的样式。

hextra/hero-badge

用于呈现带有链接的徽章的短代码。

Usage

{{</* hextra/hero-badge */>}}
  <div class="hx:w-2 hx:h-2 hx:rounded-full hx:bg-primary-400"></div>
  <span>Free, open source</span>
  {{</* icon name="arrow-circle-right" attributes="height=14" */>}}
{{</* /hextra/hero-badge */>}}

Options

Parameter Description
link 徽章的链接。
class 徽章的类别。
style 徽章的样式。

hextra/hero-button

用于呈现带有链接的按钮的短代码。

Usage

{{</* hextra/hero-button text="Get Started" link="/docs" */>}}

Options

Parameter Description
link 按钮的链接。
text 按钮的文本。
style 按钮的样式。

hextra/hero-container

一个简单的英雄容器,左侧有一个图像。

Usage

{{</* hextra/hero-container image="images/logo.svg"  imageTitle="title" */>}}
    Content
{{</* /hextra/hero-container */>}}

Options

Parameter Description
class 容器的类。
cols 列数(默认值:2)。
image 容器的图片。
imageCard 是否将图片显示为卡片(默认值:false)。
imageClass 图片的类。
imageLink 图片的链接。
imageStyle 图片的样式。
imageTitle 图片的标题。
imageWidth 图片的宽度(默认值:350)。
imageHeight 图片的高度(默认值:350)。
style 容器的样式。

hextra/hero-headline

显示英雄标题的短代码。

Usage

{{</* hextra/hero-headline */>}}
  Build modern websites&nbsp;<br class="hx:sm:block hx:hidden" />with Markdown and Hugo
{{</* /hextra/hero-headline */>}}

Options

Parameter Description
style 标题的样式。

hextra/hero-section

带有标题和可选样式的简单英雄部分。

Usage

{{</* hextra/hero-section heading="h3" */>}}Title{{</* /hextra/hero-section */>}}>

Options

Parameter Description
heading 标题级别(默认值:h2)。
style 标题的样式。
content 标题的内容。

hextra/hero-subtitle

显示英雄字幕的短代码。

Usage

{{</* hextra/hero-subtitle */>}}
  Fast, batteries-included Hugo theme&nbsp;<br class="hx:sm:block hx:hidden" />for creating beautiful static websites
{{</* /hextra/hero-subtitle */>}}

Options

Parameter Description
style 字幕的样式。