feat: auto config

palxiao · Oct 26, 2023 · 2bde504 · 2bde504
1 parent e4b634e
commit 2bde504
Show file tree

Hide file tree

Showing 23 changed files with 132 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -3,23 +3,24 @@
  * @Date: 2023-10-03 22:51:33
  * @Description:  
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-12 14:17:08
+ * @LastEditTime: 2023-10-26 11:39:21
 -->
 
-# bilibili-banner
+# bilibili-banner 仿B站首页动态头图
+
+- 原生 JavaScript 实现，无第三方依赖
+- 自动抓取资源，生成配置，可快速复刻 B 站动态 Banner 及交互效果，接近 1:1 还原
 
 [查看在线演示](https://palxiao.github.io/bilibili-banner/)
 
-![](./demo.png)
+![](./preview0.png)
 
-## 仿B站首页动态头图
+![](./preview1.png)
 
-- 原生 JavaScript 实现，无第三方依赖
-- 自动抓取最新效果图，可快速复刻出B站首页 Banner，接近 1:1 还原效果
 
 ### 准备工作
 
-运行 `pnpm i` 或 `yarn / npm i` 安装项目本地依赖
+运行 `pnpm i` 或 `yarn / npm i` 安装项目本地运行环境
 
 ### 查看演示网页
 
@@ -28,10 +29,13 @@
 ### 获取最新效果
 
 1. 运行 `npm run grab`，抓取B站首图数据，自动在 `assets` 目录下生成数据（以当天日期命名）
-2. 在 `config.js` 中添加配置（使用 fetch 引入 json）
-3. 运行 `npm run serve`
+2. 运行 `npm run serve` 查看效果
+
+> 可选：在 `config.js` 中修改配置（使用 fetch 引入 json）
+
+### 手动调整参数
 
-接下来需要对每个图层进行参数调试，具体步骤为：打开 `assets` 目录下对应的 `data.json` 文件，修改其中每个对象的参数，刷新网页查看效果。
+打开 `assets` 目录下对应的 `data.json` 文件，修改其中每个对象的参数，刷新网页查看效果。
 
 目前支持参数如下：
 

diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/assets/2023-10-25/data.json → assets/2023-10-26/data.json b/assets/2023-10-25/data.json → assets/2023-10-26/data.json
@@ -15,8 +15,8 @@
     ],
     "width": 2100,
     "height": 197,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.01
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0
   },
   {
     "tagName": "img",
@@ -34,8 +34,8 @@
     ],
     "width": 1711,
     "height": 197,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.0101597
   },
   {
     "tagName": "img",
@@ -53,8 +53,8 @@
     ],
     "width": 2100,
     "height": 197,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.02
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.025399099999999997
   },
   {
     "tagName": "img",
@@ -72,8 +72,8 @@
     ],
     "width": 1649,
     "height": 169,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.027
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.043541399999999994
   },
   {
     "tagName": "img",
@@ -91,8 +91,8 @@
     ],
     "width": 90,
     "height": 81,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.028
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.043540999999999996
   },
   {
     "tagName": "img",
@@ -110,8 +110,8 @@
     ],
     "width": 84,
     "height": 29,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.40
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.43541399999999997
   },
   {
     "tagName": "img",
@@ -129,8 +129,8 @@
     ],
     "width": 544,
     "height": 197,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": -0.17
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": -0.1523948
   },
   {
     "tagName": "img",
@@ -148,8 +148,8 @@
     ],
     "width": 227,
     "height": 197,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.25
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.253991
   },
   {
     "tagName": "img",
@@ -167,8 +167,8 @@
     ],
     "width": 97,
     "height": 108,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.084
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.08708273
   },
   {
     "tagName": "img",
@@ -184,10 +184,10 @@
       -350,
       56
     ],
-    "width": 1714,
+    "width": 1713,
     "height": 74,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.14
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.126996
   },
   {
     "tagName": "img",
@@ -205,8 +205,8 @@
     ],
     "width": 180,
     "height": 147,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.12
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.11973879999999999
   },
   {
     "tagName": "img",
@@ -224,8 +224,8 @@
     ],
     "width": 207,
     "height": 161,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.15
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.152395
   },
   {
     "tagName": "img",
@@ -243,8 +243,8 @@
     ],
     "width": 1650,
     "height": 63,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.17
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.1741655
   },
   {
     "tagName": "img",
@@ -262,8 +262,8 @@
     ],
     "width": 257,
     "height": 161,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.203
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.21770699999999998
   },
   {
     "tagName": "img",
@@ -281,8 +281,8 @@
     ],
     "width": 2550,
     "height": 239,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.356
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.370102
   },
   {
     "tagName": "img",
@@ -300,8 +300,8 @@
     ],
     "width": 501,
     "height": 225,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.58
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.5805520000000001
   },
   {
     "tagName": "img",
@@ -319,7 +319,7 @@
     ],
     "width": 409,
     "height": 169,
-    "src": "./assets/2023-10-25/[email protected]",
-    "a": 0.63
+    "src": "./assets/2023-10-26/[email protected]",
+    "a": 0.6531199999999999
   }
 ]
diff --git a/[email protected] → [email protected] b/[email protected] → [email protected]
diff --git a/config.js b/config.js
@@ -1,31 +1,31 @@
 /*
  * @Author: ShawnPhang
  * @Date: 2023-10-01 15:52:04
- * @Description:  
+ * @Description: 配置文件
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-01 22:59:52
+ * @LastEditTime: 2023-10-26 11:28:13
  */
 import { barnerImagesData1, barnerImagesData2 } from "./assets/2023-08-21/data.js";
-
+// -- IMPORT --
+const banner_20231026 = await fetch('./assets/2023-10-26/data.json?r='+Math.random())
 const banner_20231001 = await fetch('./assets/2023-10-01/data.json?r='+Math.random())
 
-const banner_20231025 = await fetch('./assets/2023-10-25/data.json?r='+Math.random())
-
 export default [
-    {
-        name: '打工松鼠 - 猫头鹰',
-        data: await banner_20231025.json()
-    },
-    {
-        name: '海上明月 - 兔子',
-        data: await banner_20231001.json()
-    },
-    {
-        name: '大海之上 - 鳄鱼',
-        data: barnerImagesData2
-    },
-    {
-        name: '海洋生物 - 乌龟',
-        data: barnerImagesData1
-    }
+// -- ADD NEW --
+{
+    name: "打工松鼠 - 猫头鹰",
+    data: await banner_20231026.json()
+},
+{
+    name: '海上明月 - 兔子',
+    data: await banner_20231001.json()
+},
+{
+    name: '大海之上 - 鳄鱼',
+    data: barnerImagesData2
+},
+{
+    name: '海洋生物 - 乌龟',
+    data: barnerImagesData1
+}
 ]