本文基于插件hexo-bilibili-bangumi 编写，并修改为适配redefine主题的样式，最终结果示例见我的追番列表

主要是闲来无事逛github的时候发现了hexo-bilibili-bangumi 这么一个插件，可以爬取bili/bangumi的数据并渲染为一个页面展示你的追番列表，整好我前段时间开始有了bangumi记录追番的习惯，所以想着上手用用。

如何使用

正常来说，按照官方的readme操作完就可以上手使用了

安装插件

$ npm install hexo-bilibili-bangumi --save

在_config.yml配置文件里添加你的配置(以下配置为了确保一次正常运行，与官方示例不同，完整示例见官方)：

bangumi: # 追番设置
  enable: true
  source: bangumi
  bgmInfoSource: 'bgmApi'
  path:
  vmid: 根据官方readme获取
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  lazyload: false
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading: 
  showMyComment: false
  pagination: false
  metaColor:
  color:
  webp:
  progress:
  extraOrder:
  order: latest
  coverMirror:

编译并生成静态文件

hexo c
call hexo bangumi -u # 必须要在hexo g前添加这句，爬取数据
call hexo g
call hexo s

然后你就可以在/bangumis后缀的页面下看见你的追番列表页面啦。(如果修改了path的话，以你实际填写path为主)

附言

实际配置过程中，lazyload选项容易和主题冲突，导致图片一直转圈；pagination选项也会有冲突，导致分页异常。因此上面的配置我都改成了默认关闭。

进阶

因为默认的样式不太好看，以及其他配置和我当前使用的主题redefine有诸多冲突，因此需要进行一些修改才能正常使用，以下是我做的部分修改分享，也是给自己作一次存档。

信息

本人传统后端出身，对前端一概不通，以下修改基本都是靠堆时间慢慢调试+GPT完成，所以改的不好或有其他方案建议的欢迎批评指出（我们GPT真是太强啦）

针对获取的番剧封面太小的问题，修改了lib/templates/bgm-template.ejs文件(因为我只用bgm源所以是这个，bili源有另一个templates文件)；以及途中感觉他的布局有些奇怪，my-comments明明是在picture和右边的内容下面，但却归到右边内容的div里，用负数的padding来移到左边…所以布局也改了改

主要是把img的width从110改成了130px，然后新增一个bangumi-block的div和mycomments纵向排列。

<div class="bangumi-item">
    <div class="bangumi-block">
        <div class="bangumi-picture"><img src="<%= lazyload ? (loading || "https://cdn.jsdelivr.net/npm/hexo-bilibili-bangumi@1.2.0/lib/img/loading.gif") : (srcValue === '__loading__' ? (loading || "https://cdn.jsdelivr.net/npm/hexo-bilibili-bangumi@1.2.0/lib/img/loading.gif") : `https:${item.cover.replace(/^https:/, '')}`) %>" <%- lazyload ? ` data-src="${item.cover}"` : (lazyloadAttrName ? ` ${lazyloadAttrName.split('=')[0]}="${lazyloadAttrName.split('=')[1] === '__loading__' ? (loading || "https://cdn.jsdelivr.net/npm/[email protected]/lib/img/loading.gif") : (lazyloadAttrName.split('=')[1] === '__image__' ? `https:${item.cover.replace(/^https:/, '')}` : (lazyloadAttrName.split('=')[1] || ''))}"` : "") %> referrerPolicy="no-referrer" width="130" style="width:130px;margin:20px auto;" />
        </div>
        <div class="bangumi-info">
            <div class="bangumi-title">
                <a target="_blank" href="https://bangumi.tv/subject/<%= item.id %>"><%= item.title || "Unknown" %></a>
            </div>
            <div class="bangumi-meta">
                <span class="bangumi-info-items" <%- metaColor  %>>
                    <span class="bangumi-info-item">
                    <% if(item.totalCount){ %>
                    <span class="bangumi-info-total"><%= item.totalCount %></span><em
                            class="bangumi-info-label-em">0</em>
                    </span>
                    <% } %>
                    <span class="bangumi-info-item bangumi-type">
                        <span class="bangumi-info-label">类型</span> <em><%= item.type %></em>
                    </span>
                    <span class="bangumi-info-item bangumi-wish">
                        <span class="bangumi-info-label">想看</span> <em><%= item.wish %></em>
                    </span>
                    <span class="bangumi-info-item bangumi-doing">
                        <span class="bangumi-info-label">在看</span> <em><%= item.doing || "-" %></em>
                    </span>
                    <span class="bangumi-info-item bangumi-collect">
                        <span class="bangumi-info-label">已看</span> <em><%= item.collect || "-" %></em>
                    </span>
                    <span class="bangumi-info-item bangumi-info-item-score">
                        <span class="bangumi-info-label">评分</span> <em><%= item.score || "-" %></em>
                    </span>
                </span>
            </div>
            <div class="bangumi-comments" <%- color %>>
                <p>简介：<%= item.des || "暂无简介" %></p>
            </div>
        </div>
    </div>
    <% if (showMyComment && item.myComment) { %>
        <div class="bangumi-my-comments">我的评分：
            <% if (item.myStars) { %>
                <span class="bangumi-starstop"><span class="bangumi-starlight stars<%= item.myStars %>"></span></span>
            <% } %>
            <br>
            我的评价：<%= item.myComment %>
        </div>
    <% } %>
</div>

因插件为对swup没作兼容，而redefine主题推荐开启swup，开启后会导致无法加载bangumi插件的js脚本，因此对隔壁的lib/templates/bangumi.ejs进行了修改
主要是将<script>标签改成了<script data-swup-reload-script type="text/javascript">
1
2
3
4
···以上省略
<script data-swup-reload-script type="text/javascript">
···以下省略
</script>

对样式进行美化(自认为的)

因bangumi插件已经支持针对不同主题的样式表，所以只需要在/src/lib/templates/theme目录下，新增一个redefine.css文件，然后填写自己重新针对该主题设置的样式表即可，以下是我自己修改的样式表：

.bangumi-tabs {
  margin-bottom: 15px;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  background-color: #f4f4f4;
  padding: 5px 5px;
  border-radius: 10px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
 }

.bangumi-tab {
  padding: 10px 20px;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: #000;
  margin: 5px;
  border-radius: 8px;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
  font-weight: bold;
}

a.bangumi-tab {
  text-decoration: none;
}

.bangumi-active {
  background-color: #fafafa;
  color: #005080;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-weight: bold;
}

.bangumi-tab:hover {
  background-color: #e8e6e6;
}

.bangumi-item {
  position: relative;
  clear: both;
  padding: 15px;
  margin: 15px;
  height: fit-content;
  background-color: transparent;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  transform: translateZ(0);
  transition: transform 0.3s, box-shadow 0.3s;
}

@media screen and (max-width: 600px) {
  .bangumi-item {
    width: 100%;
  }
}

.bangumi-block {
  min-height: 180px;
}

.bangumi-picture {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  width: 130px;
  height: auto;
}

.bangumi-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.bangumi-info {
  padding-left: 150px;
  margin-top: 10px;
}

.bangumi-title {
  font-size: 1.2rem;
}

.bangumi-title a {
  line-height: 1;
  text-decoration: none;
}

.bangumi-meta {
  font-size:12px;
  padding-right:10px;
  height:45px
}

.bangumi-comments {
  font-size: 0.92rem;
  margin-top:12px
}

