0x00写在前面

前段时间玩了《魔裁》，B站各种推荐相关的视频，偶然刷到一个相关的Steam个人主页美化视频。于是尝试自己也抄一下作业，其间有些功能是通过前端绕过实现的，开个贴记录一下以免之后想修改却忘记了如何做。

0x01用前须知

整理了一些美化过程中的小问题

个人资料背景全透明

这个只能通过点数商店花费10000点数购买消光2的游戏资料主题

https://store.steampowered.com/points/shop/app/534380

展柜相关

等级>10，steam每10级一个展柜位置。也可以点数商城购买。

升级您的展柜：选定的展柜可进行至多两次升级，您会有更多地方来炫耀徽章，更多空间来展示艺术作品，以及其他特权。

额外展柜：有时候升级一个展柜是不够的。用 Steam 点数获得额外展柜，获取更多展示空间！

升级Steam等级的最好方式是先完成社区任务，这个做完了一般能到10级；其次是花费点数（可以通过购买游戏获得，也可以购物平台购入），购入季节性徽章来增长等级（1000点数对应100经验）：最次是通过收集集换式卡牌来合成徽章获取经验，性价比较低（几年前不懂事用余额收集卡片合了几个徽章玩玩）

0x02创意工坊作品

原理为将一个gif切为五等份（详细教程请自行检索）。成图依此上传到右侧艺术作品里，上传时需要在终端输入以下JS代码处理（否则无法选择并展示）

1
2
3
$J('[name=consumer_app_id]').val(480);
$J('[name=file_type]').val(0);
$J('[name=visibility]').val(0);

0x03精选艺术作品展柜

如果和前者一样直接上传，在展示时会在下面显示作品名称，很碍眼；但是在上传时不填作品名也无法顺利上传，可以用以下代码在前端绕过（后端并未进行校验）：

1
2
3
4
v_trim = _ => {
  return _;
};
$J('#title').val(' \n' + Array.from(Array(126), _ => '\t').join(''));

另外需要对作品进行剪裁，否则其边框过大，不会很好看：

1
2
$J('#image_width').val(1000).attr('id', '');
$J('#image_height').val(1).attr('id', '');

在b站搜索教程时也找到类似的等价代码：

1
2
3
var num= document.getElementsByName("image_width")[0].value;
document.getElementsByName("image_height")[0].value = num-(num-1);
document.getElementsByName("image_width")[0].value= num*100;

0x04参考致谢

https://blog.yuki.sh/posts/daf9288c81ba/#%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86