文章封面大图

文章封面大图

需求

1https://liululu.cn/archives/292.html 这个博客每篇文章开头都有一张图片做文章封面，且这个文章封面的刷新效果也不错。
2
3能不能让我的博客也具有这个文章封面的功能，文章开头的封面用自己formatter里的coverImg图片就好。具体文章开头的封面如何排版，你自己优化下，尽量保持简约、唯美。

已为博客加上文章顶部封面功能，效果参考 liululu.cn 的简约风格。

实现内容

1. 封面组件 article-cover-banner.html

• 自动读取 front matter 中的 coverImg（沿用现有 cover-img.html 逻辑，含随机图池回退）
• 封面内叠加展示：分类标签、标题、元信息（日期 / 字数 / 阅读时长 / 阅读量）
• 目录页（catalogue: true）不显示封面

2. 视觉与动效

• 圆角横幅 + 底部渐变遮罩，保证白字可读
• 图片加载完成后：轻微缩放 + 渐显（类似参考站的「刷新感」）
• 支持 prefers-reduced-motion，尊重系统减少动画设置

3. 接入范围

• 文档风文章页（docs/single.html）— 你的主要文章布局
• 博客单页（_default/single.html）— 统一使用同一套封面组件

4. 布局逻辑

有封面时：

• 面包屑仍保留在上方
• 原标题与顶部 meta 隐藏（避免重复）
• 「最后更新」移到封面下方

使用方式

文章 front matter 里已有 coverImg 即可自动生效：

1---
2title: 我的文章
3coverImg: https://img.onedayxyy.cn/images/Teek/TeekCover/18.avif
4categories:
5  - 博客
6---

某篇文章不想显示封面时：

1articleCover: false

重新构建/部署后即可看到效果。若本地有 Hugo，可在 hugo-teek-site 目录运行 hugo server 预览。