追番星球页面使用示例

🎬 追番星球功能简介

Demius 主题的追番星球功能为您提供了一个优雅的追番追剧记录和展示方案。您可以轻松组织和展示来自B站或其他平台的番剧、动漫、影视作品的追番记录，支持想看、在看、看过三种状态分类，并可视化显示观看进度。

主要特性

📊 三种状态分类：想看、在看、看过
🎯 详细信息展示：番剧封面、标题、评分、进度等
📈 进度可视化：进度条显示观看进度
🏷️ 标签切换：点击标签切换不同状态列表
🖼️ 封面展示：高质量封面图片展示
📱 响应式布局：完美适配移动端
🌙 暗色模式：自动适配明暗主题
📋 数据管理：通过YAML文件管理数据
🔗 链接跳转：点击卡片可跳转到B站等平台

🚀 快速开始

1. 创建追番星球页面

在 content/ 目录下创建 bangumi-planet.md 文件：

---
title: "追番星球"
slug: bangumi-planet
date: 2025-10-31T12:00:00+08:00
lastmod: 2025-10-31T12:00:00+08:00
draft: false
type: bangumi-planet
layout: bangumi-planet
description: "我的追番追剧列表，记录看过的、在看的和想看的番剧/影视作品。"
---

## 追番星球

这里是我在B站追番追剧的记录，包括想看、在看和看过的作品。数据来源于B站个人追番列表。

2. 配置追番星球数据

在项目根目录的 data/ 文件夹下创建 bangumi-planet.yaml 文件：

bangumi:
  # 想看列表
  wantWatch:
    - title: "鬼灭之刃"
      cover: "/img/bangumi/鬼灭之刃.webp"
      score: "9.5"
      totalCount: "全12话"
      area: "日本"
      type: "番剧"
      des: "这是一部非常有趣的番剧..."
      link: "https://www.bilibili.com/bangumi/play/example"
      progress: "12/12"

3. 访问追番星球

构建网站后，访问 /bangumi-planet 路径即可查看您的追番星球页面。

📝 配置详解

数据结构

追番星球数据分为两个主要部分：

bangumi：追番列表（番剧/动漫）
cinema：追剧列表（影视剧）

每个部分都包含三个状态列表：

wantWatch：想看列表（计划要看的作品）
watching：在看列表（正在追的作品）
watched：看过列表（已看完的作品）

番剧/影视数据结构

每个番剧或影视项目包含以下字段：

字段	类型	必填	说明
`title`	string	✅	番剧/影视名称
`cover`	string	✅	封面图片 URL
`score`	string	❌	评分（如 “9.5”）
`totalCount`	string	❌	总集数（如 “全12话”、“全24话”）
`area`	string	❌	地区（如 “日本”、“中国”）
`type`	string	❌	类型（如 “番剧”、“电影”、“电视剧”）
`des`	string	❌	作品描述
`link`	string	❌	外部链接 URL（如B站链接）
`progress`	string	❌	观看进度（如 “8/24”，格式：当前集数/总集数）

进度条说明

进度条会根据 progress 字段自动计算并显示观看进度：

格式：当前集数/总集数（如 8/24 表示已看8集，共24集）
自动计算：进度条宽度 = (当前集数 / 总集数) × 100%
显示位置：卡片底部，显示文字和可视化进度条

💡 使用示例

示例 1：想看列表

bangumi:
  # 想看列表（计划要看的番剧）
  wantWatch:
    - title: "鬼灭之刃"
      cover: "/img/bangumi/鬼灭之刃.webp"
      score: "9.5"
      totalCount: "全12话"
      area: "日本"
      type: "番剧"
      des: "这是一部非常有趣的番剧，讲述了一个关于友情和成长的故事..."
      link: "https://www.bilibili.com/bangumi/play/ss12345"
      progress: "0/12"  # 还未开始观看
      
    - title: "海绵宝宝"
      cover: "/img/bangumi/海绵宝宝.webp"
      score: "9.5"
      totalCount: "全12话"
      area: "日本"
      type: "番剧"
      des: "经典动画作品，值得一看"
      link: "https://www.bilibili.com/bangumi/play/ss67890"
      progress: "0/12"

示例 2：在看列表

