图示
示例
使用此标记
{{< figure
src="/images/examples/zion-national-park.jpg"
alt="A photograph of Zion National Park"
link="https://www.nps.gov/zion/index.htm"
caption="Zion National Park"
class="ma0 w-75"
>}}
Hugo 渲染此 HTML
<figure class="ma0 w-75">
<a href="https://www.nps.gov/zion/index.htm">
<img
src="/images/examples/zion-national-park.jpg"
alt="A photograph of Zion National Park"
>
</a>
<figcaption>
<p>Zion National Park</p>
</figcaption>
</figure>
这在您的浏览器中看起来像这样

锡安国家公园
参数
- alt
- (
string
)img
元素的alt
属性。 - width
- (
int
)img
元素的width
属性。 - height
- (
int
)img
元素的height
属性。 - loading
- (
string
)img
元素的loading
属性。 - class
- (
string
)figure
元素的class
属性。 - link
- (
string
)包裹img
元素的锚元素的href
属性。 - target
- (
string
)包裹img
元素的锚元素的target
属性。 - rel
- (
rel
)包裹img
元素的锚元素的rel
属性。 - title
- (
string
)在figurecaption
元素中,标题位于顶部,并包裹在h4
元素中。 - caption
- (
string
)在figurecaption
元素中,标题位于底部,并且可能包含纯文本或 Markdown。 - attr
- (
string
)在figurecaption
元素中,属性显示在标题旁边,并且可能包含纯文本或 Markdown。 - attrlink
- (
string
)包裹属性的锚元素的href
属性。
图像位置
figure
短代码通过查找匹配的页面资源来解析内部 Markdown 目标,如果没有匹配的页面资源,则会回退到匹配的全局资源。远程目标将直接传递,如果渲染钩子无法解析目标,则不会抛出错误或警告。
您必须将全局资源放置在 assets
目录中。如果您已将资源放置在 static
目录中,并且您无法或不愿意移动它们,则必须通过在您的站点配置中包含以下两个条目,将 static
目录挂载到 assets
目录
hugo.
module:
mounts:
- source: assets
target: assets
- source: static
target: assets
[module]
[[module.mounts]]
source = 'assets'
target = 'assets'
[[module.mounts]]
source = 'static'
target = 'assets'
{
"module": {
"mounts": [
{
"source": "assets",
"target": "assets"
},
{
"source": "static",
"target": "assets"
}
]
}
}