在网站里嵌入组件

嵌入游戏

前往Steam商店页面点击“嵌入”按钮可以得到像这样的代码:

<iframe src="https://store.steampowered.com/widget/240/" frameborder="0" width="646" height="190"></iframe>

如果你将这段代码直接嵌入你的网站,会导致组件无法缩放,因此我进行了一些修改。

<iframe src="https://store.steampowered.com/widget/240/" frameborder="0" style="width: 100%; height: 190px;"></iframe>

嵌入自定义描述的游戏

请前往商店页面输入描述生成组件。

<iframe src="https://store.steampowered.com/widget/4000/?t=%E5%92%8C%E6%88%91%E4%B8%80%E8%B5%B7%E7%8E%A9%E5%90%A7%EF%BC%81" frameborder="0" style="width: 100%; height: 190px;"></iframe>

通过Markdown模板生成组件

在我的网站里可以这样:

{% raw %}{% include steam id="420" description="这是一个通过Markdown模板生成的组件。" %}{% endraw %}

或者也可以不加描述:

只需添加以下模板即可快速使用:

{% raw %}{% capture steam_id %}{{ include.id }}{% endcapture %}
{% capture steam_description %}{{ include.description }}{% endcapture %}

{% capture steam_src %}
    {% if steam_description %}
        https://store.steampowered.com/widget/{{ steam_id }}/?t={{ steam_description }}
    {% else %}
        https://store.steampowered.com/widget/{{ steam_id }}/
    {% endif %}
{% endcapture %}
{% assign steam_src = steam_src | strip %}


{% unless steam_src == "" %}
  <iframe src="{{ steam_src }}" frameborder="0" style="width: 100%; height: 190px;"></iframe>
{% endunless %}{% endraw %}

嵌入迷你个人资料

请前往 SteamDB 获取你的ID。

<iframe src="https://gamer2810.github.io/steam-miniprofile/?accountId=1115115598" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="230px" width="300px" allowfullscreen></iframe>

嵌入Steam个人信息

请前往 SteamDB 获取你的ID。

不推荐这个,因为它无法显示中文。

steam-profile-showcase

[![steam-profile-showcase](https://steam-profile-showcase.herokuapp.com/api/templates/regular?steamid=76561199075381326&gameBackground=1)](https://steam-profile-showcase.herokuapp.com)

获取Steam游戏封面图像链接

SteamDB获取你想要的APP ID。

游戏封面:

https://steamcdn-a.akamaihd.net/steam/apps/APP_ID/library_600x900_2x.jpg

游戏背景:

https://steamcdn-a.akamaihd.net/steam/apps/APP_ID/library_hero.jpg

游戏LOGO:

https://steamcdn-a.akamaihd.net/steam/apps/APP_ID/logo.png

嵌入卡巴斯基网络威胁实时地图

{% raw %}<iframe width="100%" height="640" src="https://cybermap.kaspersky.com/cn/widget/dynamic/dark" frameborder="0">{% endraw %}

嵌入Mod DB组件

挑选嵌入样式

Mod DB - Change the Game

嵌入按钮请去Moddb游戏主页。

Half-Life 2

嵌入Indie DB链接和宣传图片

同Moddb,挑选样式请见这个网站

Indie DB

Danil's Mod