Hexo 上的豆瓣、哔哩哔哩和 Steam 插件

增加豆瓣书 / 影单

1. 安装模块依赖

在 cmd 中输入命令：

1	npm install hexo-douban --save

2. 添加配置

在 Hexo 配置文件添加配置：

#豆瓣插件
douban: 
  user: 218060495  #这个需要修改为你个人的id
  builtin: false
  dynamic: false
  item_per_page: 10
  meta_max_line: 4
  customize_layout: page
  swup: false
  book:
    path: books/index.html
    title: "This is my book title"
    quote: "This is my book quote"
    actions:
      - do
      - wish
      - collect
    option:
  movie:
    path: movies/index.html
    title: "This is my movie title"
    quote: "This is my movie quote"
    actions:
      - do
      - wish
      - collect
    option:
  game:
    path: games/index.html
    title: "This is my game title"
    quote: "This is my game quote"
    actions:
      - do
      - wish
      - collect
    option:
  song:
    path: songs/index.html
    title: "This is my song title"
    quote: "This is my song quote"
    actions:
      - do
      - wish
      - collect
    option:

其中可以添加别的类别～参数说明：

id: 你的豆瓣 ID (纯数字格式，不是自定义的域名)。获取方法可以参考怎样获取豆瓣的数字 ID ？
builtin: 是否将 hexo douban 命令默认嵌入进 hexo g、hexo s，使其自动执行 hexo douban 命令。默认关闭。
dynamic: 豆瓣页面是否在访问时实时请求接口。默认为 false，表示页面信息会在执行 hexo douban 命令时更新，优点是生成的页面不会受到后续接口可用性的影响，缺点是需要手动更新。如果设置为 true ，则会在页面访问时实时调用接口进行渲染，无需执行 hexo douban 命令更新页面，但是代价就是如果接口挂了，页面就会 G。
item_per_page: 每页展示的条目数，默认 10 。
meta_max_line: 每个条目展示的详细信息的最大行数，超过该行数则会以 “…” 省略，默认 4 。
customize_layout: 自定义布局文件。默认值为 page 。无特别需要，留空即可。若配置为 abcd，则表示指定 //theme/hexo-theme/layout/abcd.ejs 文件渲染豆瓣页面。
swup: 是否兼容 swup 。支持 script 热加载，解决一些 single-page 主题的加载问题，默认 false 。
path: 生成页面后的路径，默认生成在 //yourblog/books/index.html 等下面。如需自定义路径，则可以修改这里。
title: 该页面的标题。
quote: 写在页面开头的一段话，支持 html 语法，可以为空。
actions: 一个字符串列表，表示生成的页面中的 “已 X”，“想 X”,"X 过" 的标签配置，默认会自动聚焦在第一个标签。可选项为: ‘do’,‘wish’,‘collect’。
option: 该页面额外的 Front-matter 配置，参考 Hexo 文档。无特别需要，留空即可。

由于 hexo-douban 是默认抓取豆瓣读书、豆瓣电影以及豆瓣游戏的，如果只想要其中一部分，可以把其它部分在上述配置文件中去掉即可。

3. 部署

只是引入了豆瓣这个插件，但是要给它一个入口，在主题配置文件 menu 中加入下述配置，将其加入到了顶部的标签栏。

List: 
  icon: fas fa-list-ul
  children:
  - name: books
    url: /books
    icon: fas fa-book
  - name: movies
    url: /movies
    icon: fas fa-film

如果加入后不是中文，需要在主题目录下的 languages 中 zh-CN 中加入对应词单，也可以直接写中文。

4. 适配 Matery 主题（可选）

在 /themes/hexo-theme-matery/layout 文件夹下面创建一个名为 douban.ejs 的文件，并将下面的内容复制进去：

<link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- url_for('/css/detail/douban.css') %>">

<%- partial('_partial/bg-cover') %>
<style> 
    .hexo-douban-picture img {
        width: 100%; 
    } 