bangumi:
  # 在看列表（正在追的番剧）
  watching:
    - title: "灵笼"
      cover: "/img/bangumi/灵笼.webp"
      score: "9.2"
      totalCount: "全24话"
      area: "日本"
      type: "番剧"
      des: "正在追的番剧，非常精彩，每周更新一集"
      link: "https://www.bilibili.com/bangumi/play/ss11111"
      progress: "8/24"  # 已看8集，共24集，进度条显示约33%
      
    - title: "进击的巨人"
      cover: "/img/bangumi/进击的巨人.webp"
      score: "9.8"
      totalCount: "全25话"
      area: "日本"
      type: "番剧"
      des: "经典神作，正在补番中"
      link: "https://www.bilibili.com/bangumi/play/ss22222"
      progress: "15/25"  # 已看15集，共25集，进度条显示60%

示例 3：看过列表

bangumi:
  # 看过列表（已看完的番剧）
  watched:
    - title: "一人之下"
      cover: "/img/bangumi/一人之下.webp"
      score: "9.8"
      totalCount: "全12话"
      area: "日本"
      type: "番剧"
      des: "已经看完的优秀作品，强烈推荐大家观看！"
      link: "https://www.bilibili.com/bangumi/play/ss33333"
      progress: "12/12"  # 已看完，进度条显示100%
      
    - title: "钢之炼金术师"
      cover: "/img/bangumi/钢之炼金术师.webp"
      score: "9.9"
      totalCount: "全64话"
      area: "日本"
      type: "番剧"
      des: "经典神作，已三刷"
      link: "https://www.bilibili.com/bangumi/play/ss44444"
      progress: "64/64"

示例 4：追剧列表（影视剧）

# 追剧列表配置（影视剧）
cinema:
  # 想看列表
  wantWatch:
    - title: "流浪地球"
      cover: "/img/cinema/流浪地球.webp"
      score: "9.0"
      totalCount: "1部"
      area: "中国"
      type: "电影"
      des: "期待已久的科幻大片"
      link: "https://www.bilibili.com/bangumi/play/example"
      progress: "0/1"
  
  # 在看列表
  watching:
    - title: "三体"
      cover: "/img/cinema/三体.webp"
      score: "9.5"
      totalCount: "全30集"
      area: "中国"
      type: "电视剧"
      des: "正在追的科幻剧，每周更新"
      link: "https://www.bilibili.com/bangumi/play/example2"
      progress: "10/30"
  
  # 看过列表
  watched:
    - title: "狂飙"
      cover: "/img/cinema/狂飙.webp"
      score: "9.7"
      totalCount: "全39集"
      area: "中国"
      type: "电视剧"
      des: "已看完，非常精彩的剧集"
      link: "https://www.bilibili.com/bangumi/play/example3"
      progress: "39/39"

示例 5：完整配置

# data/bangumi-planet.yaml

# 追番列表配置
bangumi:
  # 想看列表（计划要看的番剧）
  wantWatch:
    - title: "鬼灭之刃"
      cover: "/img/bangumi/鬼灭之刃.webp"
      score: "9.5"
      totalCount: "全12话"
      area: "日本"
      type: "番剧"
      des: "这是一部非常有趣的番剧..."
      link: "https://www.bilibili.com/bangumi/play/example"
      progress: "0/12"
      
    - title: "海绵宝宝"
      cover: "/img/bangumi/海绵宝宝.webp"
      score: "9.5"
      totalCount: "全12话"
      area: "日本"
      type: "番剧"
      des: "这是一部非常有趣的番剧..."
      link: "https://www.bilibili.com/bangumi/play/example"
      progress: "0/12"
      
  # 在看列表（正在追的番剧）
  watching:
    - title: "灵笼"
      cover: "/img/bangumi/灵笼.webp"
      score: "9.2"
      totalCount: "全24话"
      area: "日本"
      type: "番剧"
      des: "正在追的番剧，非常精彩..."
      link: "https://www.bilibili.com/bangumi/play/example2"
      progress: "8/24"
      
  # 看过列表（已看完的番剧）
  watched:
    - title: "一人之下"
      cover: "/img/bangumi/一人之下.webp"
      score: "9.8"
      totalCount: "全12话"
      area: "日本"
      type: "番剧"
      des: "已经看完的优秀作品，强烈推荐..."
      link: "https://www.bilibili.com/bangumi/play/example3"
      progress: "12/12"

# 追剧列表配置（影视剧）
cinema:
  # 想看列表
  wantWatch: []
  
  # 在看列表
  watching: []
  
  # 看过列表
  watched: []

🎨 样式特性

标签切换

页面顶部有三个标签按钮：

想看：显示计划要看的作品列表
在看：显示正在追的作品列表
看过：显示已看完的作品列表

点击标签可以切换显示不同状态的作品列表。

卡片布局

