头像 One
头像 One

更多功能请点顶栏「快捷菜单」

博客 OneBlog 9528 字 53 分钟 -- 次

站点维护页面

最后更新于:

image-20260730070851.avif

站点维护页面

问题

1新需求:
2博客后台有个按钮，点击后，立马把自己主站设为不可访问，并给读者提供一个漂亮的维护页面[破涕为笑]

回答：

主站是静态 Hugo + EdgeOne 边缘函数，后台是独立的 EdgeOne Admin + KV。要「点按钮立刻下线」，只能走 后台写开关 → 主站边缘函数拦截，不能靠 Hugo 重建（那要几分钟）。

定方案前先确认两点：

1、维护页文案

  • A. 只要开关：固定漂亮文案（如「站点维护中，马上回来」）
  • B. 开关 + 可编辑：后台可改标题、说明（可选预计恢复时间）

2、维护开启后，你自己还想临时看主站吗？

  • A. 不需要：主站对所有人只显示维护页；后台照常可用
  • B. 需要：带密钥参数 / Cookie 可绕过维护页预览主站

回 A/B（例如 1B 2A）后我再出具体实现计划。

选：1B 2A

一键站点维护模式

选定方案（已确认）

  • 文案：可编辑标题、说明、可选预计恢复时间
  • 绕过：不要密钥/Cookie 绕过；维护期间主站对所有人只显示维护页
  • 后台 oneblogadmin.onedayxyy.cn 始终可访问，用于关维护

不走 Hugo 重建：改配置再 CI 要几分钟，做不到「立马」。

flowchart LR AdminUI["Admin Tools.vue"] -->|"PUT auth"| AdminAPI["oneblog-admin Functions"] AdminAPI --> KV["ADMIN_KV site_maintenance"] EdgeFn["blog-cnb-origin.js"] -->|"GET public"| StatusAPI["/api/maintenance-status"] StatusAPI --> KV EdgeFn -->|"enabled"| MaintHTML["503 维护页"] EdgeFn -->|"disabled"| CNB["CNB dist 静态站"]

1. Admin API（KV + 鉴权写 / 公开读）

改 [oneblog-admin/functions/[[default]].js](oneblog-admin/functions/[[default]].js)：

  • KV 键：site_maintenance
  • 值形状：