</style>
<main class="content"> 
    <div id="contact" class="container chip-container"> 
        <div class="card"> 
            <div class="card-content" style="padding: 30px"> 
                <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1> 
                <%- page.content %> 
            </div> 
        </div> 
        <div class="card"> 
            <div class="card-content" style="text-align: center"> 
                <h3 style="margin: 5px 0 5px 5px;">如果你有好的内容推荐，欢迎在下面留言！</h3> 
            </div> 
        </div> 
        <div class="card"> 
            <% if (theme.gitalk && theme.gitalk.enable) { %>
            	<%- partial('_partial/gitalk') %>
            <% } %> 
            <% if (theme.gitment.enable) { %> 
            	<%- partial('_partial/gitment') %> 
            <% } %> 
            <% if (theme.disqus.enable) { %> 
            	<%- partial('_partial/disqus') %> 
            <% } %> 
            <% if (theme.livere && theme.livere.enable) { %> 
            	<%- partial('_partial/livere') %> 
            <% } %> 
            <% if (theme.valine && theme.valine.enable) { %> 
            	<%- partial('_partial/valine') %> 
            <% } %> 
        </div> 
    </div> 
</main>

最后面的几个 <% if (*) { %> <% * %> <% } %> 模块，可以根据实际运用模块进行删改

在 source/css/detail 文件夹下面创建一个名为 douban.css 的文件，并将下面的内容复制进去：

1
2
3

.bg-cover {
    background-image: url('/medias/banner/douban.jpg') !important
}

然后可以去 source/medias/banner 文件夹下面创建一个 douban.jpg 以供页面使用。

之后在博客站点目录下的 node_modules 文件夹下找到 hexo-douban/lib，文件夹下有三个 js 文件，分别为：books-generator.js 、games-generator.js 、movies-generator.js，用文本编辑器打开这三个文件，并将其文件内容末尾的代码修改为一下内容：

1 2	/* 原文件内容为 layout: [`page`, `post`] ，将其修改为下面的内容*/ layout: [`page`, `douban`]

添加豆瓣书影音卡片插件

用法

首先请安装插件

1	$ npm install hexo-douban-card --save

然后使用以下语法

{% douban movie 24745500 %}

{% douban book 30376420 %}

{% douban music 35099703 %}

参数阐述

第一项 douban 代表插件名
第二项可选:movie,book,music
第三项请填入对应的 id 例如:

填写 subject 后面的那串数字就好

示例

上映时间: 2014-08-07 (中国大陆)

Bilibili 插件使用说明

根据官方文档安装插件

参考插件说明文档

安装

1	npm install hexo-bilibili-bangumi --save

配置

将下面的配置写入站点的配置文件 _config.yml 里。

bangumi: # 追番设置
  enable: true
  source: bili
  bgmInfoSource: 'bgmv0'
  path:
  vmid:
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  showMyComment: false
  pagination: false
  metaColor:
  color:
  webp:
  progress:
  progressBar:
  extraOrder:
  order: latest
  proxy:
    host: '代理host'
    port: '代理端口'
  extra_options:
    key: value
  coverMirror:
cinema: # 追剧设置
  enable: true
  path:
  vmid:
  title: '追剧列表'
  quote: '生命不息，追剧不止！'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  metaColor:
  color:
  webp:
  progress:
  progressBar:
  extraOrder:
  order:
  extra_options:
    key: value
  coverMirror:
game: # 游戏设置，仅支持source: bgmv0
  enable: true
  path:
  source: bgmv0
  vmid:
  title: '游戏列表'
  quote: '生命不息，游戏不止！'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  metaColor:
  color:
  webp:
  progress:
  progressBar:
  extraOrder:
  order:
  extra_options:
    key: value
  coverMirror:

