Feat: Frontend Pages
前端页面初始化，暂时只有三个页面，代码还比较粗糙
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
// React
|
||||
import React from "react";
|
||||
|
||||
|
||||
// Components
|
||||
function Bing() {
|
||||
return (
|
||||
<main>
|
||||
<section className="header">
|
||||
<h1>必应每日壁纸</h1>
|
||||
<h2>每日更新，尽享乐趣</h2>
|
||||
</section>
|
||||
<article className="post">
|
||||
<h3>使用方法：</h3>
|
||||
<p>调用地址 <code>https://api.paugram.com/bing/</code> 可自动跳转到对应的壁纸</p>
|
||||
<p>如果您已开始使用本 API 服务，则默认视为遵守 <a href="https://api.paugram.com/notice">本约定</a>。</p>
|
||||
<p>图片版权归原作者所有，本站不为滥用本 API 进行违规操作者承担责任。</p>
|
||||
|
||||
<h3>参数：</h3>
|
||||
<div className="ks-table text-nowrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>参数</td>
|
||||
<td>描述</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>info</td>
|
||||
<td>返回 JSON 数据，包含图片来源及版权资料</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>示例：</h3>
|
||||
<p>调用一张当天的图片</p>
|
||||
<pre><code>https://api.paugram.com/bing</code></pre>
|
||||
<p>调用一张当天的图片，并使用 JSON 形式返回资料</p>
|
||||
<pre className="language-javascript"><code>{`https://api.paugram.com/bing/?info
|
||||
|
||||
// 返回的是：
|
||||
|
||||
{
|
||||
"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;
|
||||
}`}
|
||||
</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;
|
||||
}`}
|
||||
</code></pre>
|
||||
|
||||
<h3>测试：</h3>
|
||||
<p>使用 <code>img</code> 标签引用图片</p>
|
||||
<p><img src={`//${location.host}/api/bing`} /></p>
|
||||
|
||||
<h3>感谢：</h3>
|
||||
<ul>
|
||||
<li><a href="https://bing.com" rel="nofollow" target="_blank">Bing</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export default Bing;
|
||||
@@ -0,0 +1,71 @@
|
||||
import React from "react";
|
||||
|
||||
import { useRequest } from 'ahooks';
|
||||
import { getDate } from '../api/date';
|
||||
import fetchGithubStars from '../api/star';
|
||||
import { getBookByParams, getBookByQuery } from '../api/book';
|
||||
import getStat from "../api/stat";
|
||||
|
||||
function Index() {
|
||||
|
||||
const { data: date } = useRequest(() => getDate());
|
||||
// const { data: repo, loading } = useRequest(() =>
|
||||
// fetchGithubStars('midwayjs/midway')
|
||||
// );
|
||||
const { data: book } = useRequest(() =>
|
||||
getBookByParams({ params: { id: '1' } })
|
||||
);
|
||||
const { data: book2 } = useRequest(() =>
|
||||
getBookByQuery({ query: { id: '2' } })
|
||||
);
|
||||
|
||||
const { data: stat } = useRequest(() => getStat());
|
||||
|
||||
return (
|
||||
<main>
|
||||
<img src="/logo.png" className="logo" />
|
||||
<h2>Hello Midway Hooks</h2>
|
||||
<p style={{ textAlign: 'center' }}>
|
||||
Edit <code>src/api/*.ts</code> and watch it change.
|
||||
<br />
|
||||
You can also open Devtools to see the request details.
|
||||
</p>
|
||||
<div>
|
||||
<p>
|
||||
<span className="lambda">λ GET</span>
|
||||
<span className="lambda">getDate()</span>
|
||||
<span>Server Date: {date}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="lambda">λ POST</span>
|
||||
<span className="lambda">fetchStars('midwayjs/midway')</span>
|
||||
{/* <span>Github Stars: {loading ? 'Fetching...' : repo.stars}</span> */}
|
||||
</p>
|
||||
<div>
|
||||
{
|
||||
stat?.data && Object.keys(stat.data).map((item) => (
|
||||
<p key={item}>{item}: {stat.data[item]}</p>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<p>
|
||||
<span className="lambda">λ GET</span>
|
||||
<span className="lambda">
|
||||
{`getBookByParams({ params: { id: '1' } })`}
|
||||
</span>
|
||||
<span>Book title: {book?.title}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="lambda">λ GET</span>
|
||||
<span className="lambda">
|
||||
{`getBookByQuery({ query: { id: '2' } })`}
|
||||
</span>
|
||||
<span>Book title: {book2?.title}</span>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default Index;
|
||||
@@ -0,0 +1,173 @@
|
||||
// React
|
||||
import React from "react";
|
||||
|
||||
|
||||
// UI
|
||||
import HelpExample from "../images/help/wallpaper-pr-example.jpg";
|
||||
import HelpRequire from "../images/help/wallpaper-pr-require.jpg";
|
||||
|
||||
|
||||
// Components
|
||||
function Wallpaper() {
|
||||
return (
|
||||
<main>
|
||||
<section className="header">
|
||||
<h1>随机动漫壁纸</h1>
|
||||
<h2>生成适合 Single 主题的白底动漫壁纸</h2>
|
||||
</section>
|
||||
<article className="post">
|
||||
<h3>说明：</h3>
|
||||
<p>本 API 的所有图片均进行了公开，欢迎前往仓库 <a href="https://github.com/Dreamer-Paul/Anime-Wallpaper" target="_blank">Anime-Wallpaper</a> 提交 PR，完善资源。Commit 的说明上最好带上对应角色的来源～</p>
|
||||
<blockquote>你既可以将仓库图片下载自用或创建自己的随机图片 API，也可以直接使用本 API 提供的链接插入到自己的网页上，也顺带让你学会了用 Git 提交代码，不是很有意思嘛。</blockquote>
|
||||
<p>提 PR 增加资源需要注意一些细节问题，先做了解，会让你的提交过程更加顺利呢！本仓库不接受存在以下问题的提交，保罗有拒绝合并的权限哦（当然，你也可以重新修改后再次提交）</p>
|
||||
<ul>
|
||||
<li>动作/衣着等尺度较大的图片</li>
|
||||
<li>尽可能以日漫女或无性角色为主（暂时没有作品上的限制）</li>
|
||||
<li>人物主体占画面主体的比例偏高（应小于 50%）</li>
|
||||
<li>人物主体离画面顶部、左右侧或底部太靠近（网站顶部有菜单栏就会被“切掉”了）</li>
|
||||
<li>可参考以下图片示例，画布尺寸需为 <code>1920 x 1080</code> 像素，<code>.jpg</code> 格式。</li>
|
||||
</ul>
|
||||
<p><img src={HelpExample} style={{ border: "1px solid #ddd" }} alt="提交须知" /></p>
|
||||
<p><img src={HelpRequire} alt="提交须知" /></p>
|
||||
<p>Commit 说明可参考以下示例：</p>
|
||||
<pre><code>Add 5 Images
|
||||
|
||||
增加了《轻音少女》阿梓喵、《原神》可莉的图片
|
||||
</code></pre>
|
||||
|
||||
<h3>使用方法：</h3>
|
||||
<p>调用地址 <code>https://api.paugram.com/wallpaper/</code> 可自动跳转到对应的壁纸（由于运营成本限制，目前本 API 借助 图床/CDN 等平台托管图片。欢迎给予资源赞助~）</p>
|
||||
<p>如果您已开始使用本 API 服务，则默认视为遵守 <a href="https://api.paugram.com/notice">本约定</a>。</p>
|
||||
<p>图片版权归原作者所有，本站不为滥用本 API 进行违规操作者承担责任。</p>
|
||||
|
||||
<h3>参数：</h3>
|
||||
<div className="ks-table text-nowrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>参数</td>
|
||||
<td>可选值</td>
|
||||
<td>描述</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>source</td>
|
||||
<td><code>sm</code> <code>cp</code> <code>sina</code> <code>paul</code></td>
|
||||
<td>图片源，如留空则默认采用 sm.ms 源</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>category（施工中）</td>
|
||||
<td><code>us</code> <code>jp</code> <code>cn</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>sm</td>
|
||||
<td><em className="green">可用</em></td>
|
||||
<td>资源较少！sm.ms 图床，国外速度较快，部分浏览器会阻止访问</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>gt</td>
|
||||
<td><em className="green">可用</em></td>
|
||||
<td>Gitee Pages 服务托管，服务器位于国内，速度稳定</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sina</td>
|
||||
<td><em className="green">可用</em></td>
|
||||
<td>资源较少！新浪微博相册，国内速度较快，已更换新地址</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>gh</td>
|
||||
<td><em className="green">可用</em></td>
|
||||
<td>存放在 GitHub 上的图片资源，基于 JSDelivr 托管，速度非常理想</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="red">不可用</em></td>
|
||||
<td>白底动漫插图</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td><em className="red">不可用</em></td>
|
||||
<td>透明底动漫插图</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td><em className="red">不可用</em></td>
|
||||
<td>随机底动漫壁纸</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>示例：</h3>
|
||||
<p>使用 sm.ms 图片源</p>
|
||||
<pre><code>https://api.paugram.com/wallpaper/?source=sm</code></pre>
|
||||
<p>使用新浪图片源，并选择美漫图片分类</p>
|
||||
<pre><code>https://api.paugram.com/wallpaper/?source=sina&category=us</code></pre>
|
||||
<p>在网页背景上使用本 API</p>
|
||||
<pre className="language-css"><code>{`body{
|
||||
background: url("https://api.paugram.com/wallpaper/") 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/wallpaper/) center/cover;
|
||||
}`}
|
||||
</code></pre>
|
||||
|
||||
<h3>测试：</h3>
|
||||
<p>使用 <code>img</code> 标签引用图片</p>
|
||||
<p><img src={`//${location.host}/api/wallpaper`} style={{ border: "1px solid #ddd" }} alt="示例" /></p>
|
||||
|
||||
<h3>感谢：</h3>
|
||||
<ul>
|
||||
<li><a href="https://sm.ms" rel="nofollow" target="_blank">SM.MS</a></li>
|
||||
<li><a href="https://github.com/Dreamer-Paul/Anime-Wallpaper" rel="nofollow" target="_blank">GitHub</a></li>
|
||||
<li><a href="https://www.jsdelivr.com" rel="nofollow" target="_blank">JSDelivr</a></li>
|
||||
<li><a href="https://gitee.com" rel="nofollow" target="_blank">Gitee Pages</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export default Wallpaper;
|
||||
Reference in New Issue
Block a user