Files
meme-api/public/index.html
2026-04-11 21:52:18 +08:00

52 lines
4.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>meme-api</title>
<style>
:root { color-scheme: light dark; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC","Microsoft YaHei", sans-serif; line-height: 1.55; }
body { max-width: 52rem; margin: 2rem auto; padding: 0 1.25rem; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
pre { overflow: auto; padding: 0.9rem 1rem; border-radius: 8px; background: color-mix(in oklab, Canvas 92%, CanvasText 8%); }
a { color: inherit; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; margin-top: 1.75rem; }
.muted { opacity: 0.78; font-size: 0.92rem; }
</style>
</head>
<body>
<h1>meme-api</h1>
<p class="muted">静态站点(<a href="https://pages.cloudflare.com/">Cloudflare Pages</a>)。在 <code>原图/</code> 放未编号素材后运行 <code>python 转化.py</code>,输出到 <code>原图-已处理/</code>。将成品拷入 <code>public/meme/</code> 后运行 <code>npm run build</code>:只生成 <code>memes.json</code> 并把 <code>public/</code> 复制到 <code>dist/</code><strong>不会</strong>改写 <code>public/meme/</code>。清单默认按 <code>public/meme/</code> 扫描;若尚未拷素材则回退扫描 <code>原图-已处理/</code>(无则 <code>原图/</code>)。需强制按源目录生成清单时用 <code>npm run build:manifest-from-source</code>。部署目录为 <code>dist/</code>。直链可外部引用JSON 已配置 CORS。</p>
<p><a href="/memes/">浏览图库(分页、按文件夹分类、点击复制链接)</a></p>
<h2>获取表情包列表</h2>
<p><code>GET /memes.json</code>(与旧版兼容:<code>GET /api/v1/memes</code>,内部映射为同一份 JSON</p>
<p>返回所有分类及文件相对路径;前端与脚本可用其拼接直链。</p>
<pre id="curl-memes">curl -sS ""</pre>
<h2>直链访问单张表情包</h2>
<p>站点根目录对应构建产物 <code>dist/</code>(本地从 <code>public/</code> 同步而来);表情文件在 <code>/meme/&lt;分类&gt;/</code>,对应 URL</p>
<p><code>GET /meme/&lt;分类&gt;/&lt;文件名&gt;.webp</code><code>.gif</code></p>
<pre id="curl-example">https://example.com/meme/%E7%99%BD%E8%89%B2%E5%B0%8F%E4%BA%BA/1.webp</pre>
<p class="muted">中文或多段路径请使用编码后的 URL浏览器会自动处理图库「复制链接」亦为已编码地址</p>
<h2>维护流程</h2>
<ol>
<li><code>原图/&lt;分类&gt;/</code> 放入未编号素材;运行 <code>python 转化.py</code>,在 <code>原图-已处理/</code> 生成编号 <code>.webp</code>/<code>.gif</code> 并限最长边(默认 300px默认<strong>保留</strong> <code>原图/</code> 源文件,清理可加 <code>--delete-sources</code></li>
<li>动图 WebP 会在 <code>python 转化.py</code> 转换流程中转为 GIF。</li>
<li><code>npm run build</code>:生成 <code>dist/</code>(含 <code>dist/memes.json</code>)。请先把 <code>原图-已处理/</code> 拷入 <code>public/meme/</code> 再构建;构建脚本不会覆盖 <code>public/meme/</code></li>
<li><strong>上线(生产)</strong>:项目在 Cloudflare 已连接 Git 时,由推送生产分支触发云端构建:<code>npm run build</code><code>git add/commit/push</code>;仪表盘「构建命令」填 <code>npm run build</code>,「构建输出目录」填 <code>dist</code><code>wrangler pages deploy dist</code> 在 Git 项目里常显示为<strong>预览</strong>,属正常。</li>
</ol>
<script>
(function () {
var o = window.location.origin;
document.title = "meme-api · " + o.replace(/^https?:\/\//, "");
document.getElementById("curl-memes").textContent = 'curl -sS "' + o + '/memes.json"';
document.getElementById("curl-example").textContent =
o + "/meme/" + encodeURIComponent("白色小人") + "/" + encodeURIComponent("1.webp");
})();
</script>
</body>
</html>