enable: 是否启用
source: 数据源，仅支持追番，追剧仅支持哔哩哔哩源。bili: 哔哩哔哩源 , bgmv0: 建议 Bgm Api 源 (api.bgm.tv), bangumi: Bangumi 源 (bangumi.tv), bgm: Bangumi 源 (bgm.tv)
bgmInfoApi: 获取 Bangumi 番剧信息时使用的 Api，仅使用 Bangumi 源时此选项生效。bgmApi: Bangumi Api, bgmSub: Bangumi-Subject
proxy: 代理设置，仅在使用支持 bgm 源追番时生效。默认 false
path: 页面路径，默认 bangumis/index.html, cinemas/index.html
vmid: 哔哩哔哩的 vmid(uid)如何获取？/Bangumi 的用户用户名 (source 为 bgmv0 时使用) 如何获取？/Bangumi 的用户 id(source 为 bgm 或 bangumi 时使用) 如何获取？
title: 该页面的标题
quote: 写在页面开头的一段话，支持 html 语法，可留空。
show: 初始显示页面：0: 想看 , 1: 在看 , 2: 看过，默认为 1
lazyload: 是否启用图片懒加载，如果与主题的懒加载冲突请关闭，默认 true
srcValue: 设置封面图的默认 src 值，__image__为封面链接，__loading__为 loading 图片链接，lazyload 选项为 false 时此选项生效
lazyloadAttrName: 设置封面图的属性与属性值，例 lazyloadAttrName: 'data-src=__image__' 代表为 img 元素添加 data-src 属性，其值为图片链接，lazyload 选项为 false 时此选项生效
loading: 图片加载完成前的 loading 图片，需启用图片懒加载
metaColor: meta 部分 (简介上方) 字体颜色（十六进制的颜色代码需要添加引号：metaColor: '#FFFFFF'）
color: 简介字体颜色
webp: 番剧封面使用 webp 格式 (此格式在 safari 浏览器下不显示，但是图片大小可以缩小 100 倍左右，仅支持哔哩哔哩源), 默认 true
progress: 获取番剧数据时是否显示进度条，默认 true
progressBar: 追番页面是否显示进度条，默认 true。仅支持 bili 和 bgmv0 数据源
extraOrder: 手动添加的番剧 / 追剧数据是否优先显示，1 为优先，其它为不优先
showMyComment: 使用 bgm 源时显示自己的评价及评论，默认 false
pagination: 分页优化，只将第一页的数据渲染到 html 文件中，其余数据将通过异步请求加载，避免番剧过多时 html 文件过大导致页面加载缓慢，建议番剧较多时使用，默认 false
order: 排序，支持 latest(默认，按添加时间排序), score(评分升序), -score(评分降序)
extra_options: 此配置会扩展到 Hexopage 变量中

coverMirror: 封面镜像缓存配置，默认为空。追番，追剧需分别配置。可以将有防盗链的图片引用到网页，并成功显示。可以将 http 图片引用到 https 页面而不出现证书问题。可以将 xxx 的图片，成功加载。可以将比较慢的图片资源，加快显示。可以使用自建或者是第三方的图片镜像服务，例如 https://image.baidu.com/search/down?url= 百度的接口，但是图片大小不能超过 5M (据说不稳定，个人目前使用没啥问题)。其他镜像地址收集之网络，未全部测试。推荐在出现 403 错误时或者图片加载特别慢时使用。

# 图片镜像服务
https://image.baidu.com/search/down?url=
https://img.noobzone.ru/getimg.php?url=
https://images.weserv.nl/?url=
https://collect34.longsunhd.com/source/plugin/yzs1013_pldr/getimg.php?url=
https://pic1.xuehuaimg.com/proxy/
https://search.pstatic.net/common?src=

使用

仅 bili 和 bgmv0 源支持在追番页面显示追番进度。

在 hexo generate 或 hexo deploy 之前使用 hexo bangumi -u 命令更新追番数据，使用 hexo cinema -u 命令更新追剧数据！
- 使用 bili 源时，如果要在追番页面显示追番进度，需使用 hexo bangumi -u 'SESSDATA', SESSDATA 替换为哔哩哔哩 cookie 中的 SESSDATA 值。例 hexo bangumi -u 'df***EC'
删除数据命令:hexo bangumi -d/hexo cinema -d

