Paul
/
Paul-API-Next
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix: Frontend Pages 

地址显示为当前站点地址，调整问答样式
This commit is contained in:
奇趣保罗 2022-04-23 14:30:54 +08:00
parent 0dbad9a6a6
commit 818a6e8ddf
8 changed files with 119 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Layout/Aside.tsx
View File

@ -34,7 +34,7 @@ function Aside() {
<Link to="/netease">网易云解析</Link> <Link to="/netease">网易云解析</Link>
<Link to="/wallpaper">随机动漫壁纸</Link> <Link to="/wallpaper">随机动漫壁纸</Link>
<Link to="/acgm">随机动漫音乐</Link> <Link to="/acgm">随机动漫音乐</Link>
{/* <Link to="/acgm">Gravatar 解析</Link> */} <Link to="/bili">哔哩哔哩小窗</Link>
<Link to="/bing">必应每日壁纸</Link> <Link to="/bing">必应每日壁纸</Link>
</nav> </nav>
</nav> </nav>

50
src/index.css
View File

@ -48,6 +48,56 @@ button{
margin-right: .5em; margin-right: .5em;
} }
.ask, .answer{
position: relative;
padding-left: 1.75em;
}
.answer{
margin-bottom: 2em;
}
.answer:last-child{
margin-bottom: 0;
}
.ask::after, .answer::after{
top: 0;
left: 0;
color: #fff;
font-size: .5em;
padding: 0 .75em;
position: absolute;
line-height: 1.75rem;
}
.ask::after{
content: "Q";
}
.answer::after{
content: "A";
}
.ask::before, .answer::before{
content: "";
width: 1.25em;
height: 1.25em;
border-radius: 2em;
top: .25em;
position: absolute;
margin-left: -1.75em;
display: inline-block;
}
.ask::before{
background-color: #2ecc71;
}
.answer::before{
background-color: #e74c3c;
}
/* 1 - 页眉 /* 1 - 页眉
-------------------------------- */ -------------------------------- */
.sidebar{ .sidebar{

30
src/pages/acgm.tsx
View File

@ -8,6 +8,10 @@ import prism from "prismjs";
import ArticleHead from "@/components/Layout/ArticleHead"; import ArticleHead from "@/components/Layout/ArticleHead";
// Tool
import { siteUrl } from "@/utils/tool";
// Interface // Interface
import { ChangeEvent } from "react"; import { ChangeEvent } from "react";
@ -55,7 +59,7 @@ function ACGM() {
<ArticleHead title="随机动漫音乐" desc="输出一首随机的动漫音乐及信息，基于网易云 API" /> <ArticleHead title="随机动漫音乐" desc="输出一首随机的动漫音乐及信息，基于网易云 API" />
<article className="post"> <article className="post">
<h3>使用方法：</h3> <h3>使用方法：</h3>
<p>调用地址 <code>https://api.paugram.com/api/acgm</code>，即可获得一段歌曲 <code>JSON</code> 信息。</p> <p>调用地址 <code>{`${siteUrl}/api/acgm`}</code>，即可获得一段歌曲 <code>JSON</code> 信息。</p>
<p>如果您已开始使用本 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>。</p> <p>如果您已开始使用本 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>。</p>
<p>音乐版权归网易云音乐所有，本站不为滥用本 API 进行违规操作者承担责任。部分歌曲可能因版权问题无法播放，敬请谅解！</p> <p>音乐版权归网易云音乐所有，本站不为滥用本 API 进行违规操作者承担责任。部分歌曲可能因版权问题无法播放，敬请谅解！</p>
<p>为了防止多次出现随机到同一首歌的情况，请允许我们使用你的 <code>Cookie</code> 记录。</p> <p>为了防止多次出现随机到同一首歌的情况，请允许我们使用你的 <code>Cookie</code> 记录。</p>
@ -177,7 +181,7 @@ function ACGM() {
<h3>示例：</h3> <h3>示例：</h3>
<p>获得一首随机动漫音乐的信息</p> <p>获得一首随机动漫音乐的信息</p>
<pre className="language-javascript"><code>{`https://api.paugram.com/api/acgm <pre className="language-javascript"><code>{`${siteUrl}/api/acgm
// 返回的是： // 返回的是：
@ -199,14 +203,14 @@ function ACGM() {
} }
`}</code></pre> `}</code></pre>
<p>通过 <code>List</code> 获得一首随机动漫歌曲的信息，并跳转到实际地址</p> <p>通过 <code>List</code> 获得一首随机动漫歌曲的信息，并跳转到实际地址</p>
<pre><code>https://api.paugram.com/api/acgm/?list=1&play=true</code></pre> <pre><code>{`${siteUrl}/api/acgm/?list=1&play=true`}</code></pre>
<p>建立一个 <code>Audio</code> 播放器，并使用本 API</p> <p>建立一个 <code>Audio</code> 播放器，并使用本 API</p>
<pre className="language-html"><code>&lt;audio src="https://api.paugram.com/api/acgm/?play=true" controls&gt;&lt;/audio&gt;</code></pre> <pre className="language-html"><code>&lt;audio src="{siteUrl}/api/acgm/?play=true" controls&gt;&lt;/audio&gt;</code></pre>
<h3>测试小工具：</h3> <h3>测试小工具：</h3>
<p>来一首随机动漫音乐吧！刷新或点击按钮即可切歌</p> <p>来一首随机动漫音乐吧！刷新或点击按钮即可切歌</p>
<p> <p>
<audio ref={audioRef} src={`//${location.host}/api/acgm/?play=true`} controls></audio> <audio ref={audioRef} src={`${siteUrl}/api/acgm/?play=true`} controls></audio>
</p> </p>
<p className="btn-group"> <p className="btn-group">
<button className="btn green" onClick={onToggleSwitchSong}>切歌</button> <button className="btn green" onClick={onToggleSwitchSong}>切歌</button>
@ -216,13 +220,15 @@ function ACGM() {
</p> </p>
<h3>常见问题：</h3> <h3>常见问题：</h3>
<p>为什么音乐地址是 http 协议？如何避免网站小绿锁消失？</p> <p className="ask">为什么音乐地址是 http 协议？如何避免网站小绿锁消失？</p>
<p>答：为了保证服务器的运行效率，歌曲链接均为网易服务器即时生成返回，不提供代理与转发。在你的站点 <code>head</code> 下添加如下代码，即可完美解决此问题，任何 <code>http</code> 请求都会自动尝试连接到 <code>https</code>。</p> <div className="answer">
<pre className="language-html"><code>&lt;meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/&gt;</code></pre> <p>为了保证服务器的运行效率，歌曲链接均为网易服务器即时生成返回，不提供代理与转发。在你的站点 <code>head</code> 下添加如下代码，即可完美解决此问题，任何 <code>http</code> 请求都会自动尝试连接到 <code>https</code>。</p>
<p>为什么有时候随机的音乐会播放失败？</p> <pre className="language-html"><code>&lt;meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/&gt;</code></pre>
<p>答：网易会随时调整一些歌曲的版权，作者也无法即时直接检测该歌曲是否能正常连接。以后会在此页面增加评论功能，作者会给予完善和修改</p> </div>
<p>本 API 有同款歌单吗？</p> <p className="ask">为什么有时候随机的音乐会播放失败？</p>
<p>当然有啊，就是基于我的网易云歌单<a href="http://music.163.com/playlist?id=78694173&userid=7041859" target="_blank">《二次元歌曲》</a>做的呀</p> <p className="answer">网易会随时调整一些歌曲的版权，作者也无法即时直接检测该歌曲是否能正常连接。以后会在此页面增加评论功能，作者会给予完善和修改</p>
<p className="ask">本 API 有同款歌单吗？</p>
<p className="answer">当然有啊，就是基于我的网易云歌单<a href="http://music.163.com/playlist?id=78694173&userid=7041859" target="_blank">《二次元歌曲》</a>做的呀</p>
<h3>感谢：</h3> <h3>感谢：</h3>
<ul> <ul>

22
src/pages/bili.tsx
View File

@ -8,6 +8,10 @@ import prism from "prismjs";
import ArticleHead from "@/components/Layout/ArticleHead"; import ArticleHead from "@/components/Layout/ArticleHead";
// Tool
import { siteUrl } from "@/utils/tool";
// Components // Components
function Bili() { function Bili() {
useEffect(() => { useEffect(() => {
@ -19,7 +23,7 @@ function Bili() {
<ArticleHead title="哔哩哔哩小窗" desc="更简洁的展示 B 站发布的视频内容" /> <ArticleHead title="哔哩哔哩小窗" desc="更简洁的展示 B 站发布的视频内容" />
<article className="post"> <article className="post">
<h3>使用方法：</h3> <h3>使用方法：</h3>
<p>在你的网页上插入 <code>iframe</code> 标签，并将本 API 的地址 <code>https://api.paugram.com/bili/?av=视频 AV 号</code> 填写在 <code>src</code> 属性里即可食用。</p> <p>在你的网页上插入 <code>iframe</code> 标签，并将本 API 的地址 <code>{`${siteUrl}/api/bili/?av=视频 AV 号`}</code> 填写在 <code>src</code> 属性里即可食用。</p>
<p>如果您已开始使用本 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>。</p> <p>如果您已开始使用本 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>。</p>
<h3>参数：</h3> <h3>参数：</h3>
@ -84,21 +88,21 @@ function Bili() {
<h3>示例：</h3> <h3>示例：</h3>
<p>获得视频 av39027441 的结果，并且改为灰色背景样式</p> <p>获得视频 av39027441 的结果，并且改为灰色背景样式</p>
<pre className="language-html"><code>&lt;iframe src="https://api.paugram.com/bili?av=39027441&style=gray" style="height: 10em; width: 100%"&gt;&lt;/iframe&gt;</code></pre> <pre className="language-html"><code>&lt;iframe src="{siteUrl}/api/bili/?av=39027441&style=gray" style="height: 10em; width: 100%"&gt;&lt;/iframe&gt;</code></pre>
<p>得到的结果效果如下：</p> <p>得到的结果效果如下：</p>
<iframe src={`//${location.host}/api/bili?av=39027441&style=gray`} style={{ height: "10em", width: "100%"}}></iframe> <iframe src={`${siteUrl}/api/bili?av=39027441&style=gray`} style={{ height: "10em", width: "100%"}}></iframe>
<p>获得视频 av69269716 的结果，并且改为黑色背景样式</p> <p>获得视频 av69269716 的结果，并且改为黑色背景样式</p>
<pre className="language-html"><code>&lt;iframe src="https://api.paugram.com/bili?av=69269716&style=black" style="height: 10em; width: 100%"&gt;&lt;/iframe&gt;</code></pre> <pre className="language-html"><code>&lt;iframe src="{siteUrl}/api/bili/?av=69269716&style=black" style="height: 10em; width: 100%"&gt;&lt;/iframe&gt;</code></pre>
<p>得到的结果效果如下：</p> <p>得到的结果效果如下：</p>
<iframe src={`//${location.host}/api/bili?av=69269716&style=black`} style={{ height: "10em", width: "100%"}}></iframe> <iframe src={`${siteUrl}/api/bili?av=69269716&style=black`} style={{ height: "10em", width: "100%"}}></iframe>
<p>获得视频 BV19f4y1k7eN 的结果，并且改为白色背景样式</p> <p>获得视频 BV19f4y1k7eN 的结果，并且改为白色背景样式</p>
<pre className="language-html"><code>&lt;iframe src="https://api.paugram.com/bili?bv=BV19f4y1k7eN&style=white" style="height: 10em; width: 100%"&gt;&lt;/iframe&gt;</code></pre> <pre className="language-html"><code>&lt;iframe src="{siteUrl}/api/bili/?bv=BV19f4y1k7eN&style=white" style="height: 10em; width: 100%"&gt;&lt;/iframe&gt;</code></pre>
<p>得到的结果效果如下：</p> <p>得到的结果效果如下：</p>
<iframe src={`//${location.host}/api/bili?bv=BV19f4y1k7eN&style=white`} style={{ height: "10em", width: "100%"}}></iframe> <iframe src={`${siteUrl}/api/bili?bv=BV19f4y1k7eN&style=white`} style={{ height: "10em", width: "100%"}}></iframe>
<h3>常见问题：</h3> <h3>常见问题：</h3>
<p>为什么我用以上代码，插入进网页会出现滚动条？</p> <p className="ask">为什么我用以上代码，插入进网页会出现滚动条？</p>
<p>答：因为页面设计使用的是相对单位，默认以 <code>16px</code> 为基准，将上方的 <code>height: 10em</code> 替换成 <code>height: 160px</code> 就可以解决这个问题了。</p> <p className="answer">答：因为页面设计使用的是相对单位，默认以 <code>16px</code> 为基准，将上方的 <code>height: 10em</code> 替换成 <code>height: 160px</code> 就可以解决这个问题了。</p>
<h3>感谢：</h3> <h3>感谢：</h3>
<ul> <ul>

16
src/pages/bing.tsx
View File

@ -8,6 +8,10 @@ import prism from "prismjs";
import ArticleHead from "@/components/Layout/ArticleHead"; import ArticleHead from "@/components/Layout/ArticleHead";
// Tool
import { siteUrl } from "@/utils/tool";
// Components // Components
function Bing() { function Bing() {
useEffect(() => { useEffect(() => {
@ -19,7 +23,7 @@ function Bing() {
<ArticleHead title="必应每日壁纸" desc="每日更新，尽享乐趣" /> <ArticleHead title="必应每日壁纸" desc="每日更新，尽享乐趣" />
<article className="post"> <article className="post">
<h3>使用方法：</h3> <h3>使用方法：</h3>
<p>调用地址 <code>https://api.paugram.com/api/bing</code> 可自动跳转到对应的壁纸</p> <p>调用地址 <code>{`${siteUrl}/api/bing`}</code> 可自动跳转到对应的壁纸</p>
<p>如果您已开始使用本 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>。</p> <p>如果您已开始使用本 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>。</p>
<p>图片版权归原作者所有，本站不为滥用本 API 进行违规操作者承担责任。</p> <p>图片版权归原作者所有，本站不为滥用本 API 进行违规操作者承担责任。</p>
@ -43,9 +47,9 @@ function Bing() {
<h3>示例：</h3> <h3>示例：</h3>
<p>调用一张当天的图片</p> <p>调用一张当天的图片</p>
<pre><code>https://api.paugram.com/api/bing</code></pre> <pre><code>{`${siteUrl}/api/bing`}</code></pre>
<p>调用一张当天的图片，并使用 JSON 形式返回资料</p> <p>调用一张当天的图片，并使用 JSON 形式返回资料</p>
<pre className="language-javascript"><code>{`https://api.paugram.com/api/bing/?info <pre className="language-javascript"><code>{`${siteUrl}/api/bing/?info
// 返回的是： // 返回的是：
@ -59,7 +63,7 @@ function Bing() {
}`}</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/api/bing") center/cover no-repeat; background: url("${siteUrl}/api/bing") center/cover no-repeat;
}`} }`}
</code></pre> </code></pre>
<p>在网页背景上使用本 API（伪元素半透明版）</p> <p>在网页背景上使用本 API（伪元素半透明版）</p>
@ -72,13 +76,13 @@ function Bing() {
z-index: -1; z-index: -1;
content: ""; content: "";
position: fixed; position: fixed;
background: url(https://api.paugram.com/api/bing) center/cover; background: url(${siteUrl}/api/bing) center/cover;
}`} }`}
</code></pre> </code></pre>
<h3>测试：</h3> <h3>测试：</h3>
<p>使用 <code>img</code> 标签引用图片</p> <p>使用 <code>img</code> 标签引用图片</p>
<p><img src={`//${location.host}/api/bing`} /></p> <p><img src={`${siteUrl}/api/bing`} /></p>
<h3>感谢：</h3> <h3>感谢：</h3>
<ul> <ul>

20
src/pages/netease.tsx
View File

@ -8,6 +8,10 @@ import prism from "prismjs";
import ArticleHead from "@/components/Layout/ArticleHead"; import ArticleHead from "@/components/Layout/ArticleHead";
// Tool
import { siteUrl } from "@/utils/tool";
// Components // Components
function Netease() { function Netease() {
useEffect(() => { useEffect(() => {
@ -19,7 +23,7 @@ function Netease() {
<ArticleHead title="网易云解析" desc="解析音乐并精简输出，配合 Kico Player 使用更佳" /> <ArticleHead title="网易云解析" desc="解析音乐并精简输出，配合 Kico Player 使用更佳" />
<article className="post"> <article className="post">
<h3>使用方法：</h3> <h3>使用方法：</h3>
<p>调用地址 <code>https://api.paugram.com/netease</code> 并输入参数 <code>id</code> 或 <code>title</code>，即可获得一段歌曲 <code>JSON</code> 信息。</p> <p>调用地址 <code>{`${siteUrl}/api/netease`}</code> 并输入参数 <code>id</code> 或 <code>title</code>，即可获得一段歌曲 <code>JSON</code> 信息。</p>
<p>如果您已开始使用本 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>。</p> <p>如果您已开始使用本 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>。</p>
<p>音乐版权归网易云音乐所有，本站不为滥用本 API 进行违规操作者承担责任。</p> <p>音乐版权归网易云音乐所有，本站不为滥用本 API 进行违规操作者承担责任。</p>
@ -115,7 +119,7 @@ function Netease() {
<h3>示例：</h3> <h3>示例：</h3>
<p>通过 ID 获得一首歌的信息</p> <p>通过 ID 获得一首歌的信息</p>
<pre className="language-javascript"><code>{`https://api.paugram.com/api/netease/?id=448143347 <pre className="language-javascript"><code>{`${siteUrl}/netease/?id=448143347
// 返回的是： // 返回的是：
@ -137,11 +141,11 @@ function Netease() {
} }
`}</code></pre> `}</code></pre>
<p>通过 ID 获得一首歌，并跳转到实际地址</p> <p>通过 ID 获得一首歌，并跳转到实际地址</p>
<pre><code>https://api.paugram.com/api/netease/?id=517567145&play=true</code></pre> <pre><code>{`${siteUrl}/api/netease/?id=517567145&play=true`}</code></pre>
<p>结合 Kico Style 和 Kico Player 使用本 API</p> <p>结合 Kico Style 和 Kico Player 使用本 API</p>
<pre className="language-javascript"><code>{`ks.ajax({ <pre className="language-javascript"><code>{`ks.ajax({
method: "GET", method: "GET",
url: \`https://api.paugram.com/api/netease/?id=\${id}\`, url: \`${siteUrl}/api/netease/?id=\${id}\`,
success: (req) => { success: (req) => {
const item = JSON.parse(req.response); const item = JSON.parse(req.response);
声明的播放器.add([item]); 声明的播放器.add([item]);
@ -160,9 +164,11 @@ function Netease() {
</div> </div>
<h3>常见问题：</h3> <h3>常见问题：</h3>
<p>为什么音乐地址是 http 协议？如何避免网站小绿锁消失？</p> <p className="ask">为什么音乐地址是 http 协议？如何避免网站小绿锁消失？</p>
<p>答：为了保证服务器的运行效率，歌曲链接均为网易服务器即时生成返回，不提供代理与转发。在你的站点 <code>head</code> 下添加如下代码，即可完美解决此问题，任何 <code>http</code> 请求都会自动尝试连接到 <code>https</code>。</p> <div className="answer">
<pre className="language-html"><code>&lt;meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/&gt;</code></pre> <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>
</div>
<h3>感谢：</h3> <h3>感谢：</h3>
<ul> <ul>

14
src/pages/wallpaper.tsx
View File

@ -11,6 +11,10 @@ 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";
// Tool
import { siteUrl } from "@/utils/tool";
// Components // Components
function Wallpaper() { function Wallpaper() {
useEffect(() => { useEffect(() => {
@ -41,7 +45,7 @@ function Wallpaper() {
</code></pre> </code></pre>
<h3>使用方法：</h3> <h3>使用方法：</h3>
<p>调用地址 <code>https://api.paugram.com/api/wallpaper</code> 可自动跳转到对应的壁纸（由于运营成本限制，目前本 API 借助 图床/CDN 等平台托管图片。欢迎给予资源赞助~）</p> <p>调用地址 <code>{`${siteUrl}/api/wallpaper`}</code> 可自动跳转到对应的壁纸（由于运营成本限制，目前本 API 借助 图床/CDN 等平台托管图片。欢迎给予资源赞助~）</p>
<p>如果您已开始使用本 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>。</p> <p>如果您已开始使用本 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>。</p>
<p>图片版权归原作者所有，本站不为滥用本 API 进行违规操作者承担责任。</p> <p>图片版权归原作者所有，本站不为滥用本 API 进行违规操作者承担责任。</p>
@ -97,10 +101,10 @@ function Wallpaper() {
<h3>示例：</h3> <h3>示例：</h3>
<p>使用 GitHub 图片源</p> <p>使用 GitHub 图片源</p>
<pre><code>https://api.paugram.com/api/wallpaper/?source=gh</code></pre> <pre><code>{`${siteUrl}/api/wallpaper/?source=gh`}</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/api/wallpaper") center/cover no-repeat; background: url("${siteUrl}/api/wallpaper") center/cover no-repeat;
}`} }`}
</code></pre> </code></pre>
<p>在网页背景上使用本 API（伪元素半透明版）</p> <p>在网页背景上使用本 API（伪元素半透明版）</p>
@ -113,13 +117,13 @@ function Wallpaper() {
z-index: -1; z-index: -1;
content: ""; content: "";
position: fixed; position: fixed;
background: url(https://api.paugram.com/api/wallpaper) center/cover; background: url(${siteUrl}/api/wallpaper) center/cover;
}`} }`}
</code></pre> </code></pre>
<h3>测试：</h3> <h3>测试：</h3>
<p>使用 <code>img</code> 标签引用图片</p> <p>使用 <code>img</code> 标签引用图片</p>
<p><img src={`//${location.host}/api/wallpaper`} style={{ border: "1px solid #ddd" }} alt="示例" /></p> <p><img src={`${siteUrl}/api/wallpaper`} style={{ border: "1px solid #ddd" }} alt="示例" /></p>
<h3>感谢：</h3> <h3>感谢：</h3>
<ul> <ul>

5
src/utils/tool.ts Normal file
View File

@ -0,0 +1,5 @@
export const siteUrl = function () {
const { protocol, host } = window.location;
return `${protocol}//${host}`;
}()