Feat: Add Frontend Pages
新增网易云、随机动漫音乐和 404 页面，修改其他页面，引入 PrismJS 实现代码高亮
This commit is contained in:
parent
07e8976250
commit
d70e7da0b1
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html class="font-auto" lang="zh-cmn-hans">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/src/images/icon.png" />
|
<link rel="icon" href="/src/images/icon.png" />
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@
|
||||||
"ahooks": "^3.3.0",
|
"ahooks": "^3.3.0",
|
||||||
"isomorphic-unfetch": "^3.1.0",
|
"isomorphic-unfetch": "^3.1.0",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
|
"prismjs": "^1.27.0",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-router-dom": "^6.3.0",
|
"react-router-dom": "^6.3.0",
|
||||||
|
|
@ -24,6 +25,7 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@midwayjs/mock": "^3.3.0",
|
"@midwayjs/mock": "^3.3.0",
|
||||||
"@types/lodash": "^4.14.181",
|
"@types/lodash": "^4.14.181",
|
||||||
|
"@types/prismjs": "^1.26.0",
|
||||||
"@types/react": "^17.0.44",
|
"@types/react": "^17.0.44",
|
||||||
"@types/react-dom": "^17.0.15",
|
"@types/react-dom": "^17.0.15",
|
||||||
"@vitejs/plugin-react": "^1.3.0",
|
"@vitejs/plugin-react": "^1.3.0",
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,16 @@ button{
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-group{
|
||||||
|
row-gap: .5em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group .btn{
|
||||||
|
margin-right: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
/* 1 - 页眉
|
/* 1 - 页眉
|
||||||
-------------------------------- */
|
-------------------------------- */
|
||||||
.sidebar{
|
.sidebar{
|
||||||
|
|
@ -168,7 +178,7 @@ button{
|
||||||
-------------------------------- */
|
-------------------------------- */
|
||||||
main, footer{
|
main, footer{
|
||||||
margin: auto;
|
margin: auto;
|
||||||
max-width: 45em;
|
max-width: 50em;
|
||||||
}
|
}
|
||||||
|
|
||||||
main .header{
|
main .header{
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,11 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||||
|
|
||||||
import Aside from "./components/Layout/Aside";
|
import Aside from "./components/Layout/Aside";
|
||||||
import Home from "./pages/index";
|
import Home from "./pages/index";
|
||||||
|
import Netease from "./pages/netease";
|
||||||
import Wallpaper from "./pages/wallpaper";
|
import Wallpaper from "./pages/wallpaper";
|
||||||
|
import ACGM from "./pages/acgm";
|
||||||
import Bing from "./pages/bing";
|
import Bing from "./pages/bing";
|
||||||
|
import NoMatch from "./pages/404";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -17,9 +20,11 @@ function App() {
|
||||||
<Aside />
|
<Aside />
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Home />} />
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/netease" element={<Netease />} />
|
||||||
<Route path="/wallpaper" element={<Wallpaper />} />
|
<Route path="/wallpaper" element={<Wallpaper />} />
|
||||||
|
<Route path="/acgm" element={<ACGM />} />
|
||||||
<Route path="/bing" element={<Bing />} />
|
<Route path="/bing" element={<Bing />} />
|
||||||
<Route path="*" element={<div>404</div>} />
|
<Route path="*" element={<NoMatch />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
// React
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
|
||||||
|
// Components
|
||||||
|
function NoMatch() {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<h1>404</h1>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NoMatch;
|
||||||
|
|
@ -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><audio src="https://api.paugram.com/acgm/?play=true" controls></audio></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><meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/></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;
|
||||||
|
|
@ -1,15 +1,21 @@
|
||||||
// React
|
// React
|
||||||
import React from "react";
|
import React, { useEffect } from "react";
|
||||||
|
|
||||||
|
|
||||||
|
// UI
|
||||||
|
import prism from "prismjs";
|
||||||
|
import ArticleHead from "@/components/Layout/ArticleHead";
|
||||||
|
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
function Bing() {
|
function Bing() {
|
||||||
|
useEffect(() => {
|
||||||
|
prism.highlightAll();
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main>
|
<main>
|
||||||
<section className="header">
|
<ArticleHead title="必应每日壁纸" desc="每日更新，尽享乐趣" />
|
||||||
<h1>必应每日壁纸</h1>
|
|
||||||
<h2>每日更新，尽享乐趣</h2>
|
|
||||||
</section>
|
|
||||||
<article className="post">
|
<article className="post">
|
||||||
<h3>使用方法：</h3>
|
<h3>使用方法：</h3>
|
||||||
<p>调用地址 <code>https://api.paugram.com/bing/</code> 可自动跳转到对应的壁纸</p>
|
<p>调用地址 <code>https://api.paugram.com/bing/</code> 可自动跳转到对应的壁纸</p>
|
||||||
|
|
@ -45,9 +51,9 @@ function Bing() {
|
||||||
{
|
{
|
||||||
"link":"https://cn.bing.com/th?id=OHR.QatarMuseum_EN-US2624327100_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp",
|
"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)",
|
"copyright":"National Museum of Qatar in Doha, Qatar (© Hasan Zaidi/Shutterstock)",
|
||||||
}</code></pre>
|
}`}</code></pre>
|
||||||
<p>在网页背景上使用本 API</p>
|
<p>在网页背景上使用本 API</p>
|
||||||
<pre className="language-css"><code>body{
|
<pre className="language-css"><code>{`body{
|
||||||
background: url("https://api.paugram.com/bing/") center/cover no-repeat;
|
background: url("https://api.paugram.com/bing/") center/cover no-repeat;
|
||||||
}`}
|
}`}
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
|
||||||
|
|
@ -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><meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/></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;
|
||||||
|
|
@ -1,20 +1,25 @@
|
||||||
// React
|
// React
|
||||||
import React from "react";
|
import React, { useEffect } from "react";
|
||||||
|
|
||||||
|
|
||||||
// UI
|
// UI
|
||||||
|
import prism from "prismjs";
|
||||||
|
|
||||||
|
import ArticleHead from "@/components/Layout/ArticleHead";
|
||||||
|
|
||||||
import HelpExample from "../images/help/wallpaper-pr-example.jpg";
|
import HelpExample from "../images/help/wallpaper-pr-example.jpg";
|
||||||
import HelpRequire from "../images/help/wallpaper-pr-require.jpg";
|
import HelpRequire from "../images/help/wallpaper-pr-require.jpg";
|
||||||
|
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
function Wallpaper() {
|
function Wallpaper() {
|
||||||
|
useEffect(() => {
|
||||||
|
prism.highlightAll();
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main>
|
<main>
|
||||||
<section className="header">
|
<ArticleHead title="随机动漫壁纸" desc="生成适合 Single 主题的白底动漫壁纸" />
|
||||||
<h1>随机动漫壁纸</h1>
|
|
||||||
<h2>生成适合 Single 主题的白底动漫壁纸</h2>
|
|
||||||
</section>
|
|
||||||
<article className="post">
|
<article className="post">
|
||||||
<h3>说明：</h3>
|
<h3>说明：</h3>
|
||||||
<p>本 API 的所有图片均进行了公开，欢迎前往仓库 <a href="https://github.com/Dreamer-Paul/Anime-Wallpaper" target="_blank">Anime-Wallpaper</a> 提交 PR，完善资源。Commit 的说明上最好带上对应角色的来源～</p>
|
<p>本 API 的所有图片均进行了公开，欢迎前往仓库 <a href="https://github.com/Dreamer-Paul/Anime-Wallpaper" target="_blank">Anime-Wallpaper</a> 提交 PR，完善资源。Commit 的说明上最好带上对应角色的来源～</p>
|
||||||
|
|
|
||||||
10
yarn.lock
10
yarn.lock
|
|
@ -912,6 +912,11 @@
|
||||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.23.tgz#3b41a6e643589ac6442bdbd7a4a3ded62f33f7da"
|
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.23.tgz#3b41a6e643589ac6442bdbd7a4a3ded62f33f7da"
|
||||||
integrity sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==
|
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@*":
|
"@types/prop-types@*":
|
||||||
version "15.7.5"
|
version "15.7.5"
|
||||||
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
|
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
|
||||||
|
|
@ -2414,6 +2419,11 @@ prisma@^3.12.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
"@prisma/engines" "3.12.0-37.22b822189f46ef0dc5c5b503368d1bee01213980"
|
"@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:
|
proper-url-join@^2.1.1:
|
||||||
version "2.1.1"
|
version "2.1.1"
|
||||||
resolved "https://registry.yarnpkg.com/proper-url-join/-/proper-url-join-2.1.1.tgz#ee4146edc08f512a0ee1053a355e06950691d06f"
|
resolved "https://registry.yarnpkg.com/proper-url-join/-/proper-url-join-2.1.1.tgz#ee4146edc08f512a0ee1053a355e06950691d06f"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue