Feat: Add Bili Page

哔哩小窗说明页面，状态和随机壁纸接口调整

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 (
+    <main>
+      <ArticleHead title="哔哩哔哩小窗" desc="更简洁的展示 B 站发布的视频内容" />
+      <article className="post">
+        <h3>使用方法：</h3>
+        <p>在你的网页上插入 <code>iframe</code> 标签，并将本 API 的地址 <code>https://api.paugram.com/bili/?av=视频 AV 号</code> 填写在 <code>src</code> 属性里即可食用。</p>
+        <p>如果您已开始使用本 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>。</p>
+
+        <h3>参数：</h3>
+        <div className="ks-table text-nowrap">
+          <table>
+            <thead>
+              <tr>
+                <td>参数</td>
+                <td>要求</td>
+                <td>描述</td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>av <em>二选一</em></td>
+                <td>有效的 AV 号</td>
+                <td>可以在 B 站上正常打开访问的视频</td>
+              </tr>
+              <tr>
+                <td>bv <em>二选一</em></td>
+                <td>有效的 BV 号</td>
+                <td>可以在 B 站上正常打开访问的视频</td>
+              </tr>
+              <tr>
+                <td>style</td>
+                <td><code>white</code> <code>gray</code> <code>black</code></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>[默认]</td>
+                <td>不填写本参数，默认为透明背景</td>
+              </tr>
+              <tr>
+                <td>white</td>
+                <td>白色背景，搭配灰色背景的网页</td>
+              </tr>
+              <tr>
+                <td>gray</td>
+                <td>浅灰色背景，搭配白色背景的网页</td>
+              </tr>
+              <tr>
+                <td>black</td>
+                <td>深黑色背景，搭配深色系（包括夜间模式）的网页</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>示例：</h3>
+        <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>
+        <p>得到的结果效果如下：</p>
+        <iframe src={`//${location.host}/api/bili?av=39027441&style=gray`} style={{ height: "10em", width: "100%"}}></iframe>
+        <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>
+        <p>得到的结果效果如下：</p>
+        <iframe src={`//${location.host}/api/bili?av=69269716&style=black`} style={{ height: "10em", width: "100%"}}></iframe>
+        <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>
+        <p>得到的结果效果如下：</p>
+        <iframe src={`//${location.host}/api/bili?bv=BV19f4y1k7eN&style=white`} style={{ height: "10em", width: "100%"}}></iframe>
+
+        <h3>常见问题：</h3>
+        <p>为什么我用以上代码，插入进网页会出现滚动条？</p>
+        <p>答：因为页面设计使用的是相对单位，默认以 <code>16px</code> 为基准，将上方的 <code>height: 10em</code> 替换成 <code>height: 160px</code> 就可以解决这个问题了。</p>
+
+        <h3>感谢：</h3>
+        <ul>
+          <li><a href="https://www.bilibili.com" rel="nofollow" target="_blank">BiliBili</a></li>
+        </ul>
+      </article>
+    </main>
+  )
+}
+
+export default Bili;

src/pages/index.tsx

@@ -34,7 +34,7 @@ function Index() {
         <h3>累计调用：</h3>
         <p>自 2018 年 7 月初开始至今，各 API 的使用状况如下：</p>
 
-        <div className="row text-center">
+        <div className="row text-center" style={{ marginTop: "2em" }}>
           {
             stat?.data && Object.keys(stat.data).map((item) => (
               <div className="col-4" key={item}>