Blog侧边栏steam卡片

xiaoze2025-02-102025-03-17

侧边栏steam卡片

参考1
参考2

代码实现

GitHub 地址

第一步

点击 steam 卡片生成跳转到卡片生成网站，点击steam登录进行授权登录，或者直接输入 Steam ID

steam card

第二步

输入后直接点击添加进行自定义设置

游戏的 appid 在 steam 商店里面自己找就行了

第三步

在 source👉_data 下面 widget.yml

# top: 创建的 widget 会出现在非 sticky 区域（即所有页面都会显示)
# bottom: 创建的 widget 会出现在 sticky 区域（除了文章页都会显示)
top:
  - class_name: game-card-widget
    id_name: game-card-widget
    name: 游戏卡片
    icon: fas fa-gamepad  # 你可以根据需要添加图标
    order: 1
    html: |
      <div id="game-card-widget">
        这里填入Card中得到的HTML代码块里面的链接
      </div>

创建一个 steam.css 文件

#game-card-widget {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  
}

#game-card-widget img {
  max-width: 100%;  
  height: auto;   
}

在主题配置文件的inject中引入

inject:
  head:
    - <link rel="stylesheet" href="/css/steam.css?1">
    # 自定义css
    # - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
  bottom: