为 Hexo 添加追番页面

作为一个老二次元，我经常看番，但随着自己看过的番剧数量增多，在与其他二次元同好交流喜欢的番剧时，往往都是听到一个番，啊这个我看过，那个我也看过，到了让你自己说出几个喜欢的番剧时，一个字都蹦不出来。如果俩人都是社恐，那场面就更尴尬了。

为了解决这个尴尬，我在博客里创建了一个追番列表，你可以访问这个网址来了解我都看过哪些番剧，这样交流起来是不是就容易多了呢？现在我每次遇到二次元同好，啥也不说，把这个网址发给人家，他就会指着这里面的番剧说：啊这个我看过，那个我也看过。对吧，有效地解决了社恐二次元的烦恼。

预览

工具

• Hexo番剧页面插件: https://github.com/mmdjiji/hexo-bangumis
• 番组计划: https://bangumi.tv 或 https://bgm.tv
• 自动更新番剧代码: https://github.com/mmdjiji/hexo-bangumis/blob/main/workflows-demo/auto-update.yml

使用方法

安装

在 Hexo 文件夹下执行:

npm install hexo-bangumis --save

配置

将下面的配置写入 站点 的配置文件 _config.yml 中:

bangumis:
  enable: true              # 是否启用
  path: bangumis/index.html # 生成追番页面的路径
  show: 1                   # 想看，在看，看完
  title: '追番列表'          # 标题
  quote: '生命不息，追番不止'  # 格言
  color_meta: "#555"        # 追番项元数据的颜色
  color_summary: "#555"     # 追番项简介的颜色
  bgmtv_uid: mmdjiji        # bgm.tv的uid
  download_image: true      # 下载图片并使用本地图片，否则使用bgm.tv提供的网络图源
  image_level: c            # 图片高清等级 (l, c, m, s, g)
  lazyload: true            # 是否开启懒加载
  margin: 20px              # 封面图的偏移量微调

使用

更新追番数据:

hexo bangumis -u

删除追番数据:

hexo bangumis -d

获取 bgm.tv 的 uid

登录 bgm.tv 后打开控制台（快捷键 Ctrl + Shift + J），输入 CHOBITS_UID 后按回车，得到的数字就是 uid 啦~

CI/CD

为了配合自动化运维，我特意编写了一份 GitHub Actions 脚本。你也不想每次在番组计划上添加完番剧还要手动在博客的仓库里更新番剧然后再构建一遍再推到服务器上吧，这种重复操作我们直接用脚本解决。

在 .github/workflows 目录里创建一个名为 auto-update.yml 的文件，内容如下：

name: Auto update
on:
  workflow_dispatch:
  schedule:
    - cron: '0 0 * * *' # Every day

jobs:
  meta:
    name: Update meta
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          ref: main

      - name: Do meta update
        shell: bash
        run: |
          npm install
          npx hexo bangumis -u || echo

      - name: Commit files
        run: |
          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
          git config --local user.name "github-actions[bot]"
          git add .
          git commit -m "Update meta on $(date '+%Y-%m-%d %H:%M:%S')" || echo

      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: ${{ github.ref }}

      - name: Do build
        shell: bash
        run: |
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: public # The folder the action should deploy.

牛逼之处

• 使用 bgm.tv 的官方 API 来进行爬取，番剧更多，可用性更高
• 支持数据缓存及番剧封面图本地化，防止因上游服务挂掉导致连锁效应，爬取好番剧后可纯离线场景下部署
• 极端条件下可通过编辑文件来自定义番剧列表，可自定义添加 bgm.tv 没有的番剧
• 总的来说，只要你爬取过这个番剧，那么就算将来 bgm.tv 上把这个番剧删掉了，你也可以继续使用这个番剧