教程美化侧边栏教程 hexo hexo美化

hexo-主题美化-侧边栏steam卡片

李小白2024-11-112024-11-11

侧边栏steam卡片

效果展示

不想截图了，自己看本站侧边栏

引用站外地址

GitHub地址

动态展示steam卡片

教程开始

第一步

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

Steam ID获取：如图

第二步

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

要想向我的一样骚气呢，游戏的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>

自定义css，在根目录下面的source下的css文件架里面自己创建一个xxx.css文件，没有css文件夹自建一个，然后再主题配置文件中引入即可

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

在自定义css文件里面加入下面css

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

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