mckero/fuwari
1
0 Fork 0
mirror of https://github.com/MCKero6423/fuwari.git synced 2026-10-02 03:15:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

更新 rehype-image-optimization.mjs

Browse Source 
使用新的转换源，cf Images
This commit is contained in:
mckero authored and GitHub committed 2026-07-09 05:35:22 +08:00
1 parent 784c42b0e3
commit 254c1d9370
1 file changed
+14 -41
Download Patch File Download Diff File Expand all files Collapse all files
rehype-image-optimization.mjs
+14 -41
View File
@@ -8,72 +8,45 @@ export function rehypeImageOptimization() {
if (node.tagName !== 'img' || !node.properties) return; if (node.tagName !== 'img' || !node.properties) return;
const src = node.properties.src; const src = node.properties.src;
// 没有 src 或者是相对路径导致解析失败的，直接跳过
if (!src) return; if (!src) return;
let urlObj; let urlObj;
try { try {
urlObj = new URL(src); urlObj = new URL(src);
} catch (e) { } catch (e) {
// 相对路径兜底优化
node.properties.loading = 'lazy'; node.properties.loading = 'lazy';
node.properties.decoding = 'async'; node.properties.decoding = 'async';
return; return;
} }
// 2. 业务逻辑：只处理 img.mckero.com (你的橱窗) // 2. 业务逻辑：只处理 img.mckero.com
if (urlObj.hostname !== 'img.mckero.com') { if (urlObj.hostname !== 'img.mckero.com') {
node.properties.loading = 'lazy'; node.properties.loading = 'lazy';
node.properties.decoding = 'async'; node.properties.decoding = 'async';
return; return;
} }
// 3. 业务逻辑：跳过 WebP/AVIF (Worker 处理不了) // 3. 不再跳过 WebP/AVIF —— Cloudflare 可以对任意源格式做尺寸缩放，
const pathname = urlObj.pathname.toLowerCase(); // 并通过 format=auto 自动为浏览器输出最优格式，所以全部走转换
if (pathname.endsWith('.webp') || pathname.endsWith('.avif')) {
node.properties.loading = 'lazy';
node.properties.decoding = 'async';
return;
}
// ============================================================ // ============================================================
// 🚨 核心修正：适配 Photon 的 action 参数 🚨 // ✅ 使用 Cloudflare Image Transformations（/cdn-cgi/image/）
// 格式：action=resize!宽,高,模式 // 直接在 img.mckero.com 上生效，不再依赖 opt.mckero.com Worker
// 高度设为 0 代表自适应，模式 2 代表缩放
// ============================================================ // ============================================================
const generateWorkerUrl = (originalSrc, targetWidth) => { const generateCdnUrl = (targetWidth) => {
const workerUrl = new URL('https://opt.mckero.com/'); const options = `width=${targetWidth},format=auto,quality=80`;
return `https://img.mckero.com/cdn-cgi/image/${options}${urlObj.pathname}`;
// 1. 设置 url 参数 (原图地址)
workerUrl.searchParams.set('url', originalSrc);
// 2. 设置 action 参数 (这才是 Worker 能看懂的指令！)
if (targetWidth) {
// 例如：resize!800,0,2
workerUrl.searchParams.set('action', `resize!${targetWidth},0,2`);
}
return workerUrl.toString();
}; };
// ============================================================ // 生成四档 srcset
// 生成四档 srcset (500, 800, 1200, 1600) node.properties.src = generateCdnUrl(800);
// ============================================================ const s500 = generateCdnUrl(500);
const s800 = generateCdnUrl(800);
// 默认 src: 给 800w (兼容性兜底) const s1200 = generateCdnUrl(1200);
node.properties.src = generateWorkerUrl(src, 800); const s1600 = generateCdnUrl(1600);
const s500 = generateWorkerUrl(src, 500);
const s800 = generateWorkerUrl(src, 800);
const s1200 = generateWorkerUrl(src, 1200);
const s1600 = generateWorkerUrl(src, 1600);
node.properties.srcset = `${s500} 500w, ${s800} 800w, ${s1200} 1200w, ${s1600} 1600w`; node.properties.srcset = `${s500} 500w, ${s800} 800w, ${s1200} 1200w, ${s1600} 1600w`;
// sizes 逻辑 (手机满屏，电脑最大800)
node.properties.sizes = '(max-width: 600px) 100vw, 800px'; node.properties.sizes = '(max-width: 600px) 100vw, 800px';
// 标准优化属性
node.properties.loading = 'lazy'; node.properties.loading = 'lazy';
node.properties.decoding = 'async'; node.properties.decoding = 'async';
}); });