Steam Game Tag：让你的游戏推荐高级起来

Steam Game Tag：让你的游戏推荐高级起来

推荐游戏时甩个链接太丑了？不如来张带封面和价格的卡片。

这玩意儿能干啥？

你只需要知道一件事：输入一个 Steam App ID，它就能吐出一张好看的卡片。

卡片上有什么？封面、游戏名字、原价、折后价（如果有折扣），还有一个显眼的折扣百分比标签。点一下整张卡片，直接跳转 Steam 商店页面。

效果大概就是下面这种感觉（我这里就不放图了，你部署完看一眼就知道）：

· 卡片大小自适应，手机上看也不会变形
· 有折扣的时候，原价划掉，折后价标红，折扣标签贴在上面
· 没折扣的时候就只显示当前售价，干干净净

以前写游戏推荐，要贴链接、要手动截图、价格变了还得重新截。现在一行 iframe 代码搞定，数据实时从 Steam 官方拉，不用自己维护。

为什么会有这个东西？

写游戏推荐文章的时候，最烦的就是贴 Steam 链接——又长又丑，读者还得点进去才能看到游戏长什么样、卖多少钱。手动截图吧，价格一变又得重新截，折腾几次就不想写了。

小黑盒那种游戏卡片看着挺舒服，但那是人家 App 里的，网页上没法直接用。
上没法直接用。

所以就自己动手写了一个。React + TypeScript 写的，打包出来就一个轻量的组件，任何支持 HTML 的地方都能嵌进去。

怎么用？三步搞定

第一步：部署

把项目代码拉到 Vercel 或 Netlify 上，一键部署。不懂代码也没关系，照着官方教程点几下鼠标就行。

项目地址在这里：https://github.com/hapurenhl/steam-tag

第二步：复制代码

部署完成之后，你会得到一个自己的域名。然后在文章里贴这段 HTML：

<iframe 
  src="https://你的域名/iframe.html?id=730&lang=zh" 
  width="100%" 
  height="120" 
  frameborder="0"
></iframe>

第三步：换游戏

想展示《黑神话：悟空》？把 id=730 换成 id=2358720。想展示英文名？把 lang=zh 换成 lang=en。

就这么简单。

它适合用在哪些地方？

基本上 只要文章编辑器支持自定义 HTML，都能用。

平台 能不能用 使用方法
WordPress ✅ 切到“文本”模式粘贴就行
知乎专栏 ✅ 支持自定义 HTML
掘金 / CSDN ✅ 同上
Substack / Dev.to ✅ 没问题
Next.js / Gatsby 等 React 项目 ✅ 可以直接当组件导入
纯 Markdown 静态博客（如 Hexo、Hugo） ✅ 用 iframe 方式嵌入

它背后是怎么转起来的？

简单聊两句技术实现，不感兴趣可以直接跳到结尾。

数据从哪里来：Steam 官方提供了一个公开 APIstore.steampowered.com/api/appdetails 所有游戏信息都是从这里拿的。

跨域怎么解决：Steam 的 API 不支持浏览器直接调用（会被 CORS 策略拦住），所以我在项目里塞了一个超级轻量的后端代理。如果你部署到 Vercel，这个代理会自动变成一个 Serverless Function，不用自己管服务器。

会不会把 Steam 的 API 刷爆：做了本地缓存。同一个游戏，短时间内重复访问，直接读浏览器本地存的数据，不再重复请求。既省流量，也省得被 Steam 限流。
技术栈：

最后

这个项目不是什么惊天动地的大工程，就是写博客时顺手做的一个小工具，能让游戏推荐这件事稍微好看一点、省事一点。

如果你用着顺手，或者有什么改进想法，欢迎去 GitHub 提 Issue 或 PR。觉得有用的话，点个 Star 就是对我最大的鼓励了。

🍻 祝你写文章愉快。

posted @ 2026-07-26 01:29  哈葡人  阅读(2)  评论(0)    收藏  举报