blocks/cover

blocks/cover 短代码组件，功能是创建一个落地页（landing page）。

通常用作网页顶部的欢迎界面，在页面最上布局时会占据到页面顶部位置。

效果

在文档内由于布局限制效果如下。

如果是在单独页面中时，会平铺整个页面，可以参考首页。

Welcome!

Learn More Download

This program is now available in AppStore!

代码

效果对应的代码：

{{< blocks/cover title="Welcome!" image_anchor="center" height="auto" color="primary" >}}
<div class="mx-auto">
	<a class="btn btn-lg btn-primary me-3 mb-4" href="{{< relref "/docs" >}}">
		Learn More <i class="fa-solid fa-circle-right ms-2"></i>
	</a>
	<a class="btn btn-lg btn-secondary me-3 mb-4" href="https://example.org">
		Download <i class="fa-brands fa-github ms-2"></i>
	</a>
	<p class="lead mt-5">This program is now available in <a href="#">AppStore!</a></p>
</div>
{{< /blocks/cover >}}

短代码参数的详细描述：

  • title：标题。可以设置封面区域的主标题文字。
  • image_anchor：背景图片锚点。可以调整背景图片的显示位置。支持值 top、center、bottom。
  • height：调节封面区域的高度。支持值 auto、full、medium、small、tiny。
  • color：设置文字和装饰元素的颜色主题。支持值 primary、secondary、success、danger、warning、info、light、dark。
  • byline：在封面区块的特色图片上显示一段补充说明文字，通常是作者姓名、日期、或者简短的描述性文字。

class样式

Hugo的样式是基于 Bootstrap 5，因此可以使用Bootstrap的 class 样式。

图标

可用的图标列表：Font Awesome.

背景图片

背景图片的使用有一定限制：

  • 图片文件名需要包含"background"关键词
  • 背景图片必须放在页面的资源包(bundle)中，Page Bundle
  • 如果背景图片的文件名包含"featured"关键词，那么这张图片还会被用作社交媒体分享时的预览图， featured-background.jpg,

参考