网格布局，响应式适配
每个作品显示为一个卡片
卡片包含封面图片、标题、评分、类型、地区、集数等信息
点击卡片可跳转到外部链接（如B站）

评分显示

显示在封面图片右上角
分数格式：如 “9.5”、“9.8” 等

进度条

进行中的作品可以显示观看进度
进度条格式：当前集数/总集数（如 8/24）
自动计算进度百分比并可视化显示
进度条显示在卡片底部

元信息标签

每个卡片显示以下元信息：

类型：番剧、电影、电视剧等
地区：日本、中国等
集数：全12话、全24话等

📱 响应式支持

追番星球页面完全支持响应式设计：

桌面端：多列网格布局（3-4列）
平板端：2列网格布局
手机端：单列布局，优化触摸体验

🌙 暗色模式

追番星球页面自动适配明暗主题：

亮色模式：清新的卡片样式
暗色模式：优雅的深色背景

🔍 如何获取B站番剧信息

获取番剧链接

打开B站网页版或客户端
找到您要分享的番剧
复制链接，如：https://www.bilibili.com/bangumi/play/ss12345
将链接添加到配置文件的 link 字段

获取封面图片

在B站番剧页面，右键点击封面图片
选择"复制图片地址"或"查看图片"
将图片保存到 static/img/bangumi/ 目录
在配置文件中使用相对路径：/img/bangumi/番剧名.webp

获取评分和集数

在B站番剧页面查看详细信息
评分显示在番剧介绍中
集数信息显示在番剧标题下方
将信息填写到配置文件的相应字段

💡 使用技巧

1. 分类组织

使用 bangumi 存放番剧/动漫数据
使用 cinema 存放影视剧数据
按状态分类：想看、在看、看过

2. 进度管理

定期更新 watching 列表中的 progress 字段
看完后移动到 watched 列表，设置 progress: "总集数/总集数"
从 wantWatch 开始观看时，移动到 watching 列表

3. 封面图片

使用合适的图片格式（建议 WebP 或 JPG）
图片尺寸建议：300x400 或更大
使用懒加载（loading="lazy"）提升性能
提供备用图片（错误时显示默认图片 /img/404.jpg）

4. 链接管理

添加B站或其他平台的链接
点击卡片可跳转到对应平台
支持新标签页打开（target="_blank"）

5. 描述优化

添加作品的简要描述
说明推荐理由或观看感受
支持多行描述

🔧 自定义配置

修改页面内容

编辑 content/bangumi-planet.md 文件，可以添加页面介绍文字：

---
title: "追番星球"
slug: bangumi-planet
date: 2025-10-31T12:00:00+08:00
lastmod: 2025-10-31T12:00:00+08:00
draft: false
type: bangumi-planet
layout: bangumi-planet
description: "我的追番追剧列表，记录看过的、在看的和想看的番剧/影视作品。"
---

## 追番星球

这里是我在B站追番追剧的记录，包括想看、在看和看过的作品。

数据来源于B站个人追番列表，我会定期更新观看进度。

### 推荐作品

这里可以添加一些推荐的作品介绍...

添加评论功能

页面默认支持评论功能，需要在配置文件中启用评论系统。

📋 完整示例

# data/bangumi-planet.yaml

# 追番列表配置
bangumi:
  # 想看列表（计划要看的番剧）
  wantWatch:
    - title: "鬼灭之刃"
      cover: "/img/bangumi/鬼灭之刃.webp"
      score: "9.5"
      totalCount: "全12话"
      area: "日本"
      type: "番剧"
      des: "这是一部非常有趣的番剧，讲述了一个关于友情和成长的故事。强烈推荐大家观看！"
      link: "https://www.bilibili.com/bangumi/play/ss12345"
      progress: "0/12"
      
    - title: "海绵宝宝"
      cover: "/img/bangumi/海绵宝宝.webp"
      score: "9.5"
      totalCount: "全12话"
      area: "日本"
      type: "番剧"
      des: "经典动画作品，值得一看"
      link: "https://www.bilibili.com/bangumi/play/ss67890"
      progress: "0/12"
      
  # 在看列表（正在追的番剧）
  watching:
    - title: "灵笼"
      cover: "/img/bangumi/灵笼.webp"
      score: "9.2"
      totalCount: "全24话"
      area: "日本"
      type: "番剧"
      des: "正在追的番剧，非常精彩，每周更新一集。剧情紧凑，画质精良，值得追番！"
      link: "https://www.bilibili.com/bangumi/play/ss11111"
      progress: "8/24"
      
    - title: "进击的巨人"
      cover: "/img/bangumi/进击的巨人.webp"
      score: "9.8"
      totalCount: "全25话"
      area: "日本"
      type: "番剧"
      des: "经典神作，正在补番中。剧情深度和制作质量都非常出色。"
      link: "https://www.bilibili.com/bangumi/play/ss22222"
      progress: "15/25"
      
  # 看过列表（已看完的番剧）
  watched:
    - title: "一人之下"
      cover: "/img/bangumi/一人之下.webp"
      score: "9.8"
      totalCount: "全12话"
      area: "日本"
      type: "番剧"
      des: "已经看完的优秀作品，强烈推荐大家观看！剧情精彩，角色塑造深刻。"
      link: "https://www.bilibili.com/bangumi/play/ss33333"
      progress: "12/12"
      
    - title: "钢之炼金术师"
      cover: "/img/bangumi/钢之炼金术师.webp"
      score: "9.9"
      totalCount: "全64话"
      area: "日本"
      type: "番剧"
      des: "经典神作，已三刷。无论是剧情、音乐还是制作都堪称完美。"
      link: "https://www.bilibili.com/bangumi/play/ss44444"
      progress: "64/64"