.bangumi-comments>p {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;

  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.bangumi-pagination {
  margin-top: 15px;
  text-align: center;
  margin-bottom: 10px;
}

.bangumi-button {
  padding: 5px;
}

.bangumi-button:hover {
  background: #657b83;
  color: #fff;
}

.bangumi-hide {
  display: none;
}

.bangumi-show {
  display: block;
}

.bangumi-info-items {
  font-size: 0.92rem;
  color: #005080;
  padding-top: 10px;
  line-height: 1;
  float: left;
  width: 100%;
}

.bangumi-item:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.bangumi-info-item {
  display: inline-block;
  width: 13%;
  border-right: 1px solid #005080;
  text-align: center;
  height: 34px;
}

.bangumi-info-label {
  display: block;
  line-height: 12px;
}

.bangumi-info-item em {
  display: block;
  padding-top: 6px;
  line-height: 17px;
  font-style: normal;
  font-weight: 700;
}

.bangumi-info-total {
  padding-top: 11px;
  display: block;
  line-height: 12px;
  font-weight: bold;
}

.bangumi-info-item-score {
  border-right: 1px solid #0000;
  width: 50px;
}

.bangumi-info-label-em {
  color: rgba(0, 0, 0, 0);
  opacity: 0;
  visibility: hidden;
  line-height: 6px !important;
  padding: 0 !important;
}

@media (max-width:650px) {

  .bangumi-coin,
  .bangumi-type {
    display: none;
  }

  .bangumi-info-item {
    width: 16%;
  }
}

@media (max-width:590px) {

  .bangumi-danmaku,
  .bangumi-wish {
    display: none;
  }

  .bangumi-info-item {
    width: 19%;
  }
}

@media (max-width:520px) {

  .bangumi-play,
  .bangumi-doing {
    display: none;
  }

  .bangumi-info-item {
    width: 24%;
  }
}

@media (max-width:480px) {

  .bangumi-follow,
  .bangumi-collect {
    display: none;
  }

  .bangumi-info-item {
    width: 30%;
  }
}

@media (max-width:400px) {
  .bangumi-area {
    display: none;
  }

  .bangumi-info-item {
    width: 45%;
  }
}

.bangumi-my-comments {
  border: 1px dashed #8f8f8f;
  padding: 3px;
  border-radius: 5px;
  margin-left: 5px;
}

.bangumi-starstop {
  background: transparent url(https://cdn.jsdelivr.net/npm/[email protected]/lib/img/rate_star_2x.png);
  height: 10px;
  background-size: 10px 19.5px;
  background-position: 100% 100%;
  background-repeat: repeat-x;
  width: 50px;
  display: inline-block;
  float: none;
}

.bangumi-starlight {
  background: transparent url(https://cdn.jsdelivr.net/npm/[email protected]/lib/img/rate_star_2x.png);
  height: 10px;
  background-size: 10px 19.5px;
  background-position: 100% 100%;
  background-repeat: repeat-x;
  display: block;
  width: 100%;
  background-position: 0 0;
}

.bangumi-starlight.stars1 {
  width: 5px;
}

.bangumi-starlight.stars2 {
  width: 10px;
}

.bangumi-starlight.stars3 {
  width: 15px;
}

.bangumi-starlight.stars4 {
  width: 20px;
}

.bangumi-starlight.stars5 {
  width: 25px;
}

.bangumi-starlight.stars6 {
  width: 30px;
}

.bangumi-starlight.stars7 {
  width: 35px;
}

.bangumi-starlight.stars8 {
  width: 40px;
}

.bangumi-starlight.stars9 {
  width: 45px;
}

.bangumi-starlight.stars10 {
  width: 50px;
}

但苦于实在不会前端，目前还遗留了一些问题：1. 不知道该怎么获取主题当前是日间还是夜间模式，然后针对夜间模式进行适配，所以夜间模式下会不太好看；2. 其实想把选页的按钮也改成redefine首页那样的模式，但也确实不会修改了，问GPT也只能做到改样式的程度了。

如果你想使用我修改后的版本，只需要在path/to/your_blot/node_modules/hexo-bilibili-bangumi目录下，完成以下步骤即可

安装依赖：npm install
作上述同样的修改
编译：npm run build

然后hexo重新生成以下就完事了。

为你的hexo博客添加一个追番列表

如何使用

进阶