174 lines
6.9 KiB
TypeScript
174 lines
6.9 KiB
TypeScript
// 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;
|