跳过正文

Feature Images

查看源码 编辑此页 (外部链接)
首次發表:

Feature images in Yore appear as hero banners, thumbnails, and social sharing metadata.

Automatic Detection 此标题的链接

When using index.md inside a directory (creating a leaf bundle), Yore automatically detects images with the feature* prefix and uses them as the page's feature image.

For example, this structure:

content/
└── posts/
    └── my-article/
        ├── index.md
        └── feature.webp

will automatically use feature.webp as the hero image, thumbnail, and social sharing image.

Manual Configuration 此标题的链接

You can explicitly specify a feature image using the pageFeatureImage parameter in front matter:

index.md
---
title: My Article
params:
  # Specifies the image in `assets/img/07.webp`
  pageFeatureImage: img/07.webp
---
信息

The params field contains theme-specific configuration, not Hugo core settings.

Fallback 此标题的链接

The imageFeatured in hugo.yaml is used if the feature image does not exists. The imageSocial in hugo.yaml is a subdivision for meta tags used for social sharing image.

Hero Image Styles 此标题的链接

The pageHeroStyle parameter controls how the hero image is displayed. It can be set globally in hugo.yaml or overridden per page in front matter.

index.md
---
title: My Article
params:
  pageHeroStyle: background
---
  • big: Large hero image at full content width
  • background: Full-width background image with text overlay
  • disable: No hero image display (image still used for metadata)

文章关联

无障碍设定

字体大小