Bilibili-banner 项目安装与配置指南

Bilibili-banner 项目安装与配置指南

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

1. 项目基础介绍

Bilibili-banner 是一个开源项目，旨在复刻 B 站首页的动态 Banner 效果。该项目使用原生 JavaScript 实现，无任何第三方依赖，能够自动抓取资源并生成配置，让用户可以快速复刻出 B 站的动态 Banner，并实现接近 1:1 的效果还原。

该项目主要使用的编程语言是 JavaScript，同时也包含 HTML 和 CSS。

2. 项目使用的关键技术和框架

• 原生 JavaScript: 项目完全采用原生 JavaScript 进行编程，不依赖任何外部库或框架。
• CSS3: 利用 CSS3 的 transform 和 animation 属性来实现动画效果。
• HTML: 用于构建页面结构，展示 Banner。

3. 项目安装和配置的准备工作及详细步骤

准备工作

在开始安装和配置之前，请确保您的计算机上已经安装了以下工具：

• Node.js: JavaScript 运行环境，用于执行项目中的脚本。
• Git: 版本控制工具，用于克隆项目代码。

安装步骤

1. 克隆项目

   打开命令行工具，使用 Git 命令克隆项目到本地：

   git clone https://github.com/palxiao/bilibili-banner.git
   

2. 安装依赖

   进入项目目录，安装项目所需的本地运行环境：

   cd bilibili-banner
   pnpm i  # 或者使用 yarn 或 npm 安装
   

3. 启动本地服务

   在项目目录中运行以下命令，启动本地服务器，以便查看演示网页：

   npm run serve
   

   运行成功后，您可以在浏览器中访问 http://127.0.0.1:8080 查看效果。

4. 抓取 B 站首图数据

   如果想要获取最新的 B 站 Banner 数据，运行以下命令：

   npm run grab "Banner名称"
   

   请将 "Banner名称" 替换为您想要抓取的 B 站 Banner 的名称。

5. 查看效果

   抓取完数据后，重新运行 npm run serve 命令，然后在浏览器中刷新页面，即可查看最新的 Banner 效果。

通过上述步骤，您应该能够成功安装和配置 Bilibili-banner 项目，并查看动态 Banner 效果。如果您需要进行更多自定义配置，可以手动调整项目中的 config.js 文件，以及 assets 目录下的 data.json 文件。

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