fix(site): 资源用绝对路径,根治相对路径导致的样式丢失

详情页/子路径页面若相对引用 styles.css/app.js,在某些情况下(如缓存旧
HTML、Cloudflare 把不存在路径回退成 200-HTML)会解析到 /skills/styles.css
等不存在的路径,返回 HTML 而非 CSS,叠加 X-Content-Type-Options: nosniff
被浏览器拒绝应用 → 整页无样式。

站点部署在域名根,改为绝对路径根治:styles.css / app.js / favicon /
brand svg / 扫码二维码 全部 ${base}X → /X,与页面层级/缓存无关、永远正确。
页面导航链接保持 ${base}(跨语言导航逻辑不变)。

验证:重建 42 页,详情页/EN 资源均为 / 绝对路径,无相对 CSS 引用;
CSP 126 内联脚本 0 缺失。
This commit is contained in:
AI不止语
2026-06-20 10:39:32 +08:00
parent f54d7363df
commit d3e3b3684c

View File

@@ -320,14 +320,14 @@ function layout({ lang, base, title, desc, body, langHref, extraHead = '' }) {
<meta property="og:title" content="${esc(title)}">
<meta property="og:description" content="${esc(desc)}">
<meta property="og:type" content="website">
<link rel="icon" href="${base}assets/app-icon.png">
<link rel="stylesheet" href="${base}styles.css?v=${cssVer}">
<link rel="icon" href="/assets/app-icon.png">
<link rel="stylesheet" href="/styles.css?v=${cssVer}">
<script>(function(){try{var m=localStorage.getItem('sp-theme');if(m==='light')document.documentElement.setAttribute('data-theme','light');}catch(e){}})();</script>
${extraHead}</head>
<body>
<header class="nav">
<a class="brand" href="${base}index.html">
<img src="${base}assets/superpowers-small.svg" alt="" width="26" height="26">
<img src="/assets/superpowers-small.svg" alt="" width="26" height="26">
<span>superpowers<b>-zh</b></span>
</a>
<nav>
@@ -345,8 +345,8 @@ ${body}
<div class="foot-qr">
<h4 class="qr-title">${t.followUs}</h4>
<div class="qr-row">
<figure class="qr-card"><img src="${base}assets/qr-wechat.jpg" alt="${esc(t.qrWechat)}" width="158" loading="lazy"><figcaption>${t.qrWechat}</figcaption></figure>
<figure class="qr-card"><img src="${base}assets/qr-douyin.jpg" alt="${esc(t.qrDouyin)}" width="158" loading="lazy"><figcaption>${t.qrDouyin}</figcaption></figure>
<figure class="qr-card"><img src="/assets/qr-wechat.jpg" alt="${esc(t.qrWechat)}" width="158" loading="lazy"><figcaption>${t.qrWechat}</figcaption></figure>
<figure class="qr-card"><img src="/assets/qr-douyin.jpg" alt="${esc(t.qrDouyin)}" width="158" loading="lazy"><figcaption>${t.qrDouyin}</figcaption></figure>
</div>
</div>
<div class="foot-inner foot-cols">
@@ -358,7 +358,7 @@ ${body}
</div>
<p class="copyright">${t.copyright}</p>
</footer>
<script src="${base}app.js?v=${jsVer}"></script>
<script src="/app.js?v=${jsVer}"></script>
</body>
</html>`;
}