使用Cursor搭建博客列表页和详情页时，需要共用同一个JSON数据源：可在项目根目录中创建articles.json，并确保每篇文章都包含唯一的 id 字段；列表页通过fetch加载数据后，动态渲染出带有?id=参数的文章链接；详情页则根据URL中的参数匹配对应的id来查找文章内容，如果未找到对应数据，还需要手动处理空状态，以避免页面出现空白。

用Cursor快速搭建博客列表页和详情页，核心就在于让两个页面共享同一份JSON数据源：列表页负责渲染全部文章摘要或标题，详情页则根据URL参数准确定位对应文章内容——这种列表页与详情页的配合逻辑，最好在一开始设计数据结构时就提前确定好。

准备统一的数据源文件

在项目根目录下新建 【articles.json】 文件，内容格式必须严格遵循统一结构：每篇文章都要包含唯一且不可重复的 id 字段（建议使用数字、短字符串或固定命名规则），并且所有字段名保持小写、无空格，便于后续读取和维护。例如：

[{"id":"post-1","title":"Cursor分页原理","content":"游标不是页码……"},{"id":"post-2","title":"暗黑模式切换实现","content":"通过CSS变量控制……"}]

这份JSON文件会被博客列表页和文章详情页同时读取，【id字段必须全局唯一，否则详情页可能会匹配错误内容】。

列表页用Ja vaScript动态渲染

在列表页HTML中，添加一个空容器元素：

在对应的 JS 文件中补充数据加载流程：先通过 fetch('./articles.json') 读取文章数据，再使用 .map() 逐项遍历并生成带跳转链接的文章卡片内容，最后借助 innerHTML 将结果插入到容器中。这里要特别注意，链接地址必须携带 ?id=xxx 参数，例如：Cursor分页原理。

这一步在Cursor中实现起来并不复杂，通常直接把相关文件放进去即可。但也要注意：如果JSON路径写错，或者文件编码不是UTF-8，fetch很可能会静默失败，最终导致列表页空白且没有明显报错提示。

详情页通过URL参数匹配内容

第一步：在详情页JS中，用 new URLSearchParams(window.location.search).get('id') 提取URL中的id参数值。

第二步：再次 fetch 同一份 articles.json → 用 .find(item => item.id === targetId) 查找对应的文章数据。

第三步：找到目标文章后，把 title 和 content 填充到页面对应的DOM节点，比如 document.querySelector('#post-title').textContent = article.title。

⚠️ 如果没有找到匹配项，页面通常只会显示空内容，不会主动报错，也不会自动跳转。因此你需要自己增加一层判断：if (!article) { document.body.innerHTML = '

文章不存在