【个人博客】在Hexo中制作一个steam游戏展示页面

写在前面

我的代码大部分是参考HCLonely项目的,但是在使用过程中有一些不顺手的地方,因此有了对其魔改的想法,从个人使用角度优化了几个问题,请大家多多支持本项目与原项目(。・∀・)ノ゙

使用方法

首先给出本插件的地址:

在博客项目的根目录运行命令安装插件:

1
npm install hexo-better-steam --save

在博客配置文件_config.yml中添加配置信息,当你只有一个账号时:

1
2
3
4
5
6
7
8
9
steam:
enable: true
steamId: '******'
apiKey: '******'
path: /steam/index.html
title: Steam 游戏库
quote: '来来来,走过路过别错过,有空一起玩游戏~~~'
tab: all
length: 1000

但是为了享受阿根廷or火鸡国的优质游戏资源是┏ (゜ω゜)=☞,大家多多少少都有多个账号,那就需要将各个账号的游戏数据全部获取,并将游戏时长添加进来,可以进行如下设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
steam:
enable: true
apiKey: '******'
path: /steam/index.html
title: Steam 游戏库
steamInfos: # 多账号配置
- id: '******' # 主账号
principal: true
- id: '******' # 多个分账号
principal: false
quote: '来来来,走过路过别错过,有空一起玩游戏~~~'
tab: all
length: 1000

相关参数获取方法

API Key

现在steam有一些限制,需要有API Key才能获取用户信息,点击下方链接获取自己的API Key

因为众所周知的原因,Steam社区网站不太稳定,需要大家科学上网才能进入。

steam-api-key

steamId

登录steam社区后,点击个人头像,此时所在链接https://steamcommunity.com/profiles/76561198815373066/最后的76561198815373066就是你的steamid。

要注意,需要将steam库设置为公开,否则无法获取你的游戏库数据。

其他参数

  • enable: 是否启用

  • apiKey: Steam 网页 API Key(新版需要API Key才能获取到游戏信息),或者手动获取游戏库数据

  • steamId: steam 64位Id(需要放在引号里面,不然会有BUG), 需要将steam库设置为公开!

  • steamInfos: 多账号配置

  • path: 游戏页面路径,默认steamgames/index.html

  • title: 该页面的标题

  • quote: 写在页面开头的一段话,支持html语法

  • tab: allrecent, all: 所有游戏, recent: 最近游玩的游戏

  • length: 要显示游戏的数量,游戏太多的话可以限制一下

  • imgUrl: 图片链接,在quote下面放一张图片,图片链接到Steam个人资料,可留空

  • proxy

    : 如果无法访问steam社区的话请使用代理

    • host: 代理ip或域名
    • port: 代理端口
  • extra_options: 此配置会扩展到Hexo的page变量中

我做了什么

相比于hexo-steam-games,我做了哪些改进?

  1. 首先,因为原项目将steam数据存在node_modules路径下,不方便我们寻找和修改(比如删除一些不想放上去的游戏数据😏),因此我将路径修改至根目录的source/_data/路径下,方便我们查看和修改,同时也和市面上大部分插件的数据存储位置一样,方便用户使用插件。
  2. 其二,相信大部分人虽然有多个账号,但是想把数据放在一个页面中,而不是用多个页面分别展示,因此我将各个账号的游戏数据统计在一起进行展示。同一个游戏的数据会累加在一起。
  3. 最后,我个人感觉页面设计有点简陋,未来学好前端可能会将其修改一下,敬请期待~

页面展示

希望大家喜欢,给个星星~~~