获取 Bilibili uid

登录哔哩哔哩后前往 https://space.bilibili.com/ 页面，网址最后的一串数字就是 uid

需要将追番列表设置为公开！

获取 Bangumi 用户名

登录 Bangumi 后打开控制台 (Ctrl+Shift+J)，输入 document.getElementById('header').getElementsByTagName('a')[0].getAttribute('href').split('/').at(-1) 回车，下面会输出用户名

获取 Bangumi id

手动添加番剧 / 追剧数据

因为某些番剧在哔哩哔哩上没有，但是又想在 hexo 中展示，怎么办呢？现在支持手动添加番剧数据了！

在 sources/_data/ 目录下新建文件，命名为 extra_bangumis.json(追番数据) 或 extra_cinemas.json(追剧数据) ，并添加以如下内容:

{
  "watchedExtra": [
    {
      "title": "缘之空",
      "type": "番剧",
      "area": "日本",
      "cover": "https://cdn.jsdelivr.net/gh/mmdjiji/bangumis@main/Yosuga-no-Sora/cover.jpg",
      "totalCount": "全12话",
      "id": 0,
      "follow": "不可用",
      "view": "不可用",
      "danmaku": "不可用",
      "coin": "不可用",
      "score": "不可用",
      "des": "远离都市的田园小镇，奥木染。春日野悠带着妹妹穹，来到了这座城镇。坐落在这里的是，儿时暑假经常造访的充满回忆的已故祖父的家。双亲因意外事故而丧生，变得无依无靠..."
    }
  ]
}

title 是番剧的标题，cover 是封面图链接， des 是简介，上述字段均根据需要修改。

另外除了 watchedExtra 数组，还可以在后面添加新的数组，可用数组名如下:

可用数组名	含义
wantWatchExtra	想看
watchingExtra	在看
watchedExtra	看过

需要注意，在两个数组之间需要用 , 分隔。

适配 Matery 主题（可选）

参考 Matrey 主题增加豆瓣书 / 影单

ejs 文件的创建

在 /themes/hexo-theme-matery/layout 文件夹下面创建一个名为 bangumi.ejs 的文件，并将下面的内容复制进去：

<link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- url_for('/css/detail/bangumi.css') %>">

<%- partial('_partial/bg-cover') %>
<style> 
    .bangumi-picture img { 
        width: 100%; 
    } 
</style> 
<main class="content"> 
    <div id="contact" class="container chip-container"> 
        <div class="card"> 
            <div class="card-content" style="padding: 30px"> 
                <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1> 
                <%- page.content %> 
            </div> 
        </div> 
        <div class="card"> 
            <div class="card-content" style="text-align: center"> 
                <h3 style="margin: 5px 0 5px 5px;">如果你有好的内容推荐，欢迎在下面留言！</h3> 
            </div> 
        </div>
        <div class="card"> 
            <% if (theme.gitalk && theme.gitalk.enable) { %>
            	<%- partial('_partial/gitalk') %>
            <% } %> 
            <% if (theme.gitment.enable) { %> 
            	<%- partial('_partial/gitment') %> 
            <% } %> 
            <% if (theme.disqus.enable) { %> 
            	<%- partial('_partial/disqus') %> 
            <% } %> 
            <% if (theme.livere && theme.livere.enable) { %> 
            	<%- partial('_partial/livere') %> 
            <% } %> 
            <% if (theme.valine && theme.valine.enable) { %> 
            	<%- partial('_partial/valine') %> 
            <% } %> 
        </div> 
    </div> 
</main>

最后面的几个 <% if (*) { %> <% * %> <% } %> 模块，可以根据实际运用模块进行删改

在 source/css/detail 文件夹下面创建一个名为 bangumi.css 的文件，并将下面的内容复制进去：

1
2
3

