纯静态404页无法执行服务端逻辑，推荐文章需前端加载：可预置（小站适用）或用fetch异步请求公开json接口（如/api/recommended-posts.json），须设超时、try/catch容错、占位文案，并确保链接为绝对或根相对路径，标题用语义化标签。

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一定成功。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 始终给推荐容器加默认占位文案，比如<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></a>链接是绝对路径或根相对路径（如/blog/how-to-debug-fetch），避免./xxx在404页下解析出错
• 给推荐标题加<h3></h3>或<h4></h4>语义标签，别全用<div>——屏幕阅读器和部分爬虫会识别 <li>如果CSS是外链且404页未正确引入（比如路径写成<code>css/style.css而非/css/style.css），整个推荐区可能无样式，建议内联关键CSS或检查<base href="/>
%0A

%0A%0A%E5%AE%9E%E9%99%85%E6%9C%80%E9%9A%BE%E7%9A%84%E9%83%A8%E5%88%86%E4%B8%8D%E6%98%AF%E5%8A%A0%E8%BD%BD%EF%BC%8C%E8%80%8C%E6%98%AF%E8%AE%A9%E6%8E%A8%E8%8D%90%E7%BB%93%E6%9E%9C%E7%9C%9F%E6%AD%A3%E7%9B%B8%E5%85%B3%E2%80%94%E2%80%94%E8%BF%99%E8%A6%81%E6%B1%82%E4%BD%A0%E6%9C%89%E7%A8%B3%E5%AE%9A%E7%9A%84%E6%96%87%E7%AB%A0%E5%85%83%E6%95%B0%E6%8D%AE%EF%BC%88%E5%8F%91%E5%B8%83%E6%97%B6%E9%97%B4%E3%80%81%E5%88%86%E7%B1%BB%E3%80%81%E5%85%B3%E9%94%AE%E8%AF%8D%EF%BC%89%EF%BC%8C%E4%B8%94%E6%8E%A5%E5%8F%A3%E5%93%8D%E5%BA%94%E8%B6%B3%E5%A4%9F%E5%BF%AB%E3%80%82%E5%BE%88%E5%A4%9A%E5%9B%A2%E9%98%9F%E5%8D%A1%E5%9C%A8%E2%80%9C%E6%8E%A8%E8%8D%90%E7%9C%8B%E8%B5%B7%E6%9D%A5%E5%BE%88%E9%9A%8F%E6%9C%BA%E2%80%9D%E8%BF%99%E4%B8%80%E6%AD%A5%EF%BC%8C%E6%9C%80%E5%90%8E%E5%B9%B2%E8%84%86%E5%86%99%E6%AD%BB3%E4%B8%AA%E9%93%BE%E6%8E%A5%E3%80%82%E4%BD%86%E5%8F%AA%E8%A6%81%E5%85%83%E6%95%B0%E6%8D%AE%E5%AD%97%E6%AE%B5%E5%AF%B9%E9%BD%90%EF%BC%8C%E5%93%AA%E6%80%95%E5%8F%AA%E6%8C%89%E3%80%8C%E5%90%8C%E5%88%86%E7%B1%BB+%E9%9D%9E%E5%BD%93%E5%89%8D%E9%A1%B5%E3%80%8D%E8%BF%87%E6%BB%A4%EF%BC%8C%E6%95%88%E6%9E%9C%E4%B9%9F%E4%BC%9A%E6%98%8E%E6%98%BE%E6%8F%90%E5%8D%87%E3%80%82

%0A">