# 追剧列表配置（影视剧）
cinema:
  # 想看列表
  wantWatch:
    - title: "流浪地球"
      cover: "/img/cinema/流浪地球.webp"
      score: "9.0"
      totalCount: "1部"
      area: "中国"
      type: "电影"
      des: "期待已久的科幻大片，准备在假期观看"
      link: "https://www.bilibili.com/bangumi/play/example"
      progress: "0/1"
  
  # 在看列表
  watching:
    - title: "三体"
      cover: "/img/cinema/三体.webp"
      score: "9.5"
      totalCount: "全30集"
      area: "中国"
      type: "电视剧"
      des: "正在追的科幻剧，每周更新。忠实还原原著，制作精良。"
      link: "https://www.bilibili.com/bangumi/play/example2"
      progress: "10/30"
  
  # 看过列表
  watched:
    - title: "狂飙"
      cover: "/img/cinema/狂飙.webp"
      score: "9.7"
      totalCount: "全39集"
      area: "中国"
      type: "电视剧"
      des: "已看完，非常精彩的剧集。演员演技出色，剧情扣人心弦。"
      link: "https://www.bilibili.com/bangumi/play/example3"
      progress: "39/39"

❓ 常见问题

Q: 如何添加新的番剧？

A: 在 data/bangumi-planet.yaml 文件中的相应状态列表（wantWatch、watching、watched）下添加新的番剧对象。

Q: 如何更新观看进度？

A: 修改 progress 字段为 当前集数/总集数（如 8/24），进度条会自动更新显示。

Q: 如何移动番剧到其他状态？

A: 将番剧数据从一个状态列表剪切并粘贴到另一个状态列表。例如，从 wantWatch 移动到 watching，或从 watching 移动到 watched。

Q: 进度条如何显示？

A: 当 progress 字段格式为 当前集数/总集数 时，系统会自动计算进度百分比并在卡片底部显示可视化进度条。

Q: 图片无法显示怎么办？

A: 检查图片路径是否正确，确保图片文件存在于 static/img/bangumi/ 目录中。主题会自动处理图片加载失败的情况，显示默认图片 /img/404.jpg。

Q: 如何获取B站番剧链接？

A: 在B站番剧页面复制链接，格式如 https://www.bilibili.com/bangumi/play/ss12345，将链接添加到配置文件的 link 字段。

Q: 支持哪些类型的作品？

A: 支持番剧、动漫、电影、电视剧等各类影视作品。通过 type 字段区分作品类型。

Q: 如何添加追剧列表（影视剧）？

A: 在配置文件中使用 cinema 部分存放影视剧数据，结构与 bangumi 相同，包含 wantWatch、watching、watched 三个状态列表。

🔗 相关文档

📚 技术说明

数据来源

追番星球功能的数据来源于手动编辑的 YAML 文件（data/bangumi-planet.yaml），支持从B站个人追番列表导出数据后手动导入。

参考项目

本功能参考了 hexo-bilibili-bangumi 项目的数据结构和实现方式。

功能特性

✅ 标签切换：点击标签切换不同状态列表
✅ 进度条可视化：自动计算并显示观看进度
✅ 响应式设计：完美适配各种设备
✅ 暗色模式：自动适配明暗主题
✅ PJAX 兼容：支持无刷新切换

希望这个追番星球功能能够帮助您更好地记录和展示追番追剧历程！🎬