.bg-cover {
    background-image: url('/medias/banner/bangumi.jpg') !important
}

然后可以去 source/medias/banner 文件夹下面创建一个 bangumi.jpg 以供页面使用。

插件 moudle 内容修改

然后在博客站点目录下的 node_modules 文件夹下找到 hexo-bilibili-bangumi/lib，用文本编辑器打开文件夹。

下面两个 js 文件中的代码进行对应修改：

1 2	hexo-bilibili-bangumi\lib\bangumi-generator.js hexo-bilibili-bangumi\src\lib\bangumi-generator.js

1	layout: ['page', 'bangumi']

本来的代码是 layout: ['page', 'post']

添加 B 站视频插件

安装 hexo-tag-bilibili

切换到 Hexo 的目录，执行以下命令

1	npm install --save hexo-tag-bilibili

使用

在文章中用以下方式使用此插件 [av_id] 填写视频的 av 号。

1	{% bilibili [av_id] %}

如果有多 p，使用以下格式。[page] 为 P 号。

1	{% bilibili [av_id] [page] %}

( display 不能包含英文逗号，可用 &sbquo;)

只能写 AV 号如 av57505556 ，av_id 写 57505556

哔哩哔哩 AV/BV 互转 https://tool.liumingye.cn/avbv/

例如：

1	{% bilibili 884810250 %}

效果：

高级

配置

你可以配置你的播放器在 Hexo 的文件夹中，打开 _config.yml 文件进行配置。你可以配置是否自动播放，播放器的大小 等。例如

1
2
3

bilibili:
  width: 450
  height: 100%

ps：这插件貌似读取 _config.yml 值时会互换 width 和 height 值，请注意实际效果。

Style

播放器由一个带有 bili_video 类的 <div> 标签包装。你可以通过自定义的 css 文件修改它的样式。

bangumi 卡片插件

显示动漫小卡片，使用 Bangumi 的 API。

Installation / 安装

1	npm install hexo-tag-bangumi --save

Usage / 使用方法

Use tags:

在 Markdown 文件中：

1	{% bangumi animeId %}

Example / 例子:

1	{% bangumi 216371 %}

之后插件会生成如下的 HTML 代码：

<div class="bangumi-anime_card">
    <div class="bangumi-info_section">
        <div class="bangumi-anime_header">
            <a href="http://lain.bgm.tv/pic/cover/l/69/28/152091_Bg7Hc.jpg">
                <img src="http://lain.bgm.tv/pic/cover/l/69/28/152091_Bg7Hc.jpg" class="bangumi-locandina">
            </a>
            <span id="hexo-bangumi-header">吹响！悠风号 第二季</span>
            <span id="hexo-bangumi-subheader">響け！ユーフォニアム 2</span>
            <div>
                <span class="bangumi-rankspan">排名 <span class="bangumi-rank">#113</span></span>
                <span class="bangumi-rankspan"> 话数 <span class="bangumi-rank">13</span></span>
                <span class="bangumi-score">8.2</span><span style="color:#545454">&nbsp;力荐</span>
            </div>
        </div>
        <div class="bangumi-anime_desc">
            <p class="bangumi-text">吹奏乐竞赛京都府大赛。在那里漂亮地取得金奖的北宇治高中吹奏乐部，向着下一个舞台・强豪云集的关西大赛发起挑战！</p>
        </div>
    </div>
    <div class="bangumi-blur_back" style="background: url(http://lain.bgm.tv/pic/cover/l/69/28/152091_Bg7Hc.jpg); no-repeat fixed;background-size: cover;"></div>
</div>

效果：

吹响！悠风号第二季響け！ユーフォニアム 2

排名 #53 话数 138.5 力荐

吹奏乐竞赛京都府大赛。在那里漂亮地取得金奖的北宇治高中吹奏乐部，向着下一个舞台・强豪云集的关西大赛发起挑战！

莉兹与青鸟リズと青い鳥

排名 #26 话数 18.6 力荐

