文章摘要
神人GPT

Steam 封面获取器

有一次写游戏博文，需要一张官方封面。与其每次去搜图，不如做个工具：输入 AppID、链接，甚至只输名字联想搜索，就能立刻拿到 Steam 官方封面并一键复制。于是，这个小项目就诞生了。

它能做什么

  • 支持多种输入：AppID / 商店链接 / 关键词（联想）
  • 一次性获取多种尺寸：header、capsule（小/中/大）、library hero、logo、页面背景等
  • 点击卡片即可复制图片直链到剪贴板
  • 现代化 UI：深色玻璃质感、瀑布流布局、细腻动画，移动端也很好用
  • 中英双语（默认中文，?lang=en 可切换）
  • 开源、免费、即开即用

在线与开源

使用方法

  1. 输入 Steam 游戏 ID 或商店链接；也可直接输入名称，使用下拉联想定位游戏
  2. 点击“获取封面”，自动抓取多尺寸官方图片
  3. 在结果区预览并一键复制直链

技术与实现

  • 框架：Next.js 15（App Router）+ TypeScript + Tailwind CSS + Framer Motion
  • 数据与图片：基于公开可访问的 Steam 静态资源
  • 站点图标：采用 app/icon.svg 约定，浏览器标签与收藏夹自动生效
  • 分享卡片：
    • /opengraph-image 与 /twitter-image 由边缘运行时（ImageResponse）动态生成分享图
    • 首页与分享页自动生成 OG/Twitter 元数据，分享即带图
  • SEO 多语言：在 metadata.alternates 声明了 hreflang（zh / en），并提供 /sitemap.xml 与 /robots.txt
  • 广告与变现：
    • 仅生产环境注入 Google AdSense 脚本，开发态显示占位，避免布局抖动
    • 首页有 3 个广告位（左右矩形、底部横幅），可按需配置环境变量启用
  • 交互体验：
    • 联想搜索有节流、缓存与中断控制，减少无效请求、提高响应速度
    • 搜索卡片与两侧广告位高度同步，尽量减少视觉抖动

环境变量（部署时可选）

  • NEXT_PUBLIC_SITE_URL：站点完整地址（如 https://steamcover.laogou717.com）
  • NEXT_PUBLIC_ADSENSE_CLIENT：你的 AdSense client（如 ca-pub-xxxxxxxxxxxxxxx）
  • NEXT_PUBLIC_ADSENSE_SLOT_RECT：矩形广告位 ID
  • NEXT_PUBLIC_ADSENSE_SLOT_BANNER：横幅广告位 ID

开发记事

  • 早期一次部署编译失败，原因是分享页的类型签名与 Next.js PageProps 约束不一致；后来通过“入参标记为 unknown + 类型守卫”理清边界，并移除了 any 与不必要的宽松类型，CI/构建恢复稳定。ESLint 警告也做了集中治理，保持代码整洁。

路线图（进行中/计划）

  • 广告填充优化：用 MutationObserver + 尺寸检测替代轮询，缩短首帧
  • 广告懒加载：接近视口再初始化，兼顾策略与体验
  • 使用 next/image 优化预览图与小图标（配置 remotePatterns）
  • 联想下拉的高亮匹配与键盘可访问性（ARIA 完善）
  • 为外部资源添加 preconnect/dns-prefetch，进一步优化首包
  • 拆分首页为 SearchCard / Suggestions / CoversGrid 子组件
  • 广告与内容区高度同步加入过渡动画
  • 为交互控件补充可见标签与 aria 属性
  • 为工具函数与组件补齐类型与单元测试
  • 引入简单监控与统计（Vercel Analytics/Speed Insights）
  • 添加基础 CSP 与 Referrer-Policy，仅白名单必要第三方

结语

它不是庞然大物，而是一个“刚好解决刚需”的小工具。如果它帮你省下哪怕几分钟找图时间，那就已经物超所值。欢迎 Star、分享与反馈，让它在细节处持续变得更好。