1{
2  "enabled": true,
3  "title": "站点维护中",
4  "message": "正在升级，马上回来。",
5  "until": "2026-07-30 18:00",
6  "updatedAt": 1710000000000
7}
  • 公开（放在「以下需要鉴权」之前，与 health / auth/login 同级）：
    • GET /api/maintenance-status → 返回上述 JSON（无敏感信息），Cache-Control: no-store
  • 鉴权（走现有 /api/v1/*，登录后才能改）：
    • GET /api/v1/maintenance
    • PUT /api/v1/maintenance（body 同上字段）
  • shouldAutoRebuildV1Api：不要因维护开关触发重建流水线

本地开发：在 [admin-frontend/plugins/localAdminApi.js](admin-frontend/plugins/localAdminApi.js) 用 .local/maintenance.json 做同样读写，便于后台 UI 联调（本地 Hugo 不会被拦，属预期）。

2. 后台 UI

改 [admin-frontend/src/views/System/Tools.vue](admin-frontend/src/views/System/Tools.vue) + [admin-frontend/src/api/settings.js](admin-frontend/src/api/settings.js)：

  • 新增分区「站点维护」
  • 开关：开启 / 关闭（危险色确认：el-popconfirm）
  • 表单：标题、说明、预计恢复时间（可选）
  • 加载当前状态；保存成功提示「主站将在数秒内切换」
  • 醒目提示：开启后读者无法访问 onedayxyy.cn；本后台不受影响；需已发布带维护逻辑的边缘函数

3. 主站边缘函数拦截

改 [edgeone/blog-cnb-origin.js](edgeone/blog-cnb-origin.js)：

  • 文件顶部常量：MAINTENANCE_STATUS_URL = 'https://oneblogadmin.onedayxyy.cn/api/maintenance-status'
  • 在拉 CNB 源之前：
    1. 查维护状态（fetch + 短超时；可用 Cache API 缓存 5s，避免每次都打 Admin）
    2. enabled === true 时直接返回内嵌的漂亮 HTML，HTTP 503，Cache-Control: no-store，Retry-After: 300
  • 状态接口失败/超时时：fail-open（照常提供站点），避免 Admin 挂了把主站一起锁死
  • 维护页：单文件内嵌 HTML（品牌 OneBlog / onedayxyy，标题+说明+until，简洁大气，非紫霓虹风）；静态资源请求同样拦截，避免半残页面

更新 [edgeone/README.md](edgeone/README.md)：说明必须把新函数整文件覆盖并发布后，后台开关才真正生效。

4. 缓存与 SW 注意点（实现时处理）

  • 维护响应 no-store，避免 EdgeOne/浏览器把维护页或正常页长期缓存错乱
  • 站点若启用 [sw.js](hugo-teek-site/themes/hugo-teek/static/sw.js)：维护 HTML 加一句轻量提示，或边缘对 HTML 导航强制 503；若仍被 SW 旧缓存挡住，可在维护页文案里写「强制刷新 / 无痕」——本次不做完整 SW 改造，以免扩大范围

5. 你需要做的上线步骤（代码合入后）

  1. 部署 Admin（CI 或现有 Admin 发布流程）→ 公开状态接口可用
  2. EdgeOne 控制台：用更新后的 blog-cnb-origin.js 覆盖并发布
  3. 后台「系统工具」打开维护开关自测；再关回

不在本次范围

  • 不改 Hugo 主题 / 不重建静态站来做维护
  • 不做所有者密钥绕过
  • 不自动改 .cnb.yml 去部署边缘函数（仍为控制台手动发布）

v1-已实现

一键维护模式已按计划落地，改动如下：

🟢已实现

  1. Admin API（oneblog-admin/functions/[[default\]].js）
    • KV：site_maintenance
    • 公开：GET /api/maintenance-status（无需登录）
    • 鉴权：GET/PUT /api/v1/maintenance（不触发重建）
    • 本地：localAdminApi.js 读写 .local/maintenance.json
  2. 后台 UI（系统工具）
    • 维护开关 + 确认
    • 可编辑标题 / 说明 / 预计恢复时间
  3. 主站边缘函数（edgeone/blog-cnb-origin.js）
    • 开启时全站 503 维护页
    • 状态失败 fail-open；约 5 秒缓存

🟢上线顺序

  1. 部署 Admin（公开状态接口可用）
  2. EdgeOne 控制台用新版 blog-cnb-origin.js 整文件覆盖并发布
  3. 后台「系统工具 → 站点维护」自测开关

未发布边缘函数前，后台开关不会真正拦截主站。

blog-cnb-origin.js 内容：

  1/**
  2 * EdgeOne 边缘函数：从 CNB 公开产物库拉取静态站
  3 *
  4 * 用法：复制到腾讯云 EdgeOne 控制台 → 站点 → 边缘函数（整文件覆盖）
  5 *
  6 * 相对旧版改进：
  7 * 1. HTML/CSS/JS 等文本资源做 gzip（缓冲后再压，避免流式 CompressionStream 在 EO 静默失败）
  8 * 2. 指纹静态资源长缓存；HTML 短缓存
  9 * 3. 响应头 X-EO-Compress 便于确认压缩是否生效
 10 * 4. 找不到页面时回退到产物库中的 404.html（Hugo 自定义 404）
 11 * 5. 维护模式：轮询 Admin 公开状态；开启时对所有请求返回 503 维护页
 12 */
 13addEventListener('fetch', (event) => {
 14  event.respondWith(handleRequest(event.request));
 15});
 16
 17const BASE = 'https://cnb.cool/onedayxyy/hugo-teek-public-dist/-/git/raw/dist';
 18const MAINTENANCE_STATUS_URL = 'https://oneblogadmin.onedayxyy.cn/api/maintenance-status';
 19const MAINTENANCE_CACHE_TTL_MS = 5000;
 20const MAINTENANCE_FETCH_TIMEOUT_MS = 2500;
 21
 22async function handleRequest(request) {
 23  const maintenance = await getMaintenanceStatus();
 24  if (maintenance && maintenance.enabled) {
 25    return buildMaintenanceResponse(maintenance);
 26  }
 27
 28  const url = new URL(request.url);
 29  let pathname = url.pathname;
 30
 31  if (pathname !== '/' && !pathname.endsWith('/') && !isFile(pathname)) {
 32    const redirectUrl = new URL(request.url);
 33    redirectUrl.pathname = pathname + '/';
 34    return Response.redirect(redirectUrl.toString(), 301);
 35  }
 36
 37  let uri = pathname;
 38  if (uri.startsWith('/')) uri = uri.slice(1);
 39  if (!uri || uri === '') uri = 'index.html';
 40  if (uri.endsWith('/')) uri = uri + 'index.html';
 41
 42  let target = `${BASE}/${uri}`;
 43  let resp = await fetchOrigin(target);
 44
 45  if (!resp.ok && !isFile(uri)) {
 46    const indexUri = uri.endsWith('/') ? uri + 'index.html' : uri + '/index.html';
 47    target = `${BASE}/${indexUri}`;
 48    resp = await fetchOrigin(target);
 49    if (resp.ok) uri = indexUri;
 50  }
 51
 52  if (!resp.ok || !resp.body) {
 53    // 回退到 Hugo 构建的自定义 404 页，避免纯文本 "Page Not Found"
 54    const notFound = await fetchOrigin(`${BASE}/404.html`);
 55    if (notFound.ok && notFound.body) {
 56      const rawBuf = await notFound.arrayBuffer();
 57      const contentType = 'text/html; charset=utf-8';
 58      const headers = new Headers();
 59      headers.set('Content-Type', contentType);
 60      headers.set('Cache-Control', 'public, max-age=60, must-revalidate');
 61      headers.set('Content-Length', String(rawBuf.byteLength));
 62      const uncompressed = new Response(rawBuf, {
 63        status: 404,
 64        headers,
 65      });
 66      return maybeGzip(request, uncompressed, '404.html', rawBuf, contentType);
 67    }
 68
 69    return new Response('Page Not Found', {
 70      status: 404,
 71      headers: { 'Content-Type': 'text/html; charset=utf-8' },
 72    });
 73  }
 74
 75  const contentType =
 76    getContentType(uri) || resp.headers.get('content-type') || 'text/html; charset=utf-8';
 77
 78  // 大体积 CSS/JS（如 main.css ~1MB）若整包 arrayBuffer + gzip，EO 易直接 545。
 79  // 指纹静态资源改为直通，交给平台智能压缩。
 80  const originLen = Number(resp.headers.get('content-length') || 0);
 81  if (shouldPassthrough(uri, contentType, originLen)) {
 82    const headers = new Headers();
 83    headers.set('Content-Type', contentType);
 84    headers.set('Cache-Control', cacheControlFor(uri));
 85    if (originLen > 0) headers.set('Content-Length', String(originLen));
 86    headers.set('X-EO-Compress', 'passthrough');
 87    return new Response(resp.body, { status: resp.status, headers });
 88  }
 89
 90  // 先读入缓冲：EO 上对流式 pipeThrough(CompressionStream) 经常不生效
 91  let rawBuf;
 92  try {
 93    rawBuf = await resp.arrayBuffer();
 94  } catch (e) {
 95    const headers = new Headers();
 96    headers.set('Content-Type', contentType);
 97    headers.set('Cache-Control', cacheControlFor(uri));
 98    headers.set('X-EO-Compress', 'passthrough-read-fail');
 99    const retry = await fetchOrigin(target);
100    return new Response(retry.body, { status: retry.status, headers });
101  }
102
103  // 读完后发现超大：不再 gzip，避免边缘函数 OOM/545
104  if (rawBuf.byteLength > PASS_THROUGH_MAX_BYTES) {
105    const headers = new Headers();
106    headers.set('Content-Type', contentType);
107    headers.set('Cache-Control', cacheControlFor(uri));
108    headers.set('Content-Length', String(rawBuf.byteLength));
109    headers.set('X-EO-Compress', 'skip-large');
110    return new Response(rawBuf, { status: resp.status, headers });
111  }
112
113  const headers = new Headers();
114  headers.set('Content-Type', contentType);
115  headers.set('Cache-Control', cacheControlFor(uri));
116  headers.set('Content-Length', String(rawBuf.byteLength));
117
118  const uncompressed = new Response(rawBuf, {
119    status: resp.status,
120    headers,
121  });
122
123  return maybeGzip(request, uncompressed, uri, rawBuf, contentType);
124}
125
126/** 超过该体积不再做边缘 gzip 缓冲（main.css 约 1MB） */
127const PASS_THROUGH_MAX_BYTES = 400 * 1024;
128
129function shouldPassthrough(uri, contentType, contentLength) {
130  if (contentLength > PASS_THROUGH_MAX_BYTES) return true;
131  // 指纹 CSS/JS 体积常偏大，优先直通
132  if (/\.min\.[a-f0-9]{8,}\.(?:css|js)(?:$|\?)/i.test(uri)) {
133    if (contentLength === 0) return true; // 未知长度时也不冒险缓冲
134    if (contentLength > 200 * 1024) return true;
135  }
136  return false;
137}
138
139function fetchOrigin(target) {
140  return fetch(target, {
141    headers: {
142      'User-Agent': 'curl/8.0.0',
143      Accept: '*/*',
144      'Accept-Encoding': 'identity',
145    },
146  });
147}
148
149function isFile(path) {
150  return /\.[^/]+$/.test(path);
151}
152
153function getContentType(uri) {
154  const map = {
155    html: 'text/html; charset=utf-8',
156    css: 'text/css; charset=utf-8',
157    js: 'application/javascript; charset=utf-8',
158    mjs: 'application/javascript; charset=utf-8',
159    json: 'application/json; charset=utf-8',
160    png: 'image/png',
161    jpg: 'image/jpeg',
162    jpeg: 'image/jpeg',
163    gif: 'image/gif',
164    svg: 'image/svg+xml',
165    webp: 'image/webp',
166    avif: 'image/avif',
167    ico: 'image/x-icon',
168    woff: 'font/woff',
169    woff2: 'font/woff2',
170    txt: 'text/plain; charset=utf-8',
171    xml: 'application/xml; charset=utf-8',
172    map: 'application/json',
173  };
174  if (!isFile(uri)) return 'text/html; charset=utf-8';
175  const ext = uri.split('.').pop().toLowerCase();
176  return map[ext];
177}
178
179function cacheControlFor(uri) {
180  if (/\.(?:css|js|mjs|woff2?|png|jpe?g|gif|webp|avif|svg|ico)(?:$|\?)/i.test(uri)) {
181    return 'public, max-age=31536000, immutable';
182  }
183  return 'public, max-age=60, must-revalidate';
184}
185
186function isCompressible(uri, contentType) {
187  if (/\.(?:png|jpe?g|gif|webp|avif|woff2?|mp4|webm|gz|br)(?:$|\?)/i.test(uri)) {
188    return false;
189  }
190  const type = contentType || '';
191  return /text\/|javascript|json|xml|svg/.test(type);
192}
193
194async function compressGzip(rawBuf) {
195  if (typeof CompressionStream === 'undefined') {
196    return { ok: false, reason: 'no-compression-stream' };
197  }
198  try {
199    const cs = new CompressionStream('gzip');
200    const writer = cs.writable.getWriter();
201    await writer.write(new Uint8Array(rawBuf));
202    await writer.close();
203    const compressed = await new Response(cs.readable).arrayBuffer();
204    if (!compressed || compressed.byteLength < 2) {
205      return { ok: false, reason: 'empty-output' };
206    }
207    // gzip magic 1F 8B
208    const u8 = new Uint8Array(compressed);
209    if (u8[0] !== 0x1f || u8[1] !== 0x8b) {
210      return { ok: false, reason: 'bad-magic' };
211    }
212    return { ok: true, buf: compressed };
213  } catch (e) {
214    return { ok: false, reason: 'err:' + (e && e.message ? String(e.message).slice(0, 80) : 'unknown') };
215  }
216}
217
218async function maybeGzip(request, response, uri, rawBuf, contentType) {
219  const accept = (request.headers.get('Accept-Encoding') || '').toLowerCase();
220  // EdgeOne 常会剥掉/改写传入边缘函数的 Accept-Encoding，导致误判 skip-client。
221  // 现代浏览器都支持 gzip：仅当明确只要 identity 时才跳过。
222  const identityOnly =
223    accept === 'identity' ||
224    (/identity/.test(accept) && !/gzip|\*|br/.test(accept));
225  if (identityOnly) {
226    const h = new Headers(response.headers);
227    h.set('X-EO-Compress', 'skip-identity');
228    return new Response(rawBuf, { status: response.status, headers: h });
229  }
230  if (!isCompressible(uri, contentType)) {
231    const h = new Headers(response.headers);
232    h.set('X-EO-Compress', 'skip-type');
233    return new Response(rawBuf, { status: response.status, headers: h });
234  }
235
236  const result = await compressGzip(rawBuf);
237  if (!result.ok) {
238    const h = new Headers(response.headers);
239    h.set('X-EO-Compress', result.reason || 'fail');
240    // 不设 Vary，尽量让 EO「智能压缩」有机会接管
241    return new Response(rawBuf, { status: response.status, headers: h });
242  }
243
244  const headers = new Headers(response.headers);
245  headers.set('Content-Encoding', 'gzip');
246  headers.set('Content-Length', String(result.buf.byteLength));
247  headers.set('Vary', 'Accept-Encoding');
248  headers.set(
249    'X-EO-Compress',
250    'gzip-ok;ae=' + (accept ? accept.slice(0, 40) : 'missing')
251  );
252  return new Response(result.buf, { status: response.status, headers });
253}
254
255// ==================== 站点维护模式 ====================
256// fail-open：状态接口失败/超时则照常提供站点，避免 Admin 故障锁死主站。
257
258let maintenanceMemoryCache = { at: 0, data: null };
259
260async function getMaintenanceStatus() {
261  const now = Date.now();
262  if (
263    maintenanceMemoryCache.data &&
264    now - maintenanceMemoryCache.at < MAINTENANCE_CACHE_TTL_MS
265  ) {
266    return maintenanceMemoryCache.data;
267  }
268
269  try {
270    if (typeof caches !== 'undefined' && caches.default) {
271      const cache = caches.default;
272      const cacheReq = new Request(MAINTENANCE_STATUS_URL, { method: 'GET' });
273      const cached = await cache.match(cacheReq);
274      if (cached) {
275        const data = await cached.json();
276        maintenanceMemoryCache = { at: now, data };
277        return data;
278      }
279    }
280  } catch (_) {
281    /* ignore cache read */
282  }
283
284  const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
285  const timer = controller
286    ? setTimeout(() => controller.abort(), MAINTENANCE_FETCH_TIMEOUT_MS)
287    : null;
288
289  try {
290    const resp = await fetch(MAINTENANCE_STATUS_URL, {
291      method: 'GET',
292      headers: { Accept: 'application/json', 'Cache-Control': 'no-cache' },
293      signal: controller ? controller.signal : undefined,
294    });
295    if (!resp.ok) return null;
296    const data = await resp.json();
297    maintenanceMemoryCache = { at: now, data };
298
299    try {
300      if (typeof caches !== 'undefined' && caches.default) {
301        const cache = caches.default;
302        const cacheResp = new Response(JSON.stringify(data), {
303          headers: {
304            'Content-Type': 'application/json',
305            'Cache-Control': 'max-age=5',
306          },
307        });
308        await cache.put(MAINTENANCE_STATUS_URL, cacheResp);
309      }
310    } catch (_) {
311      /* ignore cache write */
312    }
313
314    return data;
315  } catch (_) {
316    return null;
317  } finally {
318    if (timer) clearTimeout(timer);
319  }
320}
321
322function escapeHtml(str) {
323  return String(str || '')
324    .replace(/&/g, '&amp;')
325    .replace(/</g, '&lt;')
326    .replace(/>/g, '&gt;')
327    .replace(/"/g, '&quot;')
328    .replace(/'/g, '&#39;');
329}
330
331function buildMaintenanceHtml(status) {
332  const title = escapeHtml(status.title || '站点维护中');
333  const message = escapeHtml(status.message || '正在升级，马上回来。');
334  const until = status.until ? escapeHtml(status.until) : '';
335  const untilBlock = until
336    ? `<p class="until"><span>预计恢复</span><strong>${until}</strong></p>`
337    : '';
338
339  return `<!DOCTYPE html>
340<html lang="zh-CN">
341<head>
342  <meta charset="utf-8">
343  <meta name="viewport" content="width=device-width, initial-scale=1">
344  <meta name="robots" content="noindex">
345  <title>${title} · One Blog</title>
346  <link rel="preconnect" href="https://fonts.googleapis.com">
347  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
348  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
349  <style>
350    :root {
351      --ink: #1a2e2a;
352      --muted: #5a6f68;
353      --accent: #2f8f73;
354      --accent-soft: #7bc4a8;
355      --paper: #f6f3eb;
356      --glow: #d8efe4;
357    }
358    * { box-sizing: border-box; }
359    html, body { height: 100%; margin: 0; }
360    body {
361      min-height: 100%;
362      display: grid;
363      place-items: center;
364      padding: 28px 20px;
365      color: var(--ink);
366      font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
367      background:
368        radial-gradient(ellipse 80% 55% at 18% 12%, #dff3ea 0%, transparent 55%),
369        radial-gradient(ellipse 70% 50% at 88% 88%, #efe4c8 0%, transparent 50%),
370        radial-gradient(ellipse 50% 40% at 70% 20%, #cfe8de 0%, transparent 45%),
371        linear-gradient(165deg, #eef6f2 0%, var(--paper) 48%, #ebe4d6 100%);
372      overflow: hidden;
373      position: relative;
374    }
375    .blob {
376      position: absolute;
377      border-radius: 50%;
378      filter: blur(48px);
379      opacity: .55;
380      pointer-events: none;
381      animation: drift 14s ease-in-out infinite;
382    }
383    .blob-a {
384      width: 340px; height: 340px;
385      left: -80px; top: -40px;
386      background: #9fd9c2;
387    }
388    .blob-b {
389      width: 280px; height: 280px;
390      right: -60px; bottom: -30px;
391      background: #e8d5a3;
392      animation-delay: -5s;
393      animation-duration: 18s;
394    }
395    .blob-c {
396      width: 180px; height: 180px;
397      left: 42%; top: 62%;
398      background: #b7e0d2;
399      animation-delay: -9s;
400      animation-duration: 16s;
401    }
402    .grain {
403      position: absolute;
404      inset: 0;
405      pointer-events: none;
406      opacity: .04;
407      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
408    }
409    .stage {
410      position: relative;
411      z-index: 1;
412      width: min(520px, 100%);
413      text-align: center;
414      animation: enter .8s cubic-bezier(.22,1,.36,1) both;
415    }
416    .visual {
417      width: 168px;
418      height: 168px;
419      margin: 0 auto 28px;
420      position: relative;
421      animation: float 5.5s ease-in-out infinite;
422    }
423    .visual svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 28px rgba(47,143,115,.18)); }
424    .ring {
425      position: absolute;
426      inset: -10px;
427      border-radius: 50%;
428      border: 1.5px dashed rgba(47,143,115,.28);
429      animation: spin 28s linear infinite;
430    }
431    .brand {
432      font-family: Fraunces, "Noto Serif SC", Georgia, serif;
433      font-size: clamp(34px, 7vw, 48px);
434      font-weight: 700;
435      letter-spacing: -.02em;
436      line-height: 1;
437      margin: 0 0 8px;
438      color: var(--ink);
439    }
440    .brand em {
441      font-style: normal;
442      background: linear-gradient(120deg, var(--accent), #4aa888 45%, #c4a35a);
443      -webkit-background-clip: text;
444      background-clip: text;
445      color: transparent;
446    }
447    .domain {
448      margin: 0 0 28px;
449      font-size: 13px;
450      letter-spacing: .16em;
451      text-transform: uppercase;
452      color: var(--muted);
453      font-weight: 500;
454    }
455    h1 {
456      margin: 0 0 12px;
457      font-size: clamp(24px, 4.5vw, 32px);
458      font-weight: 700;
459      letter-spacing: .02em;
460    }
461    .message {
462      margin: 0 auto;
463      max-width: 34em;
464      font-size: 16px;
465      line-height: 1.75;
466      color: var(--muted);
467      white-space: pre-wrap;
468      font-weight: 400;
469    }
470    .progress {
471      width: min(220px, 70%);
472      height: 4px;
473      margin: 28px auto 0;
474      border-radius: 999px;
475      background: rgba(47,143,115,.12);
476      overflow: hidden;
477    }
478    .progress > i {
479      display: block;
480      height: 100%;
481      width: 42%;
482      border-radius: inherit;
483      background: linear-gradient(90deg, var(--accent-soft), var(--accent), #c4a35a);
484      animation: slide 2.4s ease-in-out infinite;
485    }
486    .until {
487      display: inline-flex;
488      align-items: center;
489      gap: 10px;
490      margin: 22px 0 0;
491      padding: 8px 14px;
492      border-radius: 999px;
493      background: rgba(255,255,255,.55);
494      border: 1px solid rgba(47,143,115,.16);
495      font-size: 13px;
496      color: var(--muted);
497      backdrop-filter: blur(8px);
498    }
499    .until span { opacity: .75; }
500    .until strong { color: var(--ink); font-weight: 600; }
501    .hint {
502      margin: 26px 0 0;
503      font-size: 12px;
504      color: rgba(90,111,104,.72);
505    }
506    @keyframes enter {
507      from { opacity: 0; transform: translateY(18px) scale(.98); }
508      to { opacity: 1; transform: none; }
509    }
510    @keyframes float {
511      0%, 100% { transform: translateY(0); }
512      50% { transform: translateY(-10px); }
513    }
514    @keyframes drift {
515      0%, 100% { transform: translate(0, 0) scale(1); }
516      50% { transform: translate(24px, -18px) scale(1.08); }
517    }
518    @keyframes spin { to { transform: rotate(360deg); } }
519    @keyframes slide {
520      0% { transform: translateX(-120%); }
521      100% { transform: translateX(280%); }
522    }
523    @media (prefers-reduced-motion: reduce) {
524      .blob, .visual, .ring, .progress > i, .stage { animation: none !important; }
525    }
526  </style>
527</head>
528<body>
529  <div class="blob blob-a" aria-hidden="true"></div>
530  <div class="blob blob-b" aria-hidden="true"></div>
531  <div class="blob blob-c" aria-hidden="true"></div>
532  <div class="grain" aria-hidden="true"></div>
533  <main class="stage">
534    <div class="visual" aria-hidden="true">
535      <div class="ring"></div>
536      <svg viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
537        <defs>
538          <linearGradient id="g1" x1="28" y1="24" x2="140" y2="148" gradientUnits="userSpaceOnUse">
539            <stop stop-color="#E8F7F1"/>
540            <stop offset="1" stop-color="#B7E0D2"/>
541          </linearGradient>
542          <linearGradient id="g2" x1="56" y1="62" x2="118" y2="118" gradientUnits="userSpaceOnUse">
543            <stop stop-color="#2F8F73"/>
544            <stop offset="1" stop-color="#C4A35A"/>
545          </linearGradient>
546        </defs>
547        <circle cx="84" cy="84" r="72" fill="url(#g1)"/>
548        <circle cx="84" cy="84" r="54" fill="#F8FBF9" fill-opacity=".72"/>
549        <path d="M58 92c8-18 22-28 36-28s28 10 36 28" stroke="url(#g2)" stroke-width="5" stroke-linecap="round"/>
550        <path d="M70 78c4-8 10-12 14-12s10 4 14 12" stroke="#2F8F73" stroke-width="4" stroke-linecap="round" opacity=".55"/>
551        <circle cx="84" cy="104" r="7" fill="#2F8F73"/>
552        <path d="M84 111v18" stroke="#2F8F73" stroke-width="4" stroke-linecap="round"/>
553        <path d="M74 126h20" stroke="#C4A35A" stroke-width="4" stroke-linecap="round"/>
554        <circle cx="118" cy="58" r="5" fill="#C4A35A" opacity=".8"/>
555        <circle cx="52" cy="64" r="3.5" fill="#2F8F73" opacity=".45"/>
556      </svg>
557    </div>
558    <p class="brand">One <em>Blog</em></p>
559    <p class="domain">onedayxyy.cn</p>
560    <h1>${title}</h1>
561    <p class="message">${message}</p>
562    <div class="progress" aria-hidden="true"><i></i></div>
563    ${untilBlock}
564    <p class="hint">若仍看到旧页面，请强制刷新或使用无痕窗口</p>
565  </main>
566</body>
567</html>`;
568}
569
570function buildMaintenanceResponse(status) {
571  const html = buildMaintenanceHtml(status);
572  return new Response(html, {
573    status: 503,
574    headers: {
575      'Content-Type': 'text/html; charset=utf-8',
576      'Cache-Control': 'no-store, no-cache, must-revalidate',
577      Pragma: 'no-cache',
578      'Retry-After': '300',
579      'X-OneBlog-Maintenance': '1',
580    },
581  });
582}

效果：

v2-优化样式

维护页已重做成更亮、更有氛围的版本，主要变化：

  • 浅色茶青氛围：雾青绿 + 暖纸色渐变，替代原先深色底
  • 品牌前置：大号 One Blog（Fraunces）作为视觉主信号
  • 插画锚点：中心 SVG 图标 + 虚线圆环慢旋、轻浮浮动
  • 动效：背景光斑漂移、入场动画、进度条扫光（尊重 prefers-reduced-motion）

文案仍走后台配置的标题 / 说明 / 预计恢复时间。

生效方式：把更新后的 edgeone/blog-cnb-origin.js 在 EdgeOne 控制台整文件覆盖并发布；不必重建 Hugo。需要的话我可以帮你提交推送。

blog-cnb-origin.js 内容：

  1/**
  2 * EdgeOne 边缘函数：从 CNB 公开产物库拉取静态站
  3 *
  4 * 用法：复制到腾讯云 EdgeOne 控制台 → 站点 → 边缘函数（整文件覆盖）
  5 *
  6 * 相对旧版改进：
  7 * 1. HTML/CSS/JS 等文本资源做 gzip（缓冲后再压，避免流式 CompressionStream 在 EO 静默失败）
  8 * 2. 指纹静态资源长缓存；HTML 短缓存
  9 * 3. 响应头 X-EO-Compress 便于确认压缩是否生效
 10 * 4. 找不到页面时回退到产物库中的 404.html（Hugo 自定义 404）
 11 * 5. 维护模式：轮询 Admin 公开状态；开启时对所有请求返回 503 维护页
 12 */
 13addEventListener('fetch', (event) => {
 14  event.respondWith(handleRequest(event.request));
 15});
 16
 17const BASE = 'https://cnb.cool/onedayxyy/hugo-teek-public-dist/-/git/raw/dist';
 18const MAINTENANCE_STATUS_URL = 'https://oneblogadmin.onedayxyy.cn/api/maintenance-status';
 19const MAINTENANCE_CACHE_TTL_MS = 5000;
 20const MAINTENANCE_FETCH_TIMEOUT_MS = 2500;
 21
 22async function handleRequest(request) {
 23  const maintenance = await getMaintenanceStatus();
 24  if (maintenance && maintenance.enabled) {
 25    return buildMaintenanceResponse(maintenance);
 26  }
 27
 28  const url = new URL(request.url);
 29  let pathname = url.pathname;
 30
 31  if (pathname !== '/' && !pathname.endsWith('/') && !isFile(pathname)) {
 32    const redirectUrl = new URL(request.url);
 33    redirectUrl.pathname = pathname + '/';
 34    return Response.redirect(redirectUrl.toString(), 301);
 35  }
 36
 37  let uri = pathname;
 38  if (uri.startsWith('/')) uri = uri.slice(1);
 39  if (!uri || uri === '') uri = 'index.html';
 40  if (uri.endsWith('/')) uri = uri + 'index.html';
 41
 42  let target = `${BASE}/${uri}`;
 43  let resp = await fetchOrigin(target);
 44
 45  if (!resp.ok && !isFile(uri)) {
 46    const indexUri = uri.endsWith('/') ? uri + 'index.html' : uri + '/index.html';
 47    target = `${BASE}/${indexUri}`;
 48    resp = await fetchOrigin(target);
 49    if (resp.ok) uri = indexUri;
 50  }
 51
 52  if (!resp.ok || !resp.body) {
 53    // 回退到 Hugo 构建的自定义 404 页，避免纯文本 "Page Not Found"
 54    const notFound = await fetchOrigin(`${BASE}/404.html`);
 55    if (notFound.ok && notFound.body) {
 56      const rawBuf = await notFound.arrayBuffer();
 57      const contentType = 'text/html; charset=utf-8';
 58      const headers = new Headers();
 59      headers.set('Content-Type', contentType);
 60      headers.set('Cache-Control', 'public, max-age=60, must-revalidate');
 61      headers.set('Content-Length', String(rawBuf.byteLength));
 62      const uncompressed = new Response(rawBuf, {
 63        status: 404,
 64        headers,
 65      });
 66      return maybeGzip(request, uncompressed, '404.html', rawBuf, contentType);
 67    }
 68
 69    return new Response('Page Not Found', {
 70      status: 404,
 71      headers: { 'Content-Type': 'text/html; charset=utf-8' },
 72    });
 73  }
 74
 75  const contentType =
 76    getContentType(uri) || resp.headers.get('content-type') || 'text/html; charset=utf-8';
 77
 78  // 大体积 CSS/JS（如 main.css ~1MB）若整包 arrayBuffer + gzip，EO 易直接 545。
 79  // 指纹静态资源改为直通，交给平台智能压缩。
 80  const originLen = Number(resp.headers.get('content-length') || 0);
 81  if (shouldPassthrough(uri, contentType, originLen)) {
 82    const headers = new Headers();
 83    headers.set('Content-Type', contentType);
 84    headers.set('Cache-Control', cacheControlFor(uri));
 85    if (originLen > 0) headers.set('Content-Length', String(originLen));
 86    headers.set('X-EO-Compress', 'passthrough');
 87    return new Response(resp.body, { status: resp.status, headers });
 88  }
 89
 90  // 先读入缓冲：EO 上对流式 pipeThrough(CompressionStream) 经常不生效
 91  let rawBuf;
 92  try {
 93    rawBuf = await resp.arrayBuffer();
 94  } catch (e) {
 95    const headers = new Headers();
 96    headers.set('Content-Type', contentType);
 97    headers.set('Cache-Control', cacheControlFor(uri));
 98    headers.set('X-EO-Compress', 'passthrough-read-fail');
 99    const retry = await fetchOrigin(target);
100    return new Response(retry.body, { status: retry.status, headers });
101  }
102
103  // 读完后发现超大：不再 gzip，避免边缘函数 OOM/545
104  if (rawBuf.byteLength > PASS_THROUGH_MAX_BYTES) {
105    const headers = new Headers();
106    headers.set('Content-Type', contentType);
107    headers.set('Cache-Control', cacheControlFor(uri));
108    headers.set('Content-Length', String(rawBuf.byteLength));
109    headers.set('X-EO-Compress', 'skip-large');
110    return new Response(rawBuf, { status: resp.status, headers });
111  }
112
113  const headers = new Headers();
114  headers.set('Content-Type', contentType);
115  headers.set('Cache-Control', cacheControlFor(uri));
116  headers.set('Content-Length', String(rawBuf.byteLength));
117
118  const uncompressed = new Response(rawBuf, {
119    status: resp.status,
120    headers,
121  });
122
123  return maybeGzip(request, uncompressed, uri, rawBuf, contentType);
124}
125
126/** 超过该体积不再做边缘 gzip 缓冲（main.css 约 1MB） */
127const PASS_THROUGH_MAX_BYTES = 400 * 1024;
128
129function shouldPassthrough(uri, contentType, contentLength) {
130  if (contentLength > PASS_THROUGH_MAX_BYTES) return true;
131  // 指纹 CSS/JS 体积常偏大，优先直通
132  if (/\.min\.[a-f0-9]{8,}\.(?:css|js)(?:$|\?)/i.test(uri)) {
133    if (contentLength === 0) return true; // 未知长度时也不冒险缓冲
134    if (contentLength > 200 * 1024) return true;
135  }
136  return false;
137}
138
139function fetchOrigin(target) {
140  return fetch(target, {
141    headers: {
142      'User-Agent': 'curl/8.0.0',
143      Accept: '*/*',
144      'Accept-Encoding': 'identity',
145    },
146  });
147}
148
149function isFile(path) {
150  return /\.[^/]+$/.test(path);
151}
152
153function getContentType(uri) {
154  const map = {
155    html: 'text/html; charset=utf-8',
156    css: 'text/css; charset=utf-8',
157    js: 'application/javascript; charset=utf-8',
158    mjs: 'application/javascript; charset=utf-8',
159    json: 'application/json; charset=utf-8',
160    png: 'image/png',
161    jpg: 'image/jpeg',
162    jpeg: 'image/jpeg',
163    gif: 'image/gif',
164    svg: 'image/svg+xml',
165    webp: 'image/webp',
166    avif: 'image/avif',
167    ico: 'image/x-icon',
168    woff: 'font/woff',
169    woff2: 'font/woff2',
170    txt: 'text/plain; charset=utf-8',
171    xml: 'application/xml; charset=utf-8',
172    map: 'application/json',
173  };
174  if (!isFile(uri)) return 'text/html; charset=utf-8';
175  const ext = uri.split('.').pop().toLowerCase();
176  return map[ext];
177}
178
179function cacheControlFor(uri) {
180  if (/\.(?:css|js|mjs|woff2?|png|jpe?g|gif|webp|avif|svg|ico)(?:$|\?)/i.test(uri)) {
181    return 'public, max-age=31536000, immutable';
182  }
183  return 'public, max-age=60, must-revalidate';
184}
185
186function isCompressible(uri, contentType) {
187  if (/\.(?:png|jpe?g|gif|webp|avif|woff2?|mp4|webm|gz|br)(?:$|\?)/i.test(uri)) {
188    return false;
189  }
190  const type = contentType || '';
191  return /text\/|javascript|json|xml|svg/.test(type);
192}
193
194async function compressGzip(rawBuf) {
195  if (typeof CompressionStream === 'undefined') {
196    return { ok: false, reason: 'no-compression-stream' };
197  }
198  try {
199    const cs = new CompressionStream('gzip');
200    const writer = cs.writable.getWriter();
201    await writer.write(new Uint8Array(rawBuf));
202    await writer.close();
203    const compressed = await new Response(cs.readable).arrayBuffer();
204    if (!compressed || compressed.byteLength < 2) {
205      return { ok: false, reason: 'empty-output' };
206    }
207    // gzip magic 1F 8B
208    const u8 = new Uint8Array(compressed);
209    if (u8[0] !== 0x1f || u8[1] !== 0x8b) {
210      return { ok: false, reason: 'bad-magic' };
211    }
212    return { ok: true, buf: compressed };
213  } catch (e) {
214    return { ok: false, reason: 'err:' + (e && e.message ? String(e.message).slice(0, 80) : 'unknown') };
215  }
216}
217
218async function maybeGzip(request, response, uri, rawBuf, contentType) {
219  const accept = (request.headers.get('Accept-Encoding') || '').toLowerCase();
220  // EdgeOne 常会剥掉/改写传入边缘函数的 Accept-Encoding，导致误判 skip-client。
221  // 现代浏览器都支持 gzip：仅当明确只要 identity 时才跳过。
222  const identityOnly =
223    accept === 'identity' ||
224    (/identity/.test(accept) && !/gzip|\*|br/.test(accept));
225  if (identityOnly) {
226    const h = new Headers(response.headers);
227    h.set('X-EO-Compress', 'skip-identity');
228    return new Response(rawBuf, { status: response.status, headers: h });
229  }
230  if (!isCompressible(uri, contentType)) {
231    const h = new Headers(response.headers);
232    h.set('X-EO-Compress', 'skip-type');
233    return new Response(rawBuf, { status: response.status, headers: h });
234  }
235
236  const result = await compressGzip(rawBuf);
237  if (!result.ok) {
238    const h = new Headers(response.headers);
239    h.set('X-EO-Compress', result.reason || 'fail');
240    // 不设 Vary，尽量让 EO「智能压缩」有机会接管
241    return new Response(rawBuf, { status: response.status, headers: h });
242  }
243
244  const headers = new Headers(response.headers);
245  headers.set('Content-Encoding', 'gzip');
246  headers.set('Content-Length', String(result.buf.byteLength));
247  headers.set('Vary', 'Accept-Encoding');
248  headers.set(
249    'X-EO-Compress',
250    'gzip-ok;ae=' + (accept ? accept.slice(0, 40) : 'missing')
251  );
252  return new Response(result.buf, { status: response.status, headers });
253}
254
255// ==================== 站点维护模式 ====================
256// fail-open：状态接口失败/超时则照常提供站点，避免 Admin 故障锁死主站。
257
258let maintenanceMemoryCache = { at: 0, data: null };
259
260async function getMaintenanceStatus() {
261  const now = Date.now();
262  if (
263    maintenanceMemoryCache.data &&
264    now - maintenanceMemoryCache.at < MAINTENANCE_CACHE_TTL_MS
265  ) {
266    return maintenanceMemoryCache.data;
267  }
268
269  try {
270    if (typeof caches !== 'undefined' && caches.default) {
271      const cache = caches.default;
272      const cacheReq = new Request(MAINTENANCE_STATUS_URL, { method: 'GET' });
273      const cached = await cache.match(cacheReq);
274      if (cached) {
275        const data = await cached.json();
276        maintenanceMemoryCache = { at: now, data };
277        return data;
278      }
279    }
280  } catch (_) {
281    /* ignore cache read */
282  }
283
284  const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
285  const timer = controller
286    ? setTimeout(() => controller.abort(), MAINTENANCE_FETCH_TIMEOUT_MS)
287    : null;
288
289  try {
290    const resp = await fetch(MAINTENANCE_STATUS_URL, {
291      method: 'GET',
292      headers: { Accept: 'application/json', 'Cache-Control': 'no-cache' },
293      signal: controller ? controller.signal : undefined,
294    });
295    if (!resp.ok) return null;
296    const data = await resp.json();
297    maintenanceMemoryCache = { at: now, data };
298
299    try {
300      if (typeof caches !== 'undefined' && caches.default) {
301        const cache = caches.default;
302        const cacheResp = new Response(JSON.stringify(data), {
303          headers: {
304            'Content-Type': 'application/json',
305            'Cache-Control': 'max-age=5',
306          },
307        });
308        await cache.put(MAINTENANCE_STATUS_URL, cacheResp);
309      }
310    } catch (_) {
311      /* ignore cache write */
312    }
313
314    return data;
315  } catch (_) {
316    return null;
317  } finally {
318    if (timer) clearTimeout(timer);
319  }
320}
321
322function escapeHtml(str) {
323  return String(str || '')
324    .replace(/&/g, '&amp;')
325    .replace(/</g, '&lt;')
326    .replace(/>/g, '&gt;')
327    .replace(/"/g, '&quot;')
328    .replace(/'/g, '&#39;');
329}
330
331function buildMaintenanceHtml(status) {
332  const title = escapeHtml(status.title || '站点维护中');
333  const message = escapeHtml(status.message || '正在升级，马上回来。');
334  const until = status.until ? escapeHtml(status.until) : '';
335  const untilBlock = until
336    ? `<p class="until"><span>预计恢复</span><strong>${until}</strong></p>`
337    : '';
338
339  return `<!DOCTYPE html>
340<html lang="zh-CN">
341<head>
342  <meta charset="utf-8">
343  <meta name="viewport" content="width=device-width, initial-scale=1">
344  <meta name="robots" content="noindex">
345  <title>${title} · One Blog</title>
346  <link rel="preconnect" href="https://fonts.googleapis.com">
347  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
348  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
349  <style>
350    :root {
351      --ink: #1a2e2a;
352      --muted: #5a6f68;
353      --accent: #2f8f73;
354      --accent-soft: #7bc4a8;
355      --paper: #f6f3eb;
356      --glow: #d8efe4;
357    }
358    * { box-sizing: border-box; }
359    html, body { height: 100%; margin: 0; }
360    body {
361      min-height: 100%;
362      display: grid;
363      place-items: center;
364      padding: 28px 20px;
365      color: var(--ink);
366      font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
367      background:
368        radial-gradient(ellipse 80% 55% at 18% 12%, #dff3ea 0%, transparent 55%),
369        radial-gradient(ellipse 70% 50% at 88% 88%, #efe4c8 0%, transparent 50%),
370        radial-gradient(ellipse 50% 40% at 70% 20%, #cfe8de 0%, transparent 45%),
371        linear-gradient(165deg, #eef6f2 0%, var(--paper) 48%, #ebe4d6 100%);
372      overflow: hidden;
373      position: relative;
374    }
375    .blob {
376      position: absolute;
377      border-radius: 50%;
378      filter: blur(48px);
379      opacity: .55;
380      pointer-events: none;
381      animation: drift 14s ease-in-out infinite;
382    }
383    .blob-a {
384      width: 340px; height: 340px;
385      left: -80px; top: -40px;
386      background: #9fd9c2;
387    }
388    .blob-b {
389      width: 280px; height: 280px;
390      right: -60px; bottom: -30px;
391      background: #e8d5a3;
392      animation-delay: -5s;
393      animation-duration: 18s;
394    }
395    .blob-c {
396      width: 180px; height: 180px;
397      left: 42%; top: 62%;
398      background: #b7e0d2;
399      animation-delay: -9s;
400      animation-duration: 16s;
401    }
402    .grain {
403      position: absolute;
404      inset: 0;
405      pointer-events: none;
406      opacity: .04;
407      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
408    }
409    .stage {
410      position: relative;
411      z-index: 1;
412      width: min(520px, 100%);
413      text-align: center;
414      animation: enter .8s cubic-bezier(.22,1,.36,1) both;
415    }
416    .visual {
417      width: 168px;
418      height: 168px;
419      margin: 0 auto 28px;
420      position: relative;
421      animation: float 5.5s ease-in-out infinite;
422    }
423    .visual svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 28px rgba(47,143,115,.18)); }
424    .ring {
425      position: absolute;
426      inset: -10px;
427      border-radius: 50%;
428      border: 1.5px dashed rgba(47,143,115,.28);
429      animation: spin 28s linear infinite;
430    }
431    .brand {
432      font-family: Fraunces, "Noto Serif SC", Georgia, serif;
433      font-size: clamp(34px, 7vw, 48px);
434      font-weight: 700;
435      letter-spacing: -.02em;
436      line-height: 1;
437      margin: 0 0 8px;
438      color: var(--ink);
439    }
440    .brand em {
441      font-style: normal;
442      background: linear-gradient(120deg, var(--accent), #4aa888 45%, #c4a35a);
443      -webkit-background-clip: text;
444      background-clip: text;
445      color: transparent;
446    }
447    .domain {
448      margin: 0 0 28px;
449      font-size: 13px;
450      letter-spacing: .16em;
451      text-transform: uppercase;
452      color: var(--muted);
453      font-weight: 500;
454    }
455    h1 {
456      margin: 0 0 12px;
457      font-size: clamp(24px, 4.5vw, 32px);
458      font-weight: 700;
459      letter-spacing: .02em;
460    }
461    .message {
462      margin: 0 auto;
463      max-width: 34em;
464      font-size: 16px;
465      line-height: 1.75;
466      color: var(--muted);
467      white-space: pre-wrap;
468      font-weight: 400;
469    }
470    .progress {
471      width: min(220px, 70%);
472      height: 4px;
473      margin: 28px auto 0;
474      border-radius: 999px;
475      background: rgba(47,143,115,.12);
476      overflow: hidden;
477    }
478    .progress > i {
479      display: block;
480      height: 100%;
481      width: 42%;
482      border-radius: inherit;
483      background: linear-gradient(90deg, var(--accent-soft), var(--accent), #c4a35a);
484      animation: slide 2.4s ease-in-out infinite;
485    }
486    .until {
487      display: inline-flex;
488      align-items: center;
489      gap: 10px;
490      margin: 22px 0 0;
491      padding: 8px 14px;
492      border-radius: 999px;
493      background: rgba(255,255,255,.55);
494      border: 1px solid rgba(47,143,115,.16);
495      font-size: 13px;
496      color: var(--muted);
497      backdrop-filter: blur(8px);
498    }
499    .until span { opacity: .75; }
500    .until strong { color: var(--ink); font-weight: 600; }
501    .hint {
502      margin: 26px 0 0;
503      font-size: 12px;
504      color: rgba(90,111,104,.72);
505    }
506    @keyframes enter {
507      from { opacity: 0; transform: translateY(18px) scale(.98); }
508      to { opacity: 1; transform: none; }
509    }
510    @keyframes float {
511      0%, 100% { transform: translateY(0); }
512      50% { transform: translateY(-10px); }
513    }
514    @keyframes drift {
515      0%, 100% { transform: translate(0, 0) scale(1); }
516      50% { transform: translate(24px, -18px) scale(1.08); }
517    }
518    @keyframes spin { to { transform: rotate(360deg); } }
519    @keyframes slide {
520      0% { transform: translateX(-120%); }
521      100% { transform: translateX(280%); }
522    }
523    @media (prefers-reduced-motion: reduce) {
524      .blob, .visual, .ring, .progress > i, .stage { animation: none !important; }
525    }
526  </style>
527</head>
528<body>
529  <div class="blob blob-a" aria-hidden="true"></div>
530  <div class="blob blob-b" aria-hidden="true"></div>
531  <div class="blob blob-c" aria-hidden="true"></div>
532  <div class="grain" aria-hidden="true"></div>
533  <main class="stage">
534    <div class="visual" aria-hidden="true">
535      <div class="ring"></div>
536      <svg viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
537        <defs>
538          <linearGradient id="g1" x1="28" y1="24" x2="140" y2="148" gradientUnits="userSpaceOnUse">
539            <stop stop-color="#E8F7F1"/>
540            <stop offset="1" stop-color="#B7E0D2"/>
541          </linearGradient>
542          <linearGradient id="g2" x1="56" y1="62" x2="118" y2="118" gradientUnits="userSpaceOnUse">
543            <stop stop-color="#2F8F73"/>
544            <stop offset="1" stop-color="#C4A35A"/>
545          </linearGradient>
546        </defs>
547        <circle cx="84" cy="84" r="72" fill="url(#g1)"/>
548        <circle cx="84" cy="84" r="54" fill="#F8FBF9" fill-opacity=".72"/>
549        <path d="M58 92c8-18 22-28 36-28s28 10 36 28" stroke="url(#g2)" stroke-width="5" stroke-linecap="round"/>
550        <path d="M70 78c4-8 10-12 14-12s10 4 14 12" stroke="#2F8F73" stroke-width="4" stroke-linecap="round" opacity=".55"/>
551        <circle cx="84" cy="104" r="7" fill="#2F8F73"/>
552        <path d="M84 111v18" stroke="#2F8F73" stroke-width="4" stroke-linecap="round"/>
553        <path d="M74 126h20" stroke="#C4A35A" stroke-width="4" stroke-linecap="round"/>
554        <circle cx="118" cy="58" r="5" fill="#C4A35A" opacity=".8"/>
555        <circle cx="52" cy="64" r="3.5" fill="#2F8F73" opacity=".45"/>
556      </svg>
557    </div>
558    <p class="brand">One <em>Blog</em></p>
559    <p class="domain">onedayxyy.cn</p>
560    <h1>${title}</h1>
561    <p class="message">${message}</p>
562    <div class="progress" aria-hidden="true"><i></i></div>
563    ${untilBlock}
564    <p class="hint">若仍看到旧页面，请强制刷新或使用无痕窗口</p>
565  </main>
566</body>
567</html>`;
568}
569
570function buildMaintenanceResponse(status) {
571  const html = buildMaintenanceHtml(status);
572  return new Response(html, {
573    status: 503,
574    headers: {
575      'Content-Type': 'text/html; charset=utf-8',
576      'Cache-Control': 'no-store, no-cache, must-revalidate',
577      Pragma: 'no-cache',
578      'Retry-After': '300',
579      'X-OneBlog-Maintenance': '1',
580    },
581  });
582}

效果：

v3-标签页logo图片更新

问题：

这里的标签页自己logo图片怎么没得？

回答：

因为维护模式把所有请求都拦成了维护 HTML，浏览器去拉 /favicon.ico 时拿到的也是网页，不是图标；维护页里原先也没写 <link rel="icon">。

已修好两处：

  1. 维护页 head 加上与主站一致的头像 CDN 图标
  2. 维护开启时仍放行 /favicon.ico 等路径

请把更新后的 edgeone/blog-cnb-origin.js 在 EdgeOne 覆盖发布；发布后强制刷新标签页即可看到 logo。

edgeone/blog-cnb-origin.js内容：

  1/**
  2 * EdgeOne 边缘函数：从 CNB 公开产物库拉取静态站
  3 *
  4 * 用法：复制到腾讯云 EdgeOne 控制台 → 站点 → 边缘函数（整文件覆盖）
  5 *
  6 * 相对旧版改进：
  7 * 1. HTML/CSS/JS 等文本资源做 gzip（缓冲后再压，避免流式 CompressionStream 在 EO 静默失败）
  8 * 2. 指纹静态资源长缓存；HTML 短缓存
  9 * 3. 响应头 X-EO-Compress 便于确认压缩是否生效
 10 * 4. 找不到页面时回退到产物库中的 404.html（Hugo 自定义 404）
 11 * 5. 维护模式：轮询 Admin 公开状态；开启时对所有请求返回 503 维护页
 12 */
 13addEventListener('fetch', (event) => {
 14  event.respondWith(handleRequest(event.request));
 15});
 16
 17const BASE = 'https://cnb.cool/onedayxyy/hugo-teek-public-dist/-/git/raw/dist';
 18const MAINTENANCE_STATUS_URL = 'https://oneblogadmin.onedayxyy.cn/api/maintenance-status';
 19const MAINTENANCE_CACHE_TTL_MS = 5000;
 20const MAINTENANCE_FETCH_TIMEOUT_MS = 2500;
 21
 22async function handleRequest(request) {
 23  const url = new URL(request.url);
 24  let pathname = url.pathname;
 25
 26  const maintenance = await getMaintenanceStatus();
 27  // 维护模式下仍放行站点图标，避免标签页变成空白文档图标
 28  if (maintenance && maintenance.enabled && !isFaviconPath(pathname)) {
 29    return buildMaintenanceResponse(maintenance);
 30  }
 31
 32  if (pathname !== '/' && !pathname.endsWith('/') && !isFile(pathname)) {
 33    const redirectUrl = new URL(request.url);
 34    redirectUrl.pathname = pathname + '/';
 35    return Response.redirect(redirectUrl.toString(), 301);
 36  }
 37
 38  let uri = pathname;
 39  if (uri.startsWith('/')) uri = uri.slice(1);
 40  if (!uri || uri === '') uri = 'index.html';
 41  if (uri.endsWith('/')) uri = uri + 'index.html';
 42
 43  let target = `${BASE}/${uri}`;
 44  let resp = await fetchOrigin(target);
 45
 46  if (!resp.ok && !isFile(uri)) {
 47    const indexUri = uri.endsWith('/') ? uri + 'index.html' : uri + '/index.html';
 48    target = `${BASE}/${indexUri}`;
 49    resp = await fetchOrigin(target);
 50    if (resp.ok) uri = indexUri;
 51  }
 52
 53  if (!resp.ok || !resp.body) {
 54    // 回退到 Hugo 构建的自定义 404 页，避免纯文本 "Page Not Found"
 55    const notFound = await fetchOrigin(`${BASE}/404.html`);
 56    if (notFound.ok && notFound.body) {
 57      const rawBuf = await notFound.arrayBuffer();
 58      const contentType = 'text/html; charset=utf-8';
 59      const headers = new Headers();
 60      headers.set('Content-Type', contentType);
 61      headers.set('Cache-Control', 'public, max-age=60, must-revalidate');
 62      headers.set('Content-Length', String(rawBuf.byteLength));
 63      const uncompressed = new Response(rawBuf, {
 64        status: 404,
 65        headers,
 66      });
 67      return maybeGzip(request, uncompressed, '404.html', rawBuf, contentType);
 68    }
 69
 70    return new Response('Page Not Found', {
 71      status: 404,
 72      headers: { 'Content-Type': 'text/html; charset=utf-8' },
 73    });
 74  }
 75
 76  const contentType =
 77    getContentType(uri) || resp.headers.get('content-type') || 'text/html; charset=utf-8';
 78
 79  // 大体积 CSS/JS（如 main.css ~1MB）若整包 arrayBuffer + gzip，EO 易直接 545。
 80  // 指纹静态资源改为直通，交给平台智能压缩。
 81  const originLen = Number(resp.headers.get('content-length') || 0);
 82  if (shouldPassthrough(uri, contentType, originLen)) {
 83    const headers = new Headers();
 84    headers.set('Content-Type', contentType);
 85    headers.set('Cache-Control', cacheControlFor(uri));
 86    if (originLen > 0) headers.set('Content-Length', String(originLen));
 87    headers.set('X-EO-Compress', 'passthrough');
 88    return new Response(resp.body, { status: resp.status, headers });
 89  }
 90
 91  // 先读入缓冲：EO 上对流式 pipeThrough(CompressionStream) 经常不生效
 92  let rawBuf;
 93  try {
 94    rawBuf = await resp.arrayBuffer();
 95  } catch (e) {
 96    const headers = new Headers();
 97    headers.set('Content-Type', contentType);
 98    headers.set('Cache-Control', cacheControlFor(uri));
 99    headers.set('X-EO-Compress', 'passthrough-read-fail');
100    const retry = await fetchOrigin(target);
101    return new Response(retry.body, { status: retry.status, headers });
102  }
103
104  // 读完后发现超大：不再 gzip，避免边缘函数 OOM/545
105  if (rawBuf.byteLength > PASS_THROUGH_MAX_BYTES) {
106    const headers = new Headers();
107    headers.set('Content-Type', contentType);
108    headers.set('Cache-Control', cacheControlFor(uri));
109    headers.set('Content-Length', String(rawBuf.byteLength));
110    headers.set('X-EO-Compress', 'skip-large');
111    return new Response(rawBuf, { status: resp.status, headers });
112  }
113
114  const headers = new Headers();
115  headers.set('Content-Type', contentType);
116  headers.set('Cache-Control', cacheControlFor(uri));
117  headers.set('Content-Length', String(rawBuf.byteLength));
118
119  const uncompressed = new Response(rawBuf, {
120    status: resp.status,
121    headers,
122  });
123
124  return maybeGzip(request, uncompressed, uri, rawBuf, contentType);
125}
126
127/** 超过该体积不再做边缘 gzip 缓冲（main.css 约 1MB） */
128const PASS_THROUGH_MAX_BYTES = 400 * 1024;
129
130function shouldPassthrough(uri, contentType, contentLength) {
131  if (contentLength > PASS_THROUGH_MAX_BYTES) return true;
132  // 指纹 CSS/JS 体积常偏大，优先直通
133  if (/\.min\.[a-f0-9]{8,}\.(?:css|js)(?:$|\?)/i.test(uri)) {
134    if (contentLength === 0) return true; // 未知长度时也不冒险缓冲
135    if (contentLength > 200 * 1024) return true;
136  }
137  return false;
138}
139
140function fetchOrigin(target) {
141  return fetch(target, {
142    headers: {
143      'User-Agent': 'curl/8.0.0',
144      Accept: '*/*',
145      'Accept-Encoding': 'identity',
146    },
147  });
148}
149
150function isFile(path) {
151  return /\.[^/]+$/.test(path);
152}
153
154function isFaviconPath(pathname) {
155  const p = String(pathname || '').toLowerCase();
156  return (
157    p === '/favicon.ico' ||
158    p === '/favicon.png' ||
159    p === '/favicon.svg' ||
160    p === '/apple-touch-icon.png' ||
161    p === '/apple-touch-icon-precomposed.png' ||
162    p.endsWith('/favicon.ico')
163  );
164}
165
166function getContentType(uri) {
167  const map = {
168    html: 'text/html; charset=utf-8',
169    css: 'text/css; charset=utf-8',
170    js: 'application/javascript; charset=utf-8',
171    mjs: 'application/javascript; charset=utf-8',
172    json: 'application/json; charset=utf-8',
173    png: 'image/png',
174    jpg: 'image/jpeg',
175    jpeg: 'image/jpeg',
176    gif: 'image/gif',
177    svg: 'image/svg+xml',
178    webp: 'image/webp',
179    avif: 'image/avif',
180    ico: 'image/x-icon',
181    woff: 'font/woff',
182    woff2: 'font/woff2',
183    txt: 'text/plain; charset=utf-8',
184    xml: 'application/xml; charset=utf-8',
185    map: 'application/json',
186  };
187  if (!isFile(uri)) return 'text/html; charset=utf-8';
188  const ext = uri.split('.').pop().toLowerCase();
189  return map[ext];
190}
191
192function cacheControlFor(uri) {
193  if (/\.(?:css|js|mjs|woff2?|png|jpe?g|gif|webp|avif|svg|ico)(?:$|\?)/i.test(uri)) {
194    return 'public, max-age=31536000, immutable';
195  }
196  return 'public, max-age=60, must-revalidate';
197}
198
199function isCompressible(uri, contentType) {
200  if (/\.(?:png|jpe?g|gif|webp|avif|woff2?|mp4|webm|gz|br)(?:$|\?)/i.test(uri)) {
201    return false;
202  }
203  const type = contentType || '';
204  return /text\/|javascript|json|xml|svg/.test(type);
205}
206
207async function compressGzip(rawBuf) {
208  if (typeof CompressionStream === 'undefined') {
209    return { ok: false, reason: 'no-compression-stream' };
210  }
211  try {
212    const cs = new CompressionStream('gzip');
213    const writer = cs.writable.getWriter();
214    await writer.write(new Uint8Array(rawBuf));
215    await writer.close();
216    const compressed = await new Response(cs.readable).arrayBuffer();
217    if (!compressed || compressed.byteLength < 2) {
218      return { ok: false, reason: 'empty-output' };
219    }
220    // gzip magic 1F 8B
221    const u8 = new Uint8Array(compressed);
222    if (u8[0] !== 0x1f || u8[1] !== 0x8b) {
223      return { ok: false, reason: 'bad-magic' };
224    }
225    return { ok: true, buf: compressed };
226  } catch (e) {
227    return { ok: false, reason: 'err:' + (e && e.message ? String(e.message).slice(0, 80) : 'unknown') };
228  }
229}
230
231async function maybeGzip(request, response, uri, rawBuf, contentType) {
232  const accept = (request.headers.get('Accept-Encoding') || '').toLowerCase();
233  // EdgeOne 常会剥掉/改写传入边缘函数的 Accept-Encoding，导致误判 skip-client。
234  // 现代浏览器都支持 gzip：仅当明确只要 identity 时才跳过。
235  const identityOnly =
236    accept === 'identity' ||
237    (/identity/.test(accept) && !/gzip|\*|br/.test(accept));
238  if (identityOnly) {
239    const h = new Headers(response.headers);
240    h.set('X-EO-Compress', 'skip-identity');
241    return new Response(rawBuf, { status: response.status, headers: h });
242  }
243  if (!isCompressible(uri, contentType)) {
244    const h = new Headers(response.headers);
245    h.set('X-EO-Compress', 'skip-type');
246    return new Response(rawBuf, { status: response.status, headers: h });
247  }
248
249  const result = await compressGzip(rawBuf);
250  if (!result.ok) {
251    const h = new Headers(response.headers);
252    h.set('X-EO-Compress', result.reason || 'fail');
253    // 不设 Vary，尽量让 EO「智能压缩」有机会接管
254    return new Response(rawBuf, { status: response.status, headers: h });
255  }
256
257  const headers = new Headers(response.headers);
258  headers.set('Content-Encoding', 'gzip');
259  headers.set('Content-Length', String(result.buf.byteLength));
260  headers.set('Vary', 'Accept-Encoding');
261  headers.set(
262    'X-EO-Compress',
263    'gzip-ok;ae=' + (accept ? accept.slice(0, 40) : 'missing')
264  );
265  return new Response(result.buf, { status: response.status, headers });
266}
267
268// ==================== 站点维护模式 ====================
269// fail-open：状态接口失败/超时则照常提供站点，避免 Admin 故障锁死主站。
270
271let maintenanceMemoryCache = { at: 0, data: null };
272
273async function getMaintenanceStatus() {
274  const now = Date.now();
275  if (
276    maintenanceMemoryCache.data &&
277    now - maintenanceMemoryCache.at < MAINTENANCE_CACHE_TTL_MS
278  ) {
279    return maintenanceMemoryCache.data;
280  }
281
282  try {
283    if (typeof caches !== 'undefined' && caches.default) {
284      const cache = caches.default;
285      const cacheReq = new Request(MAINTENANCE_STATUS_URL, { method: 'GET' });
286      const cached = await cache.match(cacheReq);
287      if (cached) {
288        const data = await cached.json();
289        maintenanceMemoryCache = { at: now, data };
290        return data;
291      }
292    }
293  } catch (_) {
294    /* ignore cache read */
295  }
296
297  const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
298  const timer = controller
299    ? setTimeout(() => controller.abort(), MAINTENANCE_FETCH_TIMEOUT_MS)
300    : null;
301
302  try {
303    const resp = await fetch(MAINTENANCE_STATUS_URL, {
304      method: 'GET',
305      headers: { Accept: 'application/json', 'Cache-Control': 'no-cache' },
306      signal: controller ? controller.signal : undefined,
307    });
308    if (!resp.ok) return null;
309    const data = await resp.json();
310    maintenanceMemoryCache = { at: now, data };
311
312    try {
313      if (typeof caches !== 'undefined' && caches.default) {
314        const cache = caches.default;
315        const cacheResp = new Response(JSON.stringify(data), {
316          headers: {
317            'Content-Type': 'application/json',
318            'Cache-Control': 'max-age=5',
319          },
320        });
321        await cache.put(MAINTENANCE_STATUS_URL, cacheResp);
322      }
323    } catch (_) {
324      /* ignore cache write */
325    }
326
327    return data;
328  } catch (_) {
329    return null;
330  } finally {
331    if (timer) clearTimeout(timer);
332  }
333}
334
335function escapeHtml(str) {
336  return String(str || '')
337    .replace(/&/g, '&amp;')
338    .replace(/</g, '&lt;')
339    .replace(/>/g, '&gt;')
340    .replace(/"/g, '&quot;')
341    .replace(/'/g, '&#39;');
342}
343
344function buildMaintenanceHtml(status) {
345  const title = escapeHtml(status.title || '站点维护中');
346  const message = escapeHtml(status.message || '正在升级，马上回来。');
347  const until = status.until ? escapeHtml(status.until) : '';
348  const untilBlock = until
349    ? `<p class="until"><span>预计恢复</span><strong>${until}</strong></p>`
350    : '';
351
352  return `<!DOCTYPE html>
353<html lang="zh-CN">
354<head>
355  <meta charset="utf-8">
356  <meta name="viewport" content="width=device-width, initial-scale=1">
357  <meta name="robots" content="noindex">
358  <title>${title} · One Blog</title>
359  <link rel="icon" type="image/webp" href="https://oneimg.onedayxyy.cn/images/site-icons/xyy-logo_58fed615.avif?w=150&h=150&fit=crop&fm=webp&q=80">
360  <link rel="apple-touch-icon" href="https://oneimg.onedayxyy.cn/images/site-icons/xyy-logo_58fed615.avif?w=180&h=180&fit=crop&fm=webp&q=80">
361  <link rel="preconnect" href="https://fonts.googleapis.com">
362  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
363  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
364  <style>
365    :root {
366      --ink: #1a2e2a;
367      --muted: #5a6f68;
368      --accent: #2f8f73;
369      --accent-soft: #7bc4a8;
370      --paper: #f6f3eb;
371      --glow: #d8efe4;
372    }
373    * { box-sizing: border-box; }
374    html, body { height: 100%; margin: 0; }
375    body {
376      min-height: 100%;
377      display: grid;
378      place-items: center;
379      padding: 28px 20px;
380      color: var(--ink);
381      font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
382      background:
383        radial-gradient(ellipse 80% 55% at 18% 12%, #dff3ea 0%, transparent 55%),
384        radial-gradient(ellipse 70% 50% at 88% 88%, #efe4c8 0%, transparent 50%),
385        radial-gradient(ellipse 50% 40% at 70% 20%, #cfe8de 0%, transparent 45%),
386        linear-gradient(165deg, #eef6f2 0%, var(--paper) 48%, #ebe4d6 100%);
387      overflow: hidden;
388      position: relative;
389    }
390    .blob {
391      position: absolute;
392      border-radius: 50%;
393      filter: blur(48px);
394      opacity: .55;
395      pointer-events: none;
396      animation: drift 14s ease-in-out infinite;
397    }
398    .blob-a {
399      width: 340px; height: 340px;
400      left: -80px; top: -40px;
401      background: #9fd9c2;
402    }
403    .blob-b {
404      width: 280px; height: 280px;
405      right: -60px; bottom: -30px;
406      background: #e8d5a3;
407      animation-delay: -5s;
408      animation-duration: 18s;
409    }
410    .blob-c {
411      width: 180px; height: 180px;
412      left: 42%; top: 62%;
413      background: #b7e0d2;
414      animation-delay: -9s;
415      animation-duration: 16s;
416    }
417    .grain {
418      position: absolute;
419      inset: 0;
420      pointer-events: none;
421      opacity: .04;
422      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
423    }
424    .stage {
425      position: relative;
426      z-index: 1;
427      width: min(520px, 100%);
428      text-align: center;
429      animation: enter .8s cubic-bezier(.22,1,.36,1) both;
430    }
431    .visual {
432      width: 168px;
433      height: 168px;
434      margin: 0 auto 28px;
435      position: relative;
436      animation: float 5.5s ease-in-out infinite;
437    }
438    .visual svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 28px rgba(47,143,115,.18)); }
439    .ring {
440      position: absolute;
441      inset: -10px;
442      border-radius: 50%;
443      border: 1.5px dashed rgba(47,143,115,.28);
444      animation: spin 28s linear infinite;
445    }
446    .brand {
447      font-family: Fraunces, "Noto Serif SC", Georgia, serif;
448      font-size: clamp(34px, 7vw, 48px);
449      font-weight: 700;
450      letter-spacing: -.02em;
451      line-height: 1;
452      margin: 0 0 8px;
453      color: var(--ink);
454    }
455    .brand em {
456      font-style: normal;
457      background: linear-gradient(120deg, var(--accent), #4aa888 45%, #c4a35a);
458      -webkit-background-clip: text;
459      background-clip: text;
460      color: transparent;
461    }
462    .domain {
463      margin: 0 0 28px;
464      font-size: 13px;
465      letter-spacing: .16em;
466      text-transform: uppercase;
467      color: var(--muted);
468      font-weight: 500;
469    }
470    h1 {
471      margin: 0 0 12px;
472      font-size: clamp(24px, 4.5vw, 32px);
473      font-weight: 700;
474      letter-spacing: .02em;
475    }
476    .message {
477      margin: 0 auto;
478      max-width: 34em;
479      font-size: 16px;
480      line-height: 1.75;
481      color: var(--muted);
482      white-space: pre-wrap;
483      font-weight: 400;
484    }
485    .progress {
486      width: min(220px, 70%);
487      height: 4px;
488      margin: 28px auto 0;
489      border-radius: 999px;
490      background: rgba(47,143,115,.12);
491      overflow: hidden;
492    }
493    .progress > i {
494      display: block;
495      height: 100%;
496      width: 42%;
497      border-radius: inherit;
498      background: linear-gradient(90deg, var(--accent-soft), var(--accent), #c4a35a);
499      animation: slide 2.4s ease-in-out infinite;
500    }
501    .until {
502      display: inline-flex;
503      align-items: center;
504      gap: 10px;
505      margin: 22px 0 0;
506      padding: 8px 14px;
507      border-radius: 999px;
508      background: rgba(255,255,255,.55);
509      border: 1px solid rgba(47,143,115,.16);
510      font-size: 13px;
511      color: var(--muted);
512      backdrop-filter: blur(8px);
513    }
514    .until span { opacity: .75; }
515    .until strong { color: var(--ink); font-weight: 600; }
516    .hint {
517      margin: 26px 0 0;
518      font-size: 12px;
519      color: rgba(90,111,104,.72);
520    }
521    @keyframes enter {
522      from { opacity: 0; transform: translateY(18px) scale(.98); }
523      to { opacity: 1; transform: none; }
524    }
525    @keyframes float {
526      0%, 100% { transform: translateY(0); }
527      50% { transform: translateY(-10px); }
528    }
529    @keyframes drift {
530      0%, 100% { transform: translate(0, 0) scale(1); }
531      50% { transform: translate(24px, -18px) scale(1.08); }
532    }
533    @keyframes spin { to { transform: rotate(360deg); } }
534    @keyframes slide {
535      0% { transform: translateX(-120%); }
536      100% { transform: translateX(280%); }
537    }
538    @media (prefers-reduced-motion: reduce) {
539      .blob, .visual, .ring, .progress > i, .stage { animation: none !important; }
540    }
541  </style>
542</head>
543<body>
544  <div class="blob blob-a" aria-hidden="true"></div>
545  <div class="blob blob-b" aria-hidden="true"></div>
546  <div class="blob blob-c" aria-hidden="true"></div>
547  <div class="grain" aria-hidden="true"></div>
548  <main class="stage">
549    <div class="visual" aria-hidden="true">
550      <div class="ring"></div>
551      <svg viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
552        <defs>
553          <linearGradient id="g1" x1="28" y1="24" x2="140" y2="148" gradientUnits="userSpaceOnUse">
554            <stop stop-color="#E8F7F1"/>
555            <stop offset="1" stop-color="#B7E0D2"/>
556          </linearGradient>
557          <linearGradient id="g2" x1="56" y1="62" x2="118" y2="118" gradientUnits="userSpaceOnUse">
558            <stop stop-color="#2F8F73"/>
559            <stop offset="1" stop-color="#C4A35A"/>
560          </linearGradient>
561        </defs>
562        <circle cx="84" cy="84" r="72" fill="url(#g1)"/>
563        <circle cx="84" cy="84" r="54" fill="#F8FBF9" fill-opacity=".72"/>
564        <path d="M58 92c8-18 22-28 36-28s28 10 36 28" stroke="url(#g2)" stroke-width="5" stroke-linecap="round"/>
565        <path d="M70 78c4-8 10-12 14-12s10 4 14 12" stroke="#2F8F73" stroke-width="4" stroke-linecap="round" opacity=".55"/>
566        <circle cx="84" cy="104" r="7" fill="#2F8F73"/>
567        <path d="M84 111v18" stroke="#2F8F73" stroke-width="4" stroke-linecap="round"/>
568        <path d="M74 126h20" stroke="#C4A35A" stroke-width="4" stroke-linecap="round"/>
569        <circle cx="118" cy="58" r="5" fill="#C4A35A" opacity=".8"/>
570        <circle cx="52" cy="64" r="3.5" fill="#2F8F73" opacity=".45"/>
571      </svg>
572    </div>
573    <p class="brand">One <em>Blog</em></p>
574    <p class="domain">onedayxyy.cn</p>
575    <h1>${title}</h1>
576    <p class="message">${message}</p>
577    <div class="progress" aria-hidden="true"><i></i></div>
578    ${untilBlock}
579    <p class="hint">若仍看到旧页面，请强制刷新或使用无痕窗口</p>
580  </main>
581</body>
582</html>`;
583}
584
585function buildMaintenanceResponse(status) {
586  const html = buildMaintenanceHtml(status);
587  return new Response(html, {
588    status: 503,
589    headers: {
590      'Content-Type': 'text/html; charset=utf-8',
591      'Cache-Control': 'no-store, no-cache, must-revalidate',
592      Pragma: 'no-cache',
593      'Retry-After': '300',
594      'X-OneBlog-Maintenance': '1',
595    },
596  });
597}

效果：

结束。

📡
👤 作者: One
🔗 链接: https://onedayxyy.cn/topics/sppgh
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 One Blog！
最新文章