铠塚霙，高中 3 年级，双簧管演奏者。伞木希美，高中 3 年级，长笛演奏者。初中时，是希美牵起了霙的手，带领她走出了孤独。自那以后，希美就占据了霙的整个世界。只有与希美在一起的生活，才令霙感到幸福。可在高中一年级，希美一度退出了吹奏部。而她的归来，也始终未能抹去霙心中的不安。 —— 是否有一天，希美会再次消失在自己面前呢？就这样，二人迎来了高中最后的竞演会。参赛的自由曲是「莉兹与青鸟」。在这首以童话为蓝本创作的乐曲当中，有一段双簧管与长笛交相呼应的章节。「故事的结局，还是越美满越好啦。」虽然希美如此认为，霙却依然对终将到来的离别心怀恐惧。 —— 请永远，永远，留在我身边吧 —— 在继续着日常生活的同时，两人总是情不自禁地将自己投影到童话当中。霙是莉兹，希美是青鸟。但是…… 两枚略有嫌隙的齿轮，仍不停地转动，寻找着与彼此相契合的那个瞬间。

How to get the anime id? / 如何获取 AnimeId

Open Bangumi website. / 打开 Bangumi。
Search anime than you want to insert. / 查找你想插入的动漫。
Url is like this: http://bangumi.tv/subject/216371. / 得到该动漫的 URL。
The NUMBER is anime id. / 末尾的数字就是要在标签中填入的 ID。

Options / 参数设置

By modifying the _config.yml file under the Hexo root directory.

在 _config.yml 中添加如下 Option 可以自定义 CSS 地址。

1 2	bangumis: css: https://.../css/hexo-tag-bangumi.css

The default css address is:

https://cdn.jsdelivr.net/npm/hexo-tag-bangumi/hexo-tag-bangumi.css

默认 CSS 地址为 jsdelivr 的 CDN。

Style / 样式

The default css style used Simone Bernabè:

默认 CSS 样式使用了 Simone Bernabè 在 CodePen 上发布的 Movie Card 样式。

View in CodePen

API

The Hexo plugin used official API by bangumi, It’s Powerful!

API 是 Bangumi 自家的公开 API。

为 Hexo 添加 Steam 游戏库页面

安装

1	npm install hexo-steam-games --save

配置

将下面的配置写入站点的配置文件 _config.yml 里 (不是主题的配置文件).

steam:
  enable: true
  steamId: '*****' #steam 64位Id
  apiKey: '*****' #steam api key
  steamInfos: # 多账号配置
    - id: '*****' #steam 64位Id
      path: # 为每个帐号游戏库单独配置页面路径，默认`steamgames/{steamId}/index.html`
      ... # 兼容以下配置项
    - id: '*****'
      ...
  freeGames: true
  path:
  title: Steam游戏库
  quote: '+1+1+1+1+1'
  tab: recent
  length: 1000
  imgUrl: '*****'
  proxy:
    host:
    port:
  extra_options:
    key: value

enable: 是否启用
apiKey: Steam 网页 API Key (新版需要 API Key 才能获取到游戏信息，点此注册 API Key)，或者手动获取游戏库数据
steamId: steam 64 位 Id (需要放在引号里面，不然会有 BUG), 需要将 steam 库设置为公开！
steamInfos: 多账号配置
path: 游戏页面路径，默认 steamgames/index.html
title: 该页面的标题
quote: 写在页面开头的一段话，支持 html 语法
tab: all 或 recent, all: 所有游戏 , recent: 最近游玩的游戏
length: 要显示游戏的数量，游戏太多的话可以限制一下
imgUrl: 图片链接，在 quote 下面放一张图片，图片链接到 Steam 个人资料，可留空
proxy

如果无法访问 steam 社区的话请使用代理
- host: 代理 ip 或域名
- port: 代理端口
extra_options: 此配置会扩展到 Hexo 的 page 变量中

适配 Matery 主题（可选）

