hexo加入bangumi追番页面

本文最后更新于 2023年3月10日 早上

使用hexo-bilibili-bangumi插件来实现，在主页来展示bangumi上自己的想看、再看、已看列表。你完全可以根据原仓库说明进行，本文就是自己操作的个记录。

1 安装

1
npm install hexo-bilibili-bangumi --save

2 显示的页面

我在主页的导航栏新加了一个页面，专门用于显示。下面是以fluid主题为例：

命令添加页面

1
hexo new page bangumi

会生成文件source/bangumi/bangumi/index.md
然后去主题下的_config.yml中，找到navbar添加一个menu:：

1
{ key: "追番表", link: "/bangumi/", icon: "iconfont icon-pen" }

自定义页面顶部的图片可以修改这个

1
2
3
4
page:
  banner_img: /img/df.jpg
  banner_img_height: 60
  banner_mask_alpha: 0.3

3 配置

将以下配置保存到根目录的_config.yml中，不是主题里的那个。

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
41
42
43
44
bangumi: 

  enable: true
# 数据源
  source: bgm
# 获取Bangumi番剧信息时使用的Api，仅使用Bangumi源时此选项生效，`bgmApi`: Bangumi Api, `bgmSub`: Bangumi-Subject
  bgmInfoSource: 'bgmApi'
# 就是上面生成页面的地址
  path: bangumi/index.html
# Bangumi的用户id，直接点到个人主页看头像那里就有
  vmid: 767043
# 页面的标题
  title: '追番列表'
# 页头的话
  quote: ''
# 初始显示页面：`0: 想看`, `1: 在看`, `2: 看过`，默认为`1`
  show: 1
# 是否启用图片懒加载，如果与主题的懒加载冲突请关闭
  lazyload: true
# 设置封面图的默认`src`值, `__image__`为封面链接, `__loading__`为loading图片链接, `lazyload`选项为`false`时此选项生效
  srcValue: '__image__'
# 设置封面图的属性与属性值, 例`lazyloadAttrName: 'data-src=__image__'`代表为`img`元素添加`data-src`属性, 其值为图片链接, `lazyload`选项为`false`时此选项生效
  lazyloadAttrName: 'data-src=__image__'
# 图片加载完成前的 loading 图片，需启用图片懒加载
  loading:
# 使用`bgm`源时显示自己的评价及评论，默认`false`
  showMyComment: true
# 分页优化，只将第一页的数据渲染到`html`文件中，其余数据将通过异步请求加载，避免番剧过多时html文件过大导致页面加载缓慢，建议番剧较多时使用，默认`false`
  pagination: false
# meta 部分(简介上方)字体颜色
  metaColor:
# 简介字体颜色
  color:
# 番剧封面使用`webp`格式(此格式在`safari`浏览器下不显示，但是图片大小可以缩小 100 倍左右，仅支持哔哩哔哩源), 默认`true`
  webp: false
# 获取番剧数据时是否显示进度条，默认`true`
  progress: false
# 手动添加的番剧/追剧数据是否优先显示，`1`为优先，其它为不优先
  extraOrder:
# 此配置会扩展到Hexo`page`变量中
  extra_options:
    key: value
    lazyload:
      enable: false # 关闭主题自带的懒加载(只关闭番剧页，不影响其他页面)

4 使用

更新数据

1
hexo bangumi -u

输出

1
2
3
4
5
INFO  Validating config
INFO  Getting bangumis, please wait...
正在获取 [想看] 番剧 [█] 100% 0.0s
正在获取 [在看] 番剧 [█] 100% 0.0s
正在获取 [已看] 番剧 [█] 100% 0.0s

然后就可以看看效果了

1
hexo s

删除则输入

1
hexo bangumi -d

效果直接点博客的右上角的追番表按钮

5 修改

我这儿发现封面大了那么一丢丢，会挡住评分评论部分，然后尝试将bangumi-picture里面的width修改为100px正好合适

在根目录的source下创建/myCustom/animate.css写入：

1
.bangumi-picture{width:100px !important}

然后再主题的配置文件_config.yml中加入额外配置：

1
2
3
custom_css:

  /myCustom/animate.css
技术类
#hexo
hexo加入bangumi追番页面
https://blog.kala.love/posts/4089dfcc/
作者
久远·卡拉
发布于
2023年3月9日
许可协议