From 3d38f2f8ddc3e201aa5df074d143b7ba01737034 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=87=E8=B6=A3=E4=BF=9D=E7=BD=97?= Date: Mon, 18 Apr 2022 11:04:46 +0800 Subject: [PATCH] Feat: Add Bili Page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 哔哩小窗说明页面，状态和随机壁纸接口调整 --- src/api/data/wallpaper.ts | 6 +- src/api/date.ts | 5 -- src/api/star.ts | 10 ---- src/api/stat.ts | 7 ++- src/index.tsx | 2 + src/pages/bili.tsx | 112 ++++++++++++++++++++++++++++++++++++++ src/pages/index.tsx | 2 +- 7 files changed, 122 insertions(+), 22 deletions(-) delete mode 100644 src/api/date.ts delete mode 100644 src/api/star.ts create mode 100644 src/pages/bili.tsx diff --git a/src/api/data/wallpaper.ts b/src/api/data/wallpaper.ts index 08d2faa..bda7381 100644 --- a/src/api/data/wallpaper.ts +++ b/src/api/data/wallpaper.ts @@ -6,18 +6,18 @@ export const source: Record = { name: "Gitee", url: "https://dreamer-paul.gitee.io/anime-wallpaper/", start: 1, - end: 104 + end: 107 }, gh: { name: "GitHub", url: "https://dreamer-paul.github.io/Anime-Wallpaper/", start: 1, - end: 104 + end: 107 }, jsd: { name: "JSDelivr", url: "https://fastly.jsdelivr.net/gh/Dreamer-Paul/Anime-Wallpaper/", start: 1, - end: 104 + end: 107 } } diff --git a/src/api/date.ts b/src/api/date.ts deleted file mode 100644 index 5110df9..0000000 --- a/src/api/date.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Api, Get } from '@midwayjs/hooks'; - -export const getDate = Api(Get(), async () => { - return new Date().toString(); -}); diff --git a/src/api/star.ts b/src/api/star.ts deleted file mode 100644 index 42a5ab8..0000000 --- a/src/api/star.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Api, Post } from '@midwayjs/hooks'; -import fetch from 'isomorphic-unfetch'; - -export default Api(Post(), async (repo: string) => { - const response = await fetch(`https://api.github.com/repos/${repo}`); - const json = await response.json(); - return { - stars: json.stargazers_count, - }; -}); diff --git a/src/api/stat.ts b/src/api/stat.ts index 7e0d76b..d33e119 100644 --- a/src/api/stat.ts +++ b/src/api/stat.ts @@ -5,18 +5,19 @@ import { client } from "./utils/redis"; export default Api( Get(), async () => { - const wallpaperStat = await client.get("api-next:stat:wallpaper"); const neteaseStat = await client.get("api-next:stat:netease"); + const wallpaperStat = await client.get("api-next:stat:wallpaper"); + const biliStat = await client.get("api-next:stat:bili"); const bingStat = await client.get("api-next:stat:bing"); const acgmStat = await client.get("api-next:stat:acgm"); return { code: 1, data: { - wallpaper: Number(wallpaperStat), netease: Number(neteaseStat), + wallpaper: Number(wallpaperStat), acgm: Number(acgmStat), - bili: -1, + bili: Number(biliStat), bing: Number(bingStat), } }; diff --git a/src/index.tsx b/src/index.tsx index 875f699..d36b9ea 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -19,6 +19,7 @@ import Log from "./pages/log"; import Netease from "./pages/netease"; import Wallpaper from "./pages/wallpaper"; import ACGM from "./pages/acgm"; +import Bili from "./pages/bili"; import Bing from "./pages/bing"; import NoMatch from "./pages/404"; @@ -34,6 +35,7 @@ function App() { } /> } /> } /> + } /> } /> } /> diff --git a/src/pages/bili.tsx b/src/pages/bili.tsx new file mode 100644 index 0000000..ffe2d47 --- /dev/null +++ b/src/pages/bili.tsx @@ -0,0 +1,112 @@ +// React +import React, { useEffect } from "react"; + + +// UI +import { Link } from "react-router-dom"; +import prism from "prismjs"; +import ArticleHead from "@/components/Layout/ArticleHead"; + + +// Components +function Bili() { + useEffect(() => { + prism.highlightAll(); + }, []); + + return ( +
+ +
+

使用方法：

+

在你的网页上插入 iframe 标签，并将本 API 的地址 https://api.paugram.com/bili/?av=视频 AV 号 填写在 src 属性里即可食用。

+

如果您已开始使用本 API 服务，则默认视为遵守 本约定。

+ +

参数：

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
参数要求描述
av 二选一有效的 AV 号可以在 B 站上正常打开访问的视频
bv 二选一有效的 BV 号可以在 B 站上正常打开访问的视频
stylewhite gray black指定展示内容的风格和样式
+
+ +

风格：

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
参数名称描述
[默认]不填写本参数，默认为透明背景
white白色背景，搭配灰色背景的网页
gray浅灰色背景，搭配白色背景的网页
black深黑色背景，搭配深色系（包括夜间模式）的网页
+
+ +

示例：

+

获得视频 av39027441 的结果，并且改为灰色背景样式

+
<iframe src="https://api.paugram.com/bili?av=39027441&style=gray" style="height: 10em; width: 100%"></iframe>
+

得到的结果效果如下：

+ +

获得视频 av69269716 的结果，并且改为黑色背景样式

+
<iframe src="https://api.paugram.com/bili?av=69269716&style=black" style="height: 10em; width: 100%"></iframe>
+

得到的结果效果如下：

+ +

获得视频 BV19f4y1k7eN 的结果，并且改为白色背景样式

+
<iframe src="https://api.paugram.com/bili?bv=BV19f4y1k7eN&style=white" style="height: 10em; width: 100%"></iframe>
+

得到的结果效果如下：

+ + +

常见问题：

+

为什么我用以上代码，插入进网页会出现滚动条？

+

答：因为页面设计使用的是相对单位，默认以 16px 为基准，将上方的 height: 10em 替换成 height: 160px 就可以解决这个问题了。

+ +

感谢：

+ +
+
+ ) +} + +export default Bili; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 181e9f2..478e153 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -34,7 +34,7 @@ function Index() {

累计调用：

自 2018 年 7 月初开始至今，各 API 的使用状况如下：

-
+
{ stat?.data && Object.keys(stat.data).map((item) => (