[{"data":1,"prerenderedAt":435},["ShallowReactive",2],{"insight-21":3},{"id":4,"title":5,"body":6,"category":425,"cover":396,"date":426,"description":177,"extension":427,"meta":428,"navigation":273,"path":429,"seo":430,"slug":431,"stem":432,"summary":433,"__hash__":434},"insight\u002Finsights\u002F21.md","在 Trae IDE 中利用 MCP 高效抓取与收录网络文章",{"type":7,"value":8,"toc":413},"minimark",[9,13,17,29,32,35,63,66,69,121,124,129,140,144,158,171,217,226,240,317,321,324,384,387,390,403,406,409],[10,11,12],"h2",{"id":12},"背景",[14,15,16],"p",{},"在维护 奥升官网（基于 Nuxt 3 构建）的过程中，我们需要将发布在其他平台的技术文章迁移到官网的内容管理系统中。手动复制粘贴不仅效率低下，还容易遗漏图片资源或导致格式错乱。",[14,18,19,20,24,25,28],{},"借助 ",[21,22,23],"strong",{},"Trae IDE"," 及 ",[21,26,27],{},"Chrome MCP","，我们可以将这一过程高度自动化。本文将详细介绍这套抓取方案的思路与实现。",[10,30,31],{"id":31},"环境与工具",[14,33,34],{},"本方案依赖以下核心环境与工具：",[36,37,38,44],"ol",{},[39,40,41,43],"li",{},[21,42,23],{},": 新一代 AI 驱动的集成开发环境（我使用的国际版，开了会员），可调用 Gemini-3-Pro-Preview 模型，支持复杂的上下文理解与多步任务执行。",[39,45,46,49,50],{},[21,47,48],{},"MCP (Model Context Protocol)",":\n",[51,52,53],"ul",{},[39,54,55,62],{},[56,57,61],"a",{"href":58,"rel":59},"https:\u002F\u002Fgithub.com\u002Fhangwin\u002Fmcp-chrome",[60],"nofollow","mcp_chrome",": 提供浏览器自动化能力，用于访问网页、读取 DOM 结构、截图等。",[10,64,65],{"id":65},"抓取思路",[14,67,68],{},"整个抓取流程可以概括为以下四个步骤：",[36,70,71,77,83,111],{},[39,72,73,76],{},[21,74,75],{},"目标分析",": AI 通过 MCP 浏览器工具访问目标 URL，解析页面结构，识别标题、正文、发布时间及图片链接。",[39,78,79,82],{},[21,80,81],{},"内容提取",": 将 HTML 内容转换为符合 Nuxt Content 规范的 Markdown 格式，并自动提取 Frontmatter（元数据）。",[39,84,85,49,88],{},[21,86,87],{},"图片处理",[51,89,90,98,105,108],{},[39,91,92,93,97],{},"自动下载文章中的图片到 ",[94,95,96],"code",{},"public\u002Fimages\u002Farticles"," 目录，并按文章id分文件夹存储。",[39,99,100,101,104],{},"使用 ",[94,102,103],{},"sharp"," 对图片进行压缩优化（WebP\u002FJPG 转换、尺寸调整）。",[39,106,107],{},"将图片按上传到 OSS 指定文件路径中。",[39,109,110],{},"替换 Markdown 中的图片链接为 OSS 上的路径。",[39,112,113,116,117,120],{},[21,114,115],{},"自动收录",": 将处理好的 Markdown 文件写入 ",[94,118,119],{},"content\u002Farticles\u002F"," 目录。",[10,122,123],{"id":123},"关键实现",[125,126,128],"h3",{"id":127},"_1-页面内容读取","1. 页面内容读取",[14,130,131,132,135,136,139],{},"利用 MCP 的 ",[94,133,134],{},"chrome_read_page"," 或 ",[94,137,138],{},"chrome_get_web_content"," 工具，我们可以直接获取渲染后的页面内容，这对于动态加载的页面尤为重要。",[125,141,143],{"id":142},"_2-图片资源的自动化处理","2. 图片资源的自动化处理",[14,145,146,149,150,153,154,157],{},[21,147,148],{},"1. 提取链接","\nAI 会从 DOM 中找出所有 ",[94,151,152],{},"\u003Cimg>"," 标签的 ",[94,155,156],{},"src"," 属性。",[14,159,160,163,164,135,167,170],{},[21,161,162],{},"2. 批量下载","\nAI 会生成并执行 Shell 命令（如 ",[94,165,166],{},"curl",[94,168,169],{},"wget","）来下载图片。",[172,173,178],"pre",{"className":174,"code":175,"language":176,"meta":177,"style":177},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# AI 自动生成的下载命令示例\nmkdir -p publichttps:\u002F\u002Fucode-orise.oss-cn-beijing.aliyuncs.com\u002Fwebsite\u002Farticle\u002F21\ncurl -o publichttps:\u002F\u002Fucode-orise.oss-cn-beijing.aliyuncs.com\u002Fwebsite\u002Farticle\u002F21\u002F1.jpg http:\u002F\u002Fexample.com\u002Fpath\u002Fto\u002Fimage.jpg\n","bash","",[94,179,180,189,203],{"__ignoreMap":177},[181,182,185],"span",{"class":183,"line":184},"line",1,[181,186,188],{"class":187},"sHwdD","# AI 自动生成的下载命令示例\n",[181,190,192,196,200],{"class":183,"line":191},2,[181,193,195],{"class":194},"sBMFI","mkdir",[181,197,199],{"class":198},"sfazB"," -p",[181,201,202],{"class":198}," publichttps:\u002F\u002Fucode-orise.oss-cn-beijing.aliyuncs.com\u002Fwebsite\u002Farticle\u002F21\n",[181,204,206,208,211,214],{"class":183,"line":205},3,[181,207,166],{"class":194},[181,209,210],{"class":198}," -o",[181,212,213],{"class":198}," publichttps:\u002F\u002Fucode-orise.oss-cn-beijing.aliyuncs.com\u002Fwebsite\u002Farticle\u002F21\u002F1.jpg",[181,215,216],{"class":198}," http:\u002F\u002Fexample.com\u002Fpath\u002Fto\u002Fimage.jpg\n",[14,218,219,222,223,225],{},[21,220,221],{},"3. 图片压缩","\n利用项目中的 ",[94,224,103],{}," 脚本对下载的图片进行批量处理，确保加载性能。",[14,227,228,231,232,235,236,239],{},[21,229,230],{},"4. 图片上传到 OSS","\n使用",[94,233,234],{},"ali-oss"," 库，编写 ",[94,237,238],{},"upload_oss"," 脚本，将压缩后的图片上传到 OSS 上指定的目录。",[172,241,245],{"className":242,"code":243,"language":244,"meta":177,"style":177},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","async function uploadFile(filePath, retryCount = 0) {\n    \u002F\u002F 处理上传到oss的文件路径\n    const relativePath = path.relative(articlesDir, filePath);\n    const objectName = `website\u002Farticle\u002F${relativePath.split(path.sep).join('\u002F')}`;\n\n    try {\n        const result = await client.put(objectName, filePath);\n        \u002F\u002F... \n    } catch (err) {\n        \u002F\u002F...\n    }\n}\n","javascript",[94,246,247,252,257,262,268,275,281,287,293,299,305,311],{"__ignoreMap":177},[181,248,249],{"class":183,"line":184},[181,250,251],{},"async function uploadFile(filePath, retryCount = 0) {\n",[181,253,254],{"class":183,"line":191},[181,255,256],{},"    \u002F\u002F 处理上传到oss的文件路径\n",[181,258,259],{"class":183,"line":205},[181,260,261],{},"    const relativePath = path.relative(articlesDir, filePath);\n",[181,263,265],{"class":183,"line":264},4,[181,266,267],{},"    const objectName = `website\u002Farticle\u002F${relativePath.split(path.sep).join('\u002F')}`;\n",[181,269,271],{"class":183,"line":270},5,[181,272,274],{"emptyLinePlaceholder":273},true,"\n",[181,276,278],{"class":183,"line":277},6,[181,279,280],{},"    try {\n",[181,282,284],{"class":183,"line":283},7,[181,285,286],{},"        const result = await client.put(objectName, filePath);\n",[181,288,290],{"class":183,"line":289},8,[181,291,292],{},"        \u002F\u002F... \n",[181,294,296],{"class":183,"line":295},9,[181,297,298],{},"    } catch (err) {\n",[181,300,302],{"class":183,"line":301},10,[181,303,304],{},"        \u002F\u002F...\n",[181,306,308],{"class":183,"line":307},11,[181,309,310],{},"    }\n",[181,312,314],{"class":183,"line":313},12,[181,315,316],{},"}\n",[125,318,320],{"id":319},"_3-markdown-生成与-frontmatter-注入","3. Markdown 生成与 Frontmatter 注入",[14,322,323],{},"Nuxt Content 要求每篇文章包含特定的元数据。我们定义了统一的 Prompt 模板，让 AI 生成标准格式：",[172,325,329],{"className":326,"code":327,"language":328,"meta":177,"style":177},"language-markdown shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","---\ntitle: 文章标题\nslug: article-slug\ndescription: 文章摘要...\ndate: 2024-03-20\ncategory: 分类\ncover: https:\u002F\u002Fucode-orise.oss-cn-beijing.aliyuncs.com\u002Fwebsite\u002Farticle\u002F[slug]\u002Fcover.jpg\n---\n\n## 正文内容\n...\n","markdown",[94,330,331,336,341,346,351,356,361,366,370,374,379],{"__ignoreMap":177},[181,332,333],{"class":183,"line":184},[181,334,335],{},"---\n",[181,337,338],{"class":183,"line":191},[181,339,340],{},"title: 文章标题\n",[181,342,343],{"class":183,"line":205},[181,344,345],{},"slug: article-slug\n",[181,347,348],{"class":183,"line":264},[181,349,350],{},"description: 文章摘要...\n",[181,352,353],{"class":183,"line":270},[181,354,355],{},"date: 2024-03-20\n",[181,357,358],{"class":183,"line":277},[181,359,360],{},"category: 分类\n",[181,362,363],{"class":183,"line":283},[181,364,365],{},"cover: https:\u002F\u002Fucode-orise.oss-cn-beijing.aliyuncs.com\u002Fwebsite\u002Farticle\u002F[slug]\u002Fcover.jpg\n",[181,367,368],{"class":183,"line":289},[181,369,335],{},[181,371,372],{"class":183,"line":295},[181,373,274],{"emptyLinePlaceholder":273},[181,375,376],{"class":183,"line":301},[181,377,378],{},"## 正文内容\n",[181,380,381],{"class":183,"line":307},[181,382,383],{},"...\n",[10,385,386],{"id":386},"实际效果展示",[14,388,389],{},"下图是我们在 Trae 环境中开发时的文章列表页面截图，展示了收录后的效果：",[14,391,392,397,400],{},[393,394],"img",{"alt":395,"src":396},"IDE","https:\u002F\u002Fucode-orise.oss-cn-beijing.aliyuncs.com\u002Fwebsite\u002Farticle\u002F21\u002F1.png",[393,398],{"alt":395,"src":399},"https:\u002F\u002Fucode-orise.oss-cn-beijing.aliyuncs.com\u002Fwebsite\u002Farticle\u002F21\u002F2.png",[393,401],{"alt":395,"src":402},"https:\u002F\u002Fucode-orise.oss-cn-beijing.aliyuncs.com\u002Fwebsite\u002Farticle\u002F21\u002F3.png",[10,404,405],{"id":405},"总结",[14,407,408],{},"通过 Trae IDE + MCP 的组合，我们将原本需要 10 分钟\u002F篇的人工迁移工作缩短到了 2-3 分钟\u002F篇（主要是AI对话推理时间）。开发者只需提供一个 URL，剩下的分析、下载、转换、优化工作全部由 AI 代理完成。这不仅极大提升了效率，还保证了代码风格与目录结构的一致性。",[410,411,412],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":177,"searchDepth":191,"depth":191,"links":414},[415,416,417,418,423,424],{"id":12,"depth":191,"text":12},{"id":31,"depth":191,"text":31},{"id":65,"depth":191,"text":65},{"id":123,"depth":191,"text":123,"children":419},[420,421,422],{"id":127,"depth":205,"text":128},{"id":142,"depth":205,"text":143},{"id":319,"depth":205,"text":320},{"id":386,"depth":191,"text":386},{"id":405,"depth":191,"text":405},"技术解析","2026-01-19","md",{},"\u002Finsights\u002F21",{"title":5,"description":177},"trae-mcp-article-scraping","insights\u002F21","使用 AI编程IDE 及Chrome MCP，实现网页中文章的高效抓取、图片本地化及md文件的自动生成。","Uc2pq3SjY532umQ1zKgl3b7xv1GXtthb_6xGlCOHbYs",1789965847348]