纯静态404页无法执行服务端逻辑，推荐文章需前端加载：可预置（小站适用）或用fetch异步请求公开JSON接口（如/api/recommended-posts.json），须设超时、try/catch容错、占位文案，并确保链接为绝对或根相对路径，标题用语义化<h3>标签。
404页面里怎么插入动态推荐文章列表
纯静态HTML 404页无法执行服务端逻辑，所以「推荐文章」必须靠前端手段加载——要么预置（适合小站），要么用JavaScript异步拉取（需后端配合API）。直接写死在HTML里看似简单，但维护成本高、无法个性化。
- 如果你用的是静态站点生成器（如Hugo、Jekyll），构建时就能把热门/最新文章注入
404.html，生成静态HTML片段 - 如果托管在GitHub Pages、Vercel等平台且无服务端能力，推荐用
fetch()请求一个公开的JSON接口（比如你自己的/api/recommended-posts.json） - 注意：不要在
404.html里调用需要登录态或Referer校验的API，否则前端会因CORS或权限失败
用JavaScript加载推荐文章时如何避免白屏和报错
用户打开404页时网络可能差、脚本可能被拦截、JSON接口可能宕机——这些都会导致推荐区空白甚至控制台报错。不能假设fetch一定成功。
- 始终给推荐容器加默认占位文案，比如
<div id="recommended">正在查找相关内容…</div> - 用
try/catch包裹fetch，失败时清空占位文案并显示友好提示：document.getElementById('recommended').textContent = '暂无推荐文章' - 设置超时：原生
fetch不支持timeout，可用AbortController或封装一层Promise.race - 避免在
window.onload之后才发起请求——用户可能已滚动离开，改用DOMContentLoaded更及时
推荐逻辑该由前端还是后端决定
前端做推荐=只能按固定规则（如按URL路径关键词匹配、随机取3篇），不可靠；后端做推荐=能结合PV、停留时长、标签共现等，但你需要一个可被公开访问的轻量接口。
- 最简可行方案：后端提供
GET /api/recommended?path=/xxx，返回最多5条{title, url, excerpt}，前端只负责渲染 - 如果没后端，可用Algolia DocSearch或Fuse.js前端模糊搜索本地文章索引（需提前把标题/路径存成JSON数组）
- 别用
document.referrer推断来源页再查关联文章——referrer常为空，尤其从微信、iOS邮件跳转时
样式和SEO需要注意什么
404页本身不被搜索引擎索引，但里面链接的权重仍会被传递。推荐区块若样式错乱或链接无效，反而损害用户体验和爬虫信任。
立即学习“前端免费学习笔记（深入）”；
- 确保所有
<a href>链接是绝对路径或根相对路径（如/blog/how-to-debug-fetch），避免./xxx在404页下解析出错 - 给推荐标题加
<h3>或<h4>语义标签，别全用<div>——屏幕阅读器和部分爬虫会识别 - 如果CSS是外链且404页未正确引入（比如路径写成
css/style.css而非/css/style.css），整个推荐区可能无样式，建议内联关键CSS或检查<base href="/>
