增加豆瓣书/影单

1. 安装模块依赖

在cmd中输入命令：

1
npm install hexo-douban --save

2. 添加配置

在Hexo配置文件添加配置：

1
2
3
4
5
6
7
8
9
10
11
#豆瓣插件
douban: 
  user: 218060495  #这个需要修改为你个人的id
  builtin: false
  book: 
      title: '文化沙漠の绿洲' 
      quote: '多读书，多看报，少吃零食，多睡觉' 
  movie: 
      title: '我的影单' 
      quote: '那些年我们一起看过的电影' 
timeout: 10000

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

  • user: 你的豆瓣ID.打开豆瓣，登入账户，然后在右上角点击 “个人主页” ，这时候地址栏的URL大概是这样：”https://www.douban.com/people/xxxxxx/“ ，其中的”xxxxxx”就是你的个人ID了。
  • builtin: 是否将生成页面的功能嵌入hexo s和hexo g中，默认是false,另一可选项为true(1.x.x版本新增配置项)。
  • title: 该页面的标题.
  • quote: 写在页面开头的一段话,支持html语法.
  • timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

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

3. 部署

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

1
2
3
4
5
6
7
8
9
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 的文件，并将下面的内容复制进去：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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`]

5. 出现的问题

在hexo douban运行抓取数据并同步的时候：

1
2
INFO  0 books have been loaded in 836 ms, because you are offline or your network is bad
INFO  0 movies have been loaded in 735 ms, because you are offline or your network is bad

出现如上错误，网上有人说是因为爬虫过多被服务器反爬了，等几天就可以。但是我过了很多天都不可以，最后采取：降低本地nodejs版本到12.18.0就可以同步过来了。

添加豆瓣书影音卡片插件

用法

首先请安装插件

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

然后使用以下语法

1
2
3
4
5
{% douban movie 24745500 %}

{% douban book 30376420 %}

{% douban music 35099703 %}

参数阐述

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

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

示例

灯影绰约
电影名: 绣春刀(2014)
导演: 路阳
主演: 张震/刘诗诗
上映时间: 2014-08-07(中国大陆)
评分: 7.6
见字如晤
书名: 一个人生活
作者: [日]谷川俊太郎
出版年份: 2019-3
评分: 7.1
余音绕梁
音乐名: María
表演者: 화사/华莎
发行时间: 2020-06-30
评分: 8.3

Bilibili 插件使用说明

根据官方文档安装插件

参考插件说明文档

安装

1
npm install hexo-bilibili-bangumi --save

配置

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

1
2
3
4
5
6
7
8
9
10
11
12
bangumi:
  enable: true # 是否启用
  path: # 番剧页面路径，默认 bangumis/index.html
  vmid:    # 哔哩哔哩番剧页面的 vmid(uid)
  title: '追番列表' # 该页面的标题
  quote: '生命不息，追番不止！' #写在页面开头的一段话，支持 html 语法，可留空
  show: 1 # 初始显示页面：0: 想看, 1: 在看, 2: 看过，默认为1
  loading: #  图片加载完成前的 loading 图片
  metaColor: #  meta 部分(简介上方)字体颜色
  color: # 简介字体颜色
  webp: # 番剧封面使用 webp 格式(此格式在 safari 浏览器下不显示，但是图片大小可以缩小 100 倍左右), 默认 true
  progress: # 获取番剧数据时是否显示进度条，默认 true

使用

  1. hexo new page "bangumis"其 bangumis的 md 文档加上type: "bangumis"
  2. 添加 uid
  3. 在hexo generate或hexo deploy之前使用hexo bangumi -u命令更新番剧数据！
  4. 删除数据命令:hexo bangumi -d

获取 uid

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

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

手动添加番剧数据

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

在 sources/_data/ 目录下新建文件，命名为 extra_bangumis.json ，并添加以如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "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 的文件，并将下面的内容复制进去：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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。

img

Installation / 安装

1
npm install hexo-tag-bangumi --save

Usage / 使用方法

Use tags:

在 Markdown 文件中：

1
{% bangumi animeId %}

Example / 例子:

1
{% bangumi 216371 %}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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
排名 #94话数 138.3 力荐

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

莉兹与青鸟リズと青い鳥
排名 #41话数 18.5 力荐

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

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

  1. Open Bangumi website. / 打开 Bangumi。
  2. Search anime than you want to insert. / 查找你想插入的动漫。
  3. Url is like this: http://bangumi.tv/subject/216371. / 得到该动漫的 URL。
  4. 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 样式。

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 里(不是主题的配置文件).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
steam:
  enable: true
  steamId: '*****' #steam 64位Id
  path: 
  title: Steam游戏库
  quote: '+1+1+1+1+1'
  tab: recent
  length: 1000
  imgUrl: '*****'
  proxy:
    host:
    port:
  extra_options:
    key: value

  • enable: 是否启用

  • steamId: steam 64位Id(需要放在引号里面，不然会有BUG), 需要将steam库设置为公开！

  • 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 的文件，并将下面的内容复制进去：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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`]

使用

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

手动获取游戏库数据

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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))

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

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

Steamgame卡片插件

安装

1
npm install hexo-tag-steamgame --save

使用方法

  • 嵌入单个游戏
1
{% steamgame appid description %}
  • 批量嵌入游戏
1
2
3
4
5
6
7
8
{% steamgames %}
appid
appid
appid
appid
appid
appid
{% endsteamgames %}

参数

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

Demo

示例：

1
2
3
{% steamgames %}
601150
{% endsteamgames %}

效果：