Bilibili-banner开源项目使用教程

Bilibili-banner开源项目使用教程

bilibili-banner 一键复刻 B 站首页动态 Banner，本仓库记录其历史Banner以供学习和欣赏（自2023-08-21开始） 项目地址: https://gitcode.com/gh_mirrors/bi/bilibili-banner

1. 项目目录结构及介绍

Bilibili-banner开源项目的目录结构如下：

• assets: 存放抓取的B站Banner资源文件，包括图片和配置数据。
• .gitignore: 指定git忽略的文件和目录。
• LICENSE: 项目的许可文件，本项目采用MIT协议。
• README.md: 项目的说明文档。
• config.js: 项目的配置文件，用于设置抓取参数和展示效果。
• grab.js: 用于抓取B站Banner数据的脚本。
• index.css: 项目的样式表文件。
• index.html: 项目的入口HTML文件。
• index.js: 项目的脚本文件，包含Banner的交互逻辑。
• normalize.css: 用于统一浏览器样式，提供更一致的UI表现。
• package.json: 项目的配置文件，包含项目依赖和脚本。

每个文件和目录都承担着项目的不同功能，共同构建了Bilibili-banner这一开源项目。

2. 项目的启动文件介绍

项目的启动主要通过index.html文件实现。这是项目的入口页面，包含了页面结构和初始化脚本。在浏览器中打开此文件，即可看到B站Banner的复刻效果。

为了运行这个项目，你需要先安装项目依赖。在项目根目录下运行以下命令之一：

pnpm i
# 或者
yarn / npm i

安装完成后，你可以通过以下命令启动本地服务器，并在浏览器中查看演示：

npm run serve

3. 项目的配置文件介绍

项目的配置主要通过config.js文件进行。这个文件包含了抓取B站Banner的参数设置以及展示效果的配置。

以下是一些主要的配置参数：

• a: 数字类型，表示加速度，数值越高移动变化越大（接受正负值）。
• deg: 数字类型，表示旋转幅度，数值越高旋转越快（接受正负值）。
• g: 数字类型，表示重力，数值越高上下移动变化越大（接受正负值）。
• f: 数字类型，表示大小变化，对应CSS transform: scale。
• opacity: 数组类型，透明度变化，接收一个区间。

你可以根据需要手动调整这些参数，然后重新启动项目来查看效果。

此外，你可以通过运行以下命令抓取最新的B站Banner数据：

npm run grab "Banner名称"

替换"Banner名称"为你想要给Banner起的名字。数据会被自动抓取并以当天日期命名，保存在assets目录下。之后，重新启动本地服务器即可看到最新抓取的Banner效果。

bilibili-banner 一键复刻 B 站首页动态 Banner，本仓库记录其历史Banner以供学习和欣赏（自2023-08-21开始） 项目地址: https://gitcode.com/gh_mirrors/bi/bilibili-banner