在 /themes/hexo-theme-matery/layout 文件夹下面创建一个名为 steamgames.ejs 的文件，并将下面的内容复制进去：

<link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- url_for('/css/detail/steamgames.css') %>">

<%- partial('_partial/bg-cover') %>
<style> 
    .bangumi-picture img { 
        width: 100%; 
    } 
</style> 
<main class="content"> 
    <div id="contact" class="container chip-container"> 
        <div class="card"> 
            <div class="card-content" style="padding: 30px"> 
                <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1> 
                <%- page.content %> 
            </div> 
        </div> 
        <div class="card"> 
            <div class="card-content" style="text-align: center"> 
                <h3 style="margin: 5px 0 5px 5px;">如果你有好的内容推荐，欢迎在下面留言！</h3> 
            </div> 
        </div>
        <div class="card"> 
            <% if (theme.gitalk && theme.gitalk.enable) { %>
            	<%- partial('_partial/gitalk') %>
            <% } %> 
            <% if (theme.gitment.enable) { %> 
            	<%- partial('_partial/gitment') %> 
            <% } %> 
            <% if (theme.disqus.enable) { %> 
            	<%- partial('_partial/disqus') %> 
            <% } %> 
            <% if (theme.livere && theme.livere.enable) { %> 
            	<%- partial('_partial/livere') %> 
            <% } %> 
            <% if (theme.valine && theme.valine.enable) { %> 
            	<%- partial('_partial/valine') %> 
            <% } %> 
        </div> 
    </div> 
</main>

最后面的几个 <% if (*) { %> <% * %> <% } %> 模块，可以根据实际运用模块进行删改

在 source/css/detail 文件夹下面创建一个名为 steamgames.css 的文件，并将下面的内容复制进去：

1
2
3

.bg-cover {
    background-image: url('/medias/banner/steam.jpg') !important
}

然后可以去 source/medias/banner 文件夹下面创建一个 steam.jpg 以供页面使用。

之后在博客站点目录下的 node_modules 文件夹下找到 hexo-steam-games/lib，找到 steam-games-generator.js 文件，用文本编辑器打开并将其文件内容末尾的代码修改为一下内容：

1 2	/* 原文件内容为 layout: [`page`, `post`] ，将其修改为下面的内容*/ layout: [`page`, `steamgames`]

使用

在 hexo generate 或 hexo deploy 之前使用 hexo steam -u 命令更新 steam 游戏库数据！
删除游戏库数据指令:hexo steam -d

手动获取游戏库数据

如果 hexo steam -u 命令一直获取游戏库数据失败，可以用以下方法手动获取游戏库数据：

浏览器打开 https://steamcommunity.com/profiles/{steamId}/games?tab={tab}, {steamId} 和 {tab} 分别替换为上面配置中提到的 steamId 和 tab

网页加载完成后，打开浏览器控制台，按 F12，输入以下代码并回车：

let script = jQuery('script[language="javascript"]');
var games = [];
for (let i = 0; i < script.length; i++) {
  if (script.eq(i).html().includes("rgGames")) {
    let rgGames = script.eq(i).html().match(/var.*?rgGames.*?=.*?(\[[\w\W]*?\}\}\]);/);
    if (rgGames) {
      games = JSON.parse(rgGames[1]);
      break;
    }
  }
}
document.write(JSON.stringify(games))

将生成的内容复制到博客根目录/node_modules/hexo-steam-games/data/games.json 文件内，如果没有对应的文件或目录，请自行创建

用于在 Hexo 博客中嵌入 steam 游戏。

Steamgame 卡片插件

安装

1	npm install hexo-tag-steamgame --save

使用方法

嵌入单个游戏

1	{% steamgame appid description %}

批量嵌入游戏

{% steamgames %}
appid
appid
appid
appid
appid
appid
{% endsteamgames %}

参数

1 2	appid: Steam 游戏 id. description(可选): 用于替换默认游戏简介。

Demo

示例：

1
2
3

{% steamgames %}
601150
{% endsteamgames %}

效果：