使用方法：
-调用地址 https://api.paugram.com/api/acgm，即可获得一段歌曲 JSON 信息。
调用地址 {`${siteUrl}/api/acgm`}，即可获得一段歌曲 JSON 信息。
如果您已开始使用本 API 服务，则默认视为遵守 本约定。
音乐版权归网易云音乐所有，本站不为滥用本 API 进行违规操作者承担责任。部分歌曲可能因版权问题无法播放，敬请谅解！
为了防止多次出现随机到同一首歌的情况，请允许我们使用你的 Cookie 记录。
示例：
获得一首随机动漫音乐的信息
-{`https://api.paugram.com/api/acgm
+{`${siteUrl}/api/acgm
// 返回的是：
@@ -199,14 +203,14 @@ function ACGM() {
}
`}
通过 List 获得一首随机动漫歌曲的信息，并跳转到实际地址
-https://api.paugram.com/api/acgm/?list=1&play=true
+{`${siteUrl}/api/acgm/?list=1&play=true`}
建立一个 Audio 播放器，并使用本 API
-<audio src="https://api.paugram.com/api/acgm/?play=true" controls></audio>
+<audio src="{siteUrl}/api/acgm/?play=true" controls></audio>
测试小工具：
来一首随机动漫音乐吧！刷新或点击按钮即可切歌
-
+
@@ -216,13 +220,15 @@ function ACGM() {
常见问题：
- 为什么音乐地址是 http 协议？如何避免网站小绿锁消失？
- 答：为了保证服务器的运行效率，歌曲链接均为网易服务器即时生成返回，不提供代理与转发。在你的站点 head 下添加如下代码，即可完美解决此问题，任何 http 请求都会自动尝试连接到 https。
- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>
- 为什么有时候随机的音乐会播放失败？
- 答：网易会随时调整一些歌曲的版权，作者也无法即时直接检测该歌曲是否能正常连接。以后会在此页面增加评论功能，作者会给予完善和修改
- 本 API 有同款歌单吗？
- 当然有啊，就是基于我的网易云歌单《二次元歌曲》做的呀
+ 为什么音乐地址是 http 协议？如何避免网站小绿锁消失？
+
+ 为了保证服务器的运行效率，歌曲链接均为网易服务器即时生成返回，不提供代理与转发。在你的站点 head 下添加如下代码，即可完美解决此问题，任何 http 请求都会自动尝试连接到 https。
+ <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>
+
+ 为什么有时候随机的音乐会播放失败？
+ 网易会随时调整一些歌曲的版权，作者也无法即时直接检测该歌曲是否能正常连接。以后会在此页面增加评论功能，作者会给予完善和修改
+ 本 API 有同款歌单吗？
+ 当然有啊，就是基于我的网易云歌单《二次元歌曲》做的呀
感谢：
diff --git a/src/pages/bili.tsx b/src/pages/bili.tsx
index ffe2d47..960974e 100644
--- a/src/pages/bili.tsx
+++ b/src/pages/bili.tsx
@@ -8,6 +8,10 @@ import prism from "prismjs";
import ArticleHead from "@/components/Layout/ArticleHead";
+// Tool
+import { siteUrl } from "@/utils/tool";
+
+
// Components
function Bili() {
useEffect(() => {
@@ -19,7 +23,7 @@ function Bili() {
使用方法：
- 在你的网页上插入 iframe 标签，并将本 API 的地址 https://api.paugram.com/bili/?av=视频 AV 号 填写在 src 属性里即可食用。
+ 在你的网页上插入 iframe 标签，并将本 API 的地址 {`${siteUrl}/api/bili/?av=视频 AV 号`} 填写在 src 属性里即可食用。
如果您已开始使用本 API 服务，则默认视为遵守 本约定。
参数：
@@ -84,21 +88,21 @@ function Bili() {
示例：
获得视频 av39027441 的结果，并且改为灰色背景样式
-<iframe src="https://api.paugram.com/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>
得到的结果效果如下：
-
+
获得视频 av69269716 的结果，并且改为黑色背景样式
-<iframe src="https://api.paugram.com/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>
得到的结果效果如下：
-
+
获得视频 BV19f4y1k7eN 的结果，并且改为白色背景样式
-<iframe src="https://api.paugram.com/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>
得到的结果效果如下：
-
+
常见问题：
- 为什么我用以上代码，插入进网页会出现滚动条？
- 答：因为页面设计使用的是相对单位，默认以 16px 为基准，将上方的 height: 10em 替换成 height: 160px 就可以解决这个问题了。
+ 为什么我用以上代码，插入进网页会出现滚动条？
+ 答：因为页面设计使用的是相对单位，默认以 16px 为基准，将上方的 height: 10em 替换成 height: 160px 就可以解决这个问题了。
感谢：
diff --git a/src/pages/bing.tsx b/src/pages/bing.tsx
index fc793a5..edcff1e 100644
--- a/src/pages/bing.tsx
+++ b/src/pages/bing.tsx
@@ -8,6 +8,10 @@ import prism from "prismjs";
import ArticleHead from "@/components/Layout/ArticleHead";
+// Tool
+import { siteUrl } from "@/utils/tool";
+
+
// Components
function Bing() {
useEffect(() => {
@@ -19,7 +23,7 @@ function Bing() {
使用方法：
- 调用地址 https://api.paugram.com/api/bing 可自动跳转到对应的壁纸
+ 调用地址 {`${siteUrl}/api/bing`} 可自动跳转到对应的壁纸
如果您已开始使用本 API 服务，则默认视为遵守 本约定。
图片版权归原作者所有，本站不为滥用本 API 进行违规操作者承担责任。
@@ -43,9 +47,9 @@ function Bing() {
示例：
调用一张当天的图片
-https://api.paugram.com/api/bing
+{`${siteUrl}/api/bing`}
调用一张当天的图片，并使用 JSON 形式返回资料
-{`https://api.paugram.com/api/bing/?info
+{`${siteUrl}/api/bing/?info
// 返回的是：
@@ -59,7 +63,7 @@ function Bing() {
}`}
在网页背景上使用本 API
{`body{
- background: url("https://api.paugram.com/api/bing") center/cover no-repeat;
+ background: url("${siteUrl}/api/bing") center/cover no-repeat;
}`}
在网页背景上使用本 API（伪元素半透明版）
@@ -72,13 +76,13 @@ function Bing() {
z-index: -1;
content: "";
position: fixed;
- background: url(https://api.paugram.com/api/bing) center/cover;
+ background: url(${siteUrl}/api/bing) center/cover;
}`}
测试：
使用 img 标签引用图片
- 
+ 
感谢：
diff --git a/src/pages/netease.tsx b/src/pages/netease.tsx
index 1d26927..fa1d789 100644
--- a/src/pages/netease.tsx
+++ b/src/pages/netease.tsx
@@ -8,6 +8,10 @@ import prism from "prismjs";
import ArticleHead from "@/components/Layout/ArticleHead";
+// Tool
+import { siteUrl } from "@/utils/tool";
+
+
// Components
function Netease() {
useEffect(() => {
@@ -19,7 +23,7 @@ function Netease() {
使用方法：
- 调用地址 https://api.paugram.com/netease 并输入参数 id 或 title，即可获得一段歌曲 JSON 信息。
+ 调用地址 {`${siteUrl}/api/netease`} 并输入参数 id 或 title，即可获得一段歌曲 JSON 信息。
如果您已开始使用本 API 服务，则默认视为遵守 本约定。
音乐版权归网易云音乐所有，本站不为滥用本 API 进行违规操作者承担责任。
@@ -115,7 +119,7 @@ function Netease() {
示例：
通过 ID 获得一首歌的信息
-{`https://api.paugram.com/api/netease/?id=448143347
+{`${siteUrl}/netease/?id=448143347
// 返回的是：
@@ -137,11 +141,11 @@ function Netease() {
}
`}
通过 ID 获得一首歌，并跳转到实际地址
- https://api.paugram.com/api/netease/?id=517567145&play=true
+ {`${siteUrl}/api/netease/?id=517567145&play=true`}
结合 Kico Style 和 Kico Player 使用本 API
{`ks.ajax({
method: "GET",
- url: \`https://api.paugram.com/api/netease/?id=\${id}\`,
+ url: \`${siteUrl}/api/netease/?id=\${id}\`,
success: (req) => {
const item = JSON.parse(req.response);
声明的播放器.add([item]);
@@ -160,9 +164,11 @@ function Netease() {
常见问题：
- 为什么音乐地址是 http 协议？如何避免网站小绿锁消失？
- 答：为了保证服务器的运行效率，歌曲链接均为网易服务器即时生成返回，不提供代理与转发。在你的站点 head 下添加如下代码，即可完美解决此问题，任何 http 请求都会自动尝试连接到 https。
- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>
+ 为什么音乐地址是 http 协议？如何避免网站小绿锁消失？
+
+ 为了保证服务器的运行效率，歌曲链接均为网易服务器即时生成返回，不提供代理与转发。在你的站点 head 下添加如下代码，即可完美解决此问题，任何 http 请求都会自动尝试连接到 https。
+ <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>
+
感谢：
diff --git a/src/pages/wallpaper.tsx b/src/pages/wallpaper.tsx
index 4093cdc..52e9c34 100644
--- a/src/pages/wallpaper.tsx
+++ b/src/pages/wallpaper.tsx
@@ -11,6 +11,10 @@ import HelpExample from "../images/help/wallpaper-pr-example.jpg";
import HelpRequire from "../images/help/wallpaper-pr-require.jpg";
+// Tool
+import { siteUrl } from "@/utils/tool";
+
+
// Components
function Wallpaper() {
useEffect(() => {
@@ -41,7 +45,7 @@ function Wallpaper() {
使用方法：
- 调用地址 https://api.paugram.com/api/wallpaper 可自动跳转到对应的壁纸（由于运营成本限制，目前本 API 借助 图床/CDN 等平台托管图片。欢迎给予资源赞助~）
+ 调用地址 {`${siteUrl}/api/wallpaper`} 可自动跳转到对应的壁纸（由于运营成本限制，目前本 API 借助 图床/CDN 等平台托管图片。欢迎给予资源赞助~）
如果您已开始使用本 API 服务，则默认视为遵守 本约定。
图片版权归原作者所有，本站不为滥用本 API 进行违规操作者承担责任。
@@ -97,10 +101,10 @@ function Wallpaper() {
示例：
使用 GitHub 图片源
- https://api.paugram.com/api/wallpaper/?source=gh
+ {`${siteUrl}/api/wallpaper/?source=gh`}
在网页背景上使用本 API
{`body{
- background: url("https://api.paugram.com/api/wallpaper") center/cover no-repeat;
+ background: url("${siteUrl}/api/wallpaper") center/cover no-repeat;
}`}
在网页背景上使用本 API（伪元素半透明版）
@@ -113,13 +117,13 @@ function Wallpaper() {
z-index: -1;
content: "";
position: fixed;
- background: url(https://api.paugram.com/api/wallpaper) center/cover;
+ background: url(${siteUrl}/api/wallpaper) center/cover;
}`}
测试：
使用 img 标签引用图片
- 
+ 
感谢：
diff --git a/src/utils/tool.ts b/src/utils/tool.ts
new file mode 100644
index 0000000..086a05f
--- /dev/null
+++ b/src/utils/tool.ts
@@ -0,0 +1,5 @@
+export const siteUrl = function () {
+ const { protocol, host } = window.location;
+
+ return `${protocol}//${host}`;
+}()