精选文章卡片配置说明

最后更新于:

⭐ 精选文章卡片概述

精选文章卡片展示被标记为【精选】的文章列表,用于突出显示优质内容,帮助访客快速发现站点的精华文章。

✨ 卡片特性

🎨 设计特性

  • 精选标记:突出显示推荐文章
  • 缩略图展示:显示文章封面图
  • 标题列表:简洁的文章标题列表
  • 快速跳转:点击直达文章详情

⚙️ 功能特性

  • 自动收集:自动收集 featured: true 的文章
  • 排序规则:按发布时间倒序排列
  • 独立开关:可随时启用/禁用
  • 数量限制:自动限制显示数量

📁 配置文件路径

精选文章卡片配置位于首页配置文件中:

1# hugo-teek-site/config/themes/hugo-teek/homepage.toml
2# 控制精选文章卡片的显示/隐藏
1# 文章 Front Matter 中设置
2# 位于每篇文章的头部

📝 开关配置

启用/禁用精选文章卡片

1    enabled = true   # ◀️ 显示精选文章卡片
1    enabled = false  # ◀️ 隐藏精选文章卡片

📝 文章标记方法

设置文章为精选

在文章 Front Matter 中设置 featured: true

1---
2title: "文章标题"
3date: "2026-03-02T10:00:00+08:00"
4featured: true    # ◀️ 标记为精选文章
5---
6
7文章内容...
1---
2title: "普通文章"
3date: "2026-03-02T10:00:00+08:00"
4featured: false   # ◀️ 不标记为精选(默认)
5---
6
7文章内容...

批量标记精选文章

 1# 文章1:精选
 2---
 3title: "Hugo-Teek 主题安装教程"
 4featured: true
 5---
 6
 7# 文章2:精选
 8---
 9title: "Markdown 语法大全"
10featured: true
11---
12
13# 文章3:普通
14---
15title: "日常随笔"
16featured: false
17---

🎨 显示规则

自动收集机制

🤖 收集规则

精选文章卡片自动收集并显示文章:

1️⃣ 筛选条件featured: true 的文章
2️⃣ 排序规则:按 date 字段倒序(最新在前)
3️⃣ 数量限制:自动限制显示数量(通常 5-10 篇)
4️⃣ 更新时机:每次构建时重新收集

显示样式

1┌─────────────────────────────┐
2│ ⭐ 精选文章                   │
3├─────────────────────────────┤
4│ 📄 文章标题1                  │
5│ 📄 文章标题2                  │
6│ 📄 文章标题3                  │
7│ 📄 文章标题4                  │
8│ 📄 文章标题5                  │
9└─────────────────────────────┘

📋 完整配置示例

基础配置

1# homepage.toml
2[params.homeSidebar.featuredPosts]
3    enabled = true
1# content/posts/my-post.md
2---
3title: "Hugo-Teek 主题安装教程"
4date: "2026-03-02T10:00:00+08:00"
5featured: true
6---

配置位置示例

 1# ========================================
 2# 首页配置 (Homepage Configuration)
 3# ========================================
 4[params.homeSidebar]
 5
 6  # ========================================
 7  # 精选文章卡片 (Featured Posts Card)
 8  # ========================================
 9  # 显示标记为精选的文章
10  # 数据来源:文章 Front Matter 中设置 featured: true
11  [params.homeSidebar.featuredPosts]
12    enabled = true  # ◀️ 开关:启用/禁用精选文章卡片

🔧 常见问题

精选文章不显示

 1原因1:开关未启用
 2解决:检查 homepage.toml 中 enabled = true
 3
 4原因2:无精选文章
 5解决:
 61️⃣ 检查文章 Front Matter 中是否设置 featured: true
 72️⃣ 确保文章已发布(draft: false)
 83️⃣ 执行 make dev 重新构建
 9
10原因3:文章未发布
11解决:
121️⃣ 检查文章 draft 字段
132️⃣ 确保 draft: false 或删除该字段

文章排序异常

1原因:日期格式错误或时区问题
2解决:
31️⃣ 使用标准 ISO 8601 格式:YYYY-MM-DDTHH:MM:SS+08:00
42️⃣ 确保所有精选文章都有正确的 date 字段
53️⃣ 重新构建站点

📝 配置模板速查

最小化配置

1# homepage.toml
2[params.homeSidebar.featuredPosts]
3    enabled = true
1---
2title: "文章标题"
3date: "2026-03-02T10:00:00+08:00"
4featured: true   # ◀️ 标记为精选文章
5---
1# ========================================
2# 精选文章卡片 (Featured Posts Card)
3# ========================================
4# 显示标记为精选的文章
5# 数据来源:文章 Front Matter 中设置 featured: true
6[params.homeSidebar.featuredPosts]
7    enabled = true  # ◀️ 开关:启用/禁用精选文章卡片

🎉 精选文章卡片配置完成!

将优质文章标记为 featured: true,它们将自动显示在精选文章卡片中。

推荐使用微信支付
微信支付二维码
推荐使用支付宝
支付宝二维码
最新文章