[{"data":1,"prerenderedAt":2576},["ShallowReactive",2],{"build-logs-metool":3,"build-log-metool-2026-04-03-user-growth-and-quality":2428},[4,262,608,778,911,1175,1361,1525,1666,1836,1985,2119,2294],{"id":5,"title":6,"body":7,"date":224,"description":225,"draft":226,"extension":227,"faq":228,"meta":241,"navigation":242,"path":243,"project":244,"readingTime":245,"seo":246,"seoKeywords":247,"stem":255,"summary":256,"tags":257,"updated":260,"__hash__":261},"builds\u002Fbuilds\u002Fmetool\u002F2026-04-03-user-growth-and-quality.md","用户突然变多了，我慌了",{"type":8,"value":9,"toc":213},"minimark",[10,14,18,25,28,31,38,42,45,48,54,57,64,67,70,73,79,82,116,122,126,129,132,136,141,144,147,150,156,159,165,171,177,180,184,187,194,200,203,210],[11,12,13],"h2",{"id":13},"数据开始动了",[15,16,17],"p",{},"打开 Google Analytics，我差点没反应过来。",[15,19,20],{},[21,22],"img",{"alt":23,"src":24},"metool 活跃用户增长趋势","\u002Fb\u002Fmetool\u002Fuser-boot.png",[15,26,27],{},"过去 28 天，活跃用户 880，涨了 67.9%。新用户 818，涨了 66.3%。但最让我兴奋的是那条曲线的尾巴：最近两天，日活跃用户从不到 100 一下子拉到了 300 左右。",[15,29,30],{},"前几篇文章一直在讲 SEO 优化、数据驱动、扩展 3D 品类。说实话，做这些事的时候心里是没底的，因为 SEO 是一个滞后反馈的游戏，你做了优化，可能要等几周甚至几个月才能看到效果。",[15,32,33,34],{},"现在数据给了一个正反馈：",[35,36,37],"strong",{},"方向是对的。",[11,39,41],{"id":40},"兴奋了三秒然后开始焦虑","兴奋了三秒，然后开始焦虑",[15,43,44],{},"高兴了一会儿之后，一个新的担忧浮上来。",[15,46,47],{},"这大半年来，我的策略一直是\"快速上线\"。借助 AI Coding 的速度，很多工具从想法到上线只用了一两个小时。几十个工具就是这么铺出来的。",[15,49,50,51],{},"但\"快速上线\"的代价是：",[35,52,53],{},"很多工具没有经过认真测试。",[15,55,56],{},"用户少的时候，问题不明显。反正也没几个人用，有 bug 也没人发现。但现在日活 300 了，如果用户点进来发现工具不好用、功能太单薄、甚至有 bug，第一印象就毁了。",[15,58,59,60,63],{},"做工具站最怕的不是没人来，而是",[35,61,62],{},"人来了，用了一次，再也不来了","。",[11,65,66],{"id":66},"从最热门的页面开始",[15,68,69],{},"焦虑归焦虑，解决问题还是得靠数据。",[15,71,72],{},"打开 Google Analytics 的页面报告，看昨天哪些工具页面访问量最高：",[15,74,75],{},[21,76],{"alt":77,"src":78},"昨日访问量 Top 5 的工具页面","\u002Fb\u002Fmetool\u002F20260403-top-tools.png",[15,80,81],{},"排名很清晰：",[83,84,85,92,98,104,110],"ol",{},[86,87,88,91],"li",{},[35,89,90],{},"3D 模型格式转换"," — 92 次浏览，79 个活跃用户",[86,93,94,97],{},[35,95,96],{},"音频编辑器"," — 36 次浏览，29 个活跃用户",[86,99,100,103],{},[35,101,102],{},"图片压缩"," — 33 次浏览，20 个活跃用户",[86,105,106,109],{},[35,107,108],{},"JSON 格式化"," — 26 次浏览，21 个活跃用户",[86,111,112,115],{},[35,113,114],{},"Markdown 转换器"," — 23 次浏览，20 个活跃用户",[15,117,118,119],{},"逻辑很简单：",[35,120,121],{},"用户最多的地方，最值得先修。",[11,123,125],{"id":124},"_3d-格式转换意料之中的第一名","3D 格式转换：意料之中的第一名",[15,127,128],{},"3D 模型格式转换排第一，不意外。上一篇文章里分析过，3D 工具是 metool 唯一有自然搜索流量的品类。这次用户增长，3D 工具应该贡献了不少。",[15,130,131],{},"我把这个工具从头到尾跑了一遍，测试了各种格式之间的互转。修复了几个边界情况的问题，确保核心流程是通的。",[11,133,135],{"id":134},"音频编辑器老工具的新问题","音频编辑器：老工具的新问题",[15,137,138,139,63],{},"让我真正停下来思考的是排第二的",[35,140,96],{},[15,142,143],{},"这个工具是很久之前做的，当时只做了最基本的功能：上传音频、简单裁剪、导出。能用，但仅此而已。",[15,145,146],{},"29 个活跃用户，对一个功能单薄的工具来说，其实不少了。这说明\"在线音频编辑\"这个需求是真实存在的。但如果用户进来发现只能做简单裁剪，大概率会失望离开。",[15,148,149],{},"我和 AI 做了一轮对话，梳理了音频编辑器真正需要的功能：",[15,151,152],{},[21,153],{"alt":154,"src":155},"和 AI 一起规划音频编辑器的功能增强","\u002Fb\u002Fmetool\u002F20260403-audio-editor-plan.png",[15,157,158],{},"梳理下来，功能可以分成三个梯队：",[15,160,161,164],{},[35,162,163],{},"第一梯队，高频刚需","：淡入淡出（避免裁剪后的爆音）、MP3\u002FOGG 导出（不要只能导出巨大的 WAV）、音量调节、键盘快捷键、精确时间输入。这些不是\"加分项\"，而是\"没有就不好用\"。",[15,166,167,170],{},[35,168,169],{},"第二梯队，差异化竞争力","：静音检测自动裁切（播客和录课用户的刚需）、片段边界拖拽调整、片段分割、变速播放。这些功能在大多数在线音频编辑器上都没有，做出来就是竞争力。",[15,172,173,176],{},[35,174,175],{},"第三梯队，锦上添花","：波形\u002F频谱图切换、简易降噪、片段重叠检测、项目保存恢复。",[15,178,179],{},"思路很清楚：先把第一梯队做完，让工具从\"能用\"变成\"好用\"。",[11,181,183],{"id":182},"从快速上线到让人用得住","从\"快速上线\"到\"让人用得住\"",[15,185,186],{},"回头看，这其实是一个自然的阶段切换。",[15,188,189,190,193],{},"前面大半年，核心命题是",[35,191,192],{},"覆盖面","：做更多工具、覆盖更多品类、占据更多搜索入口。速度是第一优先级。",[15,195,196,197,63],{},"但当用户真的开始来了，核心命题就变了：",[35,198,199],{},"质量",[15,201,202],{},"一个工具好不好，不是我自己觉得好就行，而是用户用了之后愿不愿意再来。覆盖面解决的是\"让人发现你\"，质量解决的是\"让人留下来\"。",[15,204,205,206,209],{},"现在的策略是：",[35,207,208],{},"用数据找到用户最常用的工具，集中精力把它们做到真正好用。"," 不再追求工具数量的增长，而是把已有工具的深度做上去。",[15,211,212],{},"先从 3D 格式转换和音频编辑器开始。",{"title":214,"searchDepth":215,"depth":215,"links":216},"",3,[217,219,220,221,222,223],{"id":13,"depth":218,"text":13},2,{"id":40,"depth":218,"text":41},{"id":66,"depth":218,"text":66},{"id":124,"depth":218,"text":125},{"id":134,"depth":218,"text":135},{"id":182,"depth":218,"text":183},"2026-04-03","SEO 持续优化后，metool 的活跃用户从日均不到 100 涨到了 300。兴奋之后是焦虑：很多工具没经过认真测试，用户真的能用吗？我决定从访问量最高的页面开始，逐个把质量关补上。",false,"md",[229,232,235,238],{"q":230,"a":231},"metool 的用户增长是怎么实现的？","主要靠持续的 SEO 优化：默认语言切英文覆盖国际用户、全站加 FAQ 和 HowTo 结构化数据、基于搜索数据扩展 3D 工具品类、提交 IndexNow 加速收录。没有投广告，纯粹靠搜索引擎的自然流量增长。",{"q":233,"a":234},"用户变多后为什么会焦虑？","因为之前的策略是'快速上线'，借助 AI Coding 的速度，很多工具从开发到上线只用了一两个小时，没有做充分的功能测试。用户少的时候问题不明显，用户多了之后，功能不完善或存在 bug 会直接影响口碑和留存。",{"q":236,"a":237},"怎么决定优先测试和优化哪些工具？","看 Google Analytics 的页面浏览数据。昨天访问量最高的五个工具页面是：3D 模型格式转换（92 次浏览）、音频编辑器（36 次）、图片压缩（33 次）、JSON 格式化（26 次）、Markdown 转换器（23 次）。优先从访问量最高的开始测试和优化。",{"q":239,"a":240},"音频编辑器打算增强哪些功能？","分三个优先级：第一梯队是高频刚需（淡入淡出、MP3\u002FOGG 导出、音量调节、键盘快捷键）；第二梯队是差异化竞争力（静音检测自动裁切、片段边界拖拽调整、变速播放）；第三梯队是锦上添花（波形\u002F频谱图切换、简易降噪、项目保存恢复）。",{},true,"\u002Fbuilds\u002Fmetool\u002F2026-04-03-user-growth-and-quality","metool",4,{"title":6,"description":225},[248,249,250,251,252,253,254],"工具站用户增长","产品质量与用户体验","数据驱动功能优化","在线音频编辑器功能规划","独立开发产品测试","Google Analytics 用户行为分析","工具站功能迭代优先级","builds\u002Fmetool\u002F2026-04-03-user-growth-and-quality","metool 的 SEO 优化开始见效，活跃用户从日均不到 100 涨到 300。但用户变多带来了新的焦虑：很多工具是快速上线的，没有经过认真测试。通过 Google Analytics 找到访问量最高的工具页面，优先测试和增强 3D 模型格式转换和音频编辑器，从'快速上线'转向'让人用得住'。",[258,259],"独立开发","产品思考",null,"BAltcFwRZ4So0Xjk-p8jOA2QfMGxN9df1AzCgd_7XrI",{"id":263,"title":264,"body":265,"date":576,"description":577,"draft":226,"extension":227,"faq":578,"meta":591,"navigation":242,"path":592,"project":244,"readingTime":593,"seo":594,"seoKeywords":595,"stem":604,"summary":605,"tags":606,"updated":260,"__hash__":607},"builds\u002Fbuilds\u002Fmetool\u002F2026-04-01-data-driven-building.md","接入 Google Search Console，用搜索数据决定下一步做什么",{"type":8,"value":266,"toc":566},[267,270,273,276,282,285,288,291,294,308,311,315,318,339,345,348,351,354,357,361,364,367,399,405,408,412,415,418,464,467,473,479,482,485,488,491,522,525,528,531,557,563],[11,268,269],{"id":269},"从搜索数据开始",[15,271,272],{},"上一篇聊了 URL 迁移导致检索量断崖式下跌。跌完之后呢？等恢复的同时，我开始认真看数据。",[15,274,275],{},"把 Google Search Console 的搜索词数据拉出来，终于看到了用户是怎么找到 metool 的：",[15,277,278],{},[21,279],{"alt":280,"src":281},"Google Search Console 搜索词数据","\u002Fb\u002Fmetool\u002Fgoogle-search-queries.png",[15,283,284],{},"这张图里藏了很多信息。",[11,286,287],{"id":287},"品牌词占主导",[15,289,290],{},"前四条搜索词全是品牌词的变体：me tool、metool、me tools、metools。加起来 49 次点击、1273 次展现。",[15,292,293],{},"这说明两件事：",[83,295,296,302],{},[86,297,298,301],{},[35,299,300],{},"目前大部分用户是\"知道 metool 才来的\"","，而不是搜某个具体需求然后发现了 metool。换句话说，自然搜索带来的新用户还很少。",[86,303,304,307],{},[35,305,306],{},"品牌词的点击率不高","。metool 这个词 743 次展现只有 19 次点击，说明搜索结果页上的标题和描述还不够吸引人，或者排名位置不够靠前。",[15,309,310],{},"品牌搜索是基本盘，但不能只靠基本盘。要增长，必须让非品牌搜索也能带来流量。",[11,312,314],{"id":313},"_3d-查看器是唯一的自然流量信号","3D 查看器是唯一的自然流量信号",[15,316,317],{},"往下看，终于看到了非品牌词：",[319,320,321,327,333],"ul",{},[86,322,323,326],{},[35,324,325],{},"glb viewer"," — 1 次点击，97 次展现",[86,328,329,332],{},[35,330,331],{},"glb viewer online"," — 1 次点击，20 次展现",[86,334,335,338],{},[35,336,337],{},"gltf viewer online"," — 1 次点击，14 次展现",[15,340,341,342],{},"点击量虽然只有个位数，但展现量说明了问题：",[35,343,344],{},"有人在搜这些词，而且 Google 认为 metool 的页面和这些搜索词相关。",[15,346,347],{},"97 次展现意味着 Google 已经把 metool 的 3D 查看器页面展示给了将近 100 个搜索用户。只是排名可能还不够高，用户没有点进来。",[15,349,350],{},"这是一个信号：3D 在线查看器是一个有真实需求的品类，而且 metool 已经有了初步的搜索基础。",[11,352,353],{"id":353},"游戏也有微弱信号",[15,355,356],{},"最后两条：五子棋ai（11 次展现）、围棋在线（8 次展现）。量很小，但说明游戏品类也有一些自然搜索曝光。不过游戏市场的竞争格局和工具市场完全不同，暂时不作为重点。",[11,358,360],{"id":359},"和-ai-一起做用户调研","和 AI 一起做用户调研",[15,362,363],{},"光看搜索词还不够。搜索「glb viewer」的人到底是谁，他们真正需要什么？",[15,365,366],{},"我和 AI 一起做了一轮用户需求分析，拆解出了几类典型用户：",[319,368,369,375,381,387,393],{},[86,370,371,374],{},[35,372,373],{},"3D 设计师","：快速预览模型效果，不想打开 Blender 或 Maya。metool 的 GLB Viewer 基本满足。",[86,376,377,380],{},[35,378,379],{},"游戏开发者","：检查导出的模型是否正确，查看动画和材质。当前只能看，缺少模型信息面板。",[86,382,383,386],{},[35,384,385],{},"3D 打印爱好者","：检查模型尺寸和可打印性。这部分完全没覆盖。",[86,388,389,392],{},[35,390,391],{},"前端\u002FWeb 开发者","：预览要嵌入网页的 3D 资源，关心性能指标。也没覆盖。",[86,394,395,398],{},[35,396,397],{},"采购和 PM","：收到 3D 资产后快速查看，不想装软件。基本满足。",[15,400,401,402,63],{},"这个分析很有价值。它告诉我两件事：第一，3D 查看器的用户群比我想象的宽得多；第二，",[35,403,404],{},"不同用户需要的不只是\"查看\"，还有格式转换、模型优化、信息检查这些周边能力",[15,406,407],{},"围绕这些需求，新的工具方向就清晰了：不同格式的查看器覆盖更多搜索入口，模型优化器和格式转换器满足深层需求。每个新页面都是一个独立的长尾关键词入口。",[11,409,411],{"id":410},"用数据做决策一口气强化整个-3d-品类","用数据做决策：一口气强化整个 3D 品类",[15,413,414],{},"不是只加一个工具，而是把整个 3D 品类做厚。",[15,416,417],{},"metool 之前只有 GLB\u002FglTF Viewer、STL Viewer 和 Text to 3D 三个 3D 相关工具。这次基于数据信号和用户调研，一口气补上了四个：",[319,419,420,433,443,453],{},[86,421,422,432],{},[35,423,424],{},[425,426,431],"a",{"href":427,"rel":428,"target":430},"https:\u002F\u002Fmetool.online\u002F3d\u002FfbxViewer\u002F",[429],"nofollow","_blank","FBX Viewer"," — 游戏开发和动画领域的主流格式，覆盖 fbx viewer online、fbx file viewer 等搜索词",[86,434,435,442],{},[35,436,437],{},[425,438,441],{"href":439,"rel":440,"target":430},"https:\u002F\u002Fmetool.online\u002F3d\u002FusdzViewer\u002F",[429],"USDZ\u002FUSD Viewer"," — Apple AR 生态的标准格式，iOS 开发者和设计师的刚需",[86,444,445,452],{},[35,446,447],{},[425,448,451],{"href":449,"rel":450,"target":430},"https:\u002F\u002Fmetool.online\u002F3d\u002FmodelOptimizer\u002F",[429],"3D Model Optimizer"," — 在线减面、压缩贴图，覆盖 reduce 3d model size、optimize glb file 等搜索词",[86,454,455,463],{},[35,456,457,458],{},"增强了 ",[425,459,462],{"href":460,"rel":461,"target":430},"https:\u002F\u002Fmetool.online\u002F3d\u002FmodelConvert\u002F",[429],"3D Model Format Converter"," — 支持 STL、OBJ、GLB、glTF、PLY、FBX、DAE 等格式互转",[15,465,466],{},"加上原有的三个，metool 的 3D 工具品类从 3 个扩展到了 7 个。",[15,468,469],{},[21,470],{"alt":471,"src":472},"metool 的 3D 工具矩阵","\u002Fb\u002Fmetool\u002F3d-tools-matrix.png",[15,474,475,476],{},"这就是数据驱动和凭感觉做的区别：",[35,477,478],{},"不是\"我觉得某个工具有用所以做\"，而是\"数据显示 3D 查看器有需求 → 调研发现用户群比想象的宽 → 围绕整个品类做厚\"。",[11,480,481],{"id":481},"一个实验田",[15,483,484],{},"我想把 metool 做成数据驱动型构建的实验田。",[15,486,487],{},"之前做了大半年工具，模式是\"有什么想法就做什么\"。工具做了几十个，但哪些有人用、哪些没人用，心里没数。",[15,489,490],{},"现在的模式是一个循环：",[83,492,493,499,505,511,517],{},[86,494,495,498],{},[35,496,497],{},"收集数据"," — Google Search Console 看搜索词，Google Analytics 看用户行为",[86,500,501,504],{},[35,502,503],{},"分析信号"," — 哪些品类有自然需求，哪些搜索词有潜力",[86,506,507,510],{},[35,508,509],{},"做出决策"," — 优先做数据验证过的方向",[86,512,513,516],{},[35,514,515],{},"上线验证"," — 看新工具的搜索表现",[86,518,519],{},[35,520,521],{},"回到第一步",[15,523,524],{},"这个循环听起来简单，但和之前的工作方式完全不同。之前是\"做完就忘\"，现在是\"做完还要看数据反馈\"。",[11,526,527],{"id":527},"下一步",[15,529,530],{},"3D 品类已经铺开了，接下来要做的是深耕和验证：",[319,532,533,539,545,551],{},[86,534,535,538],{},[35,536,537],{},"增强现有查看器的深度功能","：模型信息面板（顶点数、面数、材质列表）、截图导出、环境贴图切换、URL 直接加载。这些功能能提升用户停留时间和回访率。",[86,540,541,544],{},[35,542,543],{},"优化品牌词的点击率","：743 次展现只有 19 次点击，搜索结果的标题和描述需要更有吸引力。",[86,546,547,550],{},[35,548,549],{},"追踪新工具的搜索表现","：这批 3D 工具上线后，观察 Google 何时开始收录、展现量和点击量的变化趋势。这是验证\"数据驱动\"循环是否有效的关键一步。",[86,552,553,556],{},[35,554,555],{},"观察 URL 迁移后的恢复速度","：上次切默认语言导致索引断崖，需要持续追踪。",[15,558,559,560],{},"长期来看，我想验证一个假设：",[35,561,562],{},"一个工具站，能不能完全靠数据驱动来决定做什么、优化什么、放弃什么。",[15,564,565],{},"不靠直觉，不靠\"我觉得\"，只靠数据说话。metool 就是这个实验。",{"title":214,"searchDepth":215,"depth":215,"links":567},[568,569,570,571,572,573,574,575],{"id":269,"depth":218,"text":269},{"id":287,"depth":218,"text":287},{"id":313,"depth":218,"text":314},{"id":353,"depth":218,"text":353},{"id":359,"depth":218,"text":360},{"id":410,"depth":218,"text":411},{"id":481,"depth":218,"text":481},{"id":527,"depth":218,"text":527},"2026-04-01","不再凭感觉做工具了。把 Google Search Console 接入工作流，看到真实的搜索词后发现 3D 查看器有自然流量潜力。和 AI 一起做了用户调研，一口气补上了 FBX Viewer、USDZ Viewer、3D 模型优化器。这是 metool 转向数据驱动型构建的第一步。",[579,582,585,588],{"q":580,"a":581},"为什么要用 Google Search Console 来指导工具开发？","Google Search Console 能看到用户是通过什么搜索词找到你的网站的，包括展现量和点击量。这比 Google Analytics 更直接地反映用户需求——用户在搜什么，说明他们需要什么。用这些数据来决定下一步做什么工具，比凭感觉靠谱得多。",{"q":583,"a":584},"搜索数据里发现了什么有价值的信号？","品牌词（metool、me tool 等）占了大部分点击，说明自然搜索带来的新用户还很少。但非品牌词中，glb viewer 有 97 次展现、gltf viewer online 有 14 次展现，说明 3D 在线查看器有真实的搜索需求，而且 Google 已经认为 metool 的页面与这些搜索词相关。",{"q":586,"a":587},"基于数据分析，这次做了哪些 3D 工具？","一口气做了四个新工具：FBX Viewer（游戏开发常用格式）、USDZ\u002FUSD Viewer（Apple AR 生态格式）、3D Model Optimizer（减面和贴图压缩）、增强了 3D Model Format Converter（支持更多格式互转）。加上原有的 GLB\u002FglTF Viewer、STL Viewer 和 Text to 3D，3D 品类从 2 个工具扩展到了 7 个。",{"q":589,"a":590},"什么是数据驱动型构建？","不再凭直觉决定做什么功能，而是通过搜索数据和用户行为数据发现真实需求，用 AI 辅助做深度调研，然后决定优先做什么。核心循环是：收集数据 → 分析信号 → AI 辅助调研 → 做出决策 → 上线验证 → 再看数据。metool 正在成为这种模式的实验田。",{},"\u002Fbuilds\u002Fmetool\u002F2026-04-01-data-driven-building",5,{"title":264,"description":577},[596,597,598,599,600,601,602,603],"Google Search Console 数据分析","数据驱动产品迭代","工具站搜索词分析","GLB Viewer 在线","FBX Viewer 在线工具","USDZ Viewer 在线","3D 模型优化器在线","独立开发数据驱动","builds\u002Fmetool\u002F2026-04-01-data-driven-building","通过 Google Search Console 分析 metool.online 的真实搜索数据，发现 3D 查看器是唯一有自然搜索流量的工具品类。和 AI 一起做了用户需求调研后，一口气补上了 FBX Viewer、USDZ\u002FUSD Viewer、3D Model Optimizer、增强了格式转换器，把 3D 工具从 2 个扩展到 7 个。这是从'凭感觉做工具'到'用数据决定做什么'的转变。",[258,259],"Pc5ArqDao5dfNG0TZmiUUo3Vq_NoOgAAuJWYzvhlGug",{"id":609,"title":610,"body":611,"date":748,"description":749,"draft":226,"extension":227,"faq":750,"meta":763,"navigation":242,"path":764,"project":244,"readingTime":245,"seo":765,"seoKeywords":766,"stem":774,"summary":775,"tags":776,"updated":260,"__hash__":777},"builds\u002Fbuilds\u002Fmetool\u002F2026-03-31-url-restructure-cost.md","切换默认语言后，检索量断崖式下跌",{"type":8,"value":612,"toc":741},[613,616,619,625,628,631,634,640,643,646,654,674,679,682,685,688,691,694,697,700,720,723,726,729,732,735,738],[11,614,615],{"id":615},"数据说话",[15,617,618],{},"先看 Google Search Console 的数据：",[15,620,621],{},[21,622],{"alt":623,"src":624},"切换 URL 路径后检索量断崖式下跌","\u002Fb\u002Fmetool\u002Findex-optimize.png",[15,626,627],{},"从 1 月到 3 月中旬，metool.online 的 Impressions（展现量）和 Clicks（点击量）一直在稳步增长。Impressions 从每天几十涨到了 300+，Clicks 从 0 涨到了日均 20+。",[15,629,630],{},"三个月的积累，一个决定，几乎归零。",[11,632,633],{"id":633},"发生了什么",[15,635,636,637],{},"3 月 19 日，我做了一个决定：",[35,638,639],{},"把 metool.online 的默认语言从中文切成英文。",[15,641,642],{},"原因很简单：工具站的使用场景是全球通用的。图片压缩、视频转 GIF、JSON 格式化，这些需求不分国界。英文覆盖的潜在用户群远大于中文。",[15,644,645],{},"但我低估了这个改动对 SEO 的冲击。",[15,647,648,649,653],{},"metool 用的是 Nuxt i18n 的 ",[650,651,652],"code",{},"prefix_except_default"," 策略——默认语言不带路径前缀，其他语言带前缀。切换默认语言意味着：",[319,655,656,666],{},[86,657,658,659,662,663],{},"之前的中文页面 ",[650,660,661],{},"\u002Fimages\u002Fcompress\u002F"," → 变成了 ",[650,664,665],{},"\u002Fzh\u002Fimages\u002Fcompress\u002F",[86,667,668,669,662,672],{},"之前的英文页面 ",[650,670,671],{},"\u002Fen\u002Fimages\u002Fcompress\u002F",[650,673,661],{},[15,675,676],{},[35,677,678],{},"全站几十个工具的 URL 全部变了。",[15,680,681],{},"紧接着 3 月 26 日，我又做了一轮 trailing slash 统一和 sitemap 重建。双重打击。",[11,683,684],{"id":684},"代价",[15,686,687],{},"Google 已经索引的所有旧 URL 全部失效。搜索引擎不知道这些页面\"搬家\"了，它只看到旧 URL 返回了不同的内容（英文版），或者根本找不到了。",[15,689,690],{},"结果就是图表上看到的：Impressions 从日均 300+ 跌到不足 80，Clicks 从日均 20+ 跌到接近 0。",[15,692,693],{},"三个月的 SEO 积累，几天之内几乎清零。",[11,695,696],{"id":696},"本可以做得更好",[15,698,699],{},"回头看，这次迁移本可以更平滑：",[319,701,702,708,714],{},[86,703,704,707],{},[35,705,706],{},"301 重定向","：把旧 URL 301 到新 URL，告诉搜索引擎\"页面搬家了\"而不是\"页面消失了\"。SSG 静态站做 301 需要在部署层配置，当时没有做。",[86,709,710,713],{},[35,711,712],{},"过渡期 sitemap","：新旧 URL 同时提交，用 canonical 标签指向新 URL，给搜索引擎过渡时间。",[86,715,716,719],{},[35,717,718],{},"分步迁移","：先切语言，等索引稳定了再统一 trailing slash，避免双重打击。",[15,721,722],{},"这些都是标准的 URL 迁移方案，但我当时只想着\"赶紧改完\"，没有给搜索引擎留缓冲。",[11,724,725],{"id":725},"为什么我认为长期是对的",[15,727,728],{},"短期阵痛是确定的，但我依然认为这个决定是对的。",[15,730,731],{},"中文互联网的工具站竞争激烈，而且中文用户获取成本高。英文作为默认语言，每一个工具页面都在面向全球用户。\"online image compressor\"的搜索量是\"在线图片压缩\"的几十倍。",[15,733,734],{},"按照 Google 的重新索引周期，新 URL 被完全爬取和收录通常需要 2-4 周，恢复到之前的排名水平可能需要 1-2 个月。前提是新 sitemap 已正确提交、内容质量没有下降。",[15,736,737],{},"现在能做的就是：确保新 sitemap 正确、补上 301 重定向、然后等待。",[15,739,740],{},"SEO 是一个长期游戏。有时候你必须接受短期的损失，去换一个更大的可能性。",{"title":214,"searchDepth":215,"depth":215,"links":742},[743,744,745,746,747],{"id":615,"depth":218,"text":615},{"id":633,"depth":218,"text":633},{"id":684,"depth":218,"text":684},{"id":696,"depth":218,"text":696},{"id":725,"depth":218,"text":725},"2026-03-31","为了面向国际用户把默认语言从中文切成英文，所有 URL 路径全变了。Google 索引一夜清零，三个月积累的检索量几乎归零。短期阵痛，但我认为长期是对的。",[751,754,757,760],{"q":752,"a":753},"为什么切换默认语言会导致检索量下跌？","Nuxt i18n 的 prefix_except_default 策略下，默认语言的页面不带语言前缀。把默认语言从中文切成英文后，原来的 \u002Fimages\u002Fcompress\u002F（中文页）变成了 \u002Fzh\u002Fimages\u002Fcompress\u002F，而 \u002Fimages\u002Fcompress\u002F 现在指向英文页。Google 已经索引的所有旧 URL 全部失效，需要重新爬取和建立索引。",{"q":755,"a":756},"有没有办法避免这种检索量损失？","可以通过 301 重定向将旧 URL 映射到新 URL，告诉搜索引擎页面搬家了而不是消失了。但 SSG 静态站实现 301 重定向比较复杂，需要在部署层（Nginx\u002FCloudflare）配置规则。另一个方案是在 sitemap 中同时提交新旧 URL 并标注 canonical，给搜索引擎过渡时间。",{"q":758,"a":759},"检索量预计多久能恢复？","根据 Google 的重新索引周期，通常需要 2-4 周让新 URL 被完全爬取和收录，1-2 个月恢复到之前的排名水平。前提是新 sitemap 已正确提交、robots.txt 没有阻拦、页面内容质量没有下降。如果做了 301 重定向，恢复速度会更快。",{"q":761,"a":762},"切换默认语言的长期收益是什么？","英文作为默认语言意味着全球用户访问时默认看到英文界面，搜索引擎也优先索引英文内容。工具站的使用场景（图片压缩、格式转换等）是全球通用的，英文覆盖的潜在用户群远大于中文。长期来看，国际流量的天花板比中文流量高得多。",{},"\u002Fbuilds\u002Fmetool\u002F2026-03-31-url-restructure-cost",{"title":610,"description":749},[767,768,769,770,771,772,773],"网站 URL 迁移","Google 索引下降","默认语言切换 SEO 影响","sitemap 重建","搜索引擎重新收录","i18n URL 结构变更","独立开发 SEO 教训","builds\u002Fmetool\u002F2026-03-31-url-restructure-cost","metool.online 为面向国际用户将默认语言从中文切成英文，导致全站 URL 路径结构变更，Google 三个月积累的索引几乎归零。Impressions 从日均 300+ 跌到不足 80，Clicks 从日均 20+ 跌到接近 0。这是一次有意识的短期牺牲，押注长期的国际化收益。",[258,259],"JiLBHivnJLiSY1PmK_E_QtuRab70pGpC0z_ZoZPpYBo",{"id":779,"title":780,"body":781,"date":882,"description":883,"draft":226,"extension":227,"faq":884,"meta":897,"navigation":242,"path":898,"project":244,"readingTime":245,"seo":899,"seoKeywords":900,"stem":906,"summary":907,"tags":908,"updated":260,"__hash__":910},"builds\u002Fbuilds\u002Fmetool\u002F2026-03-19-seo-geo-breakthrough.md","做了大半年流量还是很少，我决定认真做 SEO",{"type":8,"value":782,"toc":876},[783,786,789,792,795,798,801,807,813,819,823,826,837,840,843,857,861,867,870,873],[11,784,785],{"id":785},"流量困局",[15,787,788],{},"metool 做了大半年，工具已经有几十个了，覆盖了图片、视频、文档、3D、开发者工具、游戏、AI Skills 等品类。",[15,790,791],{},"但流量一直上不去。",[15,793,794],{},"Google Analytics 的数据很诚实：每天的访问量很少，大部分还是自己测试产生的。工具做得再多，没人知道它存在，就等于没做。",[11,796,797],{"id":797},"数据驱动的优化",[15,799,800],{},"这次不是凭感觉优化了。我从 Google Analytics 的数据出发，让 AI 协助分析和执行。",[15,802,803,806],{},[35,804,805],{},"默认语言切英文","：GA 数据显示，英文搜索的流量潜力远大于中文。工具站的使用场景是全球通用的——图片压缩、格式转换这些需求不分国界。把默认语言切成英文，能覆盖更多国际用户。",[15,808,809,812],{},[35,810,811],{},"全站 FAQ 结构化数据","：给每个工具页都加了 FAQ Schema。搜索引擎会在结果中直接展示问答内容，占据更大的面积，提升点击率。",[15,814,815,818],{},[35,816,817],{},"HowTo 结构化数据","：把每个工具的使用步骤结构化，让搜索引擎理解\"这个工具怎么用\"。当用户搜索\"how to compress video online\"时，搜索结果里就能直接展示操作步骤。",[11,820,822],{"id":821},"让-ai-搜索引擎也能找到你","让 AI 搜索引擎也能找到你",[15,824,825],{},"传统 SEO 优化的是 Google 排名，但 2026 年了，越来越多人通过 ChatGPT、Perplexity 这些 AI 搜索引擎找信息。",[15,827,828,829,832,833,836],{},"我加了 ",[35,830,831],{},"llms.txt"," 和 ",[35,834,835],{},"llms-full.txt","——类似 robots.txt 之于传统爬虫，它告诉 AI 搜索引擎：\"关于 metool.online，这些是最值得引用的信息。\"",[15,838,839],{},"文件里列出了所有工具的名称、功能描述和 URL。当用户问 AI\"有什么在线工具可以压缩图片\"的时候，AI 就有可能引用 metool。",[15,841,842],{},"还做了一些技术层面的统一：",[319,844,845,851],{},[86,846,847,850],{},[35,848,849],{},"Trailing slash 处理"," — 统一 URL 格式，避免搜索引擎把带斜杠和不带斜杠的 URL 当作两个页面",[86,852,853,856],{},[35,854,855],{},"robots.txt 优化"," — 允许 AI 爬虫（GPTBot、Anthropic 等）访问",[11,858,860],{"id":859},"从做工具到做增长","从\"做工具\"到\"做增长\"",[15,862,863,864],{},"这一轮优化让我意识到一件事：",[35,865,866],{},"做产品和做增长是两件完全不同的事。",[15,868,869],{},"前面大半年，我一直在\"做工具\"——有需求就做，做完就上线。但\"做增长\"需要的是另一套思维：数据分析、搜索优化、内容策略。",[15,871,872],{},"metool 现在有了几十个工具，架构也足够成熟。下一步不是继续加工具，而是让已有的工具被更多人发现和使用。",[15,874,875],{},"这个故事还在继续。",{"title":214,"searchDepth":215,"depth":215,"links":877},[878,879,880,881],{"id":785,"depth":218,"text":785},{"id":797,"depth":218,"text":797},{"id":821,"depth":218,"text":822},{"id":859,"depth":218,"text":860},"2026-03-19","metool 做了大半年，工具几十个了，但流量一直上不去。借着 AI 能力提升，用 Google Analytics 数据反馈 + AI 协助，系统性地做了一轮 SEO 和 GEO 优化。",[885,888,891,894],{"q":886,"a":887},"为什么默认语言要从中文切成英文？","Google Analytics 数据显示，英文搜索带来的流量潜力远大于中文。工具站的使用场景是全球通用的（图片压缩、格式转换等），英文作为默认语言能覆盖更多国际用户，中文用户可以手动切换。",{"q":889,"a":890},"什么是 GEO 优化？","GEO（Generative Engine Optimization）是针对 AI 搜索引擎的优化。现在越来越多人通过 ChatGPT、Perplexity 等 AI 搜索信息，如果你的网站不能被 AI 引用，就等于失去了新的流量入口。GEO 包括添加 llms.txt、结构化数据、清晰的产品描述等。",{"q":892,"a":893},"llms.txt 是什么？","类似 robots.txt 之于传统爬虫，llms.txt 告诉 AI 搜索引擎'关于这个网站的核心信息'。metool 的 llms.txt 列出了所有工具的名称、功能描述和 URL，让 AI 在回答用户'有什么在线工具可以...'类型的问题时能引用 metool。",{"q":895,"a":896},"FAQ 和 HowTo 结构化数据有什么作用？","FAQ Schema 让搜索引擎在搜索结果中直接展示常见问题和回答，占据更大的结果面积。HowTo Schema 把工具的使用步骤结构化，让搜索引擎理解每个工具的操作流程。两者都能提升搜索结果的点击率和可见性。",{},"\u002Fbuilds\u002Fmetool\u002F2026-03-19-seo-geo-breakthrough",{"title":780,"description":883},[901,902,831,903,817,904,905],"工具站 SEO 优化","GEO 优化","FAQ Schema 结构化数据","Google Analytics 数据驱动","AI 搜索引擎优化","builds\u002Fmetool\u002F2026-03-19-seo-geo-breakthrough","metool 做了大半年流量依然很少，工具几十个但没人知道。决定借助 AI 能力，通过 Google Analytics 数据反馈系统性做 SEO\u002FGEO 优化：默认语言切英文面向国际用户、全站加 FAQ 和 HowTo 结构化数据、添加 llms.txt 让 AI 搜索引擎也能引用、统一 trailing slash 和 robots.txt。",[258,909],"AI 应用","HVOKaXEceQ2DIID9meIXaR9TvaR2ws7zvMyDVcU90pg",{"id":912,"title":913,"body":914,"date":1145,"description":1146,"draft":226,"extension":227,"faq":1147,"meta":1160,"navigation":242,"path":1161,"project":244,"readingTime":593,"seo":1162,"seoKeywords":1163,"stem":1171,"summary":1172,"tags":1173,"updated":260,"__hash__":1174},"builds\u002Fbuilds\u002Fmetool\u002F2026-03-12-dev-tools-and-ai-skills.md","三天上线十几个开发者工具，还做了 AI Skills 板块",{"type":8,"value":915,"toc":1139},[916,920,923,932,939,943,946,956,959,964,1010,1015,1053,1058,1069,1075,1079,1082,1123,1127,1133,1136],[11,917,919],{"id":918},"agent-skill-的摸索","Agent Skill 的摸索",[15,921,922],{},"2026 年初，我花了大量时间研究 AI Agent Skill 模式——让 AI 助手通过安装技能来扩展能力。",[15,924,925,926,931],{},"在这个过程中积累了不少经验：怎么设计 Skill 的接口、怎么处理跨平台兼容性、怎么让非技术用户也能安装使用。这些经验后来也应用到了 ",[425,927,930],{"href":928,"rel":929,"target":430},"https:\u002F\u002Fwhoamiagent.com",[429],"whoami"," 等项目中。",[15,933,934,935,938],{},"既然有了经验，不如在 metool 上做一个 ",[35,936,937],{},"AI Skills 展示板块","，把我做的各种 Skill 都放上来。",[11,940,942],{"id":941},"三天十几个新工具","三天，十几个新工具",[15,944,945],{},"3 月 12 日到 3 月 18 日，可能是 metool 开发密度最高的一段时间。",[15,947,948,951,952,955],{},[35,949,950],{},"先做了统一设计系统","。之前每个工具页面各写各的，风格不统一，重复代码多。这次抽象出了 ",[650,953,954],{},"ToolPageLayout"," 组件——新工具只需要传入标题和核心内容，布局、动画、SEO 信息、相关工具推荐都自动处理。",[15,957,958],{},"有了统一架构，加工具的速度就上来了：",[15,960,961],{},[35,962,963],{},"开发者工具：",[319,965,966,973,980,988,995,1002],{},[86,967,968],{},[425,969,972],{"href":970,"rel":971,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002Fbase64\u002F",[429],"Base64 编解码",[86,974,975],{},[425,976,979],{"href":977,"rel":978,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FregexTest\u002F",[429],"正则表达式测试器",[86,981,982,987],{},[425,983,986],{"href":984,"rel":985,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FhashGenerator\u002F",[429],"哈希生成器","（MD5、SHA-1、SHA-256 等）",[86,989,990],{},[425,991,994],{"href":992,"rel":993,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FpasswordGenerator\u002F",[429],"随机密码生成器",[86,996,997],{},[425,998,1001],{"href":999,"rel":1000,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FtextDiff\u002F",[429],"文本差异对比",[86,1003,1004,1009],{},[425,1005,1008],{"href":1006,"rel":1007,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FdataFormatConvert\u002F",[429],"数据格式转换","（JSON\u002FYAML\u002FTOML 互转）",[15,1011,1012],{},[35,1013,1014],{},"文档和媒体工具：",[319,1016,1017,1025,1032,1038,1046],{},[86,1018,1019,1024],{},[425,1020,1023],{"href":1021,"rel":1022,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FpdfTools\u002F",[429],"PDF 工具","（预览、拆分）",[86,1026,1027],{},[425,1028,1031],{"href":1029,"rel":1030,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002Fwatermark\u002F",[429],"图片水印",[86,1033,1034],{},[425,1035,90],{"href":1036,"rel":1037,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002F3d\u002FmodelConvert\u002F",[429],[86,1039,1040,1045],{},[425,1041,1044],{"href":1042,"rel":1043,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002F3d\u002FtextTo3d\u002F",[429],"Text to 3D","（文字生成 3D 模型）",[86,1047,1048],{},[425,1049,1052],{"href":1050,"rel":1051,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FweixinToMarkdown\u002F",[429],"微信文章反向转 Markdown",[15,1054,1055],{},[35,1056,1057],{},"基础组件：",[319,1059,1060,1063,1066],{},[86,1061,1062],{},"FAQ 组件（每个工具页自动展示常见问题）",[86,1064,1065],{},"Toast 通知系统",[86,1067,1068],{},"vue-json-pretty 替换自制的 JSON 查看器",[15,1070,1071],{},[21,1072],{"alt":1073,"src":1074},"AI Skills 板块","\u002Fb\u002Fmetool\u002Fskills.png",[11,1076,1078],{"id":1077},"ai-skills-板块上线","AI Skills 板块上线",[15,1080,1081],{},"同时上线了 AI Skills 展示板块，每个 Skill 有独立的介绍页面：",[319,1083,1084,1093,1103,1113],{},[86,1085,1086,1092],{},[35,1087,1088],{},[425,1089,930],{"href":1090,"rel":1091,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fskills\u002Fwhoami\u002F",[429]," — 跨 AI 身份同步",[86,1094,1095,1102],{},[35,1096,1097],{},[425,1098,1101],{"href":1099,"rel":1100,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fskills\u002Fzhongjie\u002F",[429],"中介哥"," — AI 买房参谋",[86,1104,1105,1112],{},[35,1106,1107],{},[425,1108,1111],{"href":1109,"rel":1110,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fskills\u002Fidea2mvp\u002F",[429],"idea2mvp"," — 从创意到产品",[86,1114,1115,1122],{},[35,1116,1117],{},[425,1118,1121],{"href":1119,"rel":1120,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fskills\u002FgaImprove\u002F",[429],"GA 优化"," — Google Analytics 数据驱动优化",[11,1124,1126],{"id":1125},"ai-coding-改变了什么","AI Coding 改变了什么",[15,1128,1129,1130,63],{},"这三天能做这么多，核心原因是 ",[35,1131,1132],{},"AI Coding",[15,1134,1135],{},"每个工具的开发周期从\"半天\"缩短到了\"一两个小时\"。我负责定需求和验收，AI 负责写代码。统一的架构加上 AI 的速度，工具的边际成本几乎为零。",[15,1137,1138],{},"这也是我在探索 Agent Skill 过程中最深的体会：AI 不只是能帮你写代码，它改变的是你做事的规模和速度。",{"title":214,"searchDepth":215,"depth":215,"links":1140},[1141,1142,1143,1144],{"id":918,"depth":218,"text":919},{"id":941,"depth":218,"text":942},{"id":1077,"depth":218,"text":1078},{"id":1125,"depth":218,"text":1126},"2026-03-12","大量摸索 Agent Skill 模式积累了经验，借 AI Coding 的速度，三天内密集上线了十几个开发者工具和 AI Skills 展示板块。",[1148,1151,1154,1157],{"q":1149,"a":1150},"三天内是怎么做到上线这么多工具的？","两个关键因素：一是 metool 的架构已经很成熟，新增工具只需写核心逻辑；二是 AI Coding 的效率极高，每个工具的开发周期从'半天'缩短到了'一两个小时'。统一的 ToolPageLayout 组件让页面布局、SEO、FAQ 都是自动化的。",{"q":1152,"a":1153},"这次上线了哪些开发者工具？","Base64 编解码、正则表达式测试器、哈希生成器（MD5\u002FSHA 等）、随机密码生成器、文本差异对比、数据格式转换（JSON\u002FYAML\u002FTOML 互转）。此外还有 PDF 工具、图片水印、3D 模型格式转换和 Text to 3D。",{"q":1155,"a":1156},"AI Skills 板块是什么？","展示我开发的 AI Agent Skills 的专区，包括 whoami（跨 AI 身份同步）、中介哥（买房参谋）、idea2mvp（创意到产品）、GA 优化（Google Analytics 数据驱动）等。每个 Skill 有独立的介绍页面，包含功能说明、安装方式和使用演示。",{"q":1158,"a":1159},"统一设计系统（ToolPageLayout）解决了什么问题？","之前每个工具页面的布局、标题区域、描述文案、SEO 信息都是各写各的，风格不统一且重复代码多。ToolPageLayout 把这些全部抽象成一个统一组件，新工具只需传入标题和内容，布局、动画、SEO、相关工具推荐都自动处理。",{},"\u002Fbuilds\u002Fmetool\u002F2026-03-12-dev-tools-and-ai-skills",{"title":913,"description":1146},[1164,1165,1166,1167,972,1168,1169,1170],"AI Coding 开发效率","开发者在线工具","Agent Skill","AI Skills 展示","正则表达式测试","在线密码生成器","统一设计系统","builds\u002Fmetool\u002F2026-03-12-dev-tools-and-ai-skills","大量摸索 Agent Skill 模式后积累了丰富经验，借助 AI Coding 的效率，三天内在 metool 上密集上线了十几个开发者工具（Base64、正则测试、哈希生成、密码生成、文本对比等），同时做了统一的工具页面设计系统、FAQ 组件、Toast 通知，还上线了 AI Skills 展示板块。",[258,909],"hihzr5kpiZrcsafARUi4Ir4QvNVm8xwB2k6CfqqQfew",{"id":1176,"title":1177,"body":1178,"date":1331,"description":1332,"draft":226,"extension":227,"faq":1333,"meta":1346,"navigation":242,"path":1347,"project":244,"readingTime":245,"seo":1348,"seoKeywords":1349,"stem":1357,"summary":1358,"tags":1359,"updated":260,"__hash__":1360},"builds\u002Fbuilds\u002Fmetool\u002F2026-02-10-content-creation-tools.md","用 AI 写文章，一键转成公众号和小红书格式",{"type":8,"value":1179,"toc":1325},[1180,1184,1187,1193,1196,1199,1202,1205,1211,1221,1241,1247,1255,1269,1272,1275,1301,1305,1308,1322],[11,1181,1183],{"id":1182},"ai-写作的最后一公里","AI 写作的最后一公里",[15,1185,1186],{},"2026 年初，AI 的写作能力又提升了一大截。我开始认真写公众号，用 AI 辅助产出 Markdown 格式的文章。",[15,1188,1189,1190,63],{},"写作效率提上来了，但有一个环节特别痛苦：",[35,1191,1192],{},"从 Markdown 到公众号发布",[15,1194,1195],{},"微信公众号编辑器不支持 Markdown，也不能直接粘贴 HTML。网上有一些 Markdown 转公众号的工具，但样式太固定、兼容性问题多。每次发文章，我都要花大量时间调排版。",[15,1197,1198],{},"同样的问题在小红书上更严重——小红书是图文格式，长文要拆成多张图片卡片。",[11,1200,1201],{"id":1201},"高度定制化的转换工具",[15,1203,1204],{},"2025 年 3 月做过一个微信文章转换的雏形，但功能很粗糙。这次我重写了整个工具。",[15,1206,1207],{},[21,1208],{"alt":1209,"src":1210},"Markdown 转微信公众号文章","\u002Fb\u002Fmetool\u002Fwechat-converter.png",[15,1212,1213,1220],{},[35,1214,1215],{},[425,1216,1219],{"href":1217,"rel":1218,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FmdToWeixinArtical\u002F",[429],"Markdown 转公众号","：",[319,1222,1223,1226,1229,1232,1235,1238],{},[86,1224,1225],{},"自定义排版风格（标题、正文、引用、代码块各有独立样式）",[86,1227,1228],{},"代码高亮渲染",[86,1230,1231],{},"嵌套列表正确缩进（微信编辑器的经典坑）",[86,1233,1234],{},"HTML 注释自动清理",[86,1236,1237],{},"图片适配（圆角、阴影、居中）",[86,1239,1240],{},"一键复制到剪贴板，粘贴到微信编辑器直接可用",[15,1242,1243],{},[21,1244],{"alt":1245,"src":1246},"Markdown 转小红书卡片","\u002Fb\u002Fmetool\u002Fxiaohongshu-converter.png",[15,1248,1249,1220],{},[35,1250,1251],{},[425,1252,1245],{"href":1253,"rel":1254,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FmdToXiaohongshu\u002F",[429],[319,1256,1257,1260,1263,1266],{},[86,1258,1259],{},"把长文渲染成小红书风格的图文卡片",[86,1261,1262],{},"支持字体大小调节",[86,1264,1265],{},"精准分页，每页内容自动适配小红书图片比例",[86,1267,1268],{},"直接截图就能发",[11,1270,1271],{"id":1271},"全站设计系统也重塑了",[15,1273,1274],{},"做内容工具的同时，我也对 metool 的整体设计做了一次升级：",[319,1276,1277,1283,1290],{},[86,1278,1279,1280],{},"统一了全站的图标系统，从散落各处的 SVG\u002FPNG 图标切换到 ",[35,1281,1282],{},"Iconify",[86,1284,1285,1286,1289],{},"加了 ",[35,1287,1288],{},"全局搜索功能","，工具多了之后靠导航找太慢",[86,1291,1292,1293,1300],{},"做了 ",[35,1294,1295],{},[425,1296,1299],{"href":1297,"rel":1298,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002FsolarInHand\u002F",[429],"太阳系手势交互游戏","，儿子可以在手机上用手势旋转缩放太阳系",[11,1302,1304],{"id":1303},"一篇文章多平台分发","一篇文章，多平台分发",[15,1306,1307],{},"现在我的内容创作工作流是这样的：",[83,1309,1310,1313,1316,1319],{},[86,1311,1312],{},"用 AI 辅助撰写 Markdown 格式的文章",[86,1314,1315],{},"在 metool 上实时预览公众号效果",[86,1317,1318],{},"一键复制 HTML，粘贴到微信编辑器",[86,1320,1321],{},"用转小红书工具生成图文卡片截图",[15,1323,1324],{},"一篇文章，多平台分发，全程不需要手动排版。这就是\"自己做工具\"的好处：完全按自己的工作流定制。",{"title":214,"searchDepth":215,"depth":215,"links":1326},[1327,1328,1329,1330],{"id":1182,"depth":218,"text":1183},{"id":1201,"depth":218,"text":1201},{"id":1271,"depth":218,"text":1271},{"id":1303,"depth":218,"text":1304},"2026-02-10","AI 写作能力大提升，我开始写公众号。但从 Markdown 到公众号发布的最后一公里很痛苦。网上的工具不够用，我做了高度定制化的转换工具。",[1334,1337,1340,1343],{"q":1335,"a":1336},"为什么 Markdown 转公众号需要专门的工具？","微信公众号编辑器不支持 Markdown，而且对 HTML\u002FCSS 有严格限制（不支持外部样式表、不支持 class）。需要把 Markdown 渲染成内联样式的 HTML，还要处理代码高亮、图片适配、列表嵌套等公众号特有的兼容问题。",{"q":1338,"a":1339},"和网上已有的 Markdown 转公众号工具比，有什么不同？","网上的工具大多是通用方案，样式固定。metool 的版本做了高度定制化：自定义排版风格、代码块样式、标题层级样式、图片圆角和阴影效果等，还针对微信编辑器的各种坑做了兼容处理（如 HTML 注释清理、嵌套列表缩进修复）。",{"q":1341,"a":1342},"Markdown 转小红书工具是怎么工作的？","把 Markdown 内容渲染成小红书风格的图文卡片，支持字体大小调节和精准分页。每页内容自动适配小红书的图片比例，可以直接截图发布。适合把长文拆分成小红书的多图内容格式。",{"q":1344,"a":1345},"整个内容创作工作流是什么样的？","用 AI 辅助撰写 Markdown 格式的文章，在 metool 上实时预览效果，一键复制公众号格式的 HTML 粘贴到微信编辑器，同时用转小红书工具生成图文卡片。一篇文章，多平台分发，全程不需要手动排版。",{},"\u002Fbuilds\u002Fmetool\u002F2026-02-10-content-creation-tools",{"title":1177,"description":1332},[1350,1351,1352,1353,1354,1355,1356],"Markdown 转微信公众号","Markdown 转小红书","AI 写作工具","公众号排版工具","内容分发工具","微信文章格式转换","小红书图文卡片","builds\u002Fmetool\u002F2026-02-10-content-creation-tools","AI 能力提升后开始写公众号，发现从 Markdown 到公众号发布的最后一公里很痛苦。网上的转换工具不够用，在 metool 上做了高度定制化的 Markdown 转公众号和转小红书工具，实现 AI 辅助产出内容后一键分发到多个平台。",[258,909],"wss3sw3VhSQdFnFFEEZBvOfAiN67lGRhbtrz2a2gtuI",{"id":1362,"title":1363,"body":1364,"date":1496,"description":1497,"draft":226,"extension":227,"faq":1498,"meta":1511,"navigation":242,"path":1512,"project":244,"readingTime":593,"seo":1513,"seoKeywords":1514,"stem":1521,"summary":1522,"tags":1523,"updated":260,"__hash__":1524},"builds\u002Fbuilds\u002Fmetool\u002F2025-11-12-lan-transfer.md","iPhone 和安卓之间传文件，怎么就这么难",{"type":8,"value":1365,"toc":1490},[1366,1369,1372,1386,1389,1399,1403,1406,1412,1415,1429,1432,1436,1439,1445,1451,1457,1463,1469,1475,1478,1484,1487],[11,1367,1368],{"id":1368},"传个文件怎么就这么难",[15,1370,1371],{},"做移动端开发的时候，我经常需要在电脑和手机之间传文件。在 Mac 和 iPhone 之间有 AirDrop，还算方便。但如果是 iPhone 和安卓之间呢？",[319,1373,1374,1377,1380,1383],{},[86,1375,1376],{},"蓝牙太慢",[86,1378,1379],{},"微信传文件有大小限制，还会压缩",[86,1381,1382],{},"邮件附件也有限制",[86,1384,1385],{},"USB 线在手边不一定有",[15,1387,1388],{},"每次遇到这个场景我都很烦。明明两台设备就在手边，传个文件却要折腾半天。",[15,1390,1391,1392,63],{},"我决定在 metool 上做一个 ",[35,1393,1394],{},[425,1395,1398],{"href":1396,"rel":1397,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FlanTransfer\u002F",[429],"局域网文件传输工具",[11,1400,1402],{"id":1401},"浏览器端-p2p-传输","浏览器端 P2P 传输",[15,1404,1405],{},"技术方案用了 WebRTC：两台设备打开同一个网页，通过邀请码建立点对点连接，文件直接在设备之间传输，不经过服务器。",[15,1407,1408],{},[21,1409],{"alt":1410,"src":1411},"跨设备文件互传工具","\u002Fb\u002Fmetool\u002Flan-transfer.png",[15,1413,1414],{},"第一版做了基础功能：",[319,1416,1417,1420,1423,1426],{},[86,1418,1419],{},"4 位数字邀请码配对",[86,1421,1422],{},"二维码扫码连接（手机扫一下就行）",[86,1424,1425],{},"文件和文本都能传",[86,1427,1428],{},"传输过程加密",[15,1430,1431],{},"但发布后发现，真实场景比想象的复杂得多。",[11,1433,1435],{"id":1434},"两周18-个-commit","两周，18 个 commit",[15,1437,1438],{},"从 11 月 12 日到 11 月 21 日，这个功能我迭代了 18 个 commit。是 metool 里单个功能迭代密度最高的一次。",[15,1440,1441,1444],{},[35,1442,1443],{},"大文件分块传输"," — 大文件不能一次性发送，要分块。每块用 Map 追踪接收状态，某一块失败了自动重传，不用重发整个文件。",[15,1446,1447,1450],{},[35,1448,1449],{},"批量文件支持"," — 不只传一个文件，要能一次选多个文件发送。",[15,1452,1453,1456],{},[35,1454,1455],{},"iOS 兼容"," — iOS Safari 对多文件传输有限制，需要特殊处理。还要提示用户调整浏览器的自动下载设置。",[15,1458,1459,1462],{},[35,1460,1461],{},"校园网\u002F办公网"," — 这类网络可能限制 P2P 连接。加了网络限制检测和提示，建议用户开手机热点作为替代方案。",[15,1464,1465,1468],{},[35,1466,1467],{},"代理环境"," — 开了代理的设备连接行为不同，加了说明。",[15,1470,1471,1474],{},[35,1472,1473],{},"连接体验"," — 邀请码从 6 位简化到 4 位纯数字，合并了扫码和手动输入的 UI，优化了连接状态的实时反馈。",[11,1476,1477],{"id":1477},"一个功能的极致打磨",[15,1479,1480,1481],{},"这两周的经历让我体会到一个道理：",[35,1482,1483],{},"做一个功能\"能用\"很快，做到\"好用\"要花十倍的时间。",[15,1485,1486],{},"初版半天就做完了，但覆盖各种边界场景、各种设备兼容性、各种网络环境，花了两周。每次觉得\"应该差不多了\"，真实使用的时候又会冒出新问题。",[15,1488,1489],{},"但这也是个人项目的好处：没有人催进度，可以把一个功能打磨到自己满意为止。",{"title":214,"searchDepth":215,"depth":215,"links":1491},[1492,1493,1494,1495],{"id":1368,"depth":218,"text":1368},{"id":1401,"depth":218,"text":1402},{"id":1434,"depth":218,"text":1435},{"id":1477,"depth":218,"text":1477},"2025-11-12","做移动端开发时经常需要跨设备传文件，iPhone 和安卓之间传文件特别痛苦。用 WebRTC 做了一个局域网 P2P 传输工具，两周迭代了 18 个 commit。",[1499,1502,1505,1508],{"q":1500,"a":1501},"为什么不用现有的文件传输工具？","AirDrop 只在苹果设备之间用，蓝牙传输太慢，微信传文件有大小限制和压缩，邮件附件也有限制。最简单的局域网传输方案需要两台设备在同一个网络下，但浏览器端的方案不需要安装任何软件，打开网页就能用。",{"q":1503,"a":1504},"WebRTC P2P 传输是怎么工作的？","两台设备打开同一个网页，通过邀请码（4 位数字）或二维码建立 WebRTC 点对点连接。文件直接在两台设备之间传输，不经过服务器。传输过程加密，数据不会被中间人截获。",{"q":1506,"a":1507},"大文件传输怎么处理？","大文件会自动分块传输，每块的接收状态用 Map 追踪。如果某一块传输失败，会自动重传而不是重新发送整个文件。这个机制在网络不稳定的环境下特别重要。",{"q":1509,"a":1510},"遇到了哪些边界场景？","校园网\u002F办公网可能限制 P2P 连接，加了使用限制提示和手机热点的解决方案建议。iOS Safari 对多文件传输有限制，做了特殊处理和提示。还有代理环境下的连接问题、自动下载的浏览器兼容性问题等，两周内覆盖了十几种边界场景。",{},"\u002Fbuilds\u002Fmetool\u002F2025-11-12-lan-transfer",{"title":1363,"description":1497},[1515,1516,1517,1518,1519,1443,1520],"局域网文件传输","WebRTC P2P","iPhone 安卓传文件","跨设备文件传输","浏览器端文件传输","在线局域网传输工具","builds\u002Fmetool\u002F2025-11-12-lan-transfer","移动端开发中 iPhone 和安卓之间传文件是一件极其痛苦的事。用 WebRTC 做了浏览器端 P2P 加密传输，支持二维码扫码连接、大文件分块传输和重传机制。两周内从初版迭代到覆盖校园网\u002F代理\u002FiOS 多文件等各种边界场景。",[258,259],"3cGzuWpv-48beUzZ8_2W9usNWZv7Bs5wLJnbMUbBLO4",{"id":1526,"title":1527,"body":1528,"date":1636,"description":1637,"draft":226,"extension":227,"faq":1638,"meta":1651,"navigation":242,"path":1652,"project":244,"readingTime":245,"seo":1653,"seoKeywords":1654,"stem":1662,"summary":1663,"tags":1664,"updated":260,"__hash__":1665},"builds\u002Fbuilds\u002Fmetool\u002F2025-11-02-games-for-my-son.md","孩子一玩迷宫就是半小时，我又给他做了四个游戏",{"type":8,"value":1529,"toc":1630},[1530,1533,1536,1539,1542,1545,1548,1551,1557,1560,1570,1580,1590,1600,1603,1609,1612,1615,1617,1620,1623],[11,1531,1532],{"id":1532},"孩子的编程启蒙",[15,1534,1535],{},"我孩子很小就开始对我的电脑感兴趣。每次我在写代码，他就凑过来看。",[15,1537,1538],{},"之前在 metool 上做过一个迷宫游戏，带音效、带移动端触控操作。有一次我在手机上测试，孩子看到了，拿过去就开始玩。",[15,1540,1541],{},"一玩就是半小时。",[15,1543,1544],{},"从那以后，每次出门吃饭排队，他就问我：\"爸爸，可以玩迷宫吗？\" 我打开手机浏览器，进 metool，递给他。",[15,1546,1547],{},"这让我想到：既然迷宫他这么喜欢，我再做几个游戏给他。做成在线版，随时能打开。",[11,1549,1550],{"id":1550},"一天做了四个",[15,1552,1553],{},[21,1554],{"alt":1555,"src":1556},"给儿子做的游戏合集","\u002Fb\u002Fmetool\u002Fgames.png",[15,1558,1559],{},"2025 年 11 月 2 日，一天之内上线了：",[15,1561,1562,1569],{},[35,1563,1564],{},[425,1565,1568],{"href":1566,"rel":1567,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Fgo\u002F",[429],"围棋"," — 带一个启发式 AI 对手。算法考虑了领地控制、棋子连接和眼位判断，不靠深度学习模型，但在小棋盘上能提供有一定挑战性的对局。支持 9x9 和 13x13 两种棋盘。",[15,1571,1572,1579],{},[35,1573,1574],{},[425,1575,1578],{"href":1576,"rel":1577,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Fgomoku\u002F",[429],"五子棋"," — 同样带 AI 对手，配了胜利烟花动画。AI 的算法会评估棋型（活三、冲四等），对小朋友来说难度刚好。",[15,1581,1582,1589],{},[35,1583,1584],{},[425,1585,1588],{"href":1586,"rel":1587,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Ftetris\u002F",[429],"俄罗斯方块"," — 专门为移动端做了长按控制，方块能快速左右移动和加速下落。还做了悬浮分数面板和下一个方块预览，移动端体验接近桌面端。",[15,1591,1592,1599],{},[35,1593,1594],{},[425,1595,1598],{"href":1596,"rel":1597,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fvideos\u002FaudioEditor\u002F",[429],"音频波形编辑器"," — 这个不是游戏，但顺手做了。支持波形可视化、片段选择和裁剪。",[11,1601,1602],{"id":1602},"为什么做在线版",[15,1604,1605,1606,63],{},"做 App 当然也行，但在线版有一个不可替代的优势：",[35,1607,1608],{},"不需要安装",[15,1610,1611],{},"孩子想玩的时候，我打开浏览器就行了。不用去 App Store 下载，不用等更新。我改了代码部署完，下一次打开就是最新版。",[15,1613,1614],{},"对于这种\"随时可能想用一下\"的场景，网页比 App 更合适。",[11,1616,1555],{"id":1555},[15,1618,1619],{},"后来我把游戏分类的标题改成了\"给儿子做的游戏合集\"。",[15,1621,1622],{},"这不是一个商业决策，是一个爸爸的决策。metool 上的工具大多是为我自己的工作需求做的，但游戏这个品类，是为我孩子做的。",[15,1624,1625,1626,1629],{},"后来又陆续加了",[425,1627,1299],{"href":1297,"rel":1628,"target":430},[429],"，让他在手机上用手势旋转缩放太阳系。不过那是一个月之后的事了。",{"title":214,"searchDepth":215,"depth":215,"links":1631},[1632,1633,1634,1635],{"id":1532,"depth":218,"text":1532},{"id":1550,"depth":218,"text":1550},{"id":1602,"depth":218,"text":1602},{"id":1555,"depth":218,"text":1555},"2025-11-02","孩子看我编程很感兴趣，尤其迷宫游戏他一玩就是半小时。做成在线版，随时掏出手机就能给他玩。一天之内做了围棋、五子棋、俄罗斯方块和音频编辑器。",[1639,1642,1645,1648],{"q":1640,"a":1641},"围棋的 AI 对手是怎么实现的？","用启发式算法实现，不依赖深度学习模型。算法考虑了领地控制、棋子连接、眼位判断等围棋基本策略，在 9x9 和 13x13 棋盘上能提供有一定挑战性的对局体验。全部在浏览器端运行，不需要服务器计算。",{"q":1643,"a":1644},"为什么俄罗斯方块要做移动端长按控制？","在手机上玩俄罗斯方块，传统的虚拟按键体验很差。长按控制让方块能快速左右移动和加速下落，操作更流畅。还做了悬浮分数面板和下一个方块预览，让移动端的游戏体验接近桌面端。",{"q":1646,"a":1647},"这些游戏为什么做成在线版而不是 App？","在线版的优势是随时随地能用：掏出手机打开浏览器就能玩，不需要下载安装。对孩子来说，在等餐、坐车的时候想玩，打开网页比打开 App 更快。而且在线版更新不需要用户手动升级。",{"q":1649,"a":1650},"音频编辑器是做什么用的？","支持音频波形可视化、片段选择、裁剪和播放控制。可以在浏览器里直接编辑音频文件，截取需要的片段。虽然和游戏是同一天做的，但它属于工具而不是游戏。",{},"\u002Fbuilds\u002Fmetool\u002F2025-11-02-games-for-my-son",{"title":1527,"description":1637},[1655,1656,1657,1658,1659,1660,1661],"给孩子做的游戏","在线围棋 AI 对手","在线五子棋","在线俄罗斯方块","移动端网页游戏","前端游戏开发","启发式 AI 算法","builds\u002Fmetool\u002F2025-11-02-games-for-my-son","孩子看编程很感兴趣，之前做的迷宫游戏他一玩就是半小时。一天之内在 metool 上线了围棋（带启发式 AI 对手）、五子棋（带 AI）、俄罗斯方块（移动端长按控制），还顺手做了一个音频波形编辑器。",[258,259],"sdnRuCOzhZjRsJiLHYmOHoSrVUv1pu-bpmx4SCnd2P4",{"id":1667,"title":1668,"body":1669,"date":1807,"description":1808,"draft":226,"extension":227,"faq":1809,"meta":1822,"navigation":242,"path":1823,"project":244,"readingTime":245,"seo":1824,"seoKeywords":1825,"stem":1832,"summary":1833,"tags":1834,"updated":260,"__hash__":1835},"builds\u002Fbuilds\u002Fmetool\u002F2025-10-12-back-after-silence.md","停了五个月，回来发现要改的全是底层",{"type":8,"value":1670,"toc":1799},[1671,1674,1677,1680,1683,1687,1690,1697,1700,1704,1707,1728,1731,1734,1737,1759,1762,1765,1768,1790,1793,1796],[11,1672,1673],{"id":1673},"五个月的空白",[15,1675,1676],{},"从 2025 年 3 月到 10 月。中间只在 8 月份改了一次去背景工具的代码。",[15,1678,1679],{},"不是放弃了，就是没想到要做什么。工具站不像 SaaS 产品有持续的业务驱动力，个人项目的节奏就是这样：有需求就做，没需求就停。",[15,1681,1682],{},"10 月份回来再看这个项目，发现要改的不是功能，而是底层。",[11,1684,1686],{"id":1685},"ai-去背景大升级","AI 去背景大升级",[15,1688,1689],{},"第一版的图片去背景是纯手动方案：用 Canvas 笔刷一点点涂抹。能用，但效率很低。",[15,1691,1692,1693,1696],{},"这次升级到了 ",[35,1694,1695],{},"ONNX Runtime"," 方案——在浏览器端直接运行 AI 模型，一键自动去背景。精度和速度都大幅提升，而且模型在本地推理，文件还是不会离开设备。",[15,1698,1699],{},"这个升级让我意识到，前端能做的事情比我想象的多。AI 模型跑在浏览器端已经不是实验性的技术了。",[11,1701,1703],{"id":1702},"seo-补课","SEO 补课",[15,1705,1706],{},"停更期间，metool 在搜索引擎上几乎没有存在感。回来后我认真补了一次 SEO：",[319,1708,1709,1719,1722,1725],{},[86,1710,1711,1712,832,1715,1718],{},"重构了 ",[650,1713,1714],{},"usePageMeta",[650,1716,1717],{},"useSimpleSEO","，让每个工具页自动生成规范的 meta 信息",[86,1720,1721],{},"补全了 Open Graph 标签和 JSON-LD 结构化数据",[86,1723,1724],{},"加了 SEO 客户端插件处理动态结构化数据注入",[86,1726,1727],{},"重写了 robots.txt",[15,1729,1730],{},"SEO 是那种\"不做不会死，做了慢慢见效\"的事情。但对工具站来说，搜索引擎是最重要的流量来源，不做就等于放弃了用户主动找到你的可能性。",[11,1732,1733],{"id":1733},"开发者工具首发",[15,1735,1736],{},"这次回来还上线了第一批开发者工具：",[319,1738,1739,1749],{},[86,1740,1741,1748],{},[35,1742,1743],{},[425,1744,1747],{"href":1745,"rel":1746,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FjsonBeautify\u002F",[429],"JSON 美化\u002F格式化"," — 带语法高亮和可折叠的树形视图",[86,1750,1751,1758],{},[35,1752,1753],{},[425,1754,1757],{"href":1755,"rel":1756,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FurlEncodeDecode\u002F",[429],"URL 编码\u002F解码"," — 简单但高频的需求",[15,1760,1761],{},"自己在开发中天天用这类工具，做进 metool 顺理成章。后面这个品类会持续扩展。",[11,1763,1764],{"id":1764},"新的图片工具",[15,1766,1767],{},"还上线了两个新的图片工具：",[319,1769,1770,1780],{},[86,1771,1772,1779],{},[35,1773,1774],{},[425,1775,1778],{"href":1776,"rel":1777,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FiphoneLongImageStitch\u002F",[429],"iPhone 长图拼接"," — 把多张 iPhone 截图拼成一张长图",[86,1781,1782,1789],{},[35,1783,1784],{},[425,1785,1788],{"href":1786,"rel":1787,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FresizeIosAppDistribution\u002F",[429],"iOS 应用图标裁剪"," — 一键生成 App Store 需要的全套尺寸",[15,1791,1792],{},"都是做移动端开发时的真实需求。",[11,1794,1795],{"id":1795},"停了五个月不是坏事",[15,1797,1798],{},"停更的五个月让我有了新的视角。如果一直在加功能，可能不会注意到底层该升级了。有时候停下来，再回来看，反而能看清该做什么。",{"title":214,"searchDepth":215,"depth":215,"links":1800},[1801,1802,1803,1804,1805,1806],{"id":1673,"depth":218,"text":1673},{"id":1685,"depth":218,"text":1686},{"id":1702,"depth":218,"text":1703},{"id":1733,"depth":218,"text":1733},{"id":1764,"depth":218,"text":1764},{"id":1795,"depth":218,"text":1795},"2025-10-12","从 3 月到 10 月，metool 停更了五个月。不是放弃了，是没想到要做什么。回来后发现需要升级的不是功能，而是底层能力。",[1810,1813,1816,1819],{"q":1811,"a":1812},"为什么停了五个月？","没有特别的原因，就是积压的需求做完了，没想到还要做什么。工具站不像 SaaS 产品有持续的业务驱动力，个人项目的节奏就是这样——有灵感就做，没灵感就停。",{"q":1814,"a":1815},"AI 去背景升级到 ONNX 模型有什么变化？","第一版去背景是 Canvas 笔刷方案，需要手动涂抹。升级后用 ONNX Runtime 在浏览器端运行 AI 模型，一键自动去背景，精度和速度都大幅提升。模型在本地推理，文件依然不会上传到服务器。",{"q":1817,"a":1818},"这次升级了哪些 SEO 能力？","补全了 meta tags、Open Graph 标签和 JSON-LD 结构化数据。重构了 usePageMeta 和 useSimpleSEO 两个组合式函数，让每个工具页面自动生成规范的 SEO 信息。还加了 SEO 插件处理客户端渲染的结构化数据注入。",{"q":1820,"a":1821},"为什么开始做开发者工具？","自己在开发过程中经常需要格式化 JSON、编解码 URL 这类小操作。之前都在其他网站上做，现在 metool 的架构已经很成熟，加一个新工具很快，干脆自己做了。后面开发者工具会成为 metool 的一个重要品类。",{},"\u002Fbuilds\u002Fmetool\u002F2025-10-12-back-after-silence",{"title":1668,"description":1808},[1826,1827,1828,1829,1830,1778,1831],"独立开发项目停更","ONNX Runtime 去背景","Nuxt Image 优化","SEO 结构化数据","开发者工具 JSON 美化","在线工具性能优化","builds\u002Fmetool\u002F2025-10-12-back-after-silence","metool 停更五个月后回归，发现要改的不是功能而是底层：AI 去背景升级到 ONNX 模型、图片加载用 Nuxt Image 优化、SEO 从零补全结构化数据和 meta 信息、上线了第一批开发者工具（JSON 美化、URL 编解码），还做了 iPhone 长图拼接和 iOS 应用图标裁剪。",[258,259],"iiptoayqNzPYX0rh1rHYBLmxt007FNGkwdZhg9DuhvM",{"id":1837,"title":1838,"body":1839,"date":1956,"description":1957,"draft":226,"extension":227,"faq":1958,"meta":1971,"navigation":242,"path":1972,"project":244,"readingTime":245,"seo":1973,"seoKeywords":1974,"stem":1981,"summary":1982,"tags":1983,"updated":260,"__hash__":1984},"builds\u002Fbuilds\u002Fmetool\u002F2025-03-01-video-tools-and-easter-eggs.md","视频处理也做了，顺手还做了几个节日彩蛋",{"type":8,"value":1840,"toc":1950},[1841,1844,1847,1850,1853,1859,1862,1894,1897,1900,1903,1914,1925,1928,1932,1941,1944,1947],[11,1842,1843],{"id":1843},"补齐视频处理",[15,1845,1846],{},"图片工具和文档工具做完之后，视频处理是一个自然的延伸。",[15,1848,1849],{},"我日常也有视频处理的需求：压缩一下视频发邮件、转个格式、截一段视频做成 GIF。和图片工具一样，网上的视频处理工具不是要上传到服务器就是要付费。",[15,1851,1852],{},"这次的方案是用 FFmpeg 的 WebAssembly 版本，直接在浏览器端跑视频处理。不需要服务器，不需要安装软件。",[15,1854,1855],{},[21,1856],{"alt":1857,"src":1858},"视频工具三件套","\u002Fb\u002Fmetool\u002Fvideo-tools.png",[15,1860,1861],{},"两周内上线了三个视频工具：",[319,1863,1864,1874,1884],{},[86,1865,1866,1873],{},[35,1867,1868],{},[425,1869,1872],{"href":1870,"rel":1871,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fvideos\u002Fcompress\u002F",[429],"视频压缩"," — 调整分辨率和码率，减小文件大小",[86,1875,1876,1883],{},[35,1877,1878],{},[425,1879,1882],{"href":1880,"rel":1881,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fvideos\u002FformatConvert\u002F",[429],"视频格式转换"," — MP4\u002FWebM\u002FAVI 互转",[86,1885,1886,1893],{},[35,1887,1888],{},[425,1889,1892],{"href":1890,"rel":1891,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fvideos\u002FvideoToGif\u002F",[429],"视频转 GIF"," — 支持自定义分辨率、帧率和时间段截取",[15,1895,1896],{},"同时还做了微信公众号 Markdown 文章转换的雏形，不过这个工具后面会有大升级，这里先不展开。",[11,1898,1899],{"id":1899},"节日彩蛋和趣味工具",[15,1901,1902],{},"工具站不一定全是\"正经\"工具。",[15,1904,1905,1906,1913],{},"3 月初正好临近清明节，我做了一个 ",[35,1907,1908],{},[425,1909,1912],{"href":1910,"rel":1911,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fmagics\u002Fqingming\u002F",[429],"清明节纪念页"," ——可以编辑纪念文字、选择背景，生成一张可以分享的纪念图片。技术上验证了文字编辑和图片合成的能力，情感上也算给工具站加了一点温度。",[15,1915,1916,1917,1924],{},"还做了一个 ",[35,1918,1919],{},[425,1920,1923],{"href":1921,"rel":1922,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fmagics\u002Flottery\u002F",[429],"抽奖工具","，动画效果比较花哨，纯粹是觉得好玩。",[15,1926,1927],{},"这些趣味工具的开发时间不长，但让我意识到一件事：工具站的边界不只是\"文件处理\"。只要是用户会在手机或电脑上临时需要的功能，都可以做。",[11,1929,1931],{"id":1930},"图片-resize-也补上了","图片 resize 也补上了",[15,1933,1934,1935,1940],{},"这个阶段还补了一个",[425,1936,1939],{"href":1937,"rel":1938,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002Fresize\u002F",[429],"图片 resize"," 工具，支持自定义尺寸调整。功能简单但使用频率很高，是之前漏掉的基础需求。",[11,1942,1943],{"id":1943},"品类在扩展",[15,1945,1946],{},"回头看这两周，metool 的工具品类从\"图片+文档\"扩展到了\"图片+文档+视频+趣味\"。工具站的定位也从\"文件处理\"慢慢变成了\"在线工具集\"。",[15,1948,1949],{},"接下来应该继续加工具，还是停下来优化体验？我当时没想清楚。事实上，后面我停了很久。",{"title":214,"searchDepth":215,"depth":215,"links":1951},[1952,1953,1954,1955],{"id":1843,"depth":218,"text":1843},{"id":1899,"depth":218,"text":1899},{"id":1930,"depth":218,"text":1931},{"id":1943,"depth":218,"text":1943},"2025-03-01","视频压缩、格式转换、视频转 GIF，把视频处理需求补齐了。清明节纪念页和抽奖工具是兴趣驱动，验证可行性。",[1959,1962,1965,1968],{"q":1960,"a":1961},"浏览器端能做视频压缩和格式转换吗？","可以。用 FFmpeg 的 WebAssembly 版本在浏览器端运行，支持视频压缩、格式转换（MP4\u002FWebM\u002FAVI 互转）和视频转 GIF。处理速度取决于设备性能，但中等长度的视频完全够用，且不需要上传到服务器。",{"q":1963,"a":1964},"视频转 GIF 工具有什么特色？","支持自定义分辨率（多档可选）、帧率调整和时间段截取。GIF 的尺寸优化是难点，提供了多种分辨率选项让用户在清晰度和文件大小之间取舍。",{"q":1966,"a":1967},"为什么要做清明节纪念页和抽奖工具？","纯粹是兴趣驱动和技术验证。清明节纪念页验证了动态文字编辑和背景合成的能力，抽奖工具验证了动画交互效果。这类趣味工具虽然不是核心功能，但能让工具站更有温度。",{"q":1969,"a":1970},"微信公众号 Markdown 转换工具是怎么回事？","第一版的微信公众号文章转换在这个阶段就做了雏形，把 Markdown 渲染成公众号兼容的富文本格式。后来在 2026 年 3 月做了大幅升级和高度定制化。",{},"\u002Fbuilds\u002Fmetool\u002F2025-03-01-video-tools-and-easter-eggs",{"title":1838,"description":1957},[1975,1892,1976,1977,1978,1979,1980],"在线视频压缩","前端视频处理","FFmpeg WASM","微信公众号文章转换","浏览器端视频转换","在线工具开发","builds\u002Fmetool\u002F2025-03-01-video-tools-and-easter-eggs","图片和文档工具做完后，视频处理是下一个自然需求。两周内上线了视频压缩、格式转换和视频转 GIF 三个工具，同时做了微信公众号文章转换、清明节纪念页和抽奖工具。工具站的品类从文件处理扩展到了内容创作和趣味工具。",[258,259],"mqYPYxMP9M5vITnR0pz8FrsbGuDd-a7ZEo0hukqQzqk",{"id":1986,"title":1987,"body":1988,"date":2089,"description":2090,"draft":226,"extension":227,"faq":2091,"meta":2104,"navigation":242,"path":2105,"project":244,"readingTime":245,"seo":2106,"seoKeywords":2107,"stem":2115,"summary":2116,"tags":2117,"updated":260,"__hash__":2118},"builds\u002Fbuilds\u002Fmetool\u002F2025-02-24-go-international.md","AI 把做国际站的门槛降到了最低",{"type":8,"value":1989,"toc":2083},[1990,1994,1997,2000,2003,2006,2009,2037,2043,2054,2058,2061,2067,2070,2073,2077,2080],[11,1991,1993],{"id":1992},"ai-把翻译成本打下来了","AI 把翻译成本打下来了",[15,1995,1996],{},"做了一个月的工具站，工具数量已经不少了。这时候一个想法自然冒了出来：要不要做成国际站？",[15,1998,1999],{},"以前做多语言网站是一件成本很高的事——翻译、校对、维护，每多一种语言就多一份工作量。但 AI 改变了这个等式。翻译成本降到了接近零，一段中文丢给 AI，几秒钟就能拿到质量不错的英文。",[15,2001,2002],{},"我决定用 metool 来验证做国际站的标准方案。",[11,2004,2005],{"id":2005},"中英双语架构",[15,2007,2008],{},"技术方案用了 Nuxt i18n 模块：",[319,2010,2011,2024,2027,2034],{},[86,2012,2013,2014,2017,2018,832,2021],{},"翻译文件放在 ",[650,2015,2016],{},"locales\u002F"," 目录，",[650,2019,2020],{},"en.json",[650,2022,2023],{},"zh.json",[86,2025,2026],{},"所有工具的标题、描述、按钮文案抽取到翻译文件中",[86,2028,2029,2030,2033],{},"页面组件通过 ",[650,2031,2032],{},"$t()"," 函数引用，不再硬编码中文",[86,2035,2036],{},"路由支持语言前缀切换",[15,2038,2039],{},[21,2040],{"alt":2041,"src":2042},"3D GLB 模型在线预览","\u002Fb\u002Fmetool\u002F3d-preview.png",[15,2044,2045,2046,2053],{},"同一时期还上线了 ",[35,2047,2048],{},[425,2049,2052],{"href":2050,"rel":2051,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002F3d\u002FglbPreview\u002F",[429],"3D GLB 模型预览工具","，用 Three.js 做的。支持拖拽上传 GLB 文件，实时预览、缩放旋转、背景色切换、自动旋转。算是拓展了工具的品类边界，从纯文件处理扩展到了 3D 领域。",[11,2055,2057],{"id":2056},"试了日韩语然后砍掉了","试了日韩语，然后砍掉了",[15,2059,2060],{},"做国际化的时候，顺手加了日语和韩语的支持。",[15,2062,2063,2064],{},"但很快发现一个问题：",[35,2065,2066],{},"翻译容易，维护难。",[15,2068,2069],{},"每次新增一个工具或者改一个文案，要同步更新四种语言的翻译文件。在没有真实用户数据证明日韩用户有需求的情况下，这个维护成本完全不值得。",[15,2071,2072],{},"果断砍掉，只保留中英文。有了用户数据再决定要不要加。",[11,2074,2076],{"id":2075},"经验先做减法","经验：先做减法",[15,2078,2079],{},"国际化不是\"支持的语言越多越好\"，而是要验证：有没有人用、用了之后体验是否完整。",[15,2081,2082],{},"中英双语是投入产出比最高的选择。英语覆盖了全球大部分互联网用户，维护成本可控，也足以验证国际化方案是否跑得通。",{"title":214,"searchDepth":215,"depth":215,"links":2084},[2085,2086,2087,2088],{"id":1992,"depth":218,"text":1993},{"id":2005,"depth":218,"text":2005},{"id":2056,"depth":218,"text":2057},{"id":2075,"depth":218,"text":2076},"2025-02-24","有了 AI，翻译不再是瓶颈。正好趁这个机会验证做国际站的标准方案，顺便把 3D 模型预览工具也做了。",[2092,2095,2098,2101],{"q":2093,"a":2094},"为什么选择在这个时候做国际化？","AI 翻译能力的提升让多语言内容的生产成本大幅降低，以前需要专人翻译的工作现在 AI 几秒钟就能完成。正好用这个项目验证一下做国际站的标准方案，积累经验。",{"q":2096,"a":2097},"国际化的技术方案是什么？","使用 Nuxt i18n 模块，翻译文件用 JSON 格式存放在 locales 目录（en.json 和 zh.json）。所有工具的标题、描述、操作按钮文案都抽取到翻译文件中，页面组件通过 $t() 函数引用。路由支持语言前缀切换。",{"q":2099,"a":2100},"为什么砍掉了日语和韩语支持？","最初尝试加了日语和韩语，但很快发现：翻译容易，维护难。每次新增或修改一个工具，要同步更新四种语言的翻译文件。在没有明确用户需求的情况下，维护成本远高于收益，果断砍掉只保留中英文。",{"q":2102,"a":2103},"3D 模型预览工具是怎么做的？","用 Three.js 构建 3D 场景，支持 GLB 格式模型的拖拽上传和实时预览。功能包括缩放旋转、网格显示、背景色切换、自动旋转。所有渲染在浏览器端完成，不需要安装任何软件。",{},"\u002Fbuilds\u002Fmetool\u002F2025-02-24-go-international",{"title":1987,"description":2090},[2108,2109,2110,2111,2112,2113,2114],"Nuxt i18n 国际化","AI 辅助翻译","在线 3D 模型预览","Three.js GLB 预览","多语言网站开发","国际化工具站","前端 i18n 架构","builds\u002Fmetool\u002F2025-02-24-go-international","AI 让翻译成本降到接近零，做国际站不再是大公司才能干的事。用 Nuxt i18n 搭建了中英双语架构，同时上线了 3D GLB 模型预览工具。曾尝试日韩语支持，发现维护成本高于收益后果断砍掉。",[258,909],"o4vphR82AQXe1eS-PrkTEb8KWq-BAuA2MYsxYEf1P8c",{"id":2120,"title":2121,"body":2122,"date":2267,"description":2268,"draft":226,"extension":227,"faq":2269,"meta":2282,"navigation":242,"path":2283,"project":244,"readingTime":245,"seo":2284,"seoKeywords":2285,"stem":2290,"summary":2291,"tags":2292,"updated":260,"__hash__":2293},"builds\u002Fbuilds\u002Fmetool\u002F2025-02-08-tool-explosion.md","积压的需求一起爆发，两周上线了十几个工具",{"type":8,"value":2123,"toc":2261},[2124,2127,2130,2133,2137,2140,2145,2191,2196,2213,2218,2228,2234,2237,2240,2243,2246,2249,2255,2258],[11,2125,2126],{"id":2126},"积压的需求清单",[15,2128,2129],{},"基础架构搭好之后，我脑子里积压的需求开始一个接一个往外冒。",[15,2131,2132],{},"这些都是我日常工作中反复遇到的场景：图片要转格式、要压缩、要生成二维码、要去背景。文档要从 Word 转 PDF、Markdown 要转成其他格式。每次都在网上找工具，现在终于可以一口气做完了。",[11,2134,2136],{"id":2135},"两周十几个工具","两周，十几个工具",[15,2138,2139],{},"从 2 月 8 日到 2 月 20 日，密集上线了这些工具：",[15,2141,2142],{},[35,2143,2144],{},"图片工具全家桶：",[319,2146,2147,2155,2161,2169,2177,2184],{},[86,2148,2149,2154],{},[425,2150,2153],{"href":2151,"rel":2152,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FimageFormatConvert\u002F",[429],"图片格式转换","（JPG\u002FPNG\u002FWebP\u002FICO 互转）",[86,2156,2157],{},[425,2158,102],{"href":2159,"rel":2160,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002Fcompress\u002F",[429],[86,2162,2163,2168],{},[425,2164,2167],{"href":2165,"rel":2166,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FqrCodeGenerate\u002F",[429],"QR 码生成器","（支持自定义锚点和数据点样式）",[86,2170,2171,2176],{},[425,2172,2175],{"href":2173,"rel":2174,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FremoveBackground\u002F",[429],"图片去背景","（Canvas 笔刷方案）",[86,2178,2179],{},[425,2180,2183],{"href":2181,"rel":2182,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FlongImageSplit\u002F",[429],"长图分割",[86,2185,2186],{},[425,2187,2190],{"href":2188,"rel":2189,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FmovieSubtitleCrop\u002F",[429],"电影字幕裁剪",[15,2192,2193],{},[35,2194,2195],{},"文档工具：",[319,2197,2198,2205],{},[86,2199,2200],{},[425,2201,2204],{"href":2202,"rel":2203,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FwordToPDF\u002F",[429],"Word 转 PDF",[86,2206,2207,2212],{},[425,2208,2211],{"href":2209,"rel":2210,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FmarkdownConvert\u002F",[429],"Markdown 格式转换","（支持导出 HTML）",[15,2214,2215],{},[35,2216,2217],{},"趣味工具：",[319,2219,2220],{},[86,2221,2222,2227],{},[425,2223,2226],{"href":2224,"rel":2225,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fmagics\u002FheartBeat\u002F",[429],"心跳表白页","（带微信分享适配）",[15,2229,2230],{},[21,2231],{"alt":2232,"src":2233},"图片工具全家桶","\u002Fb\u002Fmetool\u002Fimage-tools.png",[15,2235,2236],{},"速度能这么快，核心原因是第一天搭的架构：工具卡片组件、分类体系、页面模板全是复用的，新增一个工具只需要写核心逻辑。图片处理用 Canvas API，文档转换用 mammoth.js，每个工具的核心代码量其实不大。",[11,2238,2239],{"id":2239},"数据基础也搭好了",[15,2241,2242],{},"2 月 14 日接入了 Google Analytics，虽然这时候几乎没有外部流量，但尽早有数据追踪比后面补要好得多。",[15,2244,2245],{},"2 月 17 日配置了 sitemap 和 robots.txt，加了 404 错误页面。SEO 基础设施越早搭好越省事，搜索引擎需要时间爬取和收录。",[11,2247,2248],{"id":2248},"所有处理都在本地",[15,2250,2251,2252,63],{},"有一个原则从第一天就没变过：",[35,2253,2254],{},"所有文件处理都在浏览器端完成",[15,2256,2257],{},"图片压缩用 Canvas API，格式转换用 Blob 操作，文档解析用 JavaScript 库。用户的文件不会上传到任何服务器。这不只是隐私保障，也意味着没有服务器成本，工具可以无限免费用。",[15,2259,2260],{},"两周下来，metool 已经从\"三个工具\"变成了\"十几个工具\"。积压的需求基本清完了，但新的想法又开始冒出来。",{"title":214,"searchDepth":215,"depth":215,"links":2262},[2263,2264,2265,2266],{"id":2126,"depth":218,"text":2126},{"id":2135,"depth":218,"text":2136},{"id":2239,"depth":218,"text":2239},{"id":2248,"depth":218,"text":2248},"2025-02-08","图片格式转换、压缩、QR 码生成、去背景、Word 转 PDF、Markdown 转换。把日常文件处理的需求全都做成了在线工具。",[2270,2273,2276,2279],{"q":2271,"a":2272},"两周内是怎么做到上线十几个工具的？","关键在于第一天搭好的架构：分类体系、工具卡片组件、页面模板都是复用的，新增一个工具只需要写核心处理逻辑。图片格式转换用 Canvas API，压缩用 OffscreenCanvas，QR 码用开源库，文档转换用 mammoth.js，每个工具的核心代码量并不大。",{"q":2274,"a":2275},"这些工具的文件处理在哪里完成？","全部在浏览器端完成，不需要上传到服务器。图片处理用 Canvas API 和 Web Worker，文档转换用 JavaScript 库在本地解析。用户的文件不会离开设备，隐私安全有保障。",{"q":2277,"a":2278},"为什么要做图片去背景工具？","日常做素材时经常需要抠图，在线去背景工具要么要付费，要么效果差。用前端 Canvas 配合笔刷工具做了一个本地版，虽然不如 AI 模型精准，但够用且免费。后来在 8 月升级成了 ONNX 模型方案。",{"q":2280,"a":2281},"Google Analytics 和 SEO 在这个阶段就接入了吗？","是的。GA 在 2 月 14 日接入，sitemap 和 robots 在 2 月 17 日配置完成。虽然这时候流量很少，但尽早接入数据追踪能帮助后面分析用户行为。SEO 基础设施（sitemap、robots.txt、错误页面）也是越早搭好越省事。",{},"\u002Fbuilds\u002Fmetool\u002F2025-02-08-tool-explosion",{"title":2121,"description":2268},[2286,2287,2167,2175,2204,2288,2289],"在线图片处理工具","在线文档转换","前端文件处理","浏览器端图片压缩","builds\u002Fmetool\u002F2025-02-08-tool-explosion","基础架构搭好后，两周内密集上线了十几个工具：图片全家桶（格式转换、压缩、QR 码生成、去背景、长图分割）、文档工具（Word 转 PDF、Markdown 转换）、心跳魔法工具，同时接入了 Google Analytics 和基础 SEO。",[258,259],"fw6xObA62S7sQ5Tf0Xvu8pCMRptFYfiu3gj1gPqoWhY",{"id":2295,"title":2296,"body":2297,"date":2400,"description":2401,"draft":226,"extension":227,"faq":2402,"meta":2415,"navigation":242,"path":2416,"project":244,"readingTime":245,"seo":2417,"seoKeywords":2418,"stem":2424,"summary":2425,"tags":2426,"updated":260,"__hash__":2427},"builds\u002Fbuilds\u002Fmetool\u002F2025-01-23-start-from-scratch.md","网上找不到称手的工具，我决定自己做一个",{"type":8,"value":2298,"toc":2394},[2299,2302,2305,2308,2311,2314,2317,2320,2323,2353,2356,2360,2366,2369,2378,2384,2388,2391],[11,2300,2301],{"id":2301},"找不到称手的工具",[15,2303,2304],{},"我的日常工作里，经常需要临时处理一些文件：裁剪图片、转换格式、给视频截字幕区域。",[15,2306,2307],{},"每次都要在网上翻一圈找在线工具。找到的要么功能不对，要么满屏广告，要么要注册才能用，要么要把文件上传到别人的服务器。",[15,2309,2310],{},"这种事情经历多了，我就想：这些操作前端完全能做，为什么不自己做一个？",[11,2312,2313],{"id":2313},"一天搭起来",[15,2315,2316],{},"2025 年 1 月 23 日，我花了一天时间把基础架构搭好了。",[15,2318,2319],{},"技术栈选了 Nuxt 3 + TypeScript + Tailwind CSS。Nuxt 的 SSG 模式可以生成纯静态页面，加载快，部署简单。文件处理全部在浏览器端完成，数据不会离开用户的设备。",[15,2321,2322],{},"第一天上线的工具：",[319,2324,2325,2335,2345],{},[86,2326,2327,2334],{},[35,2328,2329],{},[425,2330,2333],{"href":2331,"rel":2332,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Fsnake\u002F",[429],"贪吃蛇"," — 用来验证游戏交互能力",[86,2336,2337,2344],{},[35,2338,2339],{},[425,2340,2343],{"href":2341,"rel":2342,"target":430},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Fmaze\u002F",[429],"迷宫游戏"," — 带音效和移动端控制",[86,2346,2347,2352],{},[35,2348,2349],{},[425,2350,2190],{"href":2188,"rel":2351,"target":430},[429]," — 真实需求，批量裁剪视频截图中的字幕区域",[15,2354,2355],{},"同时搭好了整个工具框架：导航栏、侧边菜单、工具卡片组件、分类体系。后面加新工具只需要写页面逻辑，框架层的事情不用再操心。",[11,2357,2359],{"id":2358},"随时随地手机也能用","随时随地，手机也能用",[15,2361,2362,2363,63],{},"做这个工具箱有一个重要的前提：",[35,2364,2365],{},"手机也能用",[15,2367,2368],{},"我不是总在电脑前，很多时候是在手机上临时需要处理个文件。所以从第一天起，移动端适配就是必须的，不是\"以后再说\"的事。",[15,2370,2371,2372,2377],{},"贪吃蛇和迷宫游戏都做了移动端触控操作，字幕裁剪支持拖拽选区。在手机浏览器里打开 ",[425,2373,2376],{"href":2374,"rel":2375,"target":430},"https:\u002F\u002Fmetool.online",[429],"metool.online"," 就能直接用。",[15,2379,2380],{},[21,2381],{"alt":2382,"src":2383},"metool.online 首页","\u002Fb\u002Fmetool\u002Fhomepage.png",[11,2385,2387],{"id":2386},"起步很轻但框架要对","起步很轻，但框架要对",[15,2389,2390],{},"回头看，第一天最重要的不是上线了几个工具，而是把架构搭对了：分类体系、组件复用、路由规范。这些决定了后面能不能快速扩充工具，而不是每次都从头写。",[15,2392,2393],{},"工具箱刚刚开始，积压的需求还有一堆。",{"title":214,"searchDepth":215,"depth":215,"links":2395},[2396,2397,2398,2399],{"id":2301,"depth":218,"text":2301},{"id":2313,"depth":218,"text":2313},{"id":2358,"depth":218,"text":2359},{"id":2386,"depth":218,"text":2387},"2025-01-23","每次需要处理图片、裁剪字幕都要在网上翻半天，找到的工具不是功能不对就是体验太差。干脆自己做一个在线工具箱，随时随地能用。",[2403,2406,2409,2412],{"q":2404,"a":2405},"为什么要自己做在线工具箱？","日常工作中经常需要临时处理图片、裁剪视频字幕等，但网上的在线工具要么功能不匹配，要么广告太多体验差。自己做一个工具集，既能完全满足自己的需求，还能随时随地通过手机访问。",{"q":2407,"a":2408},"metool.online 用了什么技术栈？","Nuxt 3 + TypeScript + Tailwind CSS，SSG 静态生成部署。选择 Nuxt 是因为 Vue 生态成熟，SSG 模式加载快且 SEO 友好，前端能力足以处理图片、音视频等文件操作。",{"q":2410,"a":2411},"第一天做了哪些工具？","第一天上线了三个工具：贪吃蛇游戏、迷宫游戏和电影字幕裁剪。游戏是用来验证交互能力的，字幕裁剪是真实需求驱动。同时搭好了导航栏、侧边菜单、工具卡片等基础组件架构。",{"q":2413,"a":2414},"为什么不直接用现成的在线工具？","现成工具有几个痛点：功能不完全匹配自己的需求、广告干扰体验、部分工具需要上传到服务器有隐私风险。自建工具全部在浏览器端处理，数据不离开本地，而且可以按自己的习惯定制功能。",{},"\u002Fbuilds\u002Fmetool\u002F2025-01-23-start-from-scratch",{"title":2296,"description":2401},[2419,2420,2421,2288,2422,2376,2423],"在线工具箱","独立开发在线工具","Nuxt 3 工具站","自建工具集","移动端在线工具","builds\u002Fmetool\u002F2025-01-23-start-from-scratch","经常在网上找在线工具，但总找不到刚好合适的。用 Nuxt 3 + TypeScript + Tailwind CSS 从零搭建了一个在线工具箱 metool.online，第一天就上线了贪吃蛇、迷宫游戏和电影字幕裁剪三个工具。",[258,259],"Fnr1PEBjKKQH6aW3oegh7BDch75TqUVOxrwcGFSIfSI",{"id":5,"title":6,"body":2429,"date":224,"description":225,"draft":226,"extension":227,"faq":2567,"meta":2572,"navigation":242,"path":243,"project":244,"readingTime":245,"seo":2573,"seoKeywords":2574,"stem":255,"summary":256,"tags":2575,"updated":260,"__hash__":261},{"type":8,"value":2430,"toc":2559},[2431,2433,2435,2439,2441,2443,2447,2449,2451,2453,2457,2459,2463,2465,2467,2469,2473,2475,2497,2501,2503,2505,2507,2509,2513,2515,2517,2519,2523,2525,2529,2533,2537,2539,2541,2543,2547,2551,2553,2557],[11,2432,13],{"id":13},[15,2434,17],{},[15,2436,2437],{},[21,2438],{"alt":23,"src":24},[15,2440,27],{},[15,2442,30],{},[15,2444,33,2445],{},[35,2446,37],{},[11,2448,41],{"id":40},[15,2450,44],{},[15,2452,47],{},[15,2454,50,2455],{},[35,2456,53],{},[15,2458,56],{},[15,2460,59,2461,63],{},[35,2462,62],{},[11,2464,66],{"id":66},[15,2466,69],{},[15,2468,72],{},[15,2470,2471],{},[21,2472],{"alt":77,"src":78},[15,2474,81],{},[83,2476,2477,2481,2485,2489,2493],{},[86,2478,2479,91],{},[35,2480,90],{},[86,2482,2483,97],{},[35,2484,96],{},[86,2486,2487,103],{},[35,2488,102],{},[86,2490,2491,109],{},[35,2492,108],{},[86,2494,2495,115],{},[35,2496,114],{},[15,2498,118,2499],{},[35,2500,121],{},[11,2502,125],{"id":124},[15,2504,128],{},[15,2506,131],{},[11,2508,135],{"id":134},[15,2510,138,2511,63],{},[35,2512,96],{},[15,2514,143],{},[15,2516,146],{},[15,2518,149],{},[15,2520,2521],{},[21,2522],{"alt":154,"src":155},[15,2524,158],{},[15,2526,2527,164],{},[35,2528,163],{},[15,2530,2531,170],{},[35,2532,169],{},[15,2534,2535,176],{},[35,2536,175],{},[15,2538,179],{},[11,2540,183],{"id":182},[15,2542,186],{},[15,2544,189,2545,193],{},[35,2546,192],{},[15,2548,196,2549,63],{},[35,2550,199],{},[15,2552,202],{},[15,2554,205,2555,209],{},[35,2556,208],{},[15,2558,212],{},{"title":214,"searchDepth":215,"depth":215,"links":2560},[2561,2562,2563,2564,2565,2566],{"id":13,"depth":218,"text":13},{"id":40,"depth":218,"text":41},{"id":66,"depth":218,"text":66},{"id":124,"depth":218,"text":125},{"id":134,"depth":218,"text":135},{"id":182,"depth":218,"text":183},[2568,2569,2570,2571],{"q":230,"a":231},{"q":233,"a":234},{"q":236,"a":237},{"q":239,"a":240},{},{"title":6,"description":225},[248,249,250,251,252,253,254],[258,259],1775232319877]