hexo-galgame-wall

为 Hexo 博客添加精美的 Galgame 荣誉墙页面，数据从 VNDB 拉取。

✨ 功能特性

• 🎮 VNDB 数据同步 — 一键从 VNDB 拉取你的 Galgame 收藏列表
• 📚 书架风格展示 — 实体游戏盒质感的卡片设计
• ✨ 丰富动画效果 — 卡片入场动画、Tab 发光、标题流光、金色粒子背景
• 🌏 多语言标题支持 — 自动优先显示中文标题，其次日文、英文
• 🏷️ 自定义分类 — 支持自定义标签分类（已通关/正在玩/暂停中等）
• 📱 响应式设计 — 完美适配桌面、平板、手机
• ⚙️ 高度可配置 — 页面路径、标题、特效开关均可自定义

🖼️ 预览

📦 安装

npm install hexo-galgame-wall --save

或者使用 pnpm / yarn：

pnpm add hexo-galgame-wall
# 或
yarn add hexo-galgame-wall

⚙️ 配置

在 Hexo 根目录的 _config.yml 中添加：

galgameWall:
  # 必填：你的 VNDB 用户名
  username: your_vndb_username

  # 可选：页面路径（默认 galgames/index.html）
  pagePath: galgames/index.html

  # 可选：页面标题（默认 Galgame 荣誉墙）
  pageTitle: Galgame 荣誉墙

  # 可选：页面引言
  pageQuote: galgame太好玩啦!!!

  # 可选：数据文件路径（默认 source/_data/galgames.json）
  dataFile: source/_data/galgames.json

  # 可选：是否启用金色粒子背景（默认 true）
  enableParticles: true

  # 可选：是否启用 Tab 发光效果（默认 true）
  enableGlow: true

  # 可选：是否启用标题金色流光效果（默认 true）
  enableTitleShimmer: true

  # 可选：自定义分类标签
  # labelId: VNDB 标签 ID（1=Playing, 2=Finished, 3=Dropped, 4=Wishlist, 10=Stalled 等）
  # key: 分类英文标识（用于 CSS 和数据）
  # label: 分类中文显示名
  # order: 排序（数字越小越靠前）
  labels:
    - labelId: 2
      key: finished
      label: 已通关
      order: 1
    - labelId: 1
      key: playing
      label: 正在玩
      order: 2
    - labelId: 3
      key: stalled
      label: 暂停中
      order: 3

🚀 使用

1. 拉取数据

hexo galgame -u

执行后会从 VNDB 拉取你的 Galgame 列表，并保存到 source/_data/galgames.json。

2. 生成页面本地预览：

hexo server

然后访问 http://localhost:4000/galgames/ 查看效果。

📌 添加到导航菜单

在主题配置文件（如 _config.shokax.yml）的 menu 中添加：

menu:
  Galgame: /galgames/ || stars

图标名称根据你使用的主题图标库调整。

🎨 主题兼容性

| 主题 | 状态 | 说明 | |------|------|------| | ShokaX | ✅ 完美兼容 | 推荐使用 | | Butterfly | ⚠️ 需微调 | 部分 CSS 变量可能需要调整 | | 其他主题 | ⚠️ 可能需调整 | 卡片样式基于 CSS 变量，大部分主题可自动适配 |

🏷️ 自定义分类示例

只显示两个分类

galgameWall:
  username: your_username
  labels:
    - labelId: 2
      key: finished
      label: 已通关
      order: 1
    - labelId: 4
      key: wishlist
      label: 愿望单
      order: 2

显示全部五个标准分类

galgameWall:
  username: your_username
  labels:
    - labelId: 2
      key: finished
      label: 已通关
      order: 1
    - labelId: 1
      key: playing
      label: 正在玩
      order: 2
    - labelId: 4
      key: wishlist
      label: 愿望单
      order: 3
    - labelId: 10
      key: stalled
      label: 暂停中
      order: 4
    - labelId: 3
      key: dropped
      label: 已弃坑
      order: 5

📋 VNDB 标签 ID 参考

| ID | 标签名 | 说明 | |----|--------|------| | 1 | Playing | 正在玩 | | 2 | Finished | 已通关 | | 3 | Dropped | 已弃坑 | | 4 | Wishlist | 愿望单 | | 10 | Stalled | 暂停中 |

💡 你也可以在 VNDB 上创建自定义标签，然后用对应的 labelId。

❓ 常见问题

1. 拉取数据失败怎么办？

• 检查 VNDB 用户名是否正确
• 确认网络可以访问 api.vndb.org
• 可以在 VNDB 用户搜索 确认你的用户名

2. 页面没有生成？

• 确保先执行了 hexo galgame -u 拉取数据
• 检查 source/_data/galgames.json 是否存在且有内容
• 执行 hexo clean 后重新生成

3. 样式显示异常？

• 不同主题的 CSS 变量可能不同，可以通过自定义 CSS 覆盖
• 主要变量：--accent-color（主题色）、--card-bg（卡片背景）、--border-color（边框色）

🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启一个 Pull Request

📄 许可证

MIT License - 详见 LICENSE 文件

🙏 致谢

• VNDB - 提供视觉小说数据库 API
• Hexo - 快速、简洁且高效的博客框架