Feat: Add Frontend Pages

新增网易云、随机动漫音乐和 404 页面，修改其他页面，引入 PrismJS 实现代码高亮
2022-04-13 23:28:50 +08:00 · 2022-04-13 23:28:50 +08:00 · d70e7da0b1
parent 07e8976250
commit d70e7da0b1
10 changed files with 455 additions and 27 deletions
--- a/index.html
+++ b/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html class="font-auto" lang="zh-cmn-hans">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/src/images/icon.png" />
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "ahooks": "^3.3.0",
    "isomorphic-unfetch": "^3.1.0",
    "lodash": "^4.17.21",
+    "prismjs": "^1.27.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.3.0",
@ -24,6 +25,7 @@
  "devDependencies": {
    "@midwayjs/mock": "^3.3.0",
    "@types/lodash": "^4.14.181",
+    "@types/prismjs": "^1.26.0",
    "@types/react": "^17.0.44",
    "@types/react-dom": "^17.0.15",
    "@vitejs/plugin-react": "^1.3.0",
--- a/src/index.css
+++ b/src/index.css
@ -38,6 +38,16 @@ button{
  font-style: normal;
 }

+.btn-group{
+  row-gap: .5em;
+  display: flex;
+  align-items: center;
+}
+
+.btn-group .btn{
+  margin-right: .5em;
+}
+
 /* 1 - 页眉
 -------------------------------- */
 .sidebar{
@ -168,7 +178,7 @@ button{
 -------------------------------- */
 main, footer{
  margin: auto;
-  max-width: 45em;
+  max-width: 50em;
 }

 main .header{
--- a/src/index.tsx
+++ b/src/index.tsx
@ -8,8 +8,11 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

 import Aside from "./components/Layout/Aside";
 import Home from "./pages/index";
+import Netease from "./pages/netease";
 import Wallpaper from "./pages/wallpaper";
+import ACGM from "./pages/acgm";
 import Bing from "./pages/bing";
+import NoMatch from "./pages/404";

 function App() {
  return (
@ -17,9 +20,11 @@ function App() {
      <Aside />
      <Routes>
        <Route path="/" element={<Home />} />
+        <Route path="/netease" element={<Netease />} />
        <Route path="/wallpaper" element={<Wallpaper />} />
+        <Route path="/acgm" element={<ACGM />} />
        <Route path="/bing" element={<Bing />} />
-        <Route path="*" element={<div>404</div>} />
+        <Route path="*" element={<NoMatch />} />
      </Routes>
    </Router>
  );
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@ -0,0 +1,14 @@
+// React
+import React from "react";
+
+
+// Components
+function NoMatch() {
+  return (
+    <main>
+      <h1>404</h1>
+    </main>
+  )
+}
+
+export default NoMatch;
--- a/src/pages/acgm.tsx
+++ b/src/pages/acgm.tsx
@ -0,0 +1,200 @@
+// React
+import React, { useEffect, useRef } from "react";
+
+
+// UI
+import prism from "prismjs";
+import ArticleHead from "@/components/Layout/ArticleHead";
+
+
+// Interface
+import { ChangeEvent } from "react";
+
+
+// Components
+function ACGM() {
+  let autoSwitch = false;
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  const onAudioEnded = () => {
+    console.log("ended", autoSwitch);
+
+    autoSwitch && onToggleSwitchSong();
+  }
+
+  useEffect(() => {
+    if (!audioRef.current) return;
+
+    audioRef.current.addEventListener("ended", onAudioEnded);
+
+    return () => {
+      if (!audioRef.current) return;
+
+      audioRef.current.removeEventListener("ended", onAudioEnded);
+    }
+  }, []);
+
+  useEffect(() => {
+    prism.highlightAll();
+  }, []);
+
+  const onToggleSwitchSong = () => {
+    if (!audioRef.current) return;
+
+    audioRef.current.src = audioRef.current.src;
+    audioRef.current.play();
+  }
+
+  const onSwitchChange = (ev: ChangeEvent<HTMLInputElement>) => {
+    autoSwitch = ev.target.checked;
+  }
+
+  return (
+    <main>
+      <ArticleHead title="随机动漫音乐" desc="输出一首随机的动漫音乐及信息，基于网易云 API" />
+      <article className="post">
+        <h3>使用方法：</h3>
+        <p>调用地址 <code>https://api.paugram.com/acgm/</code>，即可获得一段歌曲 <code>JSON</code> 信息。</p>
+        <p>如果您已开始使用本 API 服务，则默认视为遵守 <a href="https://api.paugram.com/notice">本约定</a>。</p>
+        <p>音乐版权归网易云音乐所有，本站不为滥用本 API 进行违规操作者承担责任。部分歌曲可能因版权问题无法播放，敬请谅解！</p>
+        <p>为了防止多次出现随机到同一首歌的情况，请允许我们使用你的 <code>Cookie</code> 记录。</p>
+
+        <h3>参数：</h3>
+        <div className="ks-table text-nowrap">
+          <table>
+            <thead>
+              <tr>
+                <td>参数</td>
+                <td>要求</td>
+                <td>描述</td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>list</td>
+                <td>可选的音乐列表 <code>详见下方</code>，默认 <code>随机</code></td>
+                <td>音乐类别</td>
+              </tr>
+              <tr>
+                <td>play</td>
+                <td>参数值为 <code>true</code> 则启用跳转</td>
+                <td>是否直接跳转到歌曲所在地址</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>音乐列表：</h3>
+        <div className="ks-table text-nowrap">
+          <table>
+            <thead>
+              <tr>
+                <td>参数</td>
+                <td>状态</td>
+                <td>描述</td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>1</td>
+                <td><em className="green">可用</em></td>
+                <td>日漫歌曲</td>
+              </tr>
+              <tr>
+                <td>2</td>
+                <td><em className="green">可用</em></td>
+                <td>日漫纯音乐</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>返回内容：</h3>
+        <div className="ks-table text-nowrap">
+          <table>
+            <thead>
+              <tr>
+                <td>参数名称</td>
+                <td>描述</td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>id</td>
+                <td>音乐 ID</td>
+              </tr>
+              <tr>
+                <td>title</td>
+                <td>音乐名称</td>
+              </tr>
+              <tr>
+                <td>artist</td>
+                <td>音乐艺术家</td>
+              </tr>
+              <tr>
+                <td>album</td>
+                <td>音乐专辑名称</td>
+              </tr>
+              <tr>
+                <td>cover</td>
+                <td>音乐专辑图片（https）</td>
+              </tr>
+              <tr>
+                <td>link</td>
+                <td>音乐源地址（https）</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>示例：</h3>
+        <p>获得一首随机动漫音乐的信息</p>
+<pre className="language-javascript"><code>{`https://api.paugram.com/acgm/
+
+// 返回的是：
+
+{
+    "id": 517567145,
+    "title": "初登校",
+    "artist": "橋本由香利",
+    "album": "ひなこのーと COMPLETE SOUNDTRACK",
+    "cover": 封面地址,
+    "link": 音乐地址
+}
+`}</code></pre>
+        <p>通过 <code>List</code> 获得一首随机动漫歌曲的信息，并跳转到实际地址</p>
+<pre><code>https://api.paugram.com/acgm/?list=1&play=true</code></pre>
+        <p>建立一个 <code>Audio</code> 播放器，并使用本 API</p>
+<pre className="language-html"><code>&lt;audio src="https://api.paugram.com/acgm/?play=true" controls&gt;&lt;/audio&gt;</code></pre>
+
+        <h3>测试小工具：</h3>
+        <p>来一首随机动漫音乐吧！刷新或点击按钮即可切歌</p>
+        <p>
+          <audio ref={audioRef} src={`//${location.host}/api/acgm/?play=true`} controls></audio>
+        </p>
+        <p className="btn-group">
+          <button className="btn green" onClick={onToggleSwitchSong}>切歌</button>
+          <label>
+            <input type="checkbox" className="switch" onChange={onSwitchChange} />自动切换
+          </label>
+        </p>
+
+        <h3>常见问题：</h3>
+        <p>为什么音乐地址是 http 协议？如何避免网站小绿锁消失？</p>
+        <p>答：为了保证服务器的运行效率，歌曲链接均为网易服务器即时生成返回，不提供代理与转发。在你的站点 <code>head</code> 下添加如下代码，即可完美解决此问题，任何 <code>http</code> 请求都会自动尝试连接到 <code>https</code>。</p>
+        <pre className="language-html"><code>&lt;meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/&gt;</code></pre>
+        <p>为什么有时候随机的音乐会播放失败？</p>
+        <p>答：网易会随时调整一些歌曲的版权，作者也无法即时直接检测该歌曲是否能正常连接。以后会在此页面增加评论功能，作者会给予完善和修改</p>
+        <p>本 API 有同款歌单吗？</p>
+        <p>当然有啊，就是基于我的网易云歌单<a href="http://music.163.com/playlist?id=78694173&userid=7041859" target="_blank">《二次元歌曲》</a>做的呀</p>
+
+        <h3>感谢：</h3>
+        <ul>
+            <li><a href="http://music.163.com" rel="nofollow" target="_blank">网易云音乐</a></li>
+        </ul>
+      </article>
+    </main>
+  )
+}
+
+export default ACGM;
--- a/src/pages/bing.tsx
+++ b/src/pages/bing.tsx
@ -1,15 +1,21 @@
 // React
-import React from "react";
+import React, { useEffect } from "react";
+
+
+// UI
+import prism from "prismjs";
+import ArticleHead from "@/components/Layout/ArticleHead";


 // Components
 function Bing() {
+  useEffect(() => {
+    prism.highlightAll();
+  }, []);
+
  return (
    <main>
-      <section className="header">
-        <h1>必应每日壁纸</h1>
-        <h2>每日更新，尽享乐趣</h2>
-      </section>
+      <ArticleHead title="必应每日壁纸" desc="每日更新，尽享乐趣" />
      <article className="post">
        <h3>使用方法：</h3>
        <p>调用地址 <code>https://api.paugram.com/bing/</code> 可自动跳转到对应的壁纸</p>
@ -43,25 +49,25 @@ function Bing() {
 // 返回的是：

 {
-    "link":"https://cn.bing.com/th?id=OHR.QatarMuseum_EN-US2624327100_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp",
-    "copyright":"National Museum of Qatar in Doha, Qatar (© Hasan Zaidi/Shutterstock)",
-}</code></pre>
+  "link":"https://cn.bing.com/th?id=OHR.QatarMuseum_EN-US2624327100_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp",
+  "copyright":"National Museum of Qatar in Doha, Qatar (© Hasan Zaidi/Shutterstock)",
+}`}</code></pre>
        <p>在网页背景上使用本 API</p>
-<pre className="language-css"><code>body{
-    background: url("https://api.paugram.com/bing/") center/cover no-repeat;
+<pre className="language-css"><code>{`body{
+  background: url("https://api.paugram.com/bing/") center/cover no-repeat;
 }`}
 </code></pre>
        <p>在网页背景上使用本 API（伪元素半透明版）</p>
 <pre className="language-css"><code>{`body:before{
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    opacity: .3;
-    z-index: -1;
-    content: "";
-    position: fixed;
-    background: url(https://api.paugram.com/bing/) center/cover;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: .3;
+  z-index: -1;
+  content: "";
+  position: fixed;
+  background: url(https://api.paugram.com/bing/) center/cover;
 }`}
 </code></pre>

--- a/src/pages/netease.tsx
+++ b/src/pages/netease.tsx
@ -0,0 +1,176 @@
+// React
+import React, { useEffect } from "react";
+
+
+// UI
+import prism from "prismjs";
+import ArticleHead from "@/components/Layout/ArticleHead";
+
+
+// Components
+function Netease() {
+  useEffect(() => {
+    prism.highlightAll();
+  }, []);
+
+  return (
+    <main>
+      <ArticleHead title="网易云解析" desc="解析音乐并精简输出，配合 Kico Player 使用更佳" />
+      <article className="post">
+        <h3>使用方法：</h3>
+        <p>调用地址 <code>https://api.paugram.com/netease/</code> 并输入参数 <code>id</code> 或 <code>title</code>，即可获得一段歌曲 <code>JSON</code> 信息。</p>
+        <p>如果您已开始使用本 API 服务，则默认视为遵守 <a href="https://api.paugram.com/notice">本约定</a>。</p>
+        <p>音乐版权归网易云音乐所有，本站不为滥用本 API 进行违规操作者承担责任。</p>
+
+        <h3>参数：</h3>
+        <p>建议使用 <code>id</code> 的方式获得歌曲信息，性能相对较好。</p>
+        <div className="ks-table text-nowrap">
+          <table>
+            <thead>
+              <tr>
+                <td>参数</td>
+                <td>要求</td>
+                <td>描述</td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>id</td>
+                <td>有效的音乐 ID，例：<code>517567145</code></td>
+                <td>音乐 ID</td>
+              </tr>
+              <tr>
+                <td>playlist（施工中）</td>
+                <td>有多首音乐的音乐列表</td>
+                <td>音乐列表</td>
+              </tr>
+              <tr>
+                <td>play</td>
+                <td>参数值为 <code>true</code> 则启用跳转</td>
+                <td>是否直接跳转到歌曲所在地址</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>返回内容：</h3>
+        <div className="ks-table text-nowrap">
+          <table>
+            <thead>
+              <tr>
+                <td>参数名称</td>
+                <td>描述</td>
+                <td>值</td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>id</td>
+                <td>音乐 ID</td>
+                <td><code>string</code></td>
+              </tr>
+              <tr>
+                <td>title</td>
+                <td>音乐名称</td>
+                <td><code>string</code></td>
+              </tr>
+              <tr>
+                <td>artist</td>
+                <td>音乐艺术家</td>
+                <td><code>string</code></td>
+              </tr>
+              <tr>
+                <td>album</td>
+                <td>音乐专辑名称</td>
+                <td><code>string</code></td>
+              </tr>
+              <tr>
+                <td>cover</td>
+                <td>音乐专辑图片链接（https）</td>
+                <td><code>string</code></td>
+              </tr>
+              <tr>
+                <td>link</td>
+                <td>音乐源地址链接</td>
+                <td><code>string</code></td>
+              </tr>
+              <tr>
+                <td>lyric</td>
+                <td>音乐 LRC 歌词内容</td>
+                <td><code>string</code></td>
+              </tr>
+              <tr>
+                <td>sub_lyric</td>
+                <td>翻译版 LRC 歌词内容（如果有）</td>
+                <td><code>string</code></td>
+              </tr>
+              <tr>
+                <td>served</td>
+                <td>是否为 VIP 或无版权歌曲（测试功能）</td>
+                <td><code>true</code> <code>false</code></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>示例：</h3>
+        <p>通过 ID 获得一首歌的信息</p>
+<pre className="language-javascript"><code>{`https://api.paugram.com/netease/?id=517567145
+
+// 返回的是：
+
+{
+  "code": 1,
+  "msg": "Success",
+  "data": {
+    "id": 517567145,
+    "title": "初登校",
+    "artist": "橋本由香利",
+    "album": "ひなこのーと COMPLETE SOUNDTRACK",
+    "cover": 封面地址,
+    "lyric": 歌词内容,
+    "sub_lyric": 翻译歌词内容,
+    "link": 音乐地址
+  }
+}
+`}</code></pre>
+        <p>通过 ID 获得一首歌，并跳转到实际地址</p>
+        <pre><code>https://api.paugram.com/netease/?id=517567145&play=true</code></pre>
+        <p>结合 Kico Style 和 Kico Player 使用本 API</p>
+<pre className="language-javascript"><code>{`ks.ajax({
+  method: "GET",
+  url: \`https://api.paugram.com/netease/?id=\${id}\`,
+  success: (req) => {
+    const item = JSON.parse(req.response);
+    声明的播放器.add([item]);
+  },
+  failed: (req) => {
+    ks.notice("获取音乐信息错误了！", {color: "red"});
+  }
+});`}</code></pre>
+
+        <h3>测试小工具：</h3>
+        <p>使用 Kico Player 播放音乐</p>
+        <div id="kico-player"></div>
+        <div className="btn-group">
+          <button id="add-music" className="btn green">添加音乐</button>
+          <button id="remove-music" className="btn red">移除音乐</button>
+        </div>
+
+        <h3>常见问题：</h3>
+        <p>为什么音乐地址是 http 协议？如何避免网站小绿锁消失？</p>
+        <p>答：为了保证服务器的运行效率，歌曲链接均为网易服务器即时生成返回，不提供代理与转发。在你的站点 <code>head</code> 下添加如下代码，即可完美解决此问题，任何 <code>http</code> 请求都会自动尝试连接到 <code>https</code>。</p>
+        <pre className="language-html"><code>&lt;meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/&gt;</code></pre>
+
+        <h3>感谢：</h3>
+        <ul>
+          <li><a href="http://music.163.com" rel="nofollow" target="_blank">网易云音乐</a></li>
+          <li><a href="https://works.paugram.com/player" target="_blank">Kico Player</a></li>
+          <li><a href="https://github.com/metowolf/Meting" target="_blank">Meting</a> 提供的部分网易接口</li>
+        </ul>
+      </article>
+    </main>
+  )
+}
+
+export default Netease;
--- a/src/pages/wallpaper.tsx
+++ b/src/pages/wallpaper.tsx
@ -1,20 +1,25 @@
 // React
-import React from "react";
+import React, { useEffect } from "react";


 // UI
+import prism from "prismjs";
+
+import ArticleHead from "@/components/Layout/ArticleHead";
+
 import HelpExample from "../images/help/wallpaper-pr-example.jpg";
 import HelpRequire from "../images/help/wallpaper-pr-require.jpg";


 // Components
 function Wallpaper() {
+  useEffect(() => {
+    prism.highlightAll();
+  }, []);
+
  return (
    <main>
-      <section className="header">
-        <h1>随机动漫壁纸</h1>
-        <h2>生成适合 Single 主题的白底动漫壁纸</h2>
-      </section>
+      <ArticleHead title="随机动漫壁纸" desc="生成适合 Single 主题的白底动漫壁纸" />
      <article className="post">
        <h3>说明：</h3>
        <p>本 API 的所有图片均进行了公开，欢迎前往仓库 <a href="https://github.com/Dreamer-Paul/Anime-Wallpaper" target="_blank">Anime-Wallpaper</a> 提交 PR，完善资源。Commit 的说明上最好带上对应角色的来源～</p>
--- a/yarn.lock
+++ b/yarn.lock
@ -912,6 +912,11 @@
  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.23.tgz#3b41a6e643589ac6442bdbd7a4a3ded62f33f7da"
  integrity sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==

+"@types/prismjs@^1.26.0":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654"
+  integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==
+
 "@types/prop-types@*":
  version "15.7.5"
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
@ -2414,6 +2419,11 @@ prisma@^3.12.0:
  dependencies:
    "@prisma/engines" "3.12.0-37.22b822189f46ef0dc5c5b503368d1bee01213980"

+prismjs@^1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
+  integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
+
 proper-url-join@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/proper-url-join/-/proper-url-join-2.1.1.tgz#ee4146edc08f512a0ee1053a355e06950691d06f"