概述
Lumin 博客在 娱乐 菜单下新增了 游戏 子页面，以卡片网格形式展示玩过和正在玩的游戏，支持状态筛选、评分配色、平台标签、暗黑模式等交互特性。本文详解前台实现的完整技术方案。
架构设计
1hugo.toml → 菜单注册（娱乐 → 游戏，weight=9）
2content/games/_index.md → 页面元数据（type=games, layout=games）
3data/games.toml → 游戏数据源（games 数组）
4layouts/games/list.html → 列表模板（带内联 CSS）
5layouts/games/single.html → 单页模板（评论容器）
采用 Hugo 的 Data Template 模式：通过 hugo.Data.games.games 读取 data/games.toml 中的结构化数组，在模板中直接遍历渲染，无需创建单独的 Markdown 页面。
与文章分类隔离
游戏展示页路由为 /games/，与已有文章分类 /game/ 使用不同 slug，避免 URL 冲突。数据存储于 data/games.toml，与文章目录 content/game/ 完全独立。
数据模型
1[[games]]
2title = "艾尔登法环" # 游戏名称
3status = "playing" # playing | completed | planned | onhold
4rating = 9.5 # 评分 0-10
5platform = "PC" # 平台
6developer = "FromSoftware" # 开发商
7publisher = "Bandai Namco" # 发行商
8releaseYear = 2022 # 发行年份
9genre = ["动作RPG"] # 类型标签数组
10desc = "..." # 简介
11cover = "/images/..." # 封面图片路径
12links = [{name, url}] # 相关链接
模板实现要点
内联 CSS 渲染策略
与电影、图书页面一致，所有样式直接写在 <style> 标签内，随 HTML 一起输出。这样做的好处是无需修改主题 CSS 文件，页面样式完全自包含，加载即渲染。
响应式网格布局
1.game-grid { grid-template-columns: repeat(2, 1fr) } /* 手机 */
2@media (min-width: 600px) { grid-template-columns: repeat(2, 1fr) } /* 小平板 */
3@media (min-width: 900px) { grid-template-columns: repeat(3, 1fr) } /* 大平板 */
4@media (min-width: 1200px) { grid-template-columns: repeat(4, 1fr) } /* 桌面 */
专为游戏封面优化的 aspect-ratio: 3/4，比标准 16:9 更接近游戏包装盒比例，视觉效果与电影/图书页面的 2:3 海报比例形成统一的设计语言。
双视觉层
每个卡片包含两个信息层级：
静态层（始终可见）：
- 游戏封面图片
- 状态角标（在玩/已通关/想玩/搁置，按状态分配颜色）
- 评分星星角标
- 游戏标题、平台、类型
悬停信息层（hover 展开）：
- 半透明遮罩渐变背景
- 游戏名称、类型、开发商、发行商、平台、年份
- 游戏简介文字
- 可滚动的内容区域（
overflow-y: auto）
1.gcw-info {
2 transform: translateY(100%);
3 transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
4}
5.gc:hover .gcw-info { transform: translateY(0); }
筛选器交互
纯 JavaScript 实现的客户端状态筛选，无需服务端请求：
1<button class="game-filter-tag active" data-status="all">全部 (4)</button>
2<button class="game-filter-tag" data-status="playing">在玩 (1)</button>
3<button class="game-filter-tag" data-status="completed">已通关 (3)</button>
点击筛选按钮后遍历 .gc 卡片，通过 data-status 属性匹配显示/隐藏。
废弃 API 迁移
使用 Hugo v0.156+ 推荐的现代语法：
.Site.Data.games→hugo.Data.games- 消除构建时的 deprecated 警告
暗黑模式适配
通过 [data-theme="dark"] 选择器覆盖所有关键样式：
- 卡片背景 →
rgba(30, 41, 59, 0.9) - 页面头部 → 深紫色渐变
#3b0764 → #6b21a8 - 筛选按钮、链接按钮 → 暗色半透明背景
- 文字颜色 →
#f1f5f9 / #94a3b8
评论区集成
页面底部集成 Twikoo 评论系统，通过 Hugo 的 partial "comments.html" 模板引入。评论区容器使用 max-width: 1480px 与游戏卡片网格同宽，保持视觉一致性。
1{{ if and .Site.Params.comments.enable (ne .Params.comments false) }}
2<div class="game-comments-section">
3 <h3 class="comments-title"><i class="fas fa-comment-dots"></i> 留言评论</h3>
4 {{ partial "comments.html" . }}
5</div>
6{{ end }}
前端涉及的文件
| 文件 | 作用 |
|---|---|
hugo.toml | 菜单注册、icon 配置 |
content/games/_index.md | 页面元数据、comments 开关 |
data/games.toml | 游戏数据源 |
themes/.../layouts/games/list.html | 列表展示模板（含 CSS + JS） |
themes/.../layouts/games/single.html | 单页评论容器 |
关键收获
- Hugo Data Template是展示型数据页的最佳载体——零 Markdown 开销，纯数据驱动
- 内联 CSS 模式保持页面自给自足，适合主题化定制场景
- 渐进增强 的悬停效果在不支持 hover 的移动端自动降级为静态卡片
- Hugo v0.156+ 的
hugo.Data替代.Site.Data是未来兼容性的必要迁移
留言评论
期待你